如果你的网站没有 JavaScript

19-11-19    953次

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


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


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


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


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

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


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


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




但是大家经常忽略的是脚本加载之后发生的事情……


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


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


 


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


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


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


网站建设


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


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


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


ABUIABADGAAgi7CO2AUox9iCmAYwpAQ40gM.gif


左图:无JS,3G连接,苹果 6 – 所有内容在不到5秒内完全可见。右图:3G连接,苹果 6 – 所有内容约10秒钟完全可见,onLoad事件在大约第20秒时被调用。


页面完全可见所需的时间

先来看“无js”版本(左图) – 所有内容在5秒钟内可见。使用3G网络访问时这个速度很令人印象深刻。


然而,“有js”版本的情况是相当不同的 – 头条文章的图片在第9.5秒才出现,后面是有一些细微的变化(包括天气,字体,最后是“头条资讯”文章),一直到20秒左右才全部展示完毕。


数据

当允许加载JavaScript时,卫报网站发送了超过115个请求,总量是3.41Mb,而禁用JavaScript时,从61个请求中传输的数据减少了超过50%-总量只有1.59MB。显然天气,字体和头条文章的链接这几个地方消耗了很多成本。


很明显,传输的数据并不全是JS脚本,还包括额外的内容,图标,甚至一些样式 – 但情况是清楚的:这些内容不是必须的,并且它们破坏了这个页面的性能。




以上【 如果你的网站没有 JavaScript 】的内容由达设互动()为您提供,本文网址 : /news/121.html ,转载请注明出处!更多有关太阳诚娱乐网,微信小程序、电商平台建设、系统开发等互联网应用服务都可以联系大家。热线:130 7784 6582

扫描二维码微信聊天

在线咨询
联系电话

130 7784 6582

XML 地图 | Sitemap 地图