开始渲染时间

该时间点表示浏览器开始绘制页面,在此之前页面都是白屏,所以也称为白屏时间。

该时间点可用公式Time To Start Render = TTFB(Time To First Byte) + TTDD(Time To Document Download) + TTHE(Time To Head End)表示。其中TTFB表示浏览器发起请求到服务器返回第一个字节的时间,TTDD表示从服务器加载HTML文档的时间,TTHE表示文档头部解析完成所需要的时间。在高级浏览器中有对应的属性可以获取该时间点。Chrome可通过chrome.loadTimes().firstPaintTime获取,IE9+可以通过performance.timing.msFirstPaint获取,在不支持的浏览器中可以根据上面公式通过获取头部资源加载完的时刻模拟获取近似值。开始渲染时间越快,用户就能更快的看见页面。

对于该时间点的优化有:

1)优化服务器响应时间,服务器端尽早输出

2)减少html文件大小

3)减少头部资源,脚本尽量放在body中


DOM Ready

该时间点表示dom解析已经完成,资源还没有加载完成, 这个时候用户与页面的交互已经可用了。用公式TimeTo Dom Ready = TTSR(Time To Start Render) + TTDC(Time To Dom Created) + TTST(Time To Script)可以表示。TTSR上面已经介绍过了,TTDC表示DOM树创建所耗时间。TTST表示BODY中所有静态脚本加载和执行的时间。在高级浏览器中有DOMContentLoaded事件对应,MDN上有关DOMContentLoaded事件描述的文档如下,

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

详细规范可以查看W3C的HTML5规范。从MDN文档上可以看出该事件主要是指dom文档加载解析完成,看上去很简单,但是DOMContentLoaded事件的触发与css,js息息相关,现在有专门的名词Critical Rendering Path(关键呈现路径)来描述,在文章【关键呈现路径】中详细介绍了关键呈现路径对DOMContentLoaded的影响。

在不支持DOMContentLoaded事件的浏览器中可以通过模拟获取近似值,主要的模拟方法有:

1)低版本webkit内核浏览器可以通过轮询document.readyState来实现

2)ie中可通过setTimeout不断调用documentElement的doScroll方法,直到其可用来实现

具体实现方法可以参考主流框架(jquery等)的实现。 DOM Ready时间点意味着用户与页面可以进行交互了,因此越早越好,对于该时间点的优化有:

1)减少dom结构的复杂度,节点尽可能少,嵌套不要太深

2)优化关键呈现路径


首屏时间

该时间点表示用户看到第一屏页面的时间,这个时间点很重要但是很难获取,一般都只能通过模拟获取一个近似时间。一般模拟方法有:

1)不断获取屏幕截图,当截图不再变化时,可以视为首屏时间。可参考webPagetest的Speed Index算法;

2)一般影响首屏的主要因素是图片的加载,通过页面加载完后判断图片是否在首屏内,找出加载最慢的一张即可视为首屏时间。当然还需考虑其他细节,具体可参考【7天打造前端性能监控系统】

针对该时间点的优化有:

1)页面首屏的显示尽量不要依赖于js代码,js尽量放到domReady后执行或加载

2)首屏外的图片延迟加载

3)首屏结构尽量简单,首屏外的css可延迟加载


onload

该时间点是window.onload事件触发的时间,表示原始文档和所有引用的内容已经加载完成,用户最明显的感觉就是浏览器tab上loading状态结束。 

该时间点的优化方式有:

1)减少资源的请求数和文件大小

2)将非初始化脚本放到onLoad之后执行

3)无需同步的脚本异步加载

为了优化整站性能,页面onload的时候可以考虑做一些预加载,把其它页面需要用到的资源预先加载进来。

在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出“脚本运行时间过长“的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化。
浏览器内核是多线程的,它们在内核控制下相互配合以保持同步,一个浏览器至少实现三个常驻线程, GUI 渲染线程, 浏览器事件触发线程。

  1. JavaScript 引擎是基于事件驱动的单线程执行的, JS 线程一直等待着任务队列中任务的到来然后加以处理, 浏览器无论再什么时候都只是一个 JS 线程在运行 JS 程序。
  2. GUI 渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行.
  3. 事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。

    了解了浏览器的内核处理方式就不难理解浏览器为什么会进入假死状态了,当一段JS脚本长时间占用着处理机就会挂起浏览器的GUI更新,而后面的事件响应也被排在队列中得不到处理,从而造成了浏览器被锁定进入假死状态。另外JS脚本中进行了DOM操作,一旦JS调用结束就会马上进行一次GUI渲染,然后才开始执行下一个任务,所以JS中大量的DOM操作也会导致事件响应缓慢甚至真正卡死浏览器,如在IE6下一次插入大量的HTML。而如果真的弹出了“脚本运行时间过长“的提示框则说明你的JS脚本肯定有死循环或者进行过深的递归操作了。

       Nicholas C. Zakas认为不论什么脚本,在任何时间、任何浏览器上执行都不应该超过100毫秒,否则一定要将脚本分解成若干更小的代码段。那么我们该如何来做呢: 

        第一步,优化你的循环,循环体中包含太多的操作和循环的次数过多都会导致循环执行时间过长,并直接导致锁死浏览器。如果循环之后没有其他操作,每次循环只处理一个数值,而且不依赖于上一次循环的结果则可以对循环进行拆解,看下面的chunk的函数:

