macfee怎么生成释放代码_让你的网页不再卡顿！JavaScript代码优化5点小技巧一定掌握！...

点击蓝字 ｜关注我们

用户访问网站设备的硬件规格我们没法控制，终端用户访问网站的设备或高端或低端，互联网连接或好或差，这意味着我们必须尽可能优化网站，以满足所有用户的需求。而与此同时，据W3Tech统计，全世界将近96%的网站都在使用JavaScript，JavaScript已成为有史以来最热门的编程语言之一。

以下是一些小贴士，以供你更好地优化JavaScript代码，展现更好的性能。

顺便一提，请确保共享和重用JS组件，以达成高质量代码(需要时间来生成)和合理交付时间之间的恰当平衡。可以使用Bit (Github)之类的流行工具将项目中的组件(vanilla JS，TS，React，Vue等)共享到Bit的组件中心，这样不会浪费太多时间。

1.删除不用的代码和功能

应用程序包含的代码越多，需要传输到客户端的数据就越多。浏览器解析代码所需时间也越长，有时有些功能可能根本没有用到。最好只在开发环境中保留这些额外的代码，而不要将其用于生产环境，这样就不会给客户端的浏览器带来无用代码的负担。

不断询问自己某个功能、特性或代码是否必要。可以手动或使用Uglify或google’s closurecompiler等工具移除不用的代码，甚至可以用一种名为摇树优化(tree shaking)的技术，从应用程序中移除不用的代码。

Webpack之类的打包器便提供这种技术，如果想删除不用的npm包，可以使用npm prune命令。

2.随时缓存

缓存通过减少延迟和网络流量来提高网站的速度和性能，从而缩短显示资源所需的时间。这可以通过缓存应用程序接口(Cache API)或超文本传输协议缓存(HTTPcaching)来实现。在满足特定条件(如发布新内容)时，上述缓存机制能够处理和重新生成缓存。

3.避免内存泄漏

高级语言JS负责几个底层管理，比如内存管理。垃圾回收机制在大多数编程语言中十分常见。通俗来说，垃圾回收机制就是简单地收集和释放已经分配给目标对象的内存，而这些内存并没有在程序的任何部分使用。C语言之类的编程语言中，开发人员必须使用malloc()和dealloc()函数来分配和释放内存。

尽管JavaScript自动执行垃圾回收，但有时它并不完美。

JavaScript ES6中，映射(Map)和集合(Set)和它们的“较弱”的同胞一起引入。这种“较弱”的同类被称为WeakMap和WeakSet，它们对对象的引用“较弱”，允许对未引用的值进行垃圾回收，从而防止内存泄漏。

4.使用代码拆分

如果你有过谷歌灯塔(Light House)的经验，必然会熟悉一个名为“初始内容渲染(first contentful paint)”的指标。这是灯塔报告性能部分跟踪的六个指标之一。

初始内容渲染(FCP)测量的是用户导航到页面后，浏览器渲染第一个DOM内容所需的时间。页面上的图像、非白色元素和可缩放矢量图形(SVG)被视为DOM内容，iframe中的任何内容都不含在内。

获得更高FCP分数的最佳方式之一是使用代码拆分。代码拆分是一种在开始时只向用户发送必要模块的技术。通过减小最初传输的有效载荷的大小而极大影响FCP分数。热门的模块管理器，如webpack，提供代码拆分功能。也可在本机ES模块的帮助下加载单个模块。

5.使用Web Workers在后台运行CPU密集型任务

Web Workers允许在后台线程中运行脚本。如果你有一些高强度的任务，你可以把它们分配给Web Workers，Web Workers可以在不干扰用户界面的情况下运行这些任务。创建之后，Web Workers可以向JavaScript代码指定的事件处理程序发送消息来与该代码进行通信，反之亦然。

往期推荐

《大学生就业能力三支柱》分析模型

思途|2007班青岛大学部分优秀毕业生分享

思途|2007班山东理工大学部分优秀毕业生分享

免费资源

零基础想要学习Java？那就来看看这篇指南吧！(含学习路线图)

UID零基础入门教程(含学习路线图)，萌新必看！

零基础学习HTML5，你也可以！(含学习路线图)

点击下方“阅读原文”获取海量内部学习资源！