面试知识归纳：2.9性能

页面性能

提升页面性能的方法有哪些

1. 资源压缩合并，减少HTTP请求
2. 非核心代码的异步加载

• 异步加载的方式
• 各种方式间的区别

3. 利用浏览器缓存

• 缓存分类
• 缓存原理

4. 使用CDN
5. 预解析DNS

异步加载的方式

异步加载方式

• 动态脚本加载, 通过动态创建节点，插入到head或body中
• defer
• async

区别

• defer是在HTML解析完之后才执行的，如果是多个，按照加载的顺序依次执行
• async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

浏览器缓存

缓存分类：

1. 强缓存

• Expires Expires: Thu, 21 March 2018 23:00:02 GMT
• Cache-Control Cache-Control: max-age=3600

2. 协商缓存

• Last-Modified If-Modified-Since Last-Modified: Thu, 21 March 2018 23:00:02 GMT
• Etag If-None-Match

怎么理解？ 强缓存就是，不请求，命中就读取缓存。协商缓存，通过服务器，命中才读取缓存。

预解析DNS

<!-- 强制打开a标签的预解析 http默认开启，https需要写这句 -->
<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="schema://host_name_to_prefetch.com" />

• 资源请求
  • 尽可能并发加载资源， 静态文件CDN
  • 资源大小控制，代码压缩合并
  • 缓存策略
• 页面加载
  • 动态脚本加载
  • async defer
• 渲染
  • 非阻塞
  • 优化首屏渲染 前端路由(动态脚本加载)
• 快速响应