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

来源：互联网发布：淘宝网店店铺名称大全编辑：程序博客网时间：2024/04/30 13:55

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

这里写图片描述

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

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

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

识别

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

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

选择最好的方法

一旦你知道了哪些脚本需要被移动，那么就想需要决定该怎样修复它们了。一般情况下有两种主要的方法可供选择，第一种方式就是“内联”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的学习更多的时候是需要我们领会它的精神，而不是把它死搬硬套。

0 0