text: (window.webpackJsonp=window.webpackJsonp||[]).push([[71],{440:function(t,n,e){"use strict";e.r(n);var s=e(42),i=Object(s.a)({},(function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"如果让网页更流畅"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#如果让网页更流畅"}},[t._v("#")]),t._v(" 如果让网页更流畅")]),t._v(" "),e("h1",{attrs:{id:"todo"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#todo"}},[t._v("#")]),t._v(" TODO")]),t._v(" "),e("p",[t._v("60Hz，16.7ms")]),t._v(" "),e("p",[t._v("如何避免长任务")]),t._v(" "),e("ul",[e("li",[t._v("Web Worker")]),t._v(" "),e("li",[t._v("Time Slicing（时间切片），比如React的"),e("code",[t._v("fiber")])])]),t._v(" "),e("p",[t._v("时间分片")]),t._v(" "),e("div",{staticClass:"language- extra-class"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("    function init({ sliceList, callback }) {\n        if (!isFunction(callback)) {\n            return new Error('不是function');\n        }\n        // 添加切片队列\n        this.generator = this.sliceQueue({\n            sliceList,\n            callback\n        });\n        // 开始切片\n        this.next();\n    }\n\n    function* sliceQueue({ sliceList, callback }) {\n        let listOrNum = (isNum(sliceList) && sliceList) || (isArray(sliceList) && sliceList.length);\n        for (let i = 0; i < listOrNum; ++i) {\n            const start = performance.now();\n            callback(i);\n            while (performance.now() - start < 16.7) {\n                yield;\n            }\n        }\n    }\n")])])])])}),[],!1,null,null,null);n.default=i.exports}}]);