关于前端性能的优化（总结）

关于这个问题各种渠道各种方法随处可查，想总结一篇有条理便于记忆的文章，随时补充吧。

首先明确从输入网址到最终渲染出来的整个过程：DNS解析-->建立TCP连接-->拿到资源-->资源解析-->渲染。

然后从每个步骤下手进行逐步优化：

1、DNS优化

1.1 减少DNS请求次数：尽量把所有资源放在一个cdn域名上

1.2 DNS预获取（prefetching）：通过DNS预解析告诉浏览器某些资源可能在将来会被使用，当浏览器真正使用到的时候就可以尽快完成DNS解析<link rel="dns-prefetch" href="//example.com">

         浏览器会对a标签的href自动启用DNS Prefetching，所以a标签里包含的域名不需要在head中手动设置link。但是在HTTPS下不起作用，需要meta来强制开启功能。

    <meta http-equiv="x-dns-prefetch-control" content="on">

         这个限制的原因是防止窃听者根据DNS Prefetching推断显示在HTTPS页面中超链接的主机名。

2、TCP优化

       减少TCP请求数，即减少http请求。

2.1 资源压缩与合并

• html压缩、css压缩：nodejs 提供了html-minifier工具
• js压缩和混乱：使用html-minifier工具   /    使用uglifyjs2对js进行压缩
• 文件合并：gulp

2.2 使用长连接，减少握手和释放次数

       http头中Connection:keep-alive

3、HTTP请求优化

3.1 利用cdn内容分发网络

        CDN，通过将静态资源(例如javascript，css，图片等等）缓存到离用户很近的相同网络运营商的CDN节点上，不但能提升用户的访问速度，还能节省服务器的带宽消耗，降低负载。

3.2 利用浏览器缓存

       强缓存和协商缓存（展开讲会有很多，找时间单独展开吧）

4、渲染优化

4.1 异步加载：非核心代码异步加载（async、defer、动态脚本创建）/ 控制资源文件加载的优先级：css在最上，js在最下

• async（异步加载）加载完就执行，不保证顺序，h5新属性
• defer（延迟执行）解析完才执行，保证顺序，兼容所有浏览器

        preloader的相关指令已经是页面优化的常见手段之一，它可以一边解析js/css文件，一边网络请求下一个资源，link标签中rel的属性设置为preload，能够指明哪些资源是页面加载完成后即刻需要的。

4.2 服务端渲染（对SEO友好）

       在服务端进行整个html的渲染，从而将整个html直出到我们的浏览器端，而非在浏览器端进行渲染。

5、其他

        对于vue等框架，可以利用组件的懒加载