欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

web前端性能优化

程序员文章站 2022-05-14 13:06:24
...

最基本的:

CSS顶部, JS底部

YUI compressor/Gzip

CDN

有 必要的CSS Sprite

Ajax可缓存

1.减少对dom元素的操作,使用innerhtml
2.高频事件防抖

// 取自 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));