JavaScript 脚本优化的 10 个技巧

简介: 现在WEB应用包括网站,几乎都离不开 JavaScript ,可以大胆的说没有不使用JavaScript的WEB应用 。在本文中,将总结一些JavaScript 在 WEB 渲染速度和性能方面优化技巧。

现在WEB应用包括网站,几乎都离不开 JavaScript ,可以大胆的说没有不使用JavaScript的WEB应用 。在本文中,将总结一些JavaScript 在 WEB 渲染速度和性能方面优化技巧。

1. 将 JavaScript 提取到单独的文件中

将脚本提取为独立的.js 文件有很多优点,其中可以明显减小 HTML 代码的大小。

2. 异步

async 属性告诉浏览器该脚本不会影响 DOMCSSOM,并且只能在整个页面加载和呈现后进行处理。async 属性仅适用于放置在单独文件中的脚本。

3. 阻塞 JavaScript

阻塞 JavaScript 是一个必须在构建 CSSOM 树之前执行的脚本,JS 脚本会阻止渲染,无论是作为带有 src 属性的标记还是作为内联脚本。

4. defer

defer 属性的工作方式与在正文结束标记之前添加的锁定脚本完全一样。它有效是因为即使带有 src 属性的 <script> 标记附加到页眉,它也会被添加到页脚。defer 属性可能会导致脚本放置在更高的位置,例如,在 body 标签中,这可能会停止工作,具体取决于添加了 defer 的脚本。

5. 压缩 JavaScript 脚本

通过删除多余的字符,例如空格、制表符、换行符甚至整个注释块,可以最小化任何文本资源。与 HTML 或 CSS 代码相比,JavaScript 代码可以被最小化。由于许多语法缩短技术,我们在这方面有更多的可能性。函数和变量的名称可以转换为单字母等价物,这不会改变编程功能的含义。阅读有关最小化文本资源和自动化此过程的技术的更多信息。

6. 浏览器缓存(Cache-Control、Expires、E-Tag)

下载后,包含 JavaScript 代码的 .js 文件可以保存在浏览器的缓存中:通常是在本地磁盘上。下一次子页面访问此文件时,它将不必再次下载并执行昂贵的 HTTP 和下载请求。 服务器可能会发送一个 Cache-ControlExpires 标头,它告诉浏览器复制文件并在指定的时间段内使用未更改的版本。

7. 压缩

JavaScript 文件是文本,众所周知,文本可以使用标准数据压缩算法进行压缩,在服务器端使用 BrotliGZPdeflate 等模块执行的压缩对用户是不可见的,并可以节省高达 80% 的流量。Google 开发的 Brotli 模块或传统的 deflateGZIP 模块应默认安装并启用在任何提供 JavaScript 文件和其他文本资源(CSS、XML)的服务器上。

8. 删除未使用的 JavaScript 代码

有时会在没有任何功能的页面上附加 JavaScript 脚本,这些可以是已在另一个子页面上使用的库或已在后续更新中撤回的功能。

9. 对外部服务的请求缓存

如果重复引用它并且知道它不会经常更改,可以将 JSONXML 文件的内容存储在一个临时变量中。

10. 节流

在对延迟加载机制进行编程时可以使用节流技术,包括减少触发触发器的强度,使用带有条件语句和 setTimeout 的简单构造,可以使事件侦听器忽略某些事件,并且该功能仍然有效。

总结

在 JavaScript 方面利用页面优化是值得的,因为以不同方式实现的相同功能可能会显着减慢页面速度或对其加载时间没有影响。


相关文章
|
26天前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
116 62
|
29天前
|
JavaScript 前端开发
如何使用时间切片来优化JavaScript动画的性能?
如何使用时间切片来优化JavaScript动画的性能?
|
22天前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
65 31
|
1月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
1月前
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
1月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
1月前
|
缓存 JavaScript 前端开发
介绍一下 JavaScript 中数组方法的常见优化技巧
通过合理运用这些优化技巧,可以提高 JavaScript 中数组方法的执行效率,提升代码的整体性能。在实际开发中,需要根据具体的业务场景和数据特点选择合适的优化方法。
28 6
|
1月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
1月前
|
JSON 监控 JavaScript
Node.js-API 限流与日志优化
Node.js-API 限流与日志优化
|
2月前
|
存储 JavaScript 前端开发
JavaScript垃圾回收机制与优化
【10月更文挑战第21】JavaScript垃圾回收机制与优化
38 5
下一篇
DataWorks