渲染优化111_在渲染中mem-优快云博客

尽可能压缩每个阶段的执行时间或跳过某些阶段的执行；

渲染过程：
js处理，计算样式，页面布局，绘制与合成

不同浏览器的内核不同，在属性变化时触发的流程也不一样；

1.优化js执行

用 window中的requestAnimationFrame:将回调函数的执行时机交给系统来决定，与系统的刷新频率相关；

let start;
// 定义目标动画元素
const element = document.getElementById('MyAnimate');
element.style.position = 'absolute';
// 定义动画回调函数
function updateScreen(timestamp){
    if(!start) start = timestamp;
    // 根据时间戳计算每次动画位移
    const progress = timestamp - start;
    element.style.left = '${Math.min(progress/10,20)}px'
    if(progress<2000)window.requestAnimationFrame(updateScreen)
}

// 启动回调函数
window.requestAnimationFrame(updateScreen)

这样的方法除了可以防止丢帧，还可以通过节流不必要的函数执行节省CPU性能；

setInterval 除非clearInterval,否则在后台的动画就会不断的执行

函数节流：一个刷新时间间隔中多次执行其实是没有意义的。

1.2：web worker

将一些纯计算放到webworker中去

主线程创建worker子线程，可以分担一部分执行任务，当子线程执行结束之后，返回结果给主线程；

worKer子线程一旦被创建，就会一直执行，不会被主线程的函数打断，所以非常的耗费资源，故而要适当使用，不可以过度使用。一旦任务执行完毕就要及时关闭；

web worker子线程有以下限制：

01.DOM限制：无法读取主线程的DOM,也就无法使用document,window,parent等对象，只能访问到navigator和location对象。

02.文件读取限制：worker子线程无法访问本地文件系统，要求所加载的脚本来自网络。

03.通信限制：主线程和worker子线程不在同一个上下文内，所以无法进行直接通信，只能通过消息来完成；

04.脚本执行限制：虽然可以通过XMLHTTPRequest对象发起ajax请求，但不能使用alert()方法和confirm()方法在页面弹出提示。