一般面试，问页面性能方面的题，就会被问到提升页面性的方法有哪些？
提升页面性能的方法
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel=”dns-prefetch” href=”//host_name_to_prefetch.com”>
DNS Prefetch 是一种DNS 预解析技术，当浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。
作用：用于优化网站页面的图片，如果图片很多的话，可以使用dns域解析，否则可以不用，因为有开发者指出 禁用DNS 预读取能节省每月100亿的DNS查询 。
异步加载方式和区别
- 动态创建script标签加载
通过window.onload()确保页面加载完，再将script标签插入到DOM中，代码如下：
function addScriptTag(src){
var script = document.creatElement("script");
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function(){
addScriptTag("js/index.js");
}
- defer方式
（1）defer是一个标签属性，也是一个布尔属性。但是该属性仅适用于外部脚本（只有在使用src属性时）。
（2）当页面已经完成加载之后，才会执行脚本。
（3）如果是多个脚本，该方法可以确保所有设置defer属性的脚本按顺序执行。
（4）兼容所有的浏览器
<script type="text/javascript" src="js/index.js" defer></script>
- async
(1) async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持。
(2) async属性规定一旦脚本可用，则会异步执行。
(3)async属性仅适用于外部脚本（只有在使用src属性时）
(4) 如果是多个脚本，该方法不能保证脚本按正常顺序执行。
<script type="text/javascript" src="js/index.js" async="async"></script>
区别：
（1）defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序一次执行。
（2）async 是加载完之后立即执行，如果是多个，执行顺序和加载顺序无关。
缓存的分类和缓存的原理
- 强缓存
给缓存的资源设置一个过期时间，客户端每次请求资源时都会看是否过期，过期了才会访问服务器。也就是说在请求资源的时候会读取header里面的属性，如果含有cahe-control:max-age = xxxxx (时间值),public 就是强缓存，每次用户正常打开页面，浏览器会判断缓存是否过期，如果没过期，则从缓存中读取数据。但是当用户刷新页面的时候，就算此时有缓存并且没有过期，也会去请求服务器，这就属于协商缓存了。要是想避免这种情况，用户刷新页面可以直接读取缓存数据，可cahe-control属性值加上immutable ，即：cahe-control:max-age = xxxxx ，public,immutable
注：cahe-control是代表缓存的有效期 - 协商缓存
每次请求资源的时候，都需要请求服务器，服务器查看是否过期或者资源是否有更新，如果没有就返回304状态码，直接将获取缓存里的数据。原理是这样子的，每次请求返回的response header 中的 etag 和 last-modified ，在下一次请求时将这两个参数带上，服务端把将这两个参数值进行对比，判断资源是否更改，如果更改就返回新资源，和新资源对应的esponse header的标识etag、last-modifie。如果没有返回304，客户端之前缓存的资源。
流程如下：
没过期的流程：
发请求 --》看资源是否过期–》过期—》请求服务器—》服务器对比资源是否真的过期–》没过期–》返回304状态码—》使用缓存了的资源
过期的流程：
发请求–》看资源是否过期–》过期–》请求服务器–》服务器对比资源是否真过期—》过期–》返回200状态码–》客户端更换新的资源，并记下cache-control的过期时间，etag 和last-modified等。