前端性能优化归纳总结篇！！！

         关于前端性能优化的总结，随处都可以看到这方面的文章，而优化方法，也无外乎那些“固定”方面，当然，有些方面已经过时，所以，在这里，我自己也总结一遍吧，加深理解，也希望是一种不同的总结形式。

-----------------------正文总这里开始------------------------------------
一、什么是前端性能优化（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请求拉取大量数据的缓存策略？ http://blog.csdn.net/grandpang/article/details/47701515
2、DNS解析过程        http://blog.chinaunix.net/uid-28216282-id-3757849.html
3、HTTP 1）所有常用状态码的含义？  http://blog.csdn.net/grandpang/article/details/47446561
2）301跳转和302跳转的区别？ http://blog.csdn.net/grandpang/article/details/47448395
3）http头部信息详解？ http://www.cnblogs.com/li0803/archive/2008/11/03/1324746.html
4）并发连接数、请求数、并发用户数分别是什么意思？ http://www.4wei.cn/archives/1002399
4、浏览器 1）浏览器加载渲染网页的过程         http://blog.163.com/seo_luofeng/blog/static/176575024201242412342680/
2）浏览器工作原理 http://blog.csdn.net/zzzaquarius/article/details/6532299/