JavaScript对网站加载速度的影响

当考虑到移动网站排名的时候,我们通常第一个想到的因素就是网站的加载速度。而加快网站加载速度的方式,通常第一个想到的都是从图片的大小入手,这确实非常有效,但是我们经常忽略的影响一个网站加载速度的因素就是 JavaScript, 这个几乎出现于每个页面代码中的语言。

在网站的代码中,HTML (超文本标记语言) 控制网页的结构和内容;CSS (层叠样式表) 控制站点在不同设备上的外观和展现形式;JavaScript 则使页面更具交互性和动态性。在现在的网站建设中,我们都需要用到 JS 来让网页具有我们期望的功能。但是 JS 在满足我们对功能的需求的同时,也对站点的加载速度产生了影响。在过去的五年中,仅移动网页的平均 JS 大小已经从 101kb 增长到了 387kb。

JavaScript如何影响网站加载速度 好文分享 第1张
JavaScript 对站点加载速度的影响是两方面的。

其一,JS 代码在网页大小的占比中,仅次于图片,排名第二,这会拖累网页的下载速度;

其二,当下载完毕后,浏览器需要运行该 JS 脚本,这同样会拖慢页面上其它元素的下载与加载速度,而这些被拖慢的元素可能比 JS 本身要重要得多。

JavaScript如何影响网站加载速度 好文分享 第2张
JS 对站点加载速度的影响取决于其类型

从加载形式上来讲,JS 可以分为如下几类:阻塞型,内联型,异步加载型以及延后加载型。

1. 阻塞型 JS

阻塞型 JS 指的是该 JS 要与网页同步加载,当浏览器读取网页代码到有 JS 的这一行时,在下载并处理加载完毕对应的 JS 之前,下面的代码不会被读取与加载。网页的展现也会一直停止直到 JS 加载完毕。顺带一提,如果你不指定 JS 的加载样式,那么 JS 将会默认为阻塞型加载方式。

2. 内联型 JS (inline)

内联型 JS 指的是将 JS 直接写入网页代码中,而不需要外部调用。这种脚本与阻塞型相同,当浏览器读取到该 JS 时,会优先加载 JS 停止后续读取,一直到 JS 加载完毕。内联型 JS 与阻塞型 JS 不同之处在于无需单独下载调用的 JS 包。

3. 异步加载型 JS

异步加载型 JS 允许浏览器在下载解析 JS 时,同时继续解析后面的代码 (分析代码并构建呈现网页)。它的实现方式是为 JS 赋予 HTML 中的 async 属性,告知浏览器无需为了该 JS 而将其他所有的东西都搁置。

4. 延后加载型 js

延后加载型 js 告知浏览器在解析并构建完成页面之前,不要执行该 js。实现方式是为该 JS 赋予 defer 的属性。

如何优化 JS 来加快网站加载速度

首先,网站应该尽量减少对 js 的依赖,JavaScript 经常用于执行不能用 HTML 或 CSS 完成的任务。随着 W3C 逐渐将一些 js 的特性添加到 HTML 或 CSS 标准中,并由浏览器实现,这些能用 HTML 或 CSS 达成的功能就不要使用 JS,因为 HTML / CSS 一般而言是更高效的。一个有效的例子就是现在的自响应式图片已经无需用 JS 来实现,CSS 和 HTML 就可以做到。

其次,尽可能的选择异步与延后型 JS 而不要用内联与阻塞样式。当网站的重要功能或者构建都需要依赖 JS 时,那么该种 JS 确实需要用到阻塞样式确保网页功能与展现的完全。而实现其他作用的 JS,应当使用异步与延后型 JS,确保网页首先加载于用户面前。

第三,减少 JS 数量。现今的绝大多数浏览器最多同时允许六个请求,如果你的网页同步请求数量超过了 6 个,那么第七个就需要等到其中一个加载完毕才会被执行,这会导致请求与响应的时间更长,拖慢网站速度。

最后,尽量压缩 JS 大小。JS 文件越大,就需要越长的时间来解析与运行。每多一 KB,就多 1ms 是比较合理的估计。最大的搜索引擎 — 谷歌就建议使用 UglifyJS 或者 Google Closure Compiler 工具来减小 JS 大小。

评论

  1. Macintosh Chrome 61.0.3163.100
    2017-10-26
    2017-10-26 15:20:44

    JS CSS 图片全部托管 放阿里 oss 上...
    问题解决...

    • 黄良钵
      博主
      樱花博客
      Linux Chrome 60.0.3112.78
      2017-10-26
      2017-10-26 21:06:43

      土豪啊!没玩过 oss

      • 黄良钵
        Macintosh Chrome 61.0.3163.100
        2017-10-27
        2017-10-27 11:15:24

        阿里云这东西有免费流量的,你可以试试测试下,图片 JS,CSS 一托管速度马上就上来了..

        • 黄良钵
          博主
          樱花博客
          Linux Chrome 60.0.3112.78
          2017-10-27
          2017-10-27 22:35:47

          现在还有吗?我去看看

        • 黄良钵
          博主
          樱花博客
          Linux Chrome 60.0.3112.78
          2017-10-27
          2017-10-27 22:54:34

          不支持中文域名 [哈欠]

  2. Windows Chrome 55.0.2883.87
    2017-10-24
    2017-10-24 9:18:21

    看来有时间要优化一下 JS 文件和数量才行

  3. Windows Chrome 55.0.2883.87
    2017-9-4
    2017-9-04 9:51:42

    有些特效又不能不要 JS,所有最终只能靠自己取舍了

    • 黄良钵
      博主
      懿古今
      Linux Chrome 60.0.3112.78
      2017-9-4
      2017-9-04 9:57:14

      是啊,能用 css 的用 css,不能的只能用 js 也没办法咯

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇

本文最后更新于 2809 天前,其中的信息可能已经有所发展或是发生改变。