高性能 JavaScript 学习随笔

一、加载和执行
    1、<script>标签放在 </body>之前加载,永远不要把外链脚本紧跟在 <link> 之后,依赖多个 js 脚本的时候,就要使用打包工具合成一个 js 脚本了。
    2、H5 中引入 async 属性,用于异步加载脚本,async 和 defer 的相同点在于采用并行下载,在下载过程中不会产生阻塞。 不同点是在于执行时机,async 是加载完成后自动完成,而 defer (DOM加载之后)需要等待页面完成后,带有 defer 的 <script> 标签可以放在任意位置,不会阻塞浏览器的其他进程。
二、数据存取
    1、尽可能的使用局部变量,对于浏览器而言,一个标识所在的位置越深,读写速度就越慢。全局变量总是处于作用域链的最末端。
    2、try catch 不应该被用来解决 js 的错误的,如果你知道某个错误会经常的出现,那么就说明代码本身就有问题,应该尽早修复代码。
    3、将错误委托给一个函数进行处理, handleError() 是 catch 字句中唯一执行的代码
    4、对象成员嵌套的越深,读取的速度就越慢,例如:location.href 比 window.location.href 快,大部分浏览器点表示法(Object.name) 和 通过方括号表示法操作并没有什么太大的区别,只有在 Safari 浏览器中,点表示法会比方括号表示法始终更快。
    5、所有类似性能问题基本上都和对象成员有关系,因此应该避免对他们的频繁使用,例如在同一个函数中没有必要读取同一个对象成员,可以将值保存到一个局部变量中。性能优化很多的,特别是在处理嵌套对象的时候。(不推荐用于对象的成员方法上)比如: 
function test (a, b) {
    if (a.name === b.name && a.name === ‘osenki') {
        console.log('1')
    }
} // 这种写法会针对 a.name 成员调用两次,我们修改如下:

function test (a, b) {
    let { name } = a
    if (name === b.name && name === ‘osneki’) {
        console.log(‘1')    
    }
} // 我们将值保存到局部变量中减少一次查询。局部变量的读取速度要快很多的

    6、属性或者方法在原型链中的位置越深,访问他的速度就越慢。
三、DOM 编程
    1、访问DOM 的次数越多,代码的运行速度就越慢,所以应该减少对 DOM 的访问次数,尽量留到 JS 端处理。
    2、每绑定一个事件处理器都是有相应的代价的,要么是加重了页面的负担,要么是增加了运行期间的执行时间。简单而优雅的处理DOM事件的技术是事件委托。事实是:事件逐层冒泡并能被父级元素捕获。使用事件代理,只需给外层元素绑定一个处理器,就可以处理在其子元素上触发的所有事件。
    3、如果需要多次访问某个 DOM 节点,请使用局部变量存储它的引用。
    4、动画中使用绝对定位,使用拖放代理。
四、算法和流程控制
    1、代码的阻止结构和解决具体问题的思路是影响代码性能的重要因素。
    2、不要使用 for-in 遍历数组。
    3、条件数量较少时使用 if-else ,条件数量较大时使用 switch,通常来说 switch 总是比 if-else 快。但不是最佳的解决方案。
    4、在进行比较、判断的时候使用全等(===) 可以避免类型转换的损耗。
    5、改善循环性能的最佳方式是减少每次迭代的运算量和减少循环迭代次数。
    6、浏览器的调用栈大小限制了递归算法在 JS 中的应用。
五、字符串和正则表达式
    1、正则表达式的工作原理:
            · 编译:浏览器先验证你的表达式,然后转化为一个原生代码程序,用于执行匹配工作
            · 设置起始位置:正则类进入使用状态,首先要确定目标字符串的起始搜索位置
            · 匹配每个正则表达式字元:逐个检查文本和正则表达式模式
            · 匹配成功或者失败: 在字符串当前的位置发现了一个完全匹配,那么正则表达式宣布匹配成功,当字符串的每个字符都经历这个过程,如果还没有成功匹配,那么正则表达式就宣布彻底匹配失败。
    2、回溯:也称之为试探法,本质上就是深度优先搜索算法,其中退到之前的某一步这一过程,就叫‘回溯’ 。
    3、分支:来自 | 操作符。
    4、原子组的目的是使用正则引擎回溯结束的更快一点。因此可以有效的阻止海量的回溯。原子组的语法是(?>正则表达式),位于(?>)之间的所有正则表达式都会被认为是一个单一的正则符号。一旦匹配失败,引擎将会回溯到原子组前面的正则表达式部分。
六、AJAX
    1、减少请求数,可以通过合并 js 和 css 文件,或者只用 MXHR
    2、缩短页面的加载时间,页面主要内容加载完成后,用 AJAX 获取那些次要的文件。
七、编程实践
    1、避免使用 eval() 和 Function() 构造器来避免双重求值带来的性能小号。
    2、尽量使用直接量创建对象和数组。
    3、避免做重复的工作。
    4、js 的原生方法总会比你写的任何代码都要快。
            
    呼~终于看完了,看完这本书大概花了2个星期的时间吧。也是业余的时间看的。该笔记只是记录其中自己认为比较重要的优化点。书上其他的优化点我有的也米有写。总而言之,感觉这本书适合中级开发工程师看一下,低级的有可能不懂,高级的觉得还不是太底层。只是个人的偏见而已。 

猜你喜欢

转载自blog.csdn.net/qq_19238139/article/details/80748003