前端web性能优化

优化方法

每个请求都需建立连接消耗一定时间，请求数越多则网页加载时长越长。

资源合并减少http请求

我们可以将资源尽可能的合并从而减少请求：

1. 图片合并，使用Sprites精灵图 ；
2. 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”> // 强制预解析