有关网页性能方面的优化

最近读了一本高性能网站建设指南，获益颇多，于是做一个本书的读书笔记和总结。

减少HTTP请求

• CSS 雪碧图：将多个icon图标拼到一张图片中，然后使用背景定位的方式应用
  首先通过合并图片极大的减少了HTTP下载请求，其次合并的图片比分离的图片要小，这个方式非常适用于为按钮，导航栏和链接添加背景。

使用CDN--内容发布网络

• CDN这种技术本身可以使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
• 并且CDN可以解决浏览器对于单一域名的最大连接数限制，有效提高浏览器HTTP并发请求数。

利用缓存：做好图片、脚本、和样式表的缓存

有关缓存，我写了一篇比较完整的文章介绍谈谈缓存

压缩组件：JS和CSS

在我使用webpack的过程中，每次打包代码，都会用专门的插件对脚本和样式表还有图片进行压缩，这显著减少了要下载的文件的大小，提高下载速度

将CSS放于head中：避免无样式内容闪烁

如果样式表放于文档底部，页面逐步加载的时候，文字和图片依次显示，最后样式表下载解析后，会对已经呈现的文字和图表进行样式绘制，导致页面闪烁。

脚本的正确放置位置

• 放于顶部 head标签中：脚本不能并行下载，其原因是保证脚本的正确执行顺序。如果将脚本放于顶部，那么页面所有的东西都位于脚本之后，并且不能并行下载，只能等待脚本下载完成，导致整个页面的呈现和下载都会被阻塞。
• 放于底部 body标签中：而放置于底部，会使页面的可视组件尽早下载，极大的提升用户体验。将script放在尾部的缺点，是浏览器只能先解析完整个HTML页面，再下载JS。而对于一些高度依赖于JS的网页，就会显得慢了。所以将script放在尾部也不是最优解，最优解是一边解析页面，一边下载JS。

• 放于顶部 加上async或者defer
  加上这两个属性的script标签可以在浏览器解析HTML时同时进行下载，但是也有区别，下面借用网上一张图来说这个差异：

  
  image.png
  

  async对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，以淘宝网为例

  
  淘宝网script加载顺序演示
  而defer是下载完成后并且页面解析完后再执行，且严格按加载顺序来执行脚本

如果是JSONP之类的请求，需要动态创建script标签添加至body中执行，因为跨域ajax数据请求有可能耗时较长，如果也以静态形式放于页面中，会影响页面加载速度。

做好Ajax缓存

当使用ajax获取到一个比较大并且可以共用的数据时，可以用一个变量将其缓存在本地，便于重复使用。

DNS预解析

DNS解析就是将主机名和域名转换为IP地址这么一个过程，而DNS预解析概念如下：

DNS 作为互联网的基础协议，其解析的速度似乎很容易被网站优化人员忽视。现在大多数新浏览器已经针对DNS解析进行了优化，典型的一次DNS解析需要耗费 20-120 毫秒，减少DNS解析时间和次数是个很好的优化方式。DNS Prefetching 是让具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能 减少用户的等待时间，提升用户体验 。

DNS Prefetch 应该尽量的放在网页的前面，推荐放在 <meta charset="UTF-8"> 后面。
如果页面是HTTPS，那么很多浏览器是默认关闭DNS预解析，此时如果要强制打开预解析，可以加上<meta http-equiv="x-dns-prefetch-control" content="on">

题外话：从输入网址到显示网页的全过程

1.用户输入网址
2.DNS查找 获取域名对应的IP地址
3.浏览器向web服务器发送GET请求
4.服务器处理请求，返回一个响应
5.浏览器获取响应进行解析和展示