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


相关文章
|
7月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
375 69
|
7月前
|
监控 算法 JavaScript
公司局域网管理视域下 Node.js 图算法的深度应用研究:拓扑结构建模与流量优化策略探析
本文探讨了图论算法在公司局域网管理中的应用,针对设备互联复杂、流量调度低效及安全监控困难等问题,提出基于图论的解决方案。通过节点与边建模局域网拓扑结构,利用DFS/BFS实现设备快速发现,Dijkstra算法优化流量路径,社区检测算法识别安全风险。结合WorkWin软件实例,展示了算法在设备管理、流量调度与安全监控中的价值,为智能化局域网管理提供了理论与实践指导。
194 3
|
10月前
|
前端开发 JavaScript Java
JavaScript闭包深入剖析:性能剖析与优化技巧
JavaScript 闭包是强大而灵活的特性,广泛应用于数据封装、函数柯里化和事件处理等场景。闭包通过保存外部作用域的变量,实现了私有变量和方法的创建,提升了代码的安全性和可维护性。然而,闭包也可能带来性能问题,如内存泄漏和执行效率下降。为优化闭包性能,建议采取以下策略:及时解除对不再使用的闭包变量的引用,减少闭包的创建次数,使用 WeakMap 管理弱引用,以及优化闭包结构以减少作用域链查找的开销。在实际开发中,无论是 Web 前端还是 Node.js 后端,这些优化措施都能显著提升程序的性能和稳定性。
249 70
|
6月前
|
JavaScript
JS代码的一些常用优化写法
JS代码的一些常用优化写法
118 0
|
7月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。
|
9月前
|
前端开发 JavaScript
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
658 11
|
11月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
325 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
9月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
JavaScript Shell C#
多种脚本批量下载 Docker 镜像:Shell、PowerShell、Node.js 和 C#
本项目提供多种脚本(Shell、PowerShell、Node.js 和 C#)用于批量下载 Docker 镜像。配置文件 `docker-images.txt` 列出需要下载的镜像及其标签。各脚本首先检查 Docker 是否安装,接着读取配置文件并逐行处理,跳过空行和注释行,提取镜像名称和标签,调用 `docker pull` 命令下载镜像,并输出下载结果。使用时需创建配置文件并运行相应脚本。C# 版本需安装 .NET 8 runtime。
671 3
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
566 62