调用谷歌浏览器的打印所遇到的困难，回流重绘

首先我要说一下打印的思路:（往往开发中打印界面和目标界面并不一样，我们可以在打印的时候做一些操作）

1.将页面dom保存起来存在文档碎片里面

let fragment = this.nodeToFragment(document.body)

2.将生成的图片放在body里面(我在开发的过程中遇到了,调用打印方法的时候发现不能将背景色进行打印,当然这需要在打印里面去设置 更多设置里面勾选打印背景色)   

document.body.style.background = 'rgba(0, 0, 0, 0.5)'
document.body.innerHTML = `<img src=${img} width="100%"/>`
现在整个body里面就剩下一张图片了,然后我们在将之前dom还原就可以了
window.print()
document.body.style.background = ''
document.body.innerHTML = null
document.body.appendChild(fragment)

目的：为了避免重绘回流，造成重复的渲染，这里完善一下nodeToFragment方法

function nodeToFragment(node){
            const fragment = document.createDocumentFragment()
            let child
            while( child= node.firstChild){
                fragment.appendChild(child)
            }   
            return fragment
}
let frag = nodeToFragment(document.body)

回流就是渲染节点的大小，边距发生改变而重新构建的过程

重绘就是元素只改变了一些颜色外观（背景色，边框颜色，文子颜色）而重新绘制的过程

哪些属性会造成回流？

offset client scroll width height getComputedStyle getBoundingClientRect

页面初始化，删除节点，修改边距，resize，文字的大小

怎样避免减少回流？

dom:1.创建文档碎片，改完之后替换2.display:none,修改完在还原3.复制原来的dom,改完之后，替换

多次读取width height

避免使用table布局

文字的大小

将复杂的界面脱离文档流，单独成层，让gpu参与进来没有了回流重绘的过程

独立生成层：

根元素，position，transform,半透明，css滤镜，canvas,video,overflow

gpu会参与进来的：

css3d,video,webgl,transform,css滤镜，will-change