认识达内从这里开始

我们在上文中给大家简单介绍了web前端编程开发中JavaScript编程代码的应用问题，而今天我们就再来了解一下，JavaScript编程代码优化的常用三种方法。

1.尽可能遵从工作线程

主线程被阻塞会导致用户交互的延迟，所以应该尽可能减少主线程上的工作。关键就是要识别并避免会导致主线程中某些任务长时间运行的解析行为。

这种启发式超出了解析器的优化范围。例如，用户控制的JavaScript代码段可以使用webworkers达到相同的效果。你可以阅读实时处理应用和在angular中使用webworkers来了解更多信息。

避免使用大量的内联脚本

内联脚本是在主线程中处理的，根据之前的说法，应该尽量避免这样做。事实上，除了异步和延迟加载之外，任何JavaScript的加载都会阻塞主线程。

避免嵌套外层函数

懒编译也是发生在主线程上的。不过，如果处理得当的话，懒解析可以加快启动速度。想要强制进行全解析的话，可以使用诸如optimize.js(已经不维护)这样的工具来决定进行全解析或者懒解析。

分解超过100kB的文件

将大文件分解成小文件以并行脚本的加载速度。“2019年JavaScript的性能开销”一文比较了Facebook网站和Reddit网站的文件大小。前者通过在300多个请求中拆分大约6MB的JavaScript，成功将解析和编译工作在主线程上的占比控制到30%;相反，Reddit的主线程上进行解析和编译工作的达到了将近80%。

2.使用JSON而不是对象字面量——偶尔

在JavaScript中，解析JSON比解析对象字面量来得更加高效。parsingbenchmark已经证实了这一点。在不同的主流JavaScript执行引擎中分别解析一个8MB大小的文件，前者的解析速度高可以提升2倍。

2019年谷歌开发者大会也讨论过JSON解析如此高效的两个原因：

JSON是单字符串token，而对象字面量可能包含大量的嵌套对象和token;

语法对上下文是敏感的。解析器逐字检查源代码，并不知道某个代码块是一个对象字面量。而左大括号不仅可以表明它是一个对象字面量，还可以表明它是一个解构对象或者箭头函数。

不过，值得注意的是，JSON.parse同样会阻塞主线程。对于超过1MB的文件，可以使用FlatBuffers提高解析效率。

3.代码缓存

你可以通过完全规避解析来提高解析效率。对于服务端编译来说，WebAssembly(WASM)是个不错的选择。然而，它没办法替代JavaScript。对于JS，更合适的方法是代码缓存。

值得注意的是，缓存并不是任何时候都生效的。在执行结束之前编译的任何代码都会被缓存——这意味着处理器、监听器等不会被缓存。为了代码缓存，你必须执行结束之前编译的代码数量。其中一个方法就是使用立即执行函数(IIFE)启发式：解析器会通过启发式的方法标识出这些IIFE函数，它们会在稍后立即被编译。因此，使用启发式的方法可以确保一个函数在脚本执行结束之前被编译。

此外，缓存是基于单个脚本执行的。这意味着更新脚本将会使缓存失效。V8团队建议可以分割脚本或者合并脚本，从而实现代码缓存。但是，这两个建议是互相矛盾的。你可以阅读“JavaScript开发中的代码缓存”来了解更多代码缓存相关的信息。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。