js加载顺序优化
原理:在使用src 属性加载JavaScript 的过程中浏览器必须首先下载外部文件的代码,这要占用一些时间,然后,解析并运行此代码。此过程中,页面解析和用户交互是被完全阻塞的。
解决方案:
——将所有<script>标签放置在页面的底部,紧靠body 关闭标签</body>的上方。
——将脚本成组打包。页面的<script>标签越少,页面的加载速度就越快,响应也更加迅速。
——为<script>标签添加defer 属性(只适用于Internet Explorer 和Firefox 3.5 以上版本)
——动态创建<script>元素,用它下载并执行代码
——用XHR 对象下载代码,并注入到页面中
js对于数据访问优化
在JavaScript 中,数据存储位置可以对代码整体性能产生重要影响。有四种数据访问类型:直接量,变量,数组项,对象成员。它们有不同的性能考虑。
直接量和局部变量访问速度非常快,数组项和对象成员需要更长时间。
局部变量比域外变量快,因为它位于作用域链的第一个对象中。变量在作用域链中的位置越深,访问所需的时间就越长。全局变量总是最慢的,因为它们总是位于作用域链的最后一环。
嵌套对象成员会造成重大性能影响,尽量少用。
一个属性或方法在原型链中的位置越深,访问它的速度就越慢。
一般来说,你可以通过这种方法提高JavaScript 代码的性能:将经常使用的对象成员,数组项,和域外变量存入局部变量中。然后,访问局部变量的速度会快于那些原始变量。
DOM访问优化
DOM 访问和操作是现代网页应用中很重要的一部分。但每次你通过桥梁从ECMAScript 岛到达DOM 岛时,都会被收取“过桥费”。
最小化DOM 访问,在JavaScript 端做尽可能多的事情。
在反复访问的地方使用局部变量存放DOM 引用.
小心地处理HTML 集合,因为他们表现出“存在性”,总是对底层文档重新查询。将集合的length 属性缓存到一个变量中,在迭代中使用这个变量。如果经常操作这个集合,可以将集合拷贝到数组中。
注意重绘和重排版;批量修改风格,离线操作DOM 树,缓存并减少对布局信息的访问。
动画中使用绝对坐标,使用拖放代理。
使用事件托管技术最小化事件句柄数量。
算法和流程优化
for,while,do-while 循环的性能特性相似,谁也不比谁更快或更慢。
除非你要迭代遍历一个属性未知的对象,否则不要使用for-in 循环。
改善循环性能的最好办法是减少每次迭代中的运算量,并减少循环迭代次数。
一般来说,switch 总是比if-else 更快,但并不总是最好的解决方法。
当判断条件较多时,查表法比if-else 或者switch 更快。
浏览器的调用栈尺寸限制了递归算法在JavaScript 中的应用;栈溢出错误导致其他代码也不能正常执行。
如果你遇到一个栈溢出错误,将方法修改为一个迭代算法或者使用制表法可以避免重复工作。
运行的代码总量越大,使用这些策略所带来的性能提升就越明显。