关于前端性能优化的总结,随处都可以看到这方面的文章,而优化方法,也无外乎那些“固定”方面,当然,有些方面已经过时,所以,在这里,我自己也总结一遍吧,加深理解,也希望是一种不同的总结形式。
———————–正文总这里开始————————————
一、什么是前端
性能
优化(what)?
从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。
二、为什么要做前端性能优化(why)?
在构建web站点的过程中,任何一个细节都有可能影响网站的访问速度,如果不了解性能优化知识,很多不利网站访问速度的因素会形成累加,从而严重影响网站的性能,导致网站访问速度变慢,用户体验低下,最终导致用户流失。
三、前端性能优化的原则(rule)
1、不要按照准则照本宣科的做,需要根据实际情况因地制宜;
2、不出bug!
四、从浏览器发起请求到页面能正常浏览都有哪些阶段(process)?
预处理——>DNS解析——>建立连接——>发起请求——>等待响应——>接受数据——>处理元素——>布局渲染
五、性能优化的具体方法(way)
一)内容层面
1、DNS解析优化(DNS缓存、减少DNS查找、keep-alive、适当的主机域名)
2、避免重定向(/还是需要的)
3、切分到多个域名
4、杜绝404
二)网络传输阶段
1、减少传输过程中实体的大小
1)缓存
2)cookie优化
3)文件压缩(
Accept-Encoding:
g-zip)
2、减少请求的次数
1)文件适当的合并
2)雪碧图
3、
异步加载(并发,requirejs)
4、预加载、延后加载、按需加载
三)渲染阶段
1、js放底部,css放顶部
2、减少重绘和回流
3、合
理使用
Viewport
等meta头部
4、减少dom节点
5、BigPipe
四)脚本执行阶段
1、缓存节点,尽量减少节点的查找
2、减少节点的操作(innerHTML)
3、避免无谓的循环,break、continue、
return
的适当使用
4、事件委托
六、与性能优化相关的细节的探索
1、缓存
1)Expires Cache-Control Last-Modified ETag If-Modified-Since If-None-Match 这些请求头部在浏览器缓存中分别起什么作用,如何起到缓存的作用?
1.当某一文件在浏览器中第一次被访问的时候,这个时候浏览器是没有缓存的,直接从服务器获取文件,返回给客户端,并且存入浏览器缓存;此时,返回状态码200,并且服务端可以设置响应头部Expires或者Cache-Control,Last-Modified或者ETag。
2.如果设置了
Expires或者Cache-Control,那么在指定时间内再次请求该文件时,只要不强制刷新缓存(F5等),浏览器会直接读取缓存而不再去请求服务器。
3.如果没有设置Expires或者Cache-Control或者过期了,就需要再次请求服务器了,浏览器会发起条件验证,发起请求时在请求头加上If-Modified-Sinse或者If-None-Match,服务器端判断最新的文件是否发生了更新,如果没有,总则返回响应状态码304,并且不带任何响应实体,也就是说,传输到客户端的只有一些相应头部,响应实体是空的,这样就大大减少了传输的体积,浏览器接受到了304响应,就知道了要读取浏览器缓存了。
2)按回车、浏览器刷新按钮、F5、Ctr+F5的区别?
1.按回车,浏览器会判断是否有缓存,并且根据Expires或者Cache-Control判断缓存是否过期,如果没有,就不会发起请求,直接使用缓存。否则就需要像服务器发起请求再验证。
2.浏览器刷新按钮和F5效果相同,不管是否有
Expires或者Cache-Control,都会强制去请求服务器,进行再验证,根据If-Modified-Sinse或者If-None-Match判断是否要返回304,如果是,浏览器就会继续使用缓存。
3.按Ctr+F5时,也是不
管是否有Expires或者Cache-Control,都会强制去请求服务器,但是并不会进行再验证,服务器会直接把最新的内容返回给浏览器,压根就不考虑缓存的存在或者是否过期。
3)为什么用Last-Modified还不够,要用ETag实体标签验证?
1.有些文档会被周期性的重写,但实际包含的数据是一样的。(尽管内容没有变化,最后修改日期却会发生变化)
2.有些文档可能被修改了,但是修改并不重要,没必要更新缓存。
3.有些服务器无法准确判定页面的最后修改日期。
4.文档在毫秒级间隙发生变化(如实时监控),以秒为颗粒度的Last-Modified就不够用了。
4)post请求拉取大量数据的缓存策略?
2、DNS解析过程
3、HTTP
1)所有常用状态码的含义?
2)301跳转和302跳转的区别?
3)http头部信息详解?
4)并发连接数、请求数、并发用户数分别是什么意思?
4、浏览器
1)浏览器加载渲染网页的过程
2)浏览器工作原理