一:加载和运行
因为JavaScript是单线程的,具有阻塞性。当html页面解析时,如果遇到<script>,那么就会停止页面的下载和解析过程,先将js脚本执行完成,再开始下载,解析。注意:浏览器在遇到<body>标签之前是不会渲染页面的任何部分的。
1、将<script>放在页面的</body>之前
2、打包脚本,减少<script>标签,为<script>标签添加defer(ie/ff)async(chrome……)属性
3、动态创建<script>元素,下载执行代码。
4、yui,lazyload,LABjs
二:数据访问
数据的存储位置影响数据被检索的速度。
JavaScript的直接量:string、number、Boolean、object、array、function、reg、null、undefined。直接量仅代表自己,不存储于特定位置。
1、变量,数组项,对象成员的访问速度与存储位置有关。每一种数据存储位置都具有特定的读写操作负担。如果关心访问速度的话,那么应该尽量使用直接量和局部变量,限制数组项和对象成员的使用。
2、局部变量比域外变量访问更快,由于js是通过原型实现继承,访问方式是从作用域链内向外访问,所以访问的变量越靠近作用域外围访问的时间久越长。
3、避免使用with表达式,with表达式会改变执行期上下文的作用域链,相当于重排作用域链耗性能。try-catch有同样效果,需要谨慎使用。
4、减少成员嵌套,例如:location.href的访问速度快于windows.location.href。因为每遇到一个点JavaScript引擎就要在成员上执行一次解析过程,如果属性不是对象的实例属性,那么成员解析还要在每个点上搜索原型链。
5、闭包的使用会造成内存无法释放,占用内存,影响性能,所以最好把变量缓存到内部作用域内。
三:Dom编程
dom是一种独立语言,是操作xml和html文档的应用程序接口,不属于JavaScript,并且DOM是通过webkit的WebCore进行处理和渲染,而js是通过JavaScriptCore(Safari)引擎或V8(谷歌实现渲染,不同的浏览器有差异。这意味着两个独立部分以功能接口连接就会带来性能损耗。而每一次的连接都会增加损耗。
1、减少dom访问,减少dom的重排和重绘
2、采用局部变量存储dom引用,用变量将迭代集合的长度存储起来
3、注意判断一个集合的存在性,使用较新的api
4、采用事件委托的方式减少事件绑定。
5、减少字符串连接。
四:算法和流程控制
1、for,while,do-while循环的性能特性相似,for-in开销会大一些,更适合未知的对象迭代。改善循环的最好办法是减少每次迭代的运算量及次数。
2、一般来说switch会比if-else快。当有大量的离散值需要测试查表法更合适。
3、浏览器的调用栈尺寸限制了递归算法在js里面的使用,栈溢出错误会导致其他代码不能运行,当遇到栈溢出错误时,可以使用迭代或者制表法来避免重复工作。
五:正则表达式
正则表达式引擎处理字符串的原理:
1、编译:当创建一个正则表达式后,浏览器首先回去检查模板有没有错误,然后将它转换成一个本机代码例程,用于执行匹配工作。
2、设置起始位置:当一个正则表达式使用时,首先要确定目标字符创中开始搜索的位置。
3、匹配每个正则表达式的字元:
4、