总结一下“别人家的前端性能调优方案总结”

作为一名只会喊666的咸鱼,只能作为伸手党,参(chao)照(xi)一波别人的劳动成果来加深自己的记忆  其实是自己肚子没墨水  。既然是参照,直接进入正题吧。

总结一下“别人家的前端性能调优方案总结”_第1张图片

避免阻塞

1. 优化HTTP请求

1 - 减少请求次数:

1. 合并代码。

2. sprite化图片。

3. 小于8kb的用base64作为src源。

4. 缓存ajax,对于每次请求返回内容都相同的ajax,可以设置cache属性进行缓存。

5. 剔除重复性的脚本。

2 - 减少请求体积:

1. 让后台dalao们使用GZIP。

2. 压缩代码,减少文件的空白字符。

3. 优化图片,压缩IMG-PNG8格式,压缩图片。

3 - 减少请求资源自带cookie的体积,也叫cookie隔离,使用CDN就好,有兴趣可以看看Cookie - Free Domains技术。

4 - 减少页面中空引用的href与src标签,因为你什么都不写,浏览器还是会对服务器发起一个空的HTTP请求,会对服务器产生一些不必要的压力。

5 - 突破请求限制,同一时刻向一个域名请求下载的并行数有限,可以使用不同域名分别存放静态资源,增大并行下载量。

6 - 使用大杀器,CDN。

7 - 不要滥用post请求,post翻译过来是邮递的意思,获取数据还是用get请求。而且在大部分浏览器中post还是有分步操作,而get是一步到位,虽然效率上差别不会很明显,但这不是混淆语义的理由。

顺便附上一个get与post区别的link: get与post的区别。

8 - css置顶,script置底,如需在头部放置script,可以使用defer与async异步的script引入。

9 - 避免使用css表达式。

10 - 使用懒加载。

11 - 减少DNS查找。每次DNS查询都会有30-120ms的耗时,可以使用DNS预加载。

12 - 减少页面重定向。每次重定向都会有资源的损耗,尽量减少不必要的重定向。

渲染

1 - 减少DOM树的深度,DOM树越深,越吃浏览器的渲染资源。尽量减少不必要的DOM层级。

2 - 优化体积过大的css文件,css体积过大需要更多的时间加载,关键的资源需要进行拆分渲染,保证首屏加载速度,提高用户体验。

3 - 避免在HTML中直接缩放图片,在HTML中直接缩放图片会使页面内容重绘,会影响页面中其他操作的效率,可能会产生卡顿。

4 - 优化js加载,耗时的script应当在html底部渲染,或者使用异步加载,与首屏无关的js也应当延迟加载。

5 - 避免使用