function chunk (array, process, context) { 
    setTimeout(function() {
         var item = array.shift()
         process.call(context, item) 
        if(array.length > 0) {
             setTimeout(arguments.callee, 100) 
        }
     }, 100) 
}

        chunk() 函数的用途就是将一个数组分成小块处理,它接受三个参数:要处理的数组,处理函数以及可选的上下文环境。每次函数都会将数组中第一个对象取出交给 process 函数处理,如果数组中还有对象没有被处理则启动下一个 timer,直到数组处理完。这样可保证脚本不会长时间占用处理机,使浏览器出一个高响应的流畅状态。

        借助JS强大的闭包机制任何循环都是可拆分的,下面的版本增加了 callback 机制,使可再循环处理完毕之后进行其他的操作。

function chunk ( array,  process,  cbfun ) { 
      var i  = 0, len = array.length  // 这里是要注意在执行过程中数组最好是不变的
      setTimeout(function () {  // 循环体要做的操作 
      process(array[i], i++)
         if( i < len ) { 
            setTimeout(farguments.callee, 100)
         }else { 
        cbfun()     // 循环结束之后要做的操作
         }
     }, 100} 
} 

    第二步, 优化你的函数,如果函数体内有太多不相干但又要在一起执行的操作则可以进行拆分,考虑下面的函数:

function dosomething () { 
    dosomething1() 
    dosomething2()
 }

    第三步,优化递归操作,函数递归虽然简单直接但是过深的递归操作不但影响性能而且稍不注意就会导致浏览器弹出脚本失控对话框,必须小心处理。

    看以下斐波那契数列的递归算法:

 function fibonacci (n) {
    return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2)
}

   fibonacci(40) 这条语句将重复调用自身331160280次,在浏览器中执行必然导致脚本失控,而采用下面的算法则只需要调用40次

fibonacci = function (n) {
    var memo = {0 : 0, 1 : 0}                            // 计算结果缓存
        var shell = function (n) {
            if ( typeof result != 'number' )         //  如果只没有被计算则进行计算
                memo[n] = shell (n - 1) + shell(n - 2) 
                return memo[n]
        }
    return shell(n)
}

这项技术被称为memoization,他的原理很简单就是同样的结果你没必要计算两次。另一种消除递归的办法就是利用迭代,递归和迭代经常会被作为互相弥补的方法。

第四步,减少DOM操作,DOM操作的代价是相当昂贵的,大多数DOM操作都会触发浏览器的回流(reflow)操作。例如添加删除节点,修改元素样式,获取需要经过计算的元素样式等。我们要做的就是尽量少的触发回流操作。

 

el.style.width = '300px' el.style.height = '300px'
el.style.backgroundColor = 'red'

上面的操作会触发浏览器的三次回流操作,再看下面的方式:

el.className = 'newStyle'

通过设置改元素的className一次设置多个样式属性,将样式写再CSS文件中,只触发一次回流,达到了同样是效果而且效率更高。因为浏览器最擅长的就是根据class设置样式。

还有很多可以减少DOM操作的方法,在此就不多说了,但是一个基本的原则就是让浏览器去做它自己擅长的事情,例如通过class来改变元素的属性。


vue 中显示隐藏问题

vue  使用当用 遇到一个 temple 模板里面的坑,就是 v-if  和 v-show 不显示的问题,需要在标签中加入 style="display:black"

vue 中组建之间的传参问题

1.父向子组件传参

App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法)。

而子组件componetA中,声明props参数’msgfromfa’之后,就可以收到父向子组件传的参数了。例子中将msgfromfa显示在<p>标签中。

App.vue中
<component-a msgfromfa="( 不积跬步,无以至千里;不积小流,无以成江海)"></component-a>
import componentA from './components/componentA'
export default {
    new Vue({
        components: {
          componentA
        }
    })
}

componentA.vue中
<p>{{ msgfromfa }}</p>
export default {
    props: ['msgfromfa']
}

2.子组件向父传参

2.1  .$emit

用法:vm.$emit( event, […args] ),触发当前实例上的事件。附加参数都会传给监听器回调。
例子:

App.vue中component-a绑定了自定义事件”child-say”。

子组件componentA中,单击按钮后触发”child-say”事件,并传参msg给父组件。父组件中listenToMyBoy方法把msg赋值给childWords,显示在<p>标签中。

