app解析不会执行js代码_JS解析和执行时间

news/2024/11/22 20:50:37/
app解析不会执行js代码

app解析不会执行js代码

At Velocity NY, Daniel Espeset of Etsy gave a great talk about how Etsy profiles their JavaScript parse and execution time. Even better, after the talk, they released the tool on GitHub.

在纽约Velocity,Etsy的Daniel Espeset进行了精彩的演讲,讨论了Etsy如何配置其JavaScript解析和执行时间。 更好的是,在谈话之后,他们在GitHub上发布了该工具。

Daniel shared a few examples in his deck, but I couldn’t wait to take Daniel’s tool and fire it up on a bunch of random browsers and devices that I have sitting around.

Daniel 在他的平台上分享了一些示例,但是我迫不及待地想要使用Daniel的工具并在我周围坐着的一堆随机浏览器和设备上启动它。

For this test, I decided to profile just jQuery 2.1.1, which weighs in at 88kb when minimized. jQuery was selected for its popularity, not because it’s the worst offender. There are many libraries much worse (hey there Angular and your 120kb payload). The results above are based on the median times taken from 20 tests per browser/device combination.

对于此测试,我决定仅介绍jQuery 2.1.1,将其最小化时的大小为88kb。 选择jQuery是因为其受欢迎程度,并不是因为它是最糟糕的犯罪者。 有很多库要糟得多(嘿,Angular和您的120kb有效负载)。 上面的结果基于每种浏览器/设备组合进行20次测试所获得的中位数时间。

The list of tested devices isn’t exhaustive by any means—I just took some of the ones I have sitting around to try and get a picture of how much parse and execution time would vary.

无论如何,经过测试的设备列表都不是详尽无遗的-我只是坐着一些设备来尝试了解解析和执行时间会有多少变化。

Parse and execution times of minimized jQuery 2.1.1
DeviceBrowserMedian ParseMedian ExecutionMedian Total
Blackberry 9650Default, BB6171ms554ms725ms
UMX U670CAndroid 2.3.6 Browser168ms484ms652ms
Galaxy S3Chrome 3239ms297ms336ms
Galaxy S3UC 8.645ms215ms260ms
Galaxy S3Dolphin 102ms222ms224ms
Kindle TouchKindle 3.0+63ms132ms195ms
Geeksphone PeakFirefox 2551ms109ms160ms
Kindle FireSilk 3.1716ms139ms155ms
Lumia 520IE1097ms56ms153ms
Nexus 4Chrome 3613ms122ms135ms
Galaxy S3Android 4.1.1 Browser3ms125ms128ms
Kindle PaperwhiteKindle 3.0+43ms71ms114ms
Lumia 920IE1070ms37ms107ms
Droid XAndroid 2.3.4 Browser6ms96ms102ms
Nexus 5Chrome 3711ms81ms92ms
iPod TouchiOS 626ms37ms63ms
Nexus 5Firefox 3220ms41ms61ms
Asus X202EIE1031ms14ms45ms
iPad MiniiOS616ms30ms46ms
Macbook Air (2014)Chrome 375ms29ms34ms
Macbook Air (2014)Opera 9.814ms5ms19ms
iPhone 5siOS 72ms16ms18ms
Macbook Air (2014)Firefox 314ms10ms14ms
iPad (4th Gen)iOS 71ms13ms14ms
iPhone 5sChrome 372ms8ms10ms
Macbook Air (2014)Safari 71ms4ms5ms
最小化jQuery 2.1.1的解析和执行时间
设备 浏览器 中位解析 中位执行 中位数总计
黑莓9650 默认BB6 171毫秒 554毫秒 725毫秒
联电U670C Android 2.3.6浏览器 168毫秒 484毫秒 652毫秒
银河S3 镀Chrome32 39毫秒 297毫秒 336毫秒
银河S3 UC 8.6 45毫秒 215毫秒 260毫秒
银河S3 海豚10 2毫秒 222毫秒 224毫秒
Kindle触控 Kindle 3.0+ 63毫秒 132毫秒 195毫秒
极客峰 火狐25 51毫秒 109毫秒 160毫秒
Kindle火 丝绸3.17 16毫秒 139毫秒 155毫秒
Lumia 520 IE10 97毫秒 56毫秒 153毫秒
Nexus 4 镀Chrome36 13毫秒 122毫秒 135毫秒
银河S3 Android 4.1.1浏览器 3毫秒 125毫秒 128毫秒
Kindle Paperwhite Kindle 3.0+ 43毫秒 71毫秒 114毫秒
Lumia 920 IE10 70毫秒 37毫秒 107毫秒
机器人X Android 2.3.4浏览器 6毫秒 96毫秒 102毫秒
Nexus 5 Chrome37 11毫秒 81毫秒 92毫秒
iPod Touch iOS 6 26毫秒 37毫秒 63毫秒
Nexus 5 火狐32 20毫秒 41毫秒 61毫秒
华硕X202E IE10 31毫秒 14毫秒 45毫秒
小型平板电脑 iOS6 16毫秒 30毫秒 46毫秒
Macbook Air(2014) Chrome37 5毫秒 29毫秒 34毫秒
Macbook Air(2014) 歌剧9.8 14毫秒 5毫秒 19毫秒
iPhone 5S IOS 7 2毫秒 16毫秒 18毫秒
Macbook Air(2014) Firefox 31 4毫秒 10毫秒 14毫秒
iPad(第4代) IOS 7 1毫秒 13毫秒 14毫秒
iPhone 5S Chrome37 2毫秒 8毫秒 10毫秒
Macbook Air(2014) Safari 7 1毫秒 4毫秒 5毫秒

