JavaScript优化(一)

加载和执行

当浏览器在执行JavaScript代码时,不能同时做其他事情。由于脚本会阻塞页面其他资源下载,因此推荐将所有的<script>标签尽可能放到<body>标签的底部,以尽量减少对整个页面下载的影响。

无阻塞的脚本
在页面加载完成后才加载JavaScript代码。用专业术语来说,这意味着在window对象的load事件触发后再下载脚本。
延迟的脚本
<script>设置defer属性,defer:设置或返回当前页面完成解析后是否执行脚本。

  • </body>闭合标签之前,将所有的<script>标签放到页面底部。这能确保在脚本执行前页面已经完成了渲染。
  • 合并脚本。页面中的<script>标签越少,加载也就越快,响应也就越迅速。无论内链脚本还是外链脚本都是如此。
  • 有多种无阻塞下载JavaScript代码并注入页面中。
    • 使用<script>标签的defer属性
    • 使用动态创建的<script>元素来下载并执行代码
    • 使用XHR对象下载JavaScript代码并注入页面

数据访问

每一种数据存储的位置都有不同的性能消耗。访问数组和对象成员的代价比从局部变量中读取数据的代价要高一些。
在一个函数的执行过程中,每遇到一个变量,都会经历一次标识符解析过程以决定从哪里获取或存储数据。该过程搜索execution context的作用域链,查找同名的标识符。搜索过程从作用域链的头部开始,也就是当前运行函数的活动对象。
函数中读写局部变量总是最快的,而读写全局变量通常是最慢的,全局变量总是存在于执行上下文作用域链的最末端,因此也是最远的。一个好的经验法则是:如果某个跨作用域的值在函数中被引用一次以上,那么就把它存储到局部变量里。

动态作用域
无论是with语句还是try-catch语句的catch子句,以及包含eval()的函数,都被认为是动态作用域。动态作用域只存在于代码的执行过程中,因此无法通过静态分析(查看代码结构)检测出来。
例如:

functionexecute(code) {eval(code);functionsubroutine(){return window; }var w = subroutine();//what value is w? };

由于用了eval(),函数execute()看上去像动态作用域。变量w的值会随code的值改变。但考虑如下情况:

execute("var window = {};")

在这样的情况下,execute()中的eval()创建了一个局部变量window,因此w等同于局部变量window为非全局的那个window对象。
所以,只有确实必要时才推荐使用动态作用域。

闭包
闭包允许函数访问局部作用域之外的数据。
通常来说,函数的活动对象会随同执行上下文一同销毁。但引入闭包时,由于引用仍然存在闭包的[[Scope]]属性中,因此激活对象无法被习销毁。这意味着脚本中的闭包与非闭包函数相比,需要更多的内存开销。
在脚本中,最好小心地使用闭包,它同时关系到内存和执行速度。

原型
JavaScript中的对象是基于原型的。对象可以有两种成员类型:实例成员(也称为“own”成员)和原型成员。实例成员存在于对象实例中,原型成员则有对象继承而来。考虑以下例子:

var book = {
title: "High Performance JavaScript",
publisher: "Yahoo! Press"
};
alert(book.toString()); //"[object Object]

这段代码中,对象book有两个实例成员:title和publisher。注意其中没有定义toString()方法,但这个方法却被顺利执行,也没有抛出错误。方法toString()是由对象book继承而来的原型员。

每深入一层原型链都会增加性能损失。请记住,搜索实例成员比从直接量或局部变量中访问数据代价更高,再加上遍历原型链带来的开销,更加放大了这一影响。


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值