前端web性能优化
优化方法
每个请求都需建立连接消耗一定时间,请求数越多则网页加载时长越长。
资源合并减少http请求
我们可以将资源尽可能的合并从而减少请求:
- 图片合并,使用Sprites精灵图 ;
- CSS 文件合并 ;
非核心js异步加载
动态脚本加载
defer html解析完成后才执行,按加载顺序依次执行
async 加载完立即执行,和加载顺序无关
浏览器缓存
强缓存
不发送请求到服务器,满足条件直接从缓存获取资源
expires 绝对时间
cache-control 相对时间
协商缓存
发送请求到服务器,由服务器判断是否从缓存获取资源
Last-Modified(响应头) If-Modified-Since(请求头)
Etag(响应头) If-None-Match(请求头)
使用cdn
CDN(内容发布网络)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容
进行dns预解析
<meta http-equiv=“x-dns-prefetch-control” content=“on”> // 开启浏览器dns预解析
<link rel=“dns-prefetch” href=“//host-name.com”> // 强制预解析