As you can see from the table above, even in this small sample size the parsing and execution times varied dramatically from device to device and browser to browser. On powerful devices, like my Macbook Air (2014), parse and execution time was negligible. Powerful mobile devices like the iPhone 5s also fared very well.

从上表中可以看到,即使在这样小的样本量下,每个设备和浏览器之间的解析和执行时间也大不相同。 在功能强大的设备上,例如Macbook Air(2014),解析和执行时间可以忽略不计。 功能强大的移动设备(如iPhone 5s)也表现出色。

But as soon as you moved away from the latest and greatest top-end devices, the ugly truth of JS parse and execution time started to rear its head.

但是,一旦您离开了最新,最好的高端设备,JS解析和执行时间的丑陋事实就开始浮出水面。

On a Blackberry 9650 (running BB6), the combined time to parse and execute jQuery was a whopping 725ms. My UMX running Android 2.3.6 took 652ms. Before you laugh off this little device running the 2.3.6 browser, it’s worth mentioning I bought this a month ago, brand new. It’s a device actively being sold by a few prepaid networks.

在Blackberry 9650(运行BB6)上,解析和执行jQuery的总时间高达725ms。 我的运行Android 2.3.6的UMX花了652毫秒。 在嘲笑这个运行2.3.6浏览器的小设备之前,值得一提的是我一个月前购买的全新设备。 这是一种由一些预付费网络积极销售的设备。

Another interesting note was how significant the impact of hardware has on the timing. The Lumia 520, despite running the same browser as the 920, had a median parse and execution time that was 46% slower than the 920. The Kindle Touch, despite running the same browser as the Paperwhite, was 71% slower than it’s more powerful replacement. How powerful the device was, not just the browser, had a large impact.

另一个有趣的注意事项是硬件对时序的影响有多大。 Lumia 520尽管运行与920相同的浏览器,但解析和执行时间的中值比920慢46%。Kindle Touch尽管与Paperwhite运行相同的浏览器,但比其更强大的功能慢71%。替代。 该设备的功能强大,而不仅仅是浏览器,影响很大。

This is notable because we’re seeing companies such as Mozilla and Google targeting emerging markets with affordable, low-powered devices that otherwise run modern browsers. Those markets are going to dominate internet growth over the next few years, and affordability is a more necessary feature than a souped up device.

值得注意的是,因为我们看到Mozilla和Google等公司针对新兴市场推出了价格低廉的低功耗设备,而这些设备否则会运行现代浏览器。 这些市场将在未来几年内主导互联网的增长,而可负担性是比功能强大的设备更为必要的功能。

In addition, as the cost of technology cheapens, we’re going to continue seeing an incredibly diverse set of connected devices. With endless new form factors being released (even the Android Wear watches quickly got a Chromium based browser), the adage about not knowing where our sites will end up has never been more true.

