HTML5触摸界面设计与开发--笔记--javaScript性能优化

一 : 本文中使用的性能优化策略

1 只写入DOM，因为DOM交互式相当慢的
测试：

  console.time('test');  var test=document.getElementById('index-bn').title ;  console.timeEnd('test');  test: 0.091ms  var cache=['111'];  console.time('test');  var test=cache[0];   console.timeEnd('test');  test: 0.021ms    ```

1.1 显然不可能完全避免从DOM中读取数据，但我们可以使用缓存数据来减少读取的频率，如果你认为会再次使用某个DOM，你可以将它储存在一个变量中。1.2 DOM操作是阻塞的，当一个DOM操作在运行时，其他的什么都不能做。

2 给用户反馈的优先级是最高的
2.1 输出
浏览器中的javaScript是单线程，这意味着同一时间javaScript引擎在同一时间只能做一件事情，这个线程通常被称为UI线程，并行是通过将所有任务推到一个队列中来实现的，队列中的任务会在线程变得空闲时执行，如果一个缓慢的DOM操作在执行，传入的时间必须排队等候，直到DOM操作完成处理，如一个缓慢的DOM读取在执行，此时用户与页面进行交互，那么事件将不会马上被处理。
2.2 延迟执行
如果浏览器正忙着给用户返回，而你需要处理AJAX响应这种成本比较大的操作，你可以延迟执行。

例 –无限滚动

<div id="wrapper"></div><script id="slide" type="text/x-handlebars">    <div class="slide">        <p class="logo"></p>        <div class="imgholder">            <a title="by {{ownername}} on Flickr" target="_blank"             href="http://www.flickr.com/photos/{{owner}}/{{id}}"><img class="img" data-src="{{url_n}}"></a>            <p>{{title}}</p>        </div>    </div></script>

样式

body {  margin: 0;  padding: 0;  text-align: center;}.slide {  width: 300px;  padding: 20px;  margin: 10px auto 10px auto;  height: 250px;  background: #f6f6ed;  position: relative;  text-align: center;}.slide p {  width: 100%;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;  font-family: sans-serif;}.slide .img {  max-width: 100%;  max-height: 210px;  text-align: center;  opacity: 1;  display: inline;  -webkit-transition: opacity 0.25s ease-in-out;  -moz-transition: opacity 0.25s ease-in-out;  -o-transition: opacity 0.25s ease-in-out;  transition: opacity 0.25s ease-in-out;}.imgholder {  width: 100%;  text-align: center;}

无限滚动脚本

function handleScroll(e) {    if(window.scrollY + window.innerHeight + 1000 > document.body.offsetHeight) {        fetchBirds();//请求数据    }    handleDefer();  //判断是否可见} window.addEventListener('scroll', handleScroll);

获取包含很多图片的内容时，当他们被插入到页面中是，浏览器就开始获取图像，这意味着同时下载，浏览器的下载通道被占满，使用户看的图片显示更慢，同时，由于内容先于用户加载，可能下载永远无法被看到的图像，在这里可以使用延迟加载，当图像被看到时才下载加载图像，使页面更快，还可以节省用户的流量。

延迟加载图像

function isVisible(node) {//判断是否可见    //get the dimensions we need    var scrollTop = window.scrollY,        offTop = node.offsetTop,        offsetHeight = node.offsetHeight,        innerHeight = window.innerHeight,        topViewPort = scrollTop,        bottomViewPort = scrollTop + innerHeight;    //figure out if it is in the viewport or not    return offTop + offsetHeight > topViewPort && offTop < bottomViewPort;}function handleDefer() {//可见就加载图片    //find all the slides, I'm fetching the container    //rather than the image because I don't know the image    //heights yet    var list = document.querySelectorAll('.slide');    for (var i=0, len = list.length; i < len; i++) {        thisImg = list[i].querySelector('.img');        if(thisImg.src) {            continue;        }        //if they are visible, update the src        if(isVisible(list[i])) {            var src = thisImg.getAttribute('data-src');            if(src) {                thisImg.src = src;                thisImg.removeAttribute('data-src');            }        }    }}

现在图像使延迟加载的，但加载时会看到图像空白，体验并不是很好，我们可以加上动画效果并优化延迟加载效果

.slide .img{ transition:opacity .25s ease-in-out;}function handleDefer() {    console.time('defer');    var i, list, thisImg, deferSrc, img, handler,    //the slide cache is populated by the function that    //loads the data so that the defer code doesn't need    //to keep querying the dom.    list = slideCache,     len = listLength;    for (i=0; i < len; i++) {        thisImg = list[i].img        var deferSrc = list[i].src;        if(isVisible(list[i].id)) {            //create a closure for for simple preload stuff            handler = function() {                var node, src;                node = thisImg;                src = deferSrc;                return function () {                    node.src = src;                    node.style.opacity = 1;                    loaded[deferSrc] = true;                }            }();            //申明一个image，然后将src赋给改image的src，等待图像下载完成后再讲路径替换(此时图像已经下载到本地了，并使用动画效果显示)            var img = new Image();            img.onload = handler;            img.src = list[i].src;        }    }    console.timeEnd('defer');}

现在加上了动画效果，在感知的性能上的提升是显著的。
可能你已经注意到了，我们是从slideCache而不是从DOM得到的幻灯片信息，这是应用了“只写入DOM”策略。DOM只有在添加新内容时才会被修改。数据会使用updateSlideCache函数来缓存。

var slideCache;function updateSlideCache(node) { //在插入数据时调用此函数    var list = node.querySelectorAll('.slide'),        len = list.length        obj;    slideCache = [];    for (var i=0; i < len; i++) {        obj = {            node:list[i],            id:list[i].getAttribute('data-id'),            img:list[i].querySelector('.img')        }        obj.src = obj.img.getAttribute('data-src');        slideCache.push(obj);    }}

这里的node是一个只包含新添加的数据的节点。

另一个减低速度的是isVisible()函数, isVisible()函数需要大量的DOM读取和检查来执行它的运算。
使用缓存来快速检查元素的可见性

var slideMap = {};//to simplify look up this now takes a photo id,//which is the same as a slide id.function isVisible(id) {    var offTop, offsetHeight, data;    //if the slide is cached we can get the    //values from there    if(slideMap[id]){        offTop = slideMap[id].offTop;        offsetHeight = slideMap[id].offsetHeight;    //if the slide is not cached, update the cache    }else {        node = document.getElementById('s-' + id);        offsetHeight = parseInt(node.offsetHeight);        offTop = parseInt(node.offsetTop);        data = {            node:node,            offTop:offTop,            offsetHeight:offsetHeight        };        slideMap[id] = data;    }    //in the cached case this is just math, no DOM inspection at all    if(offTop + offsetHeight > topViewPort && offTop < bottomViewPort) {         return true;    } else {        return false;    }}