App.vue中
<p>Do you like me? {{childWords}}</p>
<component-a msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a>
import componentA from './components/componentA'
export default {
    new Vue({
        data: function () {
            return {
              childWords: ""
            }
        },
        components: {
          componentA
        },
        methods: {
            listenToMyBoy: function (msg){
              this.childWords = msg
            }
        }
    })
}
componentA.vue中
<button v-on:click="onClickMe">like!</button>
import componentA from './components/componentA'
export default {
    data: function () {
        return {
          msg: 'I like you!'
        }
    },
    methods: {
      onClickMe: function(){
        this.$emit('child-say',this.msg);
      }
    }
}

2.2  .$dispatch

用法:vm.$dispatch( event, […args] ),派发事件,首先在实例上触发它,然后沿着父链向上冒泡在触发一个监听器后停止。
例子:App.vue中events中注册”child-say”事件。子组件componentA中,单击按钮后触发”child-say”事件,并传参msg给父组件。父组件中”child-say”方法把msg赋值给childWords,显示在<p>标签中。

App.vue中
<p>Do you like me? {{childWords}}</p>
<component-a msgfromfa="(Just Say U Love Me)"></component-a>
import componentA from './components/componentA'
export default {
    new Vue({
        events: {
            'child-say' : function(msg){
              this.childWords = msg
            }
        }
    })
}
componentA.vue中
<button v-on:click="onClickMe">like!</button>
import componentA from './components/componentA'
export default {
    data: function () {
        return {
          msg: 'I like you!'
        }
    },
    methods: {
      onClickMe: function(){
        this.$dispatch('child-say',this.msg);
      }
    }
}

vue 中 axios 请求

axios 请求的坑:请求当中的 axios 在浏览器中需要 URLSearchParams 的支持

var params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post('/foo',params);

// 注意: URLSearchParams  有兼容性问题 ios 10.11 以下不支持 需要兼容,请看 dome

一、DOM操作影响页面性能的核心问题

通过js操作DOM的代价很高,影响页面性能的主要问题有如下几点:

  • 访问和修改DOM元素
  • 修改DOM元素的样式,导致重绘重排
  • 通过对DOM元素的事件处理,完成与用户的交互功能

DOM的修改会导致重绘重排

  • 重绘是指一些样式的修改,元素的位置和大小都没有改变;
  • 重排是指元素的位置或尺寸发生了变化,浏览器需要重新计算渲染树,而新的渲染树建立后,浏览器会重新绘制受影响的元素。

页面重绘的速度要比页面重排的速度快,在页面交互中要尽量避免页面的重排操作。浏览器不会在js执行的时候更新DOM,而是会把这些DOM操作存放在一个队列中,在js执行完之后按顺序一次性执行完毕,因此在js执行过程中用户一直在被阻塞。

1.页面渲染过程

