前端性能优化最佳实践  

var list = document.querySelector('ul');
ajaxResult.items.forEach(function(item) {
    // 创建<li>元素
    var li = document.createElement('li');
    li.innerHTML = item.text;

    // <li>元素常规操作，例如添加class，更改属性attribute，添加事件监听等

    // 迅速将<li>元素注入父级<ul>中
    list.apppendChild(li);
});

var frag = document.createDocumentFragment();

ajaxResult.items.forEach(function(item) {
    // 创建<li>元素
    var li = document.createElement('li');
    li.innerHTML = item.text;

    // <li>元素常规操作
    // 例如添加class，更改属性attribute，添加事件监听，添加子节点等

    // 将<li>元素添加到碎片中
    frag.appendChild(li);
});

// 最后将所有的列表对象通过DocumentFragment集中注入DOM
document.querySelector('ul').appendChild(frag);

var htmlStr = '';

ajaxResult.items.forEach(function(item) {
    // 构建包含HTML页面内容的字符串
    htmlStr += '<li>' + item.text + '</li>';
});

// 通过innerHTML设定ul内容
document.querySelector('ul').innerHTML = htmlStr;

// 取自 UnderscoreJS 实用框架
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
  }

// 添加resize的回调函数，但是只允许它每300毫秒执行一次
window.addEventListener('resize', debounce(function(event) {

    // 这里写resize过程

}, 300));

define(function() {

    var cacheObj = window.sessionStorage || {
        getItem: function(key) {
            return this[key];
        },
        setItem: function(key, value) {
            this[key] = value;
        }
    };

    return {
        get: function(key) {
            return this.isFresh(key);
        },
        set: function(key, value, minutes) {
            var expDate = new Date();
            expDate.setMinutes(expDate.getMinutes() + (minutes || 0));

            try {
                cacheObj.setItem(key, JSON.stringify({
                    value: value,
                    expires: expDate.getTime()
                }));
            }
            catch(e) { }
        },
        isFresh: function(key) {
            // 返回值或者返回false
            var item;
            try {
                item = JSON.parse(cacheObj.getItem(key));
            }
            catch(e) {}
            if(!item) return false;

            // 日期算法
            return new Date().getTime() > item.expires ? false : item.value;
        }
     }
});

require(['storage'], function(storage) {
    var content = storage.get('sidebarContent');
    if(!content) {
        // Do an AJAX request to get the sidebar content

        // ... and then store returned content for an hour
        storage.set('sidebarContent', content, 60); 
    }
});

// 基本使用:  加载一部分AMD格式的模块
curl(['social', 'dom'], function(social, dom) {
    dom.setElementContent('.social-container', social.loadWidgets());
});

// 定义一个使用Google Analytics的模块，该模块是非AMD格式的
define(["js!//google-analytics.com/ga.js"], function() {
    // Return a simple custom Google Analytics controller
    return {
        trackPageView: function(href) {
            _gaq.push(["_trackPageview", url]);
        },
        trackEvent: function(eventName, href) {
            _gaq.push(["_trackEvent", "Interactions", eventName, "", href || window.location, true]);
        }
    };
});

// 加载一个不带回调方法的非AMD的js文件
curl(['js!//somesite.com/widgets.js']);

// 将JavaScript和CSS文件作为模块加载
curl(['js!libs/prism/prism.js', 'css!libs/prism/prism.css'], function() {
    Prism.highlightAll();
});

// 加载一个AJAX请求的URL
curl(['text!sidebar.php', 'storage', 'dom'], function(content, storage, dom) {
    storage.set('sidebar', content, 60);
    dom.setElementContent('.sidebar', content);
});

htmlStr += '<li>' + item.text + '</li>';

var items = [];

ajaxResult.items.forEach(function(item) {
    // 构建字符串
    items.push('<li>', item.text, '</li>');
});

// 通过innerHTML设置列表内容
document.querySelector('ul').innerHTML = items.join(''); 

.myAnimation {
    animation: someAnimation 1s;
    transform: translate3d(0, 0, 0); /* 强制硬件加速 */
}

<!--[if 低于IE8版本]>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/js/ie-animations.js"></script>
<![endif]-->

// 获取元素，添加事件监听
document.querySelector('#parent-list').addEventListener('click', function(e) {
    // e.target 是一个被点击的元素!
    // 如果它是一个列表元素
    if(e.target && e.target.tagName == 'LI') {
        // 我们找到了这个元素，对他的操作可以写在这里。
    }
});

<!-- 以前的写法 -->
<img src="/images/logo.png" />
 
<!-- 使用data URI的写法 -->
<img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH ...." />
 
<-- 范例:  http://davidwalsh.name/demo/data-uri-php.php -->

/* 默认是为桌面应用加载图片 */
.someElement { background-image: url(sunset.jpg); }
 
@media only screen and (max-width : 1024px) {
    .someElement { background-image: url(sunset-small.jpg); }
}

function getUser(desiredUsername) {
    var searchResult = ajaxResult.users.filter(function(user) {
        return user.username == desiredUsername;
    });
 
    return searchResult.length ? searchResult[0] : false;
}
 
// 根据用户名获取用户
var davidwalsh = getUser("davidwalsh");
 
// 根据用户名获取另一个用户.
var techpro = getuser("tech-pro");

var userStore = {};
ajaxResult.users.forEach(function(user) {
    userStore[user.username] = user;
});

var davidwalsh = userStore.davidwalsh;
var techpro = userStore["tech-pro"];

• 使用:before和:after伪元素
• 延迟加载和呈现内容
• 使用事件委托，更简便的将节点转换成字符串存储

/* 使用Web Worker */
//  启动worker
var worker = new Worker("/path/to/web/worker/resource.js");
worker.addEventListener("message", function(event) {
    // 我们从web worker获取信息!
});
 
// 指导Web Worker工作！
worker.postMessage({ cmd: "processImageData", data: convertImageToDataUri(myImage) });
 
/*  resource.js就是一个Web workder */
self.addEventListener("message", function(event) {
    var data = event.data;
 
    switch (data.cmd) {
        case 'process':
            return processImageData(data.imageData);
});
 
function processImageData(imageData) {
    // 对图像进行操作
    // 例如将它改成灰度
 
    return newImageData;
}

// 主CSS文件(main.css)
@import "reset.css";
@import "structure.css";
@import "tutorials.css";
@import "contact.css";
 
// 然后在tutorials.css文件中，会继续有@import
@import "document.css";
@import "syntax-highlighter.css";

/* 以下全部写在一个CSS文件中 */
 
@media screen {
    /* 所有默认的结构设计和元素样式写在这里 */
}
 
@media print {
    /* 调整打印时的样式 */
}
 
@media only screen and (max-width : 1024px) {
    /* 使用ipad或者移动电话时的样式设定 */
}