如何解决网站加载速度慢的问题？

　　影响页面加载速度的因素主要就是资源的大小，以及程序级服务器的性能，今天从网页的css和js文件来两下如何提升网页的加载速度。

　　渲染阻塞

　　大家在使用SEO诊断工具的时候，会发现如果网站存在多个js或者css文件的时候会降低评分，会建议你合并这些文件。但是其实只对了部分，并不全对。

　　要搞明白这个原理首先大家需要先了解下网页dom树的构建原理。简单的给大家讲一下吧，首先浏览器解析网页的时候是通过dom树的渲染来实现的，而dom的构建是一行行代码逐渐开始的。最先构建的head标签，然后是body，大多数站点的会把网站的js和css文件放在head里。

　　但是css和js是会阻塞dom的构建，意思就是浏览器执行到head标签的时候会停止网下执行，知道js和css文件加载完毕，才会继续。如果这个时候js加载失败或者加载速度慢，会导致网页空白不现实任何内容，相信这种情况大家经常看到吧。

　　这个时候大聪明来了把css和网页放到网页代码底部，让它们最后加载就不会影响前面的dom树的构建。但是要知道js和css本身就是dom结构的一部分，就算放在尾部如果加载没有完成，dom树就无法完成构建。

　　dom树构建不完成，就不会开始渲染，未开始渲染就意味着浏览器还是白屏不显示任何内容。

　　如何解决阻塞

　　先将js和css下载到本地，千万不要去通过网络调用外部资源。尽可能合并js和css但是非要强制合并为一个文件，前后详细讲。

　　压缩js和css文件，优化和压缩资源来最大限度地减小总下载大小，来提高网页加载速度。开发者可以考虑通过简化编码来优化主文档大小，同时可以采用chunk编码，服务器分chunk输出，以及通过GZIP来压缩主文档资源。

　　文件合并分割原则

　　上面讲到了需要尽可能合并css和js文件，这样可以降低请求的数量，虽然说文件放在服务器本地不会有网络延迟，但是文件储存于硬盘，任何一个文件的读取即使机器性能再好也得需要一定的时间。

　　更加关联的是对于用户体验来说，最关键的是首屏的加载渲染，所以不建议大家把所有的css和js合并，正确的分割才是明智的选择。把首屏幕加载依赖的css和js单独切割放在head标签中，剩余的放在最后加载。

　　分割css的选择，最小化选择，很多站点开发用到了前端框架，里面其实包含了很多用不到的样式，如果对于速度性能有着极致的追求，要么去阉割下要么就不去使用。

　　最小化原则，当前页面加载的css只包含当前页面所需的样式。然后head标签只放首屏元素的样式。

　　js的优化就比css更加复杂，首先一样的最小化原则，能不用第三方库的就不用，自己写执行效率更高。

　　渲染和功能分割

　　对于js代码可以分为两类：负责页面渲染的js代码；负责页面功能的js代码，比如点击事件等功能，此类js不会影响页面的展示的，此类js可以全部合并到一个文档，异步执行，文件位置head还是底部随意，因为是异步不会阻塞页面渲染。

　　渲染js分割

　　参与页面渲染的js的分割，head标签中的js文件只放一些核心必须执行代码，以及参与首屏渲染的。剩余参与渲染的js代码单独一个文件，在底部引用。

　　所以，js和css优化并不是如诊断工具上建议的不加思考的合并。赶快收藏分享给IT小伙伴，给网站加速加速吧。