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


相关文章
|
11天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
4天前
|
缓存 JavaScript 前端开发
介绍一下 JavaScript 中数组方法的常见优化技巧
通过合理运用这些优化技巧,可以提高 JavaScript 中数组方法的执行效率,提升代码的整体性能。在实际开发中,需要根据具体的业务场景和数据特点选择合适的优化方法。
12 6
|
2天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
10天前
|
JSON 监控 JavaScript
Node.js-API 限流与日志优化
Node.js-API 限流与日志优化
|
19天前
|
存储 JavaScript 前端开发
JavaScript垃圾回收机制与优化
【10月更文挑战第21】JavaScript垃圾回收机制与优化
25 5
|
2月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
142 11
|
2月前
|
存储 缓存 JavaScript
JavaScript 中数组方法的常见优化技巧
JavaScript 中数组方法的常见优化技巧
|
2月前
|
JavaScript 前端开发
用JavaScript脚本将当地时间转换成其它时区
用JavaScript脚本将当地时间转换成其它时区
|
3月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
49 1
|
3月前
|
JSON JavaScript 前端开发
震惊!JS如何悄无声息追踪你的每一步?揭秘页面访问与关闭的超级上报大法,让数据说话,优化体验不再难!
【8月更文挑战第4天】在Web开发中,跟踪用户行为对提升体验与留存至关重要。本文以在线学习平台为例,介绍如何用JavaScript监听页面访问及关闭,并上报数据。通过`window.onload`监测页面加载,记录用户访问;利用`navigator.sendBeacon`在用户离开时发送少量数据至服务器,无需担心请求失败。需注意隐私合规、性能影响及浏览器兼容性。此技术有助于深入理解用户行为,为产品迭代提供依据。
144 8