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

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

-----------------------正文总这里开始------------------------------------

一、什么是前端 性能 优化（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/