标签：user id3 不同的 毫秒级 知识 targe for b站 速度
关于前端性能优化的总结，随处都可以看到这方面的文章，而优化方法，也无外乎那些“固定”方面，当然，有些方面已经过时，所以，在这里，我自己也总结一遍吧，加深理解，也希望是一种不同的总结形式。
-----------------------正文总这里开始------------------------------------
一、什么是前端性能优化（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）浏览器工作原理
前端性能优化归纳总结
标签：user id3 不同的 毫秒级 知识 targe for b站 速度
原文地址：http://www.cnblogs.com/ice-blog/p/7420624.html
