首页 > web前端 > js教程 > 怎样优化自己的JavaScript代码

怎样优化自己的JavaScript代码

php中世界最好的语言
发布: 2017-11-18 15:37:07
原创
1866 人浏览过

大家写JS的都知道,同一种效果有很多种写法,结果可以相同但是步奏却不同的列子比比皆是,但是虽然效果你是写出来了,但是页面的性能却大大降低,现在的开发,脚本性能的提升变得越来越重要。怎样优化自己的JavaScript代码?俩点之间的那条直线到底要怎样画才最短?今天就给大家总结归纳一下,如何最优化的写出自己的JavaScript代码。

传统的 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

动态创建

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板