前端性能优化方法

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能够减少浏览器与服务器建立连接的次数,从而节省建立连接时间。