专栏名称: 奇舞周刊
《奇舞周刊》是由奇舞团维护的前端技术周刊。除周五外,每天向大家推荐一篇前端相关技术文章,每周五向大家推送周刊汇总内容。
目录
相关文章推荐
庆阳市场监管  ·  第三届消费者权益保护微视频作品展播(二) ·  2 天前  
庆阳市场监管  ·  第三届消费者权益保护微视频作品展播(二) ·  2 天前  
前端大全  ·  湖南大学的 DeepSeek ... ·  3 天前  
前端早读课  ·  【第3470期】利用大型语言模型(LLMs) ... ·  2 天前  
安徽工信  ·  【数字化转型·安徽时刻】智能感知 ... ·  3 天前  
安徽工信  ·  【数字化转型·安徽时刻】智能感知 ... ·  3 天前  
51好读  ›  专栏  ›  奇舞周刊

如果你的网站没有JavaScript

奇舞周刊  · 公众号  · 前端  · 2017-10-26 19:04

正文

编者按:本文由橙橙橙在众成翻译平台上翻译。

我们有很多理由需要好好考虑一下JavaScript存在的意义(它做了什么,怎么做的以及它有多重要)。

如今,超过一半的网络流量来自移动设备,但这些设备的许多操作都是在极其不稳定的网络连接下进行的,例如,你想要在10秒内单独加载完毕脚本文件几乎是不可能的。

如果您正在使用单页应用,因为没有合理的内容反馈,这可能比您想象的要大得多 - 用户将长时间只能看到部分内容的白屏。

毫无疑问,性能很重要。但JavaScript对我们的网站有什么常见的负面影响呢?我们目前又应该如何评估性能呢?

让我们简单(但是有建设性)地了解一下JavaScript的性能花销

我们在评估JavaScript的性能影响时,通常会关注以下几点:

  • 页面中阻塞渲染的脚本文件的数量

  • 脚本下载所需的时间以及传输的数据量

但是我们经常忽略的是脚本加载之后发生的事情......

一旦设备下载了脚本,就必须对其进行解析,转换为字节码,编译并执行。

正是因为不同的设备解析和编译所消耗的时间长短各有不同,导致了当你在3000美元的MacBook和使用两年的智能机上访问同一个网站时速度会有天壤之别。

上述图形比较了常规桌面浏览器与低端移动设备上的Chrome解析/编译时间。这张图片引用自 Addy Osmani 的优秀文章“ JavaScript Start-up Performance ”。


为了搞清楚“ 这个网站究竟可以有多快? ”这个问题,我们作了一个实验,移除了所有脚本从而建立了一个 性能基线

Calibre 这个工具旨在帮助团队更好地了解性能和用户体验领域,您可以直接将您的站点分别在有无JS文件的环境下进行比较,作为 Test Profile (测试配置文件)。

💥现在您进行有无使用JavaScript两种情况的测试

我启用了禁用脚本的功能,并对一些热门网站在是否使用JavaScript两种情景下进行了测试。

测试的结果相当惊人。下面是卫报网站( The Guardian )的测试结果:







请到「今天看啥」查看全文