• js性能优化问题学习笔记


    一:加载和运行

    因为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、

  • 相关阅读:
    Android——如何申请发布版SHA1值
    一些镜像下载网站
    装了两个系统后,怎么删除不需要的那一个系统
    python基础入门之十八 —— 模块和包
    python基础入门之十七 —— 异常
    python基础入门之十六 —— 继承
    python基础入门之十五 —— 类与对象
    谷歌云免费服务器申请方法
    【ROM制作工具】小白如何进行ROM解包,精简,修改,授权,打包详细图文教程
    按键精灵脚本与Total Control手机群控系统的完美结合
  • 原文地址:https://www.cnblogs.com/muzs/p/9844782.html
Copyright © 2020-2023  润新知