一个页面更新时,渲染过程大致如下:

  • JavaScript: 通过js来制作动画效果或操作DOM实现交互效果
  • Style: 计算样式,如果元素的样式有改变,在这一步重新计算样式,并匹配到对应的DOM上
  • Layout: 根据上一步的DOM样式规则,重新进行布局(重排
  • Paint: 在多个渲染层上,对新的布局重新绘制(重绘
  • Composite: 将绘制好的多个渲染层合并,显示到屏幕上

在网页生成的时候,至少会进行一次布局和渲染,在后面用户的操作时,不断的进行重绘或重排,因此如果在js中存在很多DOM操作,就会不断地出发重绘或重排,影响页面性能。

2.DOM操作对页面性能的影响

如前面所说,DOM操作影响页面性能的核心问题主要在于DOM操作导致了页面的重绘重排,为了减少由于重绘和重排对网页性能的影响,我们要知道都有哪些操作会导致页面的重绘或者重排。

2.1 导致页面重排的一些操作:

  • 内容改变
    • 文本改变或图片尺寸改变
  • DOM元素的几何属性的变化
    • 例如改变DOM元素的宽高值时,原渲染树中的相关节点会失效,浏览器会根据变化后的DOM重新排建渲染树中的相关节点。如果父节点的几何属性变化时,还会使其子节点及后续兄弟节点重新计算位置等,造成一系列的重排。
  • DOM树的结构变化
    • 添加DOM节点、修改DOM节点位置及删除某个节点都是对DOM树的更改,会造成页面的重排。浏览器布局是从上到下的过程,修改当前元素不会对其前边已经遍历过的元素造成影响,但是如果在所有的节点前添加一个新的元素,则后续的所有元素都要进行重排。
  • 获取某些属性
    • 除了渲染树的直接变化,当获取一些属性值时,浏览器为取得正确的值也会发生重排,这些属性包括:offsetTopoffsetLeft、 offsetWidthoffsetHeightscrollTopscrollLeftscrollWidthscrollHeight、 clientTopclientLeftclientWidthclientHeightgetComputedStyle()
  • 浏览器窗口尺寸改变
    • 窗口尺寸的改变会影响整个网页内元素的尺寸的改变,即DOM元素的集合属性变化,因此会造成重排。

2.2 导致页面重绘的操作

  • 应用新的样式或者修改任何影响元素外观的属性
    • 只改变了元素的样式,并未改变元素大小、位置,此时只涉及到重绘操作。
  • 重排一定会导致重绘
    • 一个元素的重排一定会影响到渲染树的变化,因此也一定会涉及到页面的重绘。

二、高频操作DOM会导致的问题

接下来会分享一下在平时项目中由于高频操作DOM影响网页性能的问题。

1. 抽奖项目的高频操作DOM问题

1.1 存在的问题

在最近做的抽奖项目中,就遇到了这样的由于高频操作DOM,导致页面性能变差的问题。在经历几轮抽奖后,文字滚动速度越来越慢,肉眼能感受到与第一次抽奖时文字滚动速度的明显差别,如持续时间过长或轮次过多,还会造成浏览器假死现象。

实现 demo

1.2 问题分析

下图为抽奖时文字滚动过程中的timeline记录。

timeline分析:

  1. FPS:最上面一栏为绿色柱形为帧率(FPS),顶点值为60fps,上方红色方块表示长帧,这些长帧被Chrome称为jank(卡顿)。
  2. CPU:第二栏为CPU,蓝色表示loading(网络通信和HTML解析),黄色表示scripting(js执行时间),紫色表示rendering(样式计算和布局,即重排), 绿色为painting(即重绘)。

更多timeline使用方法可参考:如何使用Chrome Timeline 工具(译)

由上图可以看出,在文字滚动过程中红色方块出现频繁,页面中存在的卡顿过多。帧率的值越低,人眼感受到的效果越差。

接下来选择一段长帧区域放大来看

在这段区域内最大一帧达到了49.7ms,帧率只有20fps,接下来看看这一帧里是什么因素耗时过长


由上图可以看出,耗时最大的在scripting,js的执行时间达到了44.9ms,占总时间的93.2%,因为主要靠js计算控制DOM的显示内容,所以js运行时间过长。

选取一段FPS值很低的部分查看造成这段值低的原因

由下图可看出主要为dom.html中的js执行占用时间。

点进dom.html文件,即可定位到该函数

由此可知,主要是rolling这个函数执行时间过长,对该部分失帧影响较大。而这个函数的主要作用就是实现文字的滚动效果,也可以从代码中看出,这个函数利用的setTimeout来反复执行,并且在这个函数中存在着循环以及大量的DOM操作,造成了页面的失帧等问题。

1.3 优化方案

针对该项目中的问题,采取的解决方法是:

  • 一次性生成全部<li>,并且隐藏这些<li>,随机生成一组随机数数组,只有index与数组里面的随机数相等时,才显示该位置的<li>,虽然也会触发重排和重绘,但是性能要远远高于直接操作DOM的添加和删除。
  • 用requestAnimationFrame取代setTimeout不断生成随机数。

requestAnimationFrame与setTimeout和setInterval类似,都是通过递归调用同一个方法不断更新页面。

  • setTimeout():在特定的时间后执行函数,而且只执行一次,如果在特定时间前想取消执行函数,可以用clearTimeout立即取消执行。但是并不是每次执行setTimeout都会在特定的时间后执行,页面加载后js会按照主线程中的顺序按序执行那个,如果在延迟时间内主线程不空闲,setTimeout里面的函数是不会执行的,它会延迟到主线程空闲时才执行。
  • setInterval():在特定的时间间隔内重复执行函数,除非主动清除它,不然会一直执行下去,清除函数可以使用clearInterval。setInterval也会等到主线程空闲了再执行,但是setInterval去排队时,如果发现自己还在队列中未执行,就会被drop掉,所以可能会造成某段时间的函数未被执行。
  • requestAnimationFrame():它不需要设置时间间隔,它会在浏览器每次刷新之前执行回调函数的任务。这样我们动画的更新就能和浏览器的刷新频率保持一致。requestAnimationFrame在运行时,浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。

在采用上面的方法进行优化后,在经历多轮抽奖后,文字滚动速度依旧正常,网页性能良好,不会出现文字滚动速度越来越慢,最后导致浏览器假死的现象。

实现demo: https://gxt19940130.github.io/demo/demo_gxt/dom_by_vue.html

1.4 优化前后FPS对比

优化前文字滚动时的timeline


优化后文字滚动时的timeline

优化前的代码对DOM操作很频繁,因此FPS值普遍偏低,而优化后可以看出红色方块明显减少,FPS值一直处于高值。

1.5 优化前后CPU占用对比

优化前文字滚动时的timeline


优化后文字滚动时的timeline


优化前js的CPU占用率较高,而优化后占用CPU的主要为渲染时间,因为优化后的代码只是控制了节点的显示和隐藏,所以在js上消耗较少,在渲染上消耗较大。

2.吸顶导航条相关及scroll滚动优化

2.1 存在的问题

吸顶导航条要求当页面滚动到某个区域时,对应该区域的导航条在设置的显示范围内保持吸顶显示。涉及到的操作:

  • 监听页面的scroll事件
  • 在页面滚动时进行计算和DOM操作
    • 计算:计算当前所在位置是否为对应导航条的显示范围
    • DOM操作:显示在范围内的导航条并且隐藏其他导航条

由于scroll事件被触发的频率高、间隔近,如果此时进行DOM操作或计算并且这些DOM操作和计算无法在下一次scroll事件发生前完成,就会造成掉帧、页面卡顿,影响用户体验。

2.2 优化方案

针对该项目中的问题,采取的解决方法是:

  • 尽量控制DOM的显示或隐藏,而不是删除或添加:

    页面加载时根据当前页面中吸顶导航的数量复制对应的DOM,并且隐藏这些导航。当页面滚动到指定区域后,显示对应的导航。

  • 一次性操作DOM:

    将复制的DOM存储到数组中,将该数组append到对应的父节点下,而不是根据复制得到DOM的数量依次循环插入到父节点下。

  • 多做缓存:

    如果某个节点将在后续进行多次操作,可以将该节点利用变量存储起来,而不是每次进行操作时都去查找一遍该节点。

  • 使用 requestAnimationFrame优化页面滚动

// 在页面滚动时对显示范围进行计算

  // 延迟到整个dom加载完后再调用,并且异步到所有事件后执行

  $(function(){

  //animationShow优化滚动效果,scrollShow为实际计算显示范围及操作DOM的函数

      setTimeout( function() {

          window.Scroller.on('scrollend', animationShow);

          window.Scroller.on('scrollmove', animationShow);

      })

  });

  function animationShow(){

      return window.requestAnimationFrame ?window.requestAnimationFrame(scrollShow) : scrollShow();

  }

对于scroll的滚动优化还可以采用防抖(Debouncing)和节流(Throttling)的方式,但是防抖和节流的方式还是要借助于setTimeout,因此和requestAnimationFrame相比,还是requestAnimationFrame实现效果好一些。

三、针对操作DOM的性能优化方法总结

为了减少DOM操作对页面性能产生的影响,在实现页面的交互效果时一定要注意一下几点:

1.减少在循环内进行DOM操作,在循环外部进行DOM缓存

//优化前代码

function Loop() {

   console.time("loop1");

   for (var count = 0; count < 15000; count++) {

       document.getElementById('text').innerHTML += 'dom';

   }

   console.timeEnd("loop1");

}

//优化后代码

function Loop2() {

    console.time("loop2");

    var content = '';

    for (var count = 0; count < 15000; count++) {

        content += 'dom';

    }

    document.getElementById('text2').innerHTML += content;

    console.timeEnd("loop2");

}

两个函数的执行时间对比:

优化前的代码中,每进行一次循环,都会读取一次divinnerHtml属性,并且对这个属性进行了重新赋值,即每循环一次就会操作两次DOM,因此执行时间很长,页面性能差。

在优化后的代码中,将要更新的DOM内容进行缓存,在循环时只操作字符串,循环结束后字符串的值写入到div中,只进行了一次查找innerHtml属性和一次对该属性重新赋值的操作,因此同样的循环次数先,优化后的方法执行时间远远少于优化前。

2.只控制DOM节点的显示或隐藏,而不是直接去改变DOM结构

在抽奖项目中频繁操作DOM来控制文字滚动的方法(demo:https://gxt19940130.github.io/demo/dom.html 导致页面性能很差,最后修改为如下代码。

<div class="staff-list" :class="list">

   <ul class="staff-list-ul">

       <li v-for="item in staffList" v-show="isShow($index)">

           <div>{{{item.staff_name | addSpace}}} </div>

           <div class="staff_phone">{{item.phone_no}} </div>

       </li>

   </ul>

</div>

上面代码的优化原理即先生成所有DOM节点,但是所有节点均不显示出来,利用vue.js中的v-show,根据计算的随机数来控制显示某个<li>,来达到文字滚动效果。

如果采用jquery,则需要将生成的所有<li>全部存放在<ul>下,并且隐藏它们,在根据生成的随机数组,利用jquery查找index与生成的随机数对应的<li>并显示,达到文字滚动效果。

优化后demo: https://gxt19940130.github.io/demo/demo_gxt/dom_by_vue.html

对比结果可查看2.4

3.操作DOM前,先把DOM节点删除或隐藏

var list1 = $(".list1");

list1.hide();

for (var i = 0; i < 15000; i++) {

    var item = document.createElement("li");

    item.append(document.createTextNode('0'));

    list1.append(item);

}

list1.show();

display属性值为none的元素不在渲染树中,因此对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行多次DOM操作,可以先将其隐藏,操作完成后再显示。这样只在隐藏和显示时触发2次重排,而不会是在每次进行操作时都出发一次重排。

页面rendering时间对比:

下图为同样的循环次数下未隐藏节点直接进行DOM操作的rendering时间(图一)和隐藏节点再进行DOM操作的rendering时间(图二)

由对比图可以看出,总时间、js执行时间以及rendering时间都明显减少,并且避免了painting以及其他的一些操作。

4. 最小化重绘和重排

//优化前代码

var element = document.getElementById('mydiv');

element.style.height = "100px";  

element.style.borderLeft = "1px";  

element.style.padding = "20px";

在上面的代码中,每对element进行一次样式更改都会影响该元素的集合结构,最糟糕情况下会触发三次重排。

优化方式:利用js或jquery对该元素的class重新赋值,获得新的样式,这样减少了多次的DOM操作。

//优化后代码

//js操作

.newStyle {  

    height: 100px;  

    border-left: 1px;  

    padding: 20px;  

}  

element.className = "newStyle";

//jquery操作

$(element).css({

    height: 100px;  

    border-left: 1px;  

    padding: 20px;

})

到此本文结束,如果对于问题分析存在不正确的地方,还请及时指出,多多交流。

参考文章:

  • 高性能JS-DOM
  • Effective前端6:避免页面卡顿
  • 前端性能优化
  • 高性能滚动 scroll 及页面渲染优化
  • 脑洞大开:为啥帧率达到 60 fps 就流畅?
  • 如何使用Chrome Timeline 工具(译)

 

Array.prototype.map()

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

let numbers = [1, 5, 10, 15];
let doubles = numbers.map((x) => {
   return x * 2;
});

// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]


let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);

// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

语法

let array = arr.map(function callback(currentValue, index, array) { 
    // Return element for new_array 
}[, thisArg])

参数

callback
生成新数组元素的函数,使用三个参数:

currentValue
callback 的第一个参数,数组中正在处理的当前元素。
index
callback 的第二个参数,数组中正在处理的当前元素的索引。
array
callback 的第三个参数,map 方法被调用的数组。
thisArg
可选的。执行 callback 函数时 使用的this 值。

返回值

一个新数组,每个元素都是回调函数的结果。

描述

map 方法会给原数组中的每个元素都按顺序调用一次  callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身。

如果 thisArg 参数有值,则每次 callback 函数被调用的时候,this 都会指向 thisArg 参数上的这个对象。如果省略了 thisArg 参数,或者赋值为 null 或 undefined,则 this 指向全局对象 。

map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)。

使用 map 方法处理数组时,数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中:原数组中新增加的元素将不会被 callback 访问到;若已经存在的元素被改变或删除了,则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值;而被删除的元素将不会被访问到。

用一个仅有一个参数的函数来mapping一个数字数组

下面的代码表示了当函数需要一个参数时map的工作方式。这个参数会遍历原始数组中的元素。

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});

