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

怎样优化自己的JavaScript代码

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

大家写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

动态创建

最新问题
怎么实现 JavaScript点与圆的位置关系
来自于 1970-01-01 08:00:00
0
0
0
JavaScript钩子函数是什么?
来自于 1970-01-01 08:00:00
0
0
0
c++ 调用javascript
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板