一、什么是前端性能优化(what)
从用户访问资源到资源完整的展现在用户面前的过程中,通过技术和优化策略,缩短每个步骤的处理时间,从而提升整个资源的访问 和呈现速度。
二、为什么要做前端性能优化(why)
在构建web站点的过程中,任何一个细节都有可能影响网站的访问速度,如果不了解性能优化知识,很多不利网站访问速度的因素会形成积累,从而影响网站的性能,导致网站访问速度变慢,用户体验低下,最终导致用户流失
三、前端性能优化的原则(rule)
1、根据实际情况因地制宜
2、不出bug
四、从浏览器输入URL到页面展示都有哪些过程(process)
1、输入URL
2、应用层DNS解析域名
3、建立TCP连接
4、浏览器向服务器发送http请求
5、服务器接收数据
6、服务器响应请求
7、服务器返回相应的文件
8、页面渲染
五、性能优化的具体方案(way)
1、使用CDN托管
2、减少http请求
21、文件打包,脚本合并(webpack、grunt)
22、CSS雪碧图
通过background-image、background-position等属性定位
23、文件压缩
https://tinypng.com/(熊猫图片压缩)
24、延迟加载图片
25、CSS3图标
26、避免重定向
301:永久重定向 302:暂时重定向
重定向会增加http请求数,但必要的重定向有利于提高用户体验
方法:定义URL链接时使用完整的地址
3、代码优化
31、减少对DOM的操作
32、减少重排与重绘
33、避免CSS表达式
34、缓存Ajax
ajax缓存和http缓存效果相同
35、配置Etags