// doubles is now [2, 8, 18]
// numbers is still [1, 4, 9]

一般的 map 方法

下面的例子演示如何在一个 String  上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组:

var map = Array.prototype.map
var a = map.call("Hello World", function(x) { 
  return x.charCodeAt(0); 
})
// a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

querySelectorAll 应用

下面代码展示了如何去遍历用 querySelectorAll 得到的动态对象集合。在这里,我们获得了文档里所有选中的选项,并将其打印:

var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj) {
  return obj.value;
});

反转字符串

var str = '12345';
Array.prototype.map.call(str, function(x) {
  return x;
}).reverse().join(''); 

// Output: '54321'
// Bonus: use '===' to test if original string was a palindrome

兼容旧环境(Polyfill)Edit

map 是在最近的 ECMA-262 标准中新添加的方法;所以一些旧版本的浏览器可能没有实现该方法。在那些没有原生支持 map 方法的浏览器中,你可以使用下面的 Javascript 代码来实现它。所使用的算法正是 ECMA-262,第 5 版规定的。假定ObjectTypeError, 和 Array 有他们的原始值。而且 callback.call 的原始值也是 Function.prototype.call

// 实现 ECMA-262, Edition 5, 15.4.4.19
// 参考: http://es5.github.com/#x15.4.4.19
if (!Array.prototype.map) {
  Array.prototype.map = function(callback, thisArg) {

    var T, A, k;

    if (this == null) {
      throw new TypeError(" this is null or not defined");
    }

    // 1. 将O赋值为调用map方法的数组.
    var O = Object(this);

    // 2.将len赋值为数组O的长度.
    var len = O.length >>> 0;

    // 3.如果callback不是函数,则抛出TypeError异常.
    if (Object.prototype.toString.call(callback) != "[object Function]") {
      throw new TypeError(callback + " is not a function");
    }

    // 4. 如果参数thisArg有值,则将T赋值为thisArg;否则T为undefined.
    if (thisArg) {
      T = thisArg;
    }

    // 5. 创建新数组A,长度为原数组O长度len
    A = new Array(len);

    // 6. 将k赋值为0
    k = 0;

    // 7. 当 k < len 时,执行循环.
    while(k < len) {

      var kValue, mappedValue;

      //遍历O,k为原数组索引
      if (k in O) {

        //kValue为索引k对应的值.
        kValue = O[ k ];

        // 执行callback,this指向T,参数有三个.分别是kValue:值,k:索引,O:原数组.
        mappedValue = callback.call(T, kValue, k, O);

        // 返回值添加到新数组A中.
        A[ k ] = mappedValue;
      }
      // k自增1
      k++;
    }

    // 8. 返回新数组A
    return A;
  };      
}
 

