首页 存档 技术 查看内容

如何使JavaScript更高效

2018-3-30 13:00 |来自: 互联网 286 0

摘要: 传统的 Web 页面不会包含很多脚本,至少不会太影响 Web 页面的性能。然而,Web 页面变得越来越像应用程序,脚本对其的影响也越来越大。随着越来越多的应用采用 Web 技术开发,脚本性能的提升就变得越来越重要。 桌 ...

统的 Web 页面不会包含很多脚本,至少不会太影响 Web 页面的性能。然而,Web 页面变得越来越像应用程序,脚本对其的影响也越来越大。随着越来越多的应用采用 Web 技术开发,脚本性能的提升就变得越来越重要。


桌面应用程序通常是用编译器将源代码转换为最终的二进制。编译器在生成最终的应用程序时,可以花费时间,尽可能地对性能进行优化。Web 应用程序就不能这么奢侈了。因为它们需要在多种浏览器、平台和架构上运行,所以不能对它们进行完全地预编译。浏览器会每次取到一个脚本并对其进行解释和编译,然而最终应用程序却要像桌面应用一样迅速加载、运行流畅。它被期望运行于大量各种各样的设备,从普通的台式电脑到手机都包含在内。


浏览器相当擅长实现这个目标,而 Opera 拥有当前浏览器中最快的脚本引擎之一。不过浏览器也有一些局限,这正是 Web 开发者需要关注的。要确保 Web 应用能运行得尽可能的快,这可能只是一个简单循环交换,改变一个合并的样式而不是三个,或者只添加确实会运行到的脚本。


本文会展示一些能提升 Web 应用性能的改变,其范围涉及 ECMAScript JavaScript 的核心语言、DOM 和文件加载。


小贴士



ECMAScript

  • 避免使用 eval 或 Function 构造器

  • 改写 eval

  • 如果你需要函数,使用 function

  • 不要使用 with

  • 不要在要求性能的函数中使用 try-catch-finally

  • 隔离 eval 和 with 的使用

  • 尽量不用全局变量

  • 注意对象的隐式换

  • 在要求性能的函数中避免使用 for-in

  • 使用累加形式连接字符串

  • 基本运算比调用函数更快

  • 为 setTimeout() 和 setInterval() 传入函数而不是字符串


DOM

  • 重绘和重排

  • 将重排数量降到最低

  • 最小重排

  • 修改文档树

  • 修改不可见的元素

  • 测量

  • 一次改变多项样式

  • 平滑度换速度

  • 避免检索大量节点

  • 通过 XPath 提升速度

  • 避免在遍历 DOM 的时候进行修改

  • 在脚本中用变量缓存 DOM 的值


文档加载

  • 避免在多个文档间保持同一个引用

  • 快速历史导航

  • 使用 XMLHttpRequest

  • 动态创建

声明:文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

相关分类

返回顶部