前端页面性能

提升页面性能的方法

1. 资源压缩合并，减少HTTP请求

2. 非核心代码异步加载

异步加载方式？

1)动态脚本加载、2)defer、3)async（在加载js的时候在script标签上添加这两个属性,<script src="./test.js" charset="utf-8" defer></script>）

异步加载区别？

defer: HTML解析完成后执行，如果是多个，按照加载的顺序依次执行。

async:加载完成后立即执行，，若是多个，执行顺序和加载顺序无关，那个文件加载完，哪个先执行。

3. 利用浏览器缓存

缓存分类？

• 强缓存：不问服务器是否能用这个文件，直接使用缓存的文件。以服务器后下发的时间为准。

Expires Expires:Thu,21 Jan 2017 23:39:02 GMT (绝对时间)

Cache-Control Cache-Control:max-age=3600(相对时间)

• 协商缓存

Last-Modified If-Modified-Since

Etag If-None-Match

4. 使用CDN

5. 预解析DNS

<meta http-equiv="x-dns-prefetch-control" content="on"/>

//大部分浏览器是https协议的地址默认关闭a标签链接dns解析的，这一句可以强制打开a标签的dns解析

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">//dns预解析，不加这一句也会自动预解析