此外,随着技术成本的降低,我们将继续看到连接设备的多样化集合。 随着无休止的新形式发布(甚至Android Wear手表也很快有了基于Chromium的浏览器 ),关于不知道网站最终位置的说法从未如此真实。

The truly frightening thing about these parse and execution times is that this is for the latest version of jQuery, and only the latest version of jQuery. No older versions. No additional plugins or frameworks. According to the latest run of HTTP Archive, the median JS transfer size is 230kb and this test includes just a fraction of that size. I’m not even asking jQuery to actually do anything. Basically, I’m lobbing the browsers a softball here—these are best case results.

这些解析和执行时间真正令人恐惧的是,这是针对最新版本的jQuery的,并且仅适用于最新版本的jQuery。 没有较旧的版本。 没有其他插件或框架。 根据HTTP Archive的最新运行,中值JS传输大小为230kb,此测试仅包括该大小的一小部分。 我什至不要求jQuery实际上执行任何操作。 基本上,我在这里向浏览器打了个垒球,这是最好的结果。

This re-affirms what many have been arguing for some time: reducing your dependency on JS is not healthy merely for the minor percentage of people who have JS disabled—it improves the experience for everyone. When anything over 100ms stops feeling instantaneous and anything over 1000ms breaks the users flow, taking 700ms to parse your JavaScript cripples the user experience before it really has a chance to get started.

这再次证实了许多 人一段时间以来一直在 争论的问题:减少对JS的依赖并不仅仅对一小部分禁用JS的人来说是不健康的-它可以改善每个人的体验。 当超过100毫秒的任何事物停止瞬时感觉,而超过1000毫秒的任何事物都中断了用户流时,花费700毫秒来解析您JavaScript会使用户体验真正无法开始。

So what’s a web developer to do?

那么,Web开发人员该做什么呢?

  1. Use less JavaScript. This is the simple one. Anything you can offload onto HTML or CSS, do it. JavaScript is fun and awesome but it’s also the most brittle layer of the web stack and, as we’ve seen, can seriously impact performance.

    使用更少JavaScript。 这很简单。 您可以将任何内容卸载到HTML或CSS上。 JavaScript既有趣又很棒,但是它也是Web堆栈中最脆弱的一层,而且正如我们所看到的,它会严重影响性能。

  2. Render on the server If you’re using a client-side MVC framework, make sure you pre-render on the server. If you build a client-side MVC framework and you’re not ensuring those templates can easily be rendered on the server as well, you’re being irresponsible. That’s a bug. A bug that impacts performance, stability and reach.

    在服务器上渲染如果使用的是客户端MVC框架,请确保在服务器上进行预渲染。 如果您构建了客户端MVC框架,但又不能确保也可以轻松地在服务器上呈现这些模板,那么您将是不负责任的。 那是个错误。 影响性能,稳定性和覆盖范围的错误。

  3. Defer all the scripts. Defer every bit of JavaScript that you can. Get it out of the critical path. When it makes sense, take steps to defer the parsing as well. Google had a great post a few years back about how they reduced startup latency for Gmail. One of the things they did was initially comment out blocks of JavaScript so that it wouldn’t be parsed during page load. The result was a 10x reduction in startup latency. That number is probably different on today’s devices, but the approach still stands.

    延迟所有脚本。 尽可能多地利用JavaScript。 使其脱离关键路径。 在有意义的情况下,也应采取步骤来推迟解析。 几年前,Google就如何减少Gmail的启动延迟发表了精彩的文章。 他们做的一件事是最初注释掉JavaScript块,以便在页面加载期间不会对其进行解析。 结果是启动延迟减少了10倍。 在当今的设备上,该数字可能有所不同,但是这种方法仍然有效。

  4. Cut the mustard. I’m a big fan of “cutting the mustard”, an approach made popular by the BBC. This doesn’t solve the problem of low-end devices with modern browsers, but it will make a better experience for people using less capable browsers. Better yet, by consciously deciding not to overwhelm less capable browsers with excess scripts you not only provide a better experience for those users, but you reduce the need for extra polyfills and frameworks for modern browsers as well. On one recent project where we did this, the entire JavaScript for the site was about 43% of the size of jQuery alone!

    切芥末。 我是“切芥末”的忠实拥护者 ,这是英国广播公司流行的一种方法。 这不能解决带有现代浏览器的低端设备的问题,但对于使用功能较弱的浏览器的人来说,它将提供更好的体验。 更好的是,通过有意识地决定不使用过多的脚本淹没功能较弱的浏览器,不仅为这些用户提供了更好的体验,而且还减少了现代浏览器对额外的polyfill和框架的需求。 在我们最近进行的一个项目中,该网站的整个JavaScript大约只有jQuery大小的43%!

