关于前端性能的优化(总结)

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

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

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

1、DNS优化

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

1.2 DNS预获取(prefetching):通过DNS预解析告诉浏览器某些资源可能在将来会被使用,当浏览器真正使用到的时候就可以尽快完成DNS解析

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

   

         这个限制的原因是防止窃听者根据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等框架,可以利用组件的懒加载

你可能感兴趣的:(else)