【前端优化】常见前端性能优化
资源压缩 减少HTTP请求
静态资源压缩
- html:压缩空格、换行、注释等字符 Webapack — html-webpack-plugin
- css:无效代码删除,语义合并(相同样式代码) Webpack css-loader
- js:无效字符删除、剔除注释代码语义的缩减和优化 Webpack — UglifyJSPlugin
图片优化方案:
- 雪碧图
- 小文件 使用base64 webpack base64-inline-loader
- 图片压缩网站
- svg
资源合并
弊端:
- 首屏渲染问题,合并文件太大,造成慢。
- 缓存失效问题 标记 md5戳 只要有一个变动 则失效 a,b,c三个js合并
- 规则:公共库合并,不同页面的各自合并。异步加载组件,不同页面单独打包,监听路由变化,自动下载
- 实现:gulp插件梳理工作流/webpack配置loader和plugin
非核心代码异步加载
正常网页的加载流程:
- 浏览器一边下载 HTML 网页,一边开始解析。也就是说,不等到下载完,就开始解析。
- 解析过程中,浏览器发现
<script>
元素,就暂停解析,把网页渲染的控制权转交给 JavaScript 引擎。 - 如果
<script>
元素引用了外部脚本,就下载该脚本再执行,否则就直接执行代码。 - JavaScript 引擎执行完毕,控制权交还渲染引擎,恢复解析 HTML 网页。
上述加载方式为同步加载,会阻塞浏览器的解析html文档。故而我们常将script元素放置于body的底部
三种实现方式:动态脚本、async、defer
动态脚本
动态创建script标签
var scriptEle = document.createElement("script"); scriptEle.type = "text/javasctipt"; scriptEle.async = true; scriptEle.src = "http://xxxxxxx"; var x = document.getElementsByTagName("head")[0]; x.insertBefore(scriptEle, x.firstChild);
async
async
属性和defer
属性类似,也是会开启一个线程去下载js文件,但和defer
不同的时,它会在下载完成后立刻执行,而不是会等到DOM加载完成之后再执行,所以还是有可能会造成阻塞。
且不会按照顺序执行,哪个js文件先下载完就先执行哪个
对于内联脚本无作用 (即没有src属性的脚本)。
defer
当浏览器遇到带有defer
属性的<script>
标签时,再开启一个线程去下载js文件,同时继续解析HTML文档,等等HTML全部解析完毕DOM加载完成之后,再按照出现顺序依次执行加载好的js文件。
对于内联脚本无作用 (即没有src属性的脚本)。
使用场景
一般来说,是看脚本之间是否有依赖关系,有依赖的话应当要保证执行顺序,应当使用defer
没有依赖的话使用async
,同时使用的话defer
失效。要注意的是两者都不应该使用document.write,这个导致整个页面被清除。
利用浏览器缓存
https://juejin.im/post/5c4179...
优点:
- 减少了冗余的数据传输,节省网费
- 减少服务器的负担,提升网站性能
- 加快了客户端加载网页的速度
浏览器缓存分为强缓存和协商缓存
强缓存
如果资源没过期,就取缓存,如果过期了,则请求服务器。
cache-control:max-age = xxx
声明该资源在加载后的xxx秒内都直接使用缓存 使用的是相对时间 即加载文件本机的时间
Cache-Control 的几个取值含义:
- private:仅浏览器可以缓存
- public:浏览器和代理服务器都可以缓存
- max-age=xxx:过期时间
- no-cache:不进行强缓存
- no-store:不强缓存,也不协商缓存
- 规则可以同时多个 cache-control:public,max-age=0
- expires: 绝对时间,服务器基于自己的时间返回一个文件过期时间
如果在
Cache-Control
响应头设置了 "max-age" 或者 "s-max-age" 指令,那么Expires
头会被忽略。
强缓存步骤:
- 第一次请求 a.js ,缓存表中没该信息,直接请求后端服务器。
- 后端服务器返回了 a.js ,且 http response header 中 cache-control 为 max-age=xxxx,所以是强缓存规则,存入缓存表中。
- 第二次请求 a.js ,缓存表中是 max-age, 那么命中强缓存,然后判断是否过期,如果没过期,直接读缓存的a.js,如果过期了,则执行协商缓存的步骤了。
协商缓存
触发条件:
- Cache-Control 的值为 no-cache (不强缓存)
- 或者 max-age 过期了 (强缓存,但总有过期的时候)
也就是说,不管怎样,都可能最后要进行协商缓存(no-store除外)
ETag:每个文件有一个,改动文件了就变了,可以看似md5
Last-Modified:文件的修改时间
每次http返回来 responseheader 中的 ETag和 Last-Modified,在下次请求时在 requestheader 就把这两个带上(但是名字变了ETag-->If-None-Match,Last-Modified-->If-Modified-Since ),服务端把你带过来的标识,资源目前的标识,进行对比,然后判断资源是否更改了。
协商缓存步骤总结:
- 请求资源时,把用户本地该资源的 ETag 同时带到服务端,服务端和最新资源做对比。
- 如果资源没更改,返回304,浏览器读取本地缓存。
- 如果资源有更改,返回200,返回最新的资源。
DNS预解析
预解析的实现:
用meta信息来告知浏览器, 当前页面要做DNS预解析:
<meta http-equiv="x-dns-prefetch-control" content="on" />
在页面header中使用link标签来强制对DNS预解析:
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
注:dns-prefetch需慎用,多页面重复DNS预解析会增加重复DNS查询次数。
如果需要禁止隐式的 DNS Prefetch,可以使用以下的标签:
<meta http-equiv="x-dns-prefetch-control" content="off">
在浏览器中a标签默认打开DNS预解析,但是在HTTPS中默认关闭
CDN 内容分发网络
网络请求的过程走最近的网络环境,解决网络拥堵。