看到中提到的一篇文章,于是决定看下其博客内容,同时翻译下来留作笔记,因英文有限,如有不足之处,欢迎指出。同时,。
真正的延迟加载 JavaScript 意味着:在页面内容已经完全加载完成之后才开始加载或解析 JavaScript(这也就是说 JavaScript 不能影响页面速度或关键渲染路径)。
网络上的焦点往往是人们为了找到一种解决方案而抓狂,JavaScript 的延迟加载便是焦点其中之一。
许多人说 "只要使用 defer 就可以了"、"只要使用 async 就可以了",或者说 "只要把你的 JavaScript 放到页面最底部就可以了",但是这些都没有解决问题 —— 让页面完全加载完成然后(只能在完全加载之后)加载外部 JS。这些方式也不会让你通过从 Google 页面速度工具中获取的 "延迟加载 JavaScript" 警告(这一点译者有些疑问,因为我在测试的时候发现上面的三个方法是可以去掉这个警告的)。
这个解决方案将会解答。
- <script type="text/javascript">
- function downloadJSAtOnload() {
- var element = document.createElement("script");
- element.src = "defer.js";
- document.body.appendChild( element );
- }
- if ( window.addEventListener ) {
- window.addEventListener( "load", downloadJSAtOnload, false );
- } else if ( window.attachEvent ) {
- window.attachEvent( "onload", downloadJSAtOnload );
- } else {
- window.onload = downloadJSAtOnload;
- }
- </script>
这段代码说等文档完全加载完,然后加载外部文件 "defer.js"。
改成你外部文件的名字
- defer.js
这段代码在你的页面还没完全加载完成之前不会加载外链文件。你应该把你的 JavaScript 分成两组,一组是页面需要加载的,另一组是做页面加载后要做的事情(比如寻找 click 事件或其他事情)。可以接受等待并且一直到页面加载后才加载的 JavaScript 应该都被放到一个外部文件中调用。
例如,在该页面中我使用了上述的脚本来延迟加载谷歌统计、Viglink、以及底部的 Google plus 头像。我没有理由在页面初始时加载这些文件,因为这些文件和我上述的内容是不相关的,是非必须加载的。也许在你的页面上也会有相同类型的东西,你会在展示给你的用户内容之前让用户等待加载这些资源吗?
内联、把脚本放到最底部、使用
或者
- defer
这些方法都没有完成先让页面加载,然后在加载 JS 的目标,并且这些方式也确实不通用以及跨浏览器。
- async
这是因为 Google 把页面的加载速度作为排名的一个因素,也因为用户想要更快的加载页面。这对你的也大有益处。Google 是从它被调用时开始到页面初始化加载完成来测量你的。这也意味着你需要让页面的
事件尽可能快的完成。谷歌根据网页首页加载时间评估你的网页(并且不要忘了,用户正在等待页面加载)。
- load
Google 积极的宣传与推荐(屏幕内容优先)。所以让屏幕外的任何资源(js、CSS、images 等等)放到主要渲染路径之外是值得努力的。如果这会让你的用户开心,让 Google 开心,何乐而不为呢。
我创建了一个页面,点击,你会看到,在这里面我用到了上述代码段。
好吧,为了举例说明,我写了一些测试页面供你测试。每一个页面做了相同的事情,一个纯 HTML 页面使用了一个脚本,脚本的内容是等待两秒输出 "hello world"。你可以测试这些页面并且看到只有一种方式立即展示出了内容(页面加载时间没有包括这两秒的等待)。
最最关键的点是要尽可能快的把内容呈现给用户。We have not been doing that with how we have treated our javascript. 用户必须要看到他们的内容,因为一些脚本做的事情在可视内容之下。不管你的页面底部有多酷,如果用户从不滚动到页面底部,那么你就毫无原因来加载脚本让页面底部变酷。
使用来测试你的页面中 JavaScript 是如何使用的。
翻译结束。
这两个属性都可以页面优化的目的,但有什么不同呢?一个图即可解答:
根据中的定义:
是指网页中只有滚动才可见的区域。
- Below the fold
指不需滚动页面就可见的内容区域。
- Above the Fold
一般而言,不需滚动就展示在屏幕中的内容会接受更多的注意力,需要滚动才可见的内容受到较低的关注。
观点来自新闻出版业。
- fold
来源: