1.一道面试题
题目：提升页面性能的方法有哪些？
- 1.资源压缩合并，减少HTTP请求
- 2.非核心代码异步加载--->异步加载的方式--->异步加载的区别
- 3.利用浏览器缓存--->缓存的分类--->缓存的原理*
- 4.使用CDN（特别是页面第一次打开的时候，缓存不起作用，此时使用CDN效果明显）
- 5.预解析DNS（页面中涉及多个域名的时候使用）
//在高级浏览器中a标签是默认打开预解析的，但是在https协议中是默认关闭的，此句话是强制打开a标签的预解析<meta http-equiv="x-dns-prefetch-control" content="on">//DNS预解析<link rel="dns-prefetch" href="//host_name_to_prefetch.com">2.异步加载
异步加载的方式：
- 1.动态脚本加载（动态创建节点：document.createElement("/script/")，用js创建一个标签，再加到文档中）；
- 2.defer（在script标签中加上此属性）；
- 3.async（在script标签中加上此属性）。
异步加载的区别：
- 1.defer是在HTML 解析完 之后才会执行，如果是多个，按照加载的 顺序依次执行 ；
- 2.async是在加载完之后 立即执行 ，如果是多个，执行顺序和加载顺序无关。
3.浏览器缓存
缓存的分类：
1.强缓存（在http响应头中，如果两个时间都有，以Cache-Control为准）
- Expire（绝对时间，下发的服务器时间，有可能客户端和服务端时间不一致。Expire：Thu,21 Jan 2017 23:39:02 GMT）；
//在前端<head>标签中设置
<meta http-equiv="expires" content="0"> //在后端设置
response.setDateHeader("Expires",date.getTime()+20000); //Expires:过时期限值
response.setDateHeader("Expires", 0);//不允许浏览器端或缓存服务器缓存当前页面信息。 - Cache-Control（相对时间，按照客户端时间，3600秒内使用缓存。Cache-Control:max-age=3600）
//在前端<head>标签中设置<meta http-equiv="cache-control" content="no-cache">//在后端设置response.addHeader( "Cache-Control", "no-cache" );//浏览器和缓存服务器都不应该缓存页面信息2.协商缓存（问一下服务器）
- Last-Modified（服务器下发的响应头中加，Last-Modified:Thu,21 Jan 2017 23:39:02 GMT）
- If-Modified-Since，（http请求头中加，时间和Last-Modified下发的一致，缺点：文件没变但时间过期，会再次加载）
//在后端设置response.setDateHeader("Last-Modified",date.getTime()); //Last-Modified:页面的最后生成时间 - Etag （哈希值，服务器下发的响应头中加，文件没改变可继续使用缓存）
- If-None-Match（http请求头中加，时间和Etag下发的一致）
//响应消息头
Etag:"a030f020ac7c01:1e9f" 4.引申
跟浏览器缓存相关的HTTP头有哪些？
- Expire
- Cache-Control
- Last-Modified、If-Modified-Since
- If-Modified-Since、If-None-Match