Array.prototype.some()


some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

const isBiggerThan10 = (element, index, array) => {
return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);
// false

[12, 5, 8, 1, 4].some(isBiggerThan10);
// true

语法: arr.some(callback[, thisArg])

参数

callback
用来测试每个元素的函数。
thisArg
执行 callback 时使用的 this 值。

描述

some 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some 将会立即返回 true。否则,some 返回 falsecallback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。

callback 被调用时传入三个参数:元素的值,元素的索引,被遍历的数组。

如果为 some 提供了一个 thisArg 参数,将会把它传给被调用的 callback,作为 this 值。否则,在非严格模式下将会是全局对象,严格模式下是 undefined

some 被调用时不会改变数组。

some 遍历的元素的范围在第一次调用 callback. 时就已经确定了。在调用 some 后被添加到数组中的值不会被 callback 访问到。如果数组中存在且还未被访问到的元素被 callback 改变了,则其传递给 callback 的值是 some 访问到它那一刻的值。

兼容

if (!Array.prototype.some)
{
Array.prototype.some = function(fun /*, thisArg */)
{
'use strict';

if (this === void 0 || this === null)
throw new TypeError();

var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== 'function')
throw new TypeError();

var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++)
{
if (i in t && fun.call(thisArg, t[i], i, t))
return true;
}

