前端性能优化成神之路-总结

首先来看一下前端性能优化所涉及的层面有以下四个：网络层面，构建层面，浏览器渲染层面，服务端层面 

具体的优化点有：资源合并与压缩，图片编码原理和类型的选择，浏览器的渲染机制，懒加载与预加载，浏览器存储，缓存机制，PWA，Vue-SSR等等

 

 

首先来了解一下web前端的本质

web前端的本质是一种GUI软件，是能够直接借鉴其余GUI系统架构设计的方法，可是web前端有点特别

下面是CS架构的GUI软件的开发和部署过程，CS架构的GUI软件在用户从商店下载下来后，是一个APK包，经过解压安装到手机的操做系统上，实际上当打开这个APP的时候须要访问的资源都已经在手机本地有一份了，访问的是本地的资源

而web前端的开发和部署过程跟APP是不同的，以下：

发布的过程跟cs架构不同，不是发布一个安装包，而是将前端代码发布到远程服务器（webServer）和远程的CDN上，那么运行的过程是用户使用浏览器输入相应网址，这时候浏览器才会向远程的浏览器发出请求，动态的增量式加载静态资源，因此web前端去访问的过程是动态的增量的加载静态资源的过程，经过浏览器发出HTTP请求到远程的服务端，有服务端返回，最终浏览器拿到资源，那么这个过程当中可以更快的拿到资源对web前端来讲体验就会更好

 

 

 

浏览器的一个请求从发送到返回都经历了什么

 详情查看：前端性能优化成神之路—浏览器的一个请求从发送到返回都经历了什么

 

  

资源合并与压缩减小HTTP请求

详情查看：前端性能优化成神之路—资源合并与压缩减小HTTP请求

 

 

图片相关优化

详情查看：前端性能优化成神之路—图片相关的优化

 

 

CSS放在页面最上部，javascript放在页面最下面

浏览器会在下载完成所有CSS以后才对整个页面进行渲染，所以最好的作法是将CSS放在页面最上面，让浏览器尽快下载CSS。若是将 CSS放在其余地方好比 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就致使页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕，因此能够考虑将CSS放在HEAD中

Javascript则相反，浏览器在加载javascript后当即执行，有可能会阻塞整个页面，形成页面显示缓慢，所以javascript最好放在页面最下面。但若是页面解析时就须要用到javascript，这时放到底部就不合适了。

 Lazy Load Javascript（只有在须要加载的时候加载，在通常状况下并不加载信息内容。）随着 Javascript框架的流行，愈来愈多的站点也使用起了框架。不过，一个框架每每包括了不少的功能实现，这些功能并非每个页面都须要的，若是下载了不须要的脚本则算得上是一种资源浪费 -既浪费了带宽又浪费了执行花费的时间。目前的作法大概有两种，一种是为那些流量特别大的页面专门定制一个专用的 mini版框架，另外一种则是 Lazy Load。

 

 

图片懒加载(lazyload image)

查看这篇文章：前端性能优化--图片懒加载(lazyload image)

 

非核心代码异步加载

查看这篇文章：前端性能优化-异步加载

 

利用浏览器缓存（重点）

查看这篇文章：前端性能优化成神之路-利用浏览器缓存

 

 

使用CDN

CDN是网络层的性能优化，就是在将一些css文件和js文件放到CDN服务器上，而后直接连接这里的文件，就是让网络快速到达服务端把资源请求过来

尤为是当第一次请求页面的时候，浏览器缓存起不到任何做用，那么使用CDN就是一个很重要的性能优化的一个点

 

 

预解析DNS

什么是 DNS Prefetch ? 
DNS Prefetch 是一种DNS 预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的链接时就无需进行DNS的解析，减小用户等待时间，提升用户体验。

 Dns-prefetch是浏览器上的能够下降延迟的技术

使用方式直接在link标签上添加这个属性

<link rel="dns-prefetch" href="http://www.spreadfirefox.com/">
<link rel="dns-prefetch" href="//www.spreadfirefox.com">

控制dns预解析是否开启

服务器和浏览器均可以开启关闭dns预解析功能，浏览器关闭预解析功能以下

<meta http-equiv="x-dns-prefetch-control" content="off">  //经过设置on能够开启dns预解析

浏览器上配置dns预解析

能够关闭浏览器的dns预解析功能

network.dns.disablePrefetch设置为true

浏览器在https协议下默认dns预解析不可用，能够经过设置

network.dns.disablePrefetchFromHTTPS 的值为false来启动

 dns-prefetch需慎用，多页面重复DNS预解析会增长重复DNS查询次数。