There are certainly cases to be made for JS libraries, client-side MVC frameworks, and the like, but providing a quality, performant experience across a variety of devices and browsers requires that we take special care to ensure that the initial rendering is not reliant on them. Frameworks and libraries should be carefully considered additions, not the default.

JS库,客户端MVC框架等当然会出现情况,但是要在各种设备和浏览器上提供高质量,高性能的体验,我们需要格外小心,以确保初始渲染不会依赖在他们。 应该仔细考虑框架和库的添加, 而不是默认值 。

When you consider the combination of weight, parse time and execution time, it becomes pretty clear that optimizing your JS and reducing your site’s reliance on it is one of the most impactful optimizations you can make.

当您考虑权重,解析时间和执行时间的组合时,很明显,优化JS并减少对站点的依赖是您可以做出的最具影响力的优化之一。

翻译自: https://timkadlec.com/2014/09/js-parse-and-execution-time/

app解析不会执行js代码


http://www.ppmy.cn/news/254374.html

相关文章

Android手机ram大小,什么是手机RAM内存?手机RAM内存越大越好吗?

什么是手机RAM内存?手机RAM内存越大越好吗?所谓RAM内存就是运行内存,是用于临时存储数据用的,和手机ROM内存不一样,ROM内存是长期存储数据的。相信很多伙伴对于手机RAM内存都不尽了解,今天小编就来给大家科普下手机RAM内存知识。 什么是手机RAM内存? 为了照顾小白用户,…

微软 WPC 2014 合作伙伴keynote

本周一,2014 微软WPC (Worldwide Partner Conference) 合作者伙伴大会在美国华盛顿开幕,微软除了介绍了Azure、云端化的Office 365和Windows Phone移动平台之外,还简单提及了下一代Windows操作系统Windows 9的发展规划。 做为微软金牌合作伙…

zTree:JQuery树形插件使用示例

最近在做一个Web平台,其中想用一个树形展示。上网搜了搜基于JQuery的树形插件还真不少,最后选定zTree。关于zTree这里只是简单给出一个使用的示例。 首先声明zTree的配置信息,然后声明zTree的节点信息,最后初始化zTree。 下面给…

Linux日志

rsyslog系统日志管理 哪类程序产生的什么日志放到什么地方 处理日志的进程 第一类: rsyslogd:系统专职日志程序,处理绝大部分日志记录,系统操作相关的信息,如登录信息,程序启动关闭相关信息&#xff0c…

java设计模式(十四)模板方法

目录 定义模式结构角色职责代码实现适用场景优缺点 定义 模板方法模式(Template Method Pattern),又叫模板模式(Template Pattern), 指在一个抽象类公开定义了执行它的方法的模板。它的子类可以按需要重写方法实现,但调用将以抽象类中定义的…

【android】反编译工具以及使用方式分步骤描述

以下是对常见 Android 反编译工具的使用方式分步骤描述: Apktool 的使用方式: 步骤一:下载并安装 Apktool,可以从官方网站(https://ibotpeaches.github.io/Apktool/)下载最新版本的 Apktool。 步骤二&am…

$2$驱动模块

目录 1.驱动模块(驱动程序的框架) 2.内核中的打印函数(编写第一个驱动程序) Source Insight 使用: 打印函数编写 分析 3.驱动的多文件编译 4.模块传递参数 安装好驱动之后如何传参? 多驱动之间调用…

用anaconda3安装tensorflow的gpu版(显卡是gtx770,操作系统是window7,cuda9.0,cudnn9.0-v7.2)

虽然快毕业了,但是还是想玩玩深度学习,搞了块gtx770随便玩一下。 1.官网下载最新版的anaconda3 2.下载cuda9.0 (之前一直在纠结是否需要vs,问过朋友之后,表示其实不需要。可能需要一些特殊功能的时候需要,这个以后碰…