浅谈浏览器加载优化

发表于 更新于 分类于 阅读次数： Disqus：

呼~总算搞定了博客，终于可以写一点自己的东西了，第一篇博客就来聊聊关于浏览器加载速度的话题，这个直接关乎用户在浏览我们网站时候的体验，也是作为我们前端工程师所必须了解的。

浏览器加载网页的过程

既然要探讨加载问题，我们首先得先知道浏览器是怎么加载网页的，知道了加载过程，就能针对其中的一些点进行不同程度的优化，浏览器加载网页的过程大致分为以下几步：

浏览器加载过程

  1. 浏览器接受到服务器的 html 响应，开始以8k / chunk的速度开始下载 html 页面
  2. 浏览器开始解析页面代码，并开始构建DOM 树
  3. 遇到 css 标签或者 js 标签就重新开启线程去下载对应的文件，然后继续构建DOM 树
  4. 当 css 文件下载完后，开始解析 css 为CSS 规则树，然后浏览器根据CSS 规则树和DOM 树生成render tree，也就是开始渲染页面了
  5. 当 js 文件下载完后，开始解析 js 文件，若 js 文件里有修改 dom 的DOM API 或者修改 css 样式的CSSOM API，每次执行都会使render tree重新渲染，相比而言，修改 dom 的代价更高，它会使render tree重新布局构建（reflow）然后进行重新渲染（repaint），而修改样式只会触发重新渲染。
  6. 渲染完成，显示页面

简单优化的一些建议

压缩 css 和 javascript 文件

既然是从服务器上下载下来的，首先想到的自然就是减少下载下来的文件体积。压缩就是一个很好的办法，市面上有很多工具可以帮助我们完成压缩的工作，个人比较推荐用Uglify，这是一个用来完成压缩操作的包，可以配合一些任务流工具如grunt，gulp来快速压缩我们生产环境所需要的 js 和 css 文件，因为这是 npm 的包，所以你必须先装有node和npm。安装去官网找一下就可以了。

安装Uglify的指令为：

1
2
npm install uglify-js -g

使用也很简单，博主在这就不展开了，具体文档点这里。

启用 GZIP 压缩

压缩完 css 和 javascript 文件，我们是不是也能把 html 页面也压缩一下呢，毕竟页面是最先下载的，要是能压缩体积，必定能提升网站的访问速度。我们可以在服务器上通过Gzip压缩做到这一点，这能有效减少 HTTP 响应的时间，提高访问速度。

使用 CSS Sprites

俗称 css 精灵或雪碧图，把多个小图片整合到一张大图片中，需要取某张图片的话，通过background-position来定位需要的图片，这样资源只需要请求一次，不需要多次请求，常见的应用就是各种图标的整合，有效提高了打开网站的速度。

CSS 文件放在页面顶部，而 JS 文件放在底部

根据我们之前了解的网站加载过程，可以知道 css 是用来渲染整颗DOM 树的，那么如果放在页面最后面的话，等DOM 树构建完成，再开始生成render tree，然后浏览器不得不重新渲染整颗树，这样显然效率不高，网速慢的话容易出现短暂的视觉空白，影响用户体验。

而对于 js 文件来说，它会阻塞 DOM 树的构建，若放在head标签中，显然不合理，无法让用户第一时间看到页面，所以放在body标签的最后是比较合理的。

利用浏览器的缓存

浏览器自带缓存功能，能避免重复文件的多次下载，但是这个有时候也是个缺点，若有一些新的文件的版本更新，浏览器里可能还留着老版本文件的缓存导致不能更新到最新版本，这点对于一些更新频繁的网站是致命的，解决办法是给文件后面加v=版本号，使有文件更新的时候去服务器端重新下载最新的文件。

使用内容分发网络(CDN)

当一个网站的流量很大的时候，会对服务器造成很大的压力，处理的东西多了自然用户打开页面的时候就慢了，CDN主要功能是在不同的地点缓存内容，通过负载均衡技术，将用户的请求定向到最合适的缓存服务器上去获取内容，不同地区的用户的用户可以就近访问对应的节点，加速用户对网站的访问。解决 Internet 网络拥堵状况，提高用户访问网络的响应速度。

减少重定向

重定向增加了额外的 HTTP 请求，也增加了页面加载时间。

备注：本篇博客皆为博主原创，转发请标明出处。