前端性能优化方法

 

 

1、压缩图片

2、减少冗余代码

3、避免404错误

4、避免滤镜的使用

5、在HTML中不要使用压缩图片

6、DNS解析优化，DNS缓存，减少DNS查找。

7、异步加载（并发、require）

8、预加载、延迟加载，按需加载

9、减少重绘和回流

10、减少DOM节点

11、减少节点的操作（innerHTML）

12、缓存节点，尽量减少节点的查找

13、避免无谓的循环：break，continue，return的适当使用

14、减少HTTP请求：比如用 css sprites 合并图片或用 css icon 代替图片，合并 js 和 css；或延缓请求，比如按需加载。

15、避免重定向：重定向的英文是Redirect，用于将用户从一个URL重新跳转到另一个URL。：

16、删除重复脚本：重复的js代码除了有不必要的HTTP请求之外，还会浪费执行js的时间。

17、使用ajax添加缓存：针对页面中主动的Ajax请求返回的数据要缓存到本地，当然这个是针对短期内不会变化的数据

18、减少DNS查询：DNS查询有时间开销，通常一个浏览器查找一个给定主机名的IP地址需要20-120ms。缓存了DNS查询，之后对于相同主机名的请求短时间内就无需进行再次DNS查找。

19、将javascript脚本放在底部：浏览器在加载css文件时，页面逐步呈现会被阻止，直到所有css文件加载完毕，所以要把css文件的引用放到head中去，这样在加载css文件时不会组织页面的呈现。但是对于js文件，在使用的时候，它下面所有也页面内容的呈现都会被阻塞，将脚本放在页面越靠下的地方，就意味着越多的内容能够逐步呈现。

20、CSS样式表放在顶部：如果将css样式定义放在页面中或者页面底部，会出现短暂白屏或者某一区域短暂白板的情况，这和浏览器的运营机制有关的，不管页面如何加载，页面都是逐步呈现的。所以在每做一个页面的时候，用Link标签把每一个样式表定义放在head中。

21、域名拆分：域名拆分主要是为了增加浏览器下载的并行度，让浏览器能同时发起更多的请求

22、开启Gzip：Gzip是一种压缩技术，可以将资源在服务端进行压缩，然后发送给浏览器后再进行解压，这种方式会降低传输大小，提高网页加载性能。

23、开启KeepAlive：开启KeepAlive能够减少浏览器与服务器建立连接的次数，从而节省建立连接时间。