高性能javascript阅读笔记

前端之家收集整理的这篇文章主要介绍了高性能javascript阅读笔记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

加载和执行

  • 当浏览器遇到script标签时,会停止页面的解析与渲染。(对于多数浏览器,是使用单一进程来处理用户界面刷新和js脚本执行的)

  • browser在解析到body标签之前,不会渲染页面,所以处于head标签中的script标签会导致页面渲染延迟,表现为空白页面

  • 脚本会阻塞其他资源的下载,推荐将脚本置于body闭标签前。且尽可能减少script数量,内嵌的脚本数量也越少越好。

数据存取

  • 数据的存储位置会很大程度上影响读取速度

  • 程序执行时,尽量将变量置于作用域链的顶端,以减少变量的寻找时间。

  • 如果某个跨作用域的值在函数中被引用一次以上,就将其存储为局部变量。

DOM编程

什么是文档对象模型(DOM)? 是一个独立于语言的,用于操作XML和HTML等这种文档的程序接口。尽管DOM是个于语言无关的API,她在浏览器中的接口却是通过JS实现的。

  • 对于要修改DOM的操作,尽量积累起来,合并完成。(ps:应该是针对例如innerHTML+=i这种只修改同一元素的操作而言的,建议的实质就是减少了dom操作。)

  • 访问DOM的次数越多,代码的运行速度越慢,so,减少访问DOM次数,把运算留在ECMAScript端处理。

  • 修改页面区域可以通过innnerHTML和document.createElement,但是综合来看,他们的性能相差无几,innerHTML略胜一筹。

  • querySelectorAll比getElementBy等方法要快很多,应该优先使用。且IE8都支持

  • 重排必然重绘,重绘不一定需要重排,比如改变一个月元素的背景色。

  • 重排和重绘是十分耗能的操作,应尽量合并多次对DOM和样式的修改,一次处理掉。

  • 批量修改DOM时如何减少重回重排?可通过以下步骤

    1. 使元素脱离文档流;

    2. 对其应用多重改变;

    3. 把元素带回文档中。

    其中使元素脱离文档流的方法有:

    1. 隐藏元素;

    2. 使用fragment文档片段;√

算法和流程控制

字符串和正则表达式

略略略

快速相应的用户界面

  • 大多数浏览器让一个线程共用于执行js和更新用户界面。这个线程被称为UI线程。UI线程的工作基于一个简单的队列系统,任务会被保存到队列中直到进程空闲。一旦空闲,队列中的下一个任务就会被执行。这些任务要么是执行js代码,要么是执行UI更新,包括重绘和重排。

  • 操作系统的定时器分辨率为n(windows为15ms),就是说一个nms的延时,会被转化为0或n,因此,setTimeout的最小值建议为n*1.5左右。

  • 使用定时器处理数组
    如果一个数组的处理过程不必须为同步,不必按序,那么可以采用定时器的方式处理每一个数组元素

function processArray(items,process,callback) {
    var todo = items.cancat();//clone
       setTimeout(function(){
        process(todo.shift());
        if (todo.length) {
            setTimeout(arguments.callee,25);
        } else {
            callback(items);
        }
    },25)
}

发散一点,这个函数也可以被用于分割任务,将子任务当做数组的元素即可。
但是上面的函数是以每个元素为子任务的,总的执行时间太长,做出改进:一直处理数组中的元素,每执行一个元素结束后,看看一共花了多久,如果超出了时间上限,就启动下一个计时器,处理剩余的元素:

function timeProcessArray(items,callback) {
    var todo = items.cancat();//clone
       setTimeout(function(){
        var start = +new Date();
        do {
            process(todo.shift());        
        } while (todo.length && (+new Date() - start < 50));
    if (todo.length) {
        setTimeout(arguments.callee,25)

}

  • web Worker
    使用场景:

1 编码解码
2 复杂数学运算 如图像处理
3 大数组排序

Ajax

原文链接:https://www.f2er.com/js/419527.html

猜你在找的JavaScript相关文章