前端优化方案

什么是前端性能优化（what）？

从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。

 

为什么要做前端性能优化（why）？

在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失。

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

  

从浏览器发起请求到页面能正常浏览都有哪些阶段（process）？

预处理——>DNS解析——>建立连接——>发起请求——>等待响应——>接受数据——>处理元素——>布局渲染

 

如何优化——性能优化的具体方法？

一）内容层面

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.html,css,js位置。一般需要将CSS放页面最上面，而将JS代码放页面底部。CSS 和 JavaScript 时，要避免嵌入代码，因为当您嵌入代码时，要将 CSS 放置在样式标记中，并在脚本标记中使用 JavaScript，这会增加每次刷新网页时必须加载的 HTML 代码量。

2.引用文件位置。尽量能把引用远程的资源能本地化（如图片、CSS、JS、图标等）。

3.减少后台请求。尽量的将同一个资源（图片、JS、CSS等）合并成一个文件，可节省很多http连接的开销及往返的时间损耗。对必须加载的文件进行整理，如压缩工具、CDN 服务和预获取（prefetching）等，这些都是管理 HTTP 请求的最佳选择。除此之外，减少DNS路由查找教程会教你如何一步一步的减少外部 HTTP 请求e.g 如果是关于抽奖、摇一摇、秒杀等功能，可以限制发往后台的频率，如前端操作10次才往后端发一次请求，这样从前端就做到了后台的流量控制，把流量控制到访问的最外层是最好的，尽量不要让请求落到底层。

4.压缩传输。文本类型的资源如CSS、JS、HTML启用GZIP压缩加速http传输速度。

5.减少cookie传输。cookie会包含在每次请求和响应中，如果cookie过多会影响http响应速度，所以高并发情况下尽量控制cookie的传输量，nginx对cookie传输默认是做了限制的。另外，像CSS、JS、图片等静态资源可以启用单独域名，禁用cookie对静态资源的传输，这样就能大大提高效率。

6.浏览器缓存。高并发情况下，可以将一些不怎么变动的东西缓存到浏览器cache中，或者一些活动内容可以提前将内容在客户端缓存起来，以免活动开始大量请求涌入服务器。

7.使用CDN或缓存提高速度。静态内容分发网络，本质就是静态资源的缓存，可以将静态资源放到CDN上，这样，用户就能离自己最近的地方获取到资源，大大提高了用户访问速度。

8.反向代理。常用的反向代理nginx除了负载均衡功能，它也可以通过配置缓存功能来加速请求响应速度，当用户第一次访问的时候静态资源就可以被缓存到反向代理服务器上，这样其他用户的请求就能直接从反向代理服务器直接获取返回，这样也就达到了静态资源缓存的作用。

9.使用预先获取。只需在网站 HTML 中的链接属性上增加 rel=”prefetch”,rel=”dns-prefetch”，或者 rel=”prerender” 标记。

• 链接预先获取
• DNS 预先获取
• 预先渲染

10.使用轻量级框架。

在你离开当前 web 页面之前，使用预先获取方式，对应每个链接的 URL 地址，CSS，图片和脚本都会被预先获取。这保证了访问者能在最短时间内使用链接在画面间切换。

 

post请求拉取大量数据的缓存策略？        http://blog.csdn.net/grandpang/article/details/47701515

DNS解析过程       http://blog.chinaunix.net/uid-28216282-id-3757849.html

 

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

 

浏览器

1）浏览器加载渲染网页的过程        http://blog.163.com/seo_luofeng/blog/static/176575024201242412342680/

 2）浏览器工作原理        http://blog.csdn.net/zzzaquarius/article/details/6532299/

 

http://www.sohu.com/a/221114921_500651

 

 

为什么要强调css放头部，js放尾部
因为css样式表是浏览器渲染页面的重要一环，应该尽早发起请求加载，毕竟也不会阻塞HTML解析。

而HTML解析遇到script会阻塞，所以应该放到后面，而不阻塞其他资源请求。虽然说还是要等script加载执行完成之后才会触发DOMContentLoaded，但现在很多现代浏览器为了更好地用户体验，能够渲染不完整的dom树和cssom，尽快的减少白屏的时间。