return false;
};
}

weex 是阿里开发的一款 将 JavaScript 集成与 android 的一块框架(初步个人认为),但是里面的坑却又很多,官网第一板块开发环境搭建就有一个坑(报错 index 文件找不到,之后发现 "

weex-vue-render" 这个包的问题,将 weex-vue-render 包的版本改成 "^0.10.4",否则跑不通);
   我们用的是 集成到 android 开发项目里, android 集成也有一个坑就是 weex 版本的问题,低版本不支持 vue 语法注意,因为根据 官方文档生成项目是 src 文件下面 .vue 结尾的文件,可以新建 .we 文件写 weex 语法,【不支持】 ,
这里有几个坑就是 插件包,如何集成到 android 项目下 使用 weex-toolkit 工具可以生成的 js 文件 放到 android 项目下得 main 文件下就OK了!

光标位置获取,设置,插入的操作

    var cursorPosition = {
        get: function (textarea) {
            var rangeData = {text: "", start: 0, end: 0};

            if (textarea.setSelectionRange) { // W3C 标准获取光标位置
                textarea.focus();
                rangeData.start = textarea.selectionStart;
                rangeData.end = textarea.selectionEnd;
                rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end) : "";
            } else if (document.selection) { // IE
                textarea.focus();
                var i,
                    oS = document.selection.createRange(),
// Don't: oR = textarea.createTextRange()
                    oR = document.body.createTextRange();
                oR.moveToElementText(textarea);

                rangeData.text = oS.text;
                rangeData.bookmark = oS.getBookmark();

// object.moveStart(sUnit [, iCount])
// Return Value: Integer that returns the number of units moved.
                for (i = 0; oR.compareEndPoints('StartToStart', oS) &lt; 0 &amp;&amp; oS.moveStart("character", -1) !== 0; i++) {
// Why? You can alert(textarea.value.length)
                    if (textarea.value.charAt(i) == '\r') {
                        i++;
                    }
                }
                rangeData.start = i;
                rangeData.end = rangeData.text.length + rangeData.start;
            }

            return rangeData;
        },

        set: function (textarea, rangeData) { // 设置光标位置
            var oR, start, end;
            if (!rangeData) {
                alert("You must get cursor position first.")
            }
            textarea.focus();
            if (textarea.setSelectionRange) { // W3C
                textarea.setSelectionRange(rangeData.start, rangeData.end);
            } else if (textarea.createTextRange) { // IE
                oR = textarea.createTextRange();

// Fixbug : ues moveToBookmark()
// In IE, if cursor position at the end of textarea, the set function don't work
                if (textarea.value.length === rangeData.start) {
//alert('hello')
                    oR.collapse(false);
                    oR.select();
                } else {
                    oR.moveToBookmark(rangeData.bookmark);
                    oR.select();
                }
            }
        },

        add: function (textarea, rangeData, text) { // 向光标位置添加内容
            var oValue, nValue, oR, sR, nStart, nEnd, st;
            this.set(textarea, rangeData);

            if (textarea.setSelectionRange) { // W3C
                oValue = textarea.value;
                nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end);
                nStart = nEnd = rangeData.start + text.length;
                st = textarea.scrollTop;
                textarea.value = nValue;
// Fixbug:
// After textarea.values = nValue, scrollTop value to 0
                if (textarea.scrollTop != st) {
                    textarea.scrollTop = st;
                }
                textarea.setSelectionRange(nStart, nEnd);
            } else if (textarea.createTextRange) { // IE
                sR = document.selection.createRange();
                sR.text = text;
                sR.setEndPoint('StartToEnd', sR);
                sR.select();
            }
        }
    }

