如何写好 JavaScript （二） ——《高性能 JavaScript》章节总结

最新推荐文章于 2024-10-10 08:17:37 发布

ArtisanLin

最新推荐文章于 2024-10-10 08:17:37 发布

阅读量257

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/xjlinme/article/details/78748007

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript性能优化的关键方面，包括加载与执行管理、Ajax技术、编程最佳实践、构建部署策略及工具使用。强调了避免长时间运行任务的重要性，推荐使用定时器和Web Workers等技术来改善用户体验。

摘要由CSDN通过智能技术生成

6、加载和执行（Loading and Execution）

JavaScript 和用户界面更新在同一个进程中运行，因此一次只能处理一个事情。这意味着当 JavaScript 代码正在运行时，用户界面不能响应输入，反之亦然。高效地管理 UI 线程就是要确保 JavaScript 不能运行太长时间，以免影响用户体验。最后，请牢记住如下几点：

任何 JavaScript 任务都不应当执行超过 100 毫秒。过长的运行时间会导致 UI 更新出现明显的延迟，从而对用户体验产生负面的影响。
JavaScript 运行期间，浏览器响应用户交互的行为存在差异。无论如何，JavaScript 长时间运行将导致用户体验变得混乱和脱节。
定时器可以用来安排代码延迟执行，它使得你可以把长时间运行脚本分解成一系列的任务。
Web Workers 是新版浏览器支持的特征，它允许你在 UI 线程外部执行 JavaScript 代码，从而避免锁定 UI。

Web 应用越复杂，积极主动地管理 UI 线程就越重要。即使 JavaScript 代码再重要，也不应该影响用户体验。

7、Ajax

高性能的 Ajax 包括以下方面：了解你项目的具体需求，选择正确的数据格式与之匹配的传输技术。

作为数据格式，纯文本和 HTML 只适用于特定场合，但它们可以节省客户端的 CPU 周期。XML 被广泛应用而且支持良好，但是它十分笨重且解析缓慢。JSON 是轻量级的，解析速度快（被视为原生代码而不是字符串），通用性与 XML 相当。字符风格的自定义格式十分轻量，在解析大量数据集时非常快，但需要编写额外的服务端程序，并在客户端解析。

当从页面当前所处的域下请求数据时，XHR 提供了最完善的控制和灵活性，尽管它会把接收到的所有数据当成一个字符串，且这有可能降低解析速度。另一方面，动态脚本注入允许跨域请求和本地执行 JavaScript 和 JSON 但是它的接口不那么安全，而且还不能读取头信息或相应代码。Multipart XHR 可以用来减少请求数，并处理一个响应中的各种文件类型，但是它不能缓存接收到的响应。当需要发送数据时，图片信标是一种简单而有效的方法。XHR 还可以用 POST 方法发送大量数据。

除了这些格式和传输技术，还有一些有助于加速你的 Ajax：

减少请求数，可通过合并 JavaScript 和 CSS 文件，或使用 MXHR。
缩短页面的加载时间，页面主要内容加载完成后，用 Ajax 获取那么次要的文件。
确保你的代码错误不会输出给用户，并在服务端处理错误。
知道何时使用成熟的 Ajax 类库，以及何时编写自己的底层 Ajax 代码。

8、编程实践

JavaScript 提出了一些独一无二的性能挑战，这与你组织代码的方式有关。随着 Web 应用变得越来越高级，包含的 JavaScript 代码也越来越多，各种模式和反模式也逐渐出现。为了编写更高效的代码，请牢记以下编程实践：

通过避免使用 eval() 和 Function() 构造器来避免双重求值带来的性能消耗。同样的，给 setTimeout() 和 setInterval() 传递函数而不是字符串作为参数。
尽量使用直接量创建对象和数组。直接量的创建和初始都比非直接量形式要快
避免做重复的工作。当需要检测浏览器时，可使用延迟加载或条件预加载。
在进行数学计算时，考虑使用直接操作数字的二进制形式的位运算。
JavaScript 的原生方法总比你写的任何代码都要快。尽量使用原生方法。

当本书涵盖了大量的计划技术和方法，当把这些方案应用在那些被频繁运行的代码上时，你将会看到显著的性能提升。