一.媒介
本文的上一篇 JavaScript 踩坑心得— 为了高速（上） 主要和人人分享的是 JavaScript 运用过程当中的基本原则以及编写过程当中的心得分享，本文主要和人人聊聊在各个运用场景下的 JavaScript 运用，以及在机能优化方面的优化履历等
二.种种场景下的 JavaScript
1.用于 UI 运用的 JavaScript
与大多数效劳器端言语一样，用于客户端运用的 JavaScript 框架历来就不缺乏。然则，和用在后端运用与效劳中一样，笔者偏好运用较小的模块，将这些小模块组合为框架，从而完成可扩大性，可保护性以及较高的重费用。
而且，由于小模块的特征，后期拍错或许举行机能优化的时刻也会异常轻易，如今国内外针对前端 JavaScript 的机能行动剖析东西也比较成熟了，比方 Browser Insight、APPdynamic、Ruxit，都是不错的挑选
2.构建 Web 运用的 JavaScript
关于 Web 运用，笔者发明将 React 用于完成 UI，Redux 用于状况治理，Joi 用于数据考证，是竖立可扩大客户端运用的最有用手艺基本。如许竖立起来的运用，每每易于支配，测试以及调试
笔者异常喜欢该组合的一点，是他们使得遵照「 JavaScript 的两大支柱」变得更加简朴。从 0.14 版本最先，React 增添了对纯函数的支撑，Redux 也运用了纯函数与可组合的 reducers。看来，运用典范面向对象形式的软弱运用已一去不复返了。
该组合的另一大长处是可用的东西很多。React 与 Redux 都有 Chrome 开辟者东西插件，使得调试与操纵运用变得极为简朴。而诸多支撑模块，比方 React Hot Loader 与 Webpack 也使得回响反映更加实时。笔者发起你细致相识一下这两个模块。
3.构建挪动运用
不言而喻，假如是构建挪动平台的运用，笔者肯定会引荐 React Native。现在，React Native 仅支撑 iOS 与 Android 平台，因而，除非你真的须要 Windows 支撑，笔者会一致引荐 React Native。
另有一个值得一说的就是，如今不论安卓照样 ios 的 APP 机能优化 也异常主要，然则很多公司只注意后端架构、代码质量等题目，却无视了前端编写时可以存在的影响要素。而且，只管 JS 测试关于确保运用准期运转异常主要，但人们却也常常在测试中花去太多时候，并不是说不应当编写测试代码，只是，要警惕过分测试与过分模仿，所以上文提到过的 Browser Insight、newrelic、APPdynamic 等至心都是优化前端不错的挑选。
三.测试用 JavaScript
1.仅测试大众 APIs
经由过程不专注于内部递次，只需不损坏模块内的大众 API，我们就可以为所欲为地转变他们。这意味着，测试的变化无需那末频仍，而且你可以确保自身吸收的数据恰是应当收到的数据。
2.竖立测试框架
说到现实运用的测试模块，笔者近来迷上了 tape 与 nock。有了这两个模块，笔者就可以掩盖 99% 的测试（有时刻，笔者必需自行监控一些数据，并运用 Sinon）。Browser Insight 这款产物不论是线上照样线下，针对前端页面的 JS 毛病都能正确的定位到，准确到代码行，异常轻易。
3.测试用户体验（UX）
假如你在打造 Web 运用，可以会想在尽量多的装备与浏览环境下测试用户体验。为了取得更加直接的回响反映，笔者采用了 Browser Insight，这个东西的优点就是基于实在的用户体验，多维度的定位剖析网站的机能题目，比方剧本毛病、ajax挪用、响应时候散布等板块，而且，这个东西支撑 PC 端、挪动浏览器、挪动微信页面、APP 等多个运用场景，基本上能满足绝大多数场景的运用需求。
四.JavaScript 机能优化误区
1.JavaScript 模块化运用误区
加快 JavaScript 加载和实行的速率，一向是前端优化的一个热门。因而我们先来讲下 JavaScript 模块化手艺的相干学问，愿望经由过程实践来表现模块化手艺在运用时的注意事项，防止滥用。
为何会有模块化手艺？
长久以来，编写 JavaScript 一向以文件为单元，平常一个范例的 JavaScript 功用代码会被放在同一个文件里。在一个页面里，援用的文件平常是写死的，也就是不论页面用不用，只需你引入了这个文件，这个文件就会被加载。
举个例子，我们开辟了一个内容庞杂、功用壮大的页面，JavaScript 文件大到 500K，当页面费力的把这 500K 加载下来，然则用户真正只运用了这 500K 里少少的一部份功用，但我们又不得不把这 500K 加载下来，由于差别的用户运用的功用点可以不一样，我们必需满足一切需求。
而模块化手艺提出 按需加载，也就是当用户触发该功用的时刻，谁人功用才真正的被加载。比如 500K 被拆成了 50 个模块，每一个模块 10K，当用户触发一个功用时，加载 10K，再触发再加载，以如许懒加载的体式格局来加载模块，可以很大的进步响应速率。如许，治理模块懒加载的手艺也随之降生。
模块化手艺并不是随处靠谱!!
之前笔者在网上搜刮到了一个模块化手艺：SeaJS。它是一个遵照 CommonJS 范例的 JavaScript 模块加载框架，可以完成 JavaScript 的模块化开辟及加载机制。与 JQuery 等 JavaScript 框架差别，SeaJS 不会扩大封装言语特征，而只是完成 JavaScript 的模块化及按模块加载。
SeaJS 的主要目标是令 JavaScript 开辟模块化并可以轻松愉悦举行加载，将前端工程师从沉重的 JavaScript 文件及对象依靠处置惩罚中解放出来，可以专注于代码自身的逻辑。说白了就是有 Lazy Load 的特征，用到某模块时，SeaJS 才会去加载模块的 JS 文件。我们可以按功用分别多个模块，触发模块功用时，SeaJS 先加载功用模块的文件，然后实行响应的功用。
这个 SeaJS 具有的特征，初看异常吸引人，它可以说是新定义了一种开辟和治理 JavaScript 文件的形式。遵照这个形式，你会享用起 JavaScript 的开辟。
实践证明，它也确切可以使 JavaScript 模块化，依据功用分别模块，每一个模块对应一个 JavaScript 文件，当实行到模块的功用，或许你须要加载模块时，模块才会被下载，同时不会形成反复下载。这一切看起来云云的合理，云云的顺畅。。。。。
然则在运用后发明了一些 题目：由于当时开辟的网站功用相对简朴，JavaScript 文件并不是异常大，过量的模块，反而会致使总加载的时候变多了。
由因而 Lazy Load 特征，不适合的模块分别致使网站涌现回响反映慢的征象，缘由是得先加载模块的文件，才实行模块的功用。当收集状况不好时，该征象表现的更加严重！！！
可以说，题目出在了对新手艺的不相识上，从而涌现了题目，预期是 SeaJS 可以处置惩罚 JavaScript 优化的题目，由于它具有防止加载不必要模块的功用，结果反而背道而驰。
依据 大功用来分别模块 也是一个不错的尝试。
笔者尝试将一切模块分别为 基本模块 和 功用模块 ，基本模块包含页面头部，尾部相干的大众部份，功用模块则依据前背景分别，前台部份，又依据详细的页面来分别，能兼并到一同的，就兼并成一个模块，增添粒度。结果 JavaScript 文件削减，也达到了预期的结果。
从现实体验来看，关于流量不大的网站来讲，没有必要运用懒加载 JavaScript 的相干手艺，由于自身 JavaScript 文件就不是异常大。因而在网页加载时，就可以够先加载所须要的模块。防止不必要的耽误。
2.JavaScript 的位置题目
这一部份，我们来讲说 JavaScript 的位置题目对网页网站机能的影响。
为何要斟酌位置题目？
实在不论是 CSS 照样 JavaScript，都须要斟酌位置的题目，由于 HTML 的衬着和加载递次是从上往下，也就是假如前面插进去了 JavaScript 的援用，那末必需比及这个 JavaScript 下载终了才会衬着后续的部份。
因而 JavaScript 的插进去位置就成为一个值得斟酌的题目，由于不适合的位置可以引发衬着的耽误等，形成不好的用户体验。
传统计划带来的题目和思索
CSS 放在头部，JavaScript 放在尾部，这是传统的履历，它的优点是可以让页面优先衬着, 从而页面可以疾速显现。
但有现实每每没有我们料想的那末优美。
有的时刻会涌现这么一种状况：当页面已衬着终了时，我们立刻去运用网站的功用，但很多时刻 功用按钮会没有回响反映。缘由也很简朴，就是 JavaScript 放在页面的尾部，还没来得及加载。。。。
这就纠结了。。。。
两种 JavaScript 安排体式格局，一种放在头部，一种放在尾部（临时疏忽部份放在头部，部份放在尾部的体式格局），一个捐躯了衬着速率，一个捐躯了用户体验。所以很多时刻 js 的题目我们须要做衡量。
对平常的小型网站来讲，用户体验题目要远远大于页面衬着的题目，就比方上文提到的那种功用按钮不可用的状况。而且，假如 JavaScript 不是很大的话，放在头部就很好，既不会有太久的页面空缺，也能让其优先加载，两者得到了很好的均衡。
因而，很多履历上的东西并不是相对的，肯定要依据现实的状况，包含功用特性、效劳器收集状况等来综合斟酌。
为此，笔者写下一个自认为较为合理的位置挑选计划，仅供参考。
图 1. 推断 JavaScript 安排位置决策表
从上面的分类引见，我们也可以看出，将功用代码按范例归类到差别的 JavaScript 文件是何等的主要，比方应当放头部和应当放尾部的代码，最好不要兼并在一同,不要比及出题目要优化的时刻再去整顿和重构，如许会增添很多不必要的工作量。
这不仅仅是为自身工作担任，也是为背面要读你代码的新人担任。养成好的设想编码习气，也是手艺积聚的一部份。末了再依据 JavaScript 文件的功用范例，来决定是放在页面的头部照样尾部。
五.如何肯定是否是 JavaScript 的题目？
这个题目笔者在之前看过的的前端高机能优化（一）、（二）中 get 到了新的妙技点，在这里分享给人人。
跟着信息爆炸时期的到来，网站自身机能也深刻影响着公司的抽象、好处等题目。然则大多数前端测试东西都太碎片化，没有办法针对多个运用场景，而且很多都是像 yslow 如许简朴打个分，也不是实在的用户体验。前一段时候在网上找到了一款前端机能优化剖析东西——Browser Insight，内里的功用相称周全，而且可以针对多个运用场景，包含：PC端，挪动微信，挪动浏览器，挪动webview，照样 实在的用户体验，也就是说，用户接见你的网页是什么样的，从这个东西中表现出的就是什么模样的。
基于 JavaScript 这个维度 Bi 做的也是相称雄厚了。
首先是 剧本毛病 板块。Bi 内里可以从差别的时候维度检察被监控页面涌现过的剧本毛病，详细信息包含：发生时候、装备范例、报错的浏览器及其版本号、毛病客栈信息都可以看到，不论是 线上照样线下测试或许页面保护 都是够用了。
不只能看到时候、体系、浏览器等，还可以详细定位到失足的代码行，这个确切很轻易。
图 2.Bi 剧本毛病
其次是页面响应时候板块，这个算是不测的收成了。经由过程响应时候板块内里的慢加载追踪，可以看到本次慢加载的页面资本加载状况，然后我们就知道该优化哪一个页面的哪些 js 、css、img等。
图 3.Bi 资本列表-时序图
六.结语
JavaScript 具有很多奇特的上风，笔者以至敢说，JavaScript 很多是现在最主要的言语，由于它能在险些一切平台上运转，而且可以经由过程高度可重用、可组合的体式格局完成。
然则，不熟悉 JavaScript 机能与题目标开辟者可以很快就会发明，对其代码库举行更转变得更加难题，而且这些转变可以会致使出乎意料的逆反结果。
笔者发起，不要像用其他言语写递次那样编写 JavaScript 递次。尽量应用 JavaScript 独占的机能，建立小而简朴的模块。这有助于你坚持岑寂，并爱上 JavaScript 的壮大功用。
Happy JavaScripting!
注：本文翻译自 Kurtis Kemple 的一篇文章，由小编加了一些自身的意见和意见。
原文地点：https://labs.mlssoccer.com/javascript-at-scale-achieving-high-velocity-160c7d78af03#.egfwqqz0a
Browser Insight 是一个基于实在用户的 Web 前端机能监控平台，可以帮人人定位网站机能瓶颈，网站加快结果可视化；支撑浏览器、微信、App 浏览 HTML 和 HTML5 页面。想浏览更多手艺文章，请接见OneAPM 官方手艺博客。
本文转自 OneAPM 官方博客
