首页 > TAG信息列表 > documentFragment
documentFragment深入理解
documentFragment深入理解 抽疯的稻草绳关注 0.4482020.12.27 16:42:40字数 178阅读 3,225 documentFragment是一个保存多个element的容器对象(保存在内存)当更新其中的一个或者多个element时,页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到浅谈重绘和重排(回流)以及如何减少或避免回流
重绘和重排的概念,如何减少或避免回流 1.重绘(repaint)2.重排(reflow)3.引起重排的原因4.如何减少和避免重排 1.重绘(repaint) 屏幕的一部分要重绘。渲染树节点发生改变,但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变,但是该ddocumentFragment文档碎片
documentFragment是一个保存多个element的容器对象(保存在内存)当更新其中的一个或者多个element时,页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。documentFragment用来批量更新列如将ul里面的li取出放到documentFragment,更页面优化,DocumentFragment对象详解
DocumentFragment不是真实DOM树的一部分,它的变化不会引起DOM树的重新渲染的操作(reflow) ,且不会导致性能等问题。---MDN DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入requestIdleCallback 示例
requestIdleCallback 示例 通过具体例子,来理解浏览器性能优化相关的api,即requestIdleCallback. 示例一 /** * 原文网站 * https://www.cnblogs.com/galenyip/p/4856996.html */ var eventsToSend = []; var isRequestIdleCallbackScheduled = false; function onNavOpen