怎样从你的网站移除JavaScript渲染阻塞

你有没有创建完成一个网站后喜欢它的不得了? 然后又因为它加载的很缓慢而抓狂?导致这个问题或许有各种各样的原因,但是最常见的一个却是——JavaScript渲染阻塞(render-blocking JavaScript)。

那么也许你会想问:什么是JavaScript渲染阻塞?如果我们拆看来看,它就是渲染(加载)和阻塞,意思显而易见,它就是说Javascript阻塞了页面的渲染。Javascript这玩意很可怕,它可以强有力的改善视觉体验,却也可以变成一个时间漩涡。

这个“时间漩涡”不仅仅不招你的用户喜欢;它也损害了Google们展示你的机会。2010年起,加载速度已经被纳入Google算法从而影响排名。话不多说,今天我们将重点放在如何帮你的网站排除JavaScript渲染阻塞。

识别

第一步当然是识别那些“祸害”JavaScript。一个最简单的方法就是使用Google提供的 PageSpeed Insights。这个Google工具会为你提供的页面快速的展示一个精确的阻塞文件列表。它的准则就是快速的让用户第一眼看到该看到的。这就意味着如果一个JavaScript功能如果和用户第一眼看到的东西无关,它就不应该被列在这个页面前面,特别是列在<head>里面。 enter image description here

单击“显示怎样修复”链接将会为我们展开一个需要评估的JavaScript列表。我们最常用到的JavaScript是JQuery,所以你可能会看到这个画面。 enter image description here

选择最好的方法

一旦你知道了哪些脚本需要被移动,那么就想需要决定该怎样修复它们了。一般情况下有两种主要的方法可供选择,第一种方式就是“内联”JavaScript了,也就是把JavaScript和你的HTML写到一块。如果这个脚本很小,而且这是一个简单的页面的话,这当然是最好的选项。

另一个方法是延迟(defer )这些脚本。也就是说你可以延迟一个脚本的加载,直到页面加载完成时再开始加载。当这个脚本不是重要的,不是第一画面所需要的时候,这个方法无疑是最好的。

决定把它移动到什么地方

(这篇文章前面部分全部来自HubSpot网站博客http://blog.hubspot.com/marketing/remove-javascript-rendering-block 的翻译, 读到这段时发现后面是HubSpot自己的广告,呵呵)到这个地方显然本文没有完结,只能我自己来做个狗尾续貂了。其实,我们在一个页面中的什么地方写下一个合适的<script src="..." >标签很重要。在建设一个网站的最开始,我们最长做的事就是为一个网站目录中建立一个可以重用的header文件和一个footer文件。而往往我们就喜欢讲很多JavaScript脚本添加在header中,因为这样很方便我们在其他网页中随时使用。但是其实我们大多数网页的第一画面的布局和风格都只是来自CSS,JavaScript都是在等响应的DOM加载完成的时候才执行的。

所以,与其修复JavaScript阻塞,不如我们在创建这个网站的时候多做一些考虑:到底这个JavaScript脚本应该添加在header还是footer中,或者是一个特定的页面上,甚至是一个div的后面……

最后,还有W3C,W3C这个组织为前端开发提供了很多标准,但是很多时候只是提出建议型的一个指导,前端开发中将W3C标准刻板的应用到网站建设中其实常常也会为我们带来不少苦恼。W3C的学习更多的时候是需要我们领会它的精神,而不是把它死搬硬套。