高性能滚动scroll及页面渲染优化

timeout = setTimeout(later, wait);

if (callNow) func.apply(context, args);

};

var myEfficientFn = debounce(function() {

// 滚动中的┞锋正的操作

}, 250);

// 绑定监听

window.addEventListener('resize', myEfficientFn);

撙节(Throttling)

防抖函数确切不错，然则也存在问题，譬如图片的懒加载，我欲望鄙人滑过程中图片赓续的被加载出来，而不是只有当我停止下滑时刻，图片才被加载出来。又或者下滑时刻的数据的 ajax 请求加载也是同理。

撙节函数，只许可一个函数在 X 毫秒内履行一次。

与防抖比拟，撙节函数最重要的不合在于它包管在 X 毫秒内至少履行一次我们欲望触发的事宜 handler。

滚动优化其实也不仅仅指滚动(scroll 事宜)，还包含潦攀例如 resize 这类会频繁触发的事宜。简单的看看：

与防抖比拟，撙节函数多了一个 mustRun 属性，代表 mustRun 毫秒内，必定会触发一次 handler ，同样是应用准时器，看看简单的示例：

当你滚动页面时，浏览器可能会须要绘制这些层(有时也被称为合成层)里的一些像素。经由过程元素分组，当某个层的内容改变时，我们只须要更新该层的构造，并仅仅重绘和栅格化衬着层构造里变更的那一部分，而无需完全重绘。显然，如不雅当你滚动时，像视差网站(戳我看看)如许有器械在移动时，有可能在独裁导致大年夜面积的内容调剂，这会导致大年夜量的绘制工作。

// 简单的撙节函数 
 
function throttle(func, wait, mustRun) { 
 
    var timeout, 
 
        startTime = new Date(); 
 
 
    return function() { 
 
        var context = this, 
 
            args = arguments, 
 
            curTime = new Date(); 
 
 
        clearTimeout(timeout); 
 
        // 如不雅达到了规定的触发时光距离，触发 handler 
 
        if(curTime - startTime >= mustRun){ 
 
            func.apply(context,args); 
 
            startTime = curTime; 
 
        // 没达到触发距离，从新设定准时器 
 
        }else{ 
 
            timeout = setTimeout(func, wait); 	
			 3/5   首页 上一页 1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　人工智能技术在移动互联网发展中的应用
            
            智能化需求表如今两个方面跟着移动互联网的成长进入新的偏向，移动互联网中的智能化已经成为新的成长趋势和重要需求。智能化需求今朝重要表如今两个方面：一方面是促生新的智能化应用，如>>>详细阅读


本文标题：高性能滚动scroll及页面渲染优化
地址：http://www.17bianji.com/lsqh/34957.html
 1/2    1