资源压缩合并，减少http请求
- 网站的图片和内容太大，需要花费很多时间下载
- 裁剪图片，缩小尺寸
- 尽量使用JPEG或PNG格式，避免使用BMP和TIFF格式
- 调整图片大小
非核心代码异步加载
- 异步加载的方式
- 动态脚本加载：利用document.createElement创建script标签，然后添加到body上
- defer
- async
- 异步加载的区别
在没有defer和async属性时，脚本会立即执行，所以建议一般把script标签放在body最后，而defer和async都会立即加载文件，但执行时间不同：- defer: 在HTML解析完成之后才会执行，如果是多个，会按照加载的顺序依次执行
- async：是在加载完成之后立即执行，如果是多个，执行顺序和加载顺序无关
defer和async的脚本，是在同步脚本之后才执行的
利用浏览器缓存
缓存的分类及原理
- 强缓存（在这个时间内，我都不会与服务器确认，直接使用浏览器缓存）
- Expires Expires: Thu,21 Jan 2017 23:39:02 GMT(表示的是绝对时间，是服务器的绝对时间，可能和客户端时间不一致)
- Cache-Control Cache-Control:max-age=3600（这个是相对时间，是相对于客户端时间的3600s）
如果两者同时存在，则以cache-control为准
- 协商缓存
1)利用上次修改时间来判断，由服务器传给客户端Last-Modified告知上次修改时间，由客户端询问服务器从If-Modified-Since时间起这个资源是否修改了，使用这两个属性有一个缺点，就是文件修改时间变了，但内容没变未识别出来
- Last-Modified Last-Modified: Wed, 26 Jan 2017 00:35:11 GMT
- If-Modified-Since
2）使用哈希值，服务器结合last-modified和Etag，告诉客户端上次修改时间和文件标识；客户端使得If-Modified-Since和If-None-Match询问服务器从这个时间开始，这个文件是否有修改 - Etag
- If-None-Match
利用CDN（网络优化）
在互联网有一个“8秒原则”，如果一个页面超过8s未响应，那么大多用户都会直接放弃，无论这网站做得有多么好。
所以网络访问速度是很关键的。一般网络慢的原因：
-
共享主机服务器负荷过重，响应速度慢
-
网站服务器位置与你网络的访问者位于不同的地理位置
CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，让用户就近获取所需内容，降低网络阻塞，提高用户访问响应速度和命中率。
当用户使用很多个css、js、图片文件时，可以使用cdn来加快网络请求速度，尤其对第一次访问页面时，因为第一次访问页面，浏览器缓存是无法做到优化的。
预解析DNS
当使用http时，很多高级浏览器都默认打开dns-prefetch开关，但如果使用HTTPS请求，那么浏览器一般是默认关闭dns缓存的，这时候就需要加上meta这个标签将x-dns-prefetch-constrol这个打开的，表示强制给a标签打开dns-prefetch开关
<meta http-equiv="x-dns-prefetch-constrol" content="on">
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
网友评论