写出高性能的js代码

写出高性能的js代码

一、加载运行

javascript在浏览器中的性能,大概是开发者面对最重要的问题。因为javascript的阻塞特征,也就是在javascipt运行的过程中,其他的事情并不能被浏览器处理。所以javascript运行的越长,浏览器等待的时间就越长。所以应该

把脚本放在底部(通常就是标签的前面)。

由于每次http请求都会有性能负担,加载一个100KB的脚本要比加载4个25KB的快。所以把多个脚本合成一个脚本,通过打包工具来实现。

用defer属性,不过只支持internet explorer 和firefox3.5以上版本。

动态创建script标签,用它下载并执行代码。

二、数据

每一种数据都有读写的负担,全局变量,局部变量,数组,对象访问的代价都不一样

  • 如果关心运行速度,尽量使用局部变量限制对象和数组的使用(原型链越深,搜索的速度越慢)。

  • 作用域链搜索是从里往外的,在一个函数内部,首先是找局部变量,找不到,再去外面一层寻找变量。所以在函数的内部用全局变量,可以把值赋给局部变量。

  • 不要使用with,with会改变作用域链,影响性能。

  • try-catch的catch表达式也是和with的效果一样,但是try-catch是一个非常有用的东西,所以在用try-catch的时候确保你了解可能发生的错误。

  • 闭包,通常在一个函数激活对象和运行上下文一同销毁,但是闭包却不会。所以闭包意味着更多的内存开销。在大型网页应用的时候,需要注意这个问题。

  • 属性嵌套,嵌套对象成员会造成 。

  • 对于一些常用的对象,数组项存入局部变量中,访问局部变量的速度会大大高于那些元始的变量

三、DOM

在网页中,DOM操作的代价昂贵,通常是一个性能瓶颈。在对javascript和DOM之间,我们可以理解它们各自是一个房间,在DOM的房间的门外有一个守门人,每次从javascript到DOM需要缴纳过门费,所以操作DOM的次数越多,代价也就越昂贵,所以我们要尽量减少过门的次数,尽量在javascript门这边完成

  • 减少dom访问,在Javascript端做尽可能的事

  • 对重复访问的dom对象使用局部变量保存

  • 注意页面重绘和重排,把dom操作批量化(不要分步修改DOM,用一次性全部修改)

  • 使用事件委托

四、选择算法

在javasctip中有很多种循环方法,while、do-whlie、for、for-in,forEach并且还有很多条件语句,if-else、switch,因为Javascript的资源有限,所以选择算法的时候优先选择最优的

  • while、do-whlie、for 循环的性能相似,无所谓选择谁

  • 相对性能来说for-in是最浪费性能的一种(因为每次迭代都需要搜索原型的属性),除非你要遍历一个属性不知道的对象,否则不要用。

  • switch比if-else要快

  • forEach是基于函数的迭代,虽然很便利,但是基于函数的迭代是普通基于循环的
    八倍

五、定时器和AJAX

当javascript和用户操作一起运行的时候,用户界面是不能响应操作的,原因是当脚本执行的时候,UI不会随着用户的交互而跟新,此时的用户交互被放进队列里面,当原先的脚本执行完之后才会执行这个交互。

  • 定时器可以安排代码推迟去执行,可以把大的脚本分解成一个个小的任务,所以合理的使用定时器,可以提高用户的体验。

  • AJAX请求的数据尽量用json数据。

  • 减少页面AJAX的请求次数。