摘要：高级开发人员可能会仔细分析他们的捆绑包，以帮助确定减少不必要依赖。在运行过程中，长时间运行的可以阻塞主线程导致页面没有响应。然后当最终被取出时，附加事件请注意这有内在的花销。发送一个最小功能的页面包含实行当前功能的。保持低这些问题。
原文
当我们构建的网页大量依赖于Javascript，我们有些时候需要研究那些不太容易看得见的消耗。在这篇文章中,我将介绍为什么一点规则可以帮助如果你想让你的网站加载&是交互式快速移动设备上。
Network 网络当大多数的开发者考虑Javascript的代价时，他们主要考虑的是下载和实行的消耗。在线上派遣更多的字节的JavaScript需要更长的时间用户的连接。https://cdn-images-1.medium.c...*U00XcnhqoczTuJ8NH8UhOw.png
这是一个问题,即使在发达国家,作为有效的网络连接类型用户可能不会是3g, 4g或WiFi。你可能是在一个咖啡店连着2G的热点。
你可以减少网络传输Javascript带来的代价：
只传输用户需要的 代码分离可以起效。
使用minify文件（ babel-minify or uglify-es for ES2015）
压缩（Brotli, gzip or Zopfli ) Brotli对gzip在压缩比例上效果显著。 它帮助CertSimple节约了17%的JS字节和LinkedIn节约了4%的加载时间。
移除不需要的代码 DevTools检测代码覆盖率。对于多带带的代码 如 tree-shaking, Closure Compiler的高级优化，库插件 lodash-babel-plugin，Webpack的ContextReplacementPlugin像Moment.js 使用babel-preset-env & browserlist来避免在现代浏览器中已经被转换的特性。高级开发人员可能会仔细分析他们的Webpack捆绑包，以帮助确定减少不必要依赖。
缓存来减少网络传输 确定脚本的最佳生存期(max - age)&提供验证令牌(ETag)，以避免传输未更改的字节。服务人员缓存可以使您的应用程序网络具有弹性，并使您能够访问V8的代码缓存等特性。了解关于文件名散列的长期缓存。
工具(https://cdn-images-1.medium.c...*8Spf9To8dzTG3Xy9s57oVA.png)
Parse/Compile 解析一旦下载下来，JavaScript最大的开销之一就是使用JS引擎来解析/编译此代码。在Chrome DevTools中，解析和编译是性能面板中黄色“脚本”时间的一部分。
自底向上/调用树允许查看准确的解析/编译时间:
https://cdn-images-1.medium.c...*GdrVt_BTTzzBOIoyZZsQZQ.png
为什么这是一个问题？
https://cdn-images-1.medium.c...*Dirw7RdQj9Dktc-Ny6-xbA.png
https://cdn-images-1.medium.c...*Dirw7RdQj9Dktc-Ny6-xbA.png
花很长时间解析/编译代码会极大地延迟用户与站点交互的速度。您发送的JavaScript越多，在您的站点进行交互之前解析和编译它的时间就越长。
https://cdn-images-1.medium.c...*6Y665hpxfWNMu2EXu3VGlw.png
Byte-for-byte, JavaScript is more expensive for the browser to process than the equivalently sized image or Web Font — Tom Dale
意思就是 对于浏览器来说，JS比同等大小的图片和web字体更昂贵。
与JavaScript相比，处理相当大小的图像需要花费大量的成本(它们仍然需要被解码!)，但是在普通的移动硬件上，JS更有可能对页面的交互性产生负面影响。
JS VS image: https://cdn-images-1.medium.c...*PRVzNizF9jQ_QADF5lQHpA.png
当我们讨论解析和编译速度慢时，执行环境很重要，我们讨论的普通手机。用户可以是拥有慢CPU和GPU的手机没有L2/L3缓存，甚至可能是内存受限。
Network capabilities and device capabilities don’t always match up. A user with an amazing Fiber connection doesn’t necessarily have the best CPU to parse and evaluate JavaScript sent to their device. This is also true in reverse..a terrible network connection, but a blazing fast CPU. — Kristofer Baxter, LinkedIn
JavaScript中启动性能,我注意到在低,高端的硬件上解析~ 1 mb解压(简单的)JavaScript的成本。在市场上最快的手机和普通手机之间解析/编译代码存在有2-5x的时间差异。
真实的网站如CNN，在高端手机iPhone8上花费约4s解析和编译CNN的JS，而普通手机（moto G4) 花费约13s.这速度可以显著影响用户与这个网站的交互。
这强调了平均测试硬件的重要性(如Moto G4)而不是你口袋里的手机。然而环境问题:优化设备和网络环境的用户。
分析可以提供深入了解实际用户访问你的网站使用移动设备。这可以提供机会了解真正约束CPU /GPU他们的操作。
Are we really sending down too much JavaScript?
使用HTTP存档(~ 500 k网站)来分析JavaScript在移动设备上的状态,我们可以看到50%的网站花费14秒去响应交互。这些网站仅仅为了解析和编译JS花了4秒。
https://cdn-images-1.medium.c...*sVgunAoet0i5FWEI9NSyMg.png
从页面中删除非关键的JavaScript可以减少传输时间、cpu密集型解析和编译以及潜在的内存开销。这也有助于让你的页面更快捷。
执行时间 Execution Time执行时间:https://cdn-images-1.medium.c...*ec0wEKKVl7iQidBks3oDKg.png
不仅仅是解析和编译花费时间。 JavaScript执行(运行代码一次解析/编译)的操作,必须在主线程上。 长的执行时间也可以推出用户于这个网站的交互时间。
If script executes for more than 50ms, time-to-interactive is delayed by the entire amount of time it takes to download, compile, and execute the JS — Alex Russell
为了解决这个问题，Javascript能从小块中获益，以避免锁定主线程。探索你是否能减少在执行过程中完成的工作量。
模式用于减少JS的代价当你试图保持解析JavaScript /编译&网络传输时间慢,模式像基于路径分割或PRPL可以起到帮助。
PRPL是通过积极互动的模式,优化代码分隔和缓存。
PRPL 模式
https://cdn-images-1.medium.c...*VgdNbnl08gcetpqE1t9P9w.png
让我们来可视化下它带来的影响。
我们可以分析普通手机上的网站加载时间和使用V8运行回调的渐进式应用。我们可以看到解析时间(橙色所示)是一个重要的部分,很多的这些网站自由支配自己的时间
wego 网站是使用了PRPL， 设法保持低解析时间的路线,让互动非常快。面的许多其他网站采用代码分隔和绩效预算试图降低JS成本。
其他花销JS在其他方面影响网页性能：
内存 页面会出现闪避或由于GC(垃圾收集)带来的经常性暂停。当浏览器回收内存,JS执行停了下来，所以浏览器经常收集垃圾可以暂停执行比我们可能更频繁。避免内存泄漏和频繁的gc暂停继续页面闪避。
在运行过程中，长时间运行的JavaScript可以阻塞主线程导致页面没有响应。分割成小块(使用requestAnimationFrame()或requestIdleCallback(调度))可以最小化响应问题
进步的Bootstrapping许多网站优化内容的可见性是以昂贵的交互为代价。当你有大量的JS块时，为了获得快速的渲染，开发者常常采用server-side渲染方式。然后当JS最终被取出时，upgrade附加事件？？
请注意： 这有内在的花销。1）通常发送更大的HTML响应,可以推动我们的交互性 2）可以使用户在一个恐怖谷理论？？ 一半的性能是不能实际交互的要等到JS完全处理结束。
Progressive Bootstrapping可能是一个好方法。发送一个最小功能的页面（包含实行当前功能的JS/HTML/CSS）。当更多的资源到达时，应用可以lazy-load 和释放更多的特征。
合理的加载代码是一个圣杯。PRPL和渐进的引导模式可以实现这种想法。
总结传输大小对低端网络至关重要。解析时间为CPU绑定的设备是很重要的。保持低这些问题。
团队发现采用严格的绩效预算成功地减少了他们的JavaScript传输和解析/编译时间。Alex Russell’s Can yo afford it?: Real-world Web Performance Budgets
如果你在构建一个目标设备是移动端的，尽力发展典型的硬件上,降低你的JavaScript解析/编译时间,采用绩效预算,以确保你的团队能够关注他们的JavaScript成本。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90138.html
摘要：例如可以用构造函数实现单例模式。例如当这个构造函数被调用，它会检查是否存在。工厂模式工厂模式使用工厂方法创建对象，而不指定所创建对象的确切类或构造函数。虽然了解审设计模式很重要，但是不要过度使用它们。 By Sukhjinder Arora | Oct 16, 2018 原文 当你开始了一个新项目，你不会马上开始编写代码。第一步，你必须定义这个项目解决什么问题和适用范围，然后列出这个项...
摘要：动态规划复杂度时间空间思路直到房子，其最小的涂色开销是直到房子的最小涂色开销，加上房子本身的涂色开销。我们在原数组上修改，可以做到不用空间。代码找出最小和次小的，最小的要记录下标，方便下一轮判断 Paint House There are a row of n houses, each house can be painted with one of the three colors...
摘要：题目解答这类题还是先找临时的结果，由临时的结果最终推出最终解。比如说用存到个的时候最小的但是到第个的时候，有三种情况涂当我涂红的时候，前面一个只能涂蓝或者绿，所以我只能加上这两种情况的最小值，作为此次计算的最小值，以此类推。 题目：here are a row of n houses, each house can be painted with one of the three co...
摘要：线性循环神经网络这部分教程我们来设计一个简单的模型，这个模型的输入是一个二进制的数据流，任务是去计算这个二进制的数据流中存在几个。 作者：chen_h微信号 & QQ：862251340微信公众号：coderpai简书地址：https://www.jianshu.com/p/160... 这篇教程是翻译Peter Roelants写的循环神经网络教程，作者已经授权翻译，这是原文。 该...
摘要：题目解答利用的思路，只不过把三种颜色换成了种颜色，所以是如何把它的复杂度降到那么就是如果将颜色的部分只扫一遍。参考的里只需要记录下每个的最小的两个颜色。 题目：There are a row of n houses, each house can be painted with one of the k colors. The cost of painting each house w...
阅读 2621·2021-11-22 09:34
阅读 968·2021-11-19 09:40
阅读 3115·2021-10-14 09:43
阅读 3440·2021-09-23 11:22
阅读 1478·2021-08-31 09:39
阅读 649·2019-08-30 15:55
阅读 1237·2019-08-30 15:54
阅读 722·2019-08-30 15:53