看了看官方文档, 感觉自己看不下去,我只能用零碎的记忆碎片,来说一下我对node 理解
首先我们先来感受一下node开发

const http = require("http");// 引入htpp 模块
http.creacteServer((req, res) => { // 创建一个服务
res.statusCode = 200;
res.Header("Content-Type", "text/plain");
res.end("Hello World");
})

node开发中,模块, 回调利用好, 那么你会在开发中得心应手, node 重要模块中为 express 这个模块非常重要

let

let 方法  声明一个变量,这个变量的值可以改变, 与 var 不同的是他不会提升作用域, 而且变量声明之前赋值,会报错。 局部作用域,作用域外面拿不到。

const

const 方法 声明一个变量, 这个变量的值不可以改变, 但如果这个变量是对象,对象的值是可以改变的,为了安全考虑。 其他与 let 相同。

箭头函数 =>

=> 箭头函数 用法与 function 相同  区别:箭头函数 this 指向不会改变,也就是绑定了上下文 this 的指向;

  
示例:
  var fun = (val,opend)=>{ return val + opend };
  var Fun = function(val,opend){ return val + opend };

Symbol

ES5的对象属性名都是字符串,这容易造成属性名的冲突,例如你用的他人提供的方法,但又想为这个对象添加新的方法(mixin模式)新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是ES6引入Symbol的原因。
ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。它是JavaScript语言的第七种数据类型,前六种是:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。
Symbol值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的Symbol类型。凡是属性名属于Symbol类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。

let s = Symbol();
typeof s
// "symbol"

上面代码中,变量s就是一个独一无二的值。typeof运算符的结果,表明变量s是Symbol数据类型,而不是字符串之类的其他类型。
注意,Symbol函数前不能使用new命令,否则会报错。这是因为生成的Symbol是一个原始类型的值,不是对象。也就是说,由于Symbol值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型。
Symbol函数可以接受一个字符串作为参数,表示对Symbol实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。

不用不知道,一用就感觉自己的会的东西太少了:

数组属性 作用 返回值
arr.push(item1,item2…) 可以向数组最后添加一个或多个元素 返回数组的新长度,改变原数组。
arr.pop() 从数组最后删除一个元素 返回删除掉的元素值,改变原数组
arr.unshift(item1,item2…) 可以向数组前面添加一个或多个元素 返回数组的新长度,改变原数组
arr.shift() 从数组前面删除一个元素 返回删除掉的元素值,改变原数组
arry.join("字符串") 使用字符串连接数组的每一个元素 返回一个新的字符串,不改变原数组
arry.concat(一个或多个数组) 方法用于连接两个或多个数组 返回一个新数组,不改变原数组
arry.slice(start,end) 可以拷贝数组中从索引start开始,到end前一位的元素值,以数组形式返回。不改变原数组。 返回一个新数组,不改变原数组
arry.toString() 可以将数组转换为字符串形式(不常用) 返回字符串,不改变原数组
arry.indexOf(参数1,参数2) 参数1表示要找哪个元素,返回找到的索引值。第二个参数是一个索引值,表示从哪个位置开始查找。
没有找到,返回-1
查找到参数:返回索引值,没有就返回 -1(IE9 以上可用)
arry.reverse() 该方法用于颠倒元素的顺序 改变原来的数组,不会创建新的数组

一个很 Low 的程序员自述,因为机缘巧合的我无意间,接触到了计算机,这里我要感谢我的哥哥,也是我的启蒙老师。

首先作为一个程序员,要学会去总结,已经很长时间没有去停下来思考了,感觉有很多不足,到现在我还不了解 JavaScript 的底层原理,所以我还没有入门,在这里我希望可以记录下来工作与学习中的点点滴滴。