页面渲染流程

     用户在浏览器地址栏输入URL(网址)后 到页面渲染出来 背后发生了什么

      请求网址对应的资源 得到资源 然后运行文档(大概过程)

      浏览器加载一份html文档是怎么加载的？

      1.把标签 文本 注释 属性等等解析为节点树(DOM Tree)

      2.解析时遇到不同的元素会有不同操作：

      2.1 style标签或者link-css 遇到css代码 就会把css代码解析为css样式结构体

      2.2 遇到src 会去加载(网络请求)资源

      3.把2.1的css样式结构体和DOM Tree结合变成呈现树/渲染树(Render Tree)

      4.按照Render Tree绘制页面

      注意：呈现树中有的文档树中一定有 文档树中有的呈现树中不一定有 比如隐藏的元素 文档树中有呈现树中就没有

      重绘与回流(回档)

      重绘 按照文档树的结构 重新绘制页面 渲染

      回流(回档) 页面的元素排版布局数量和节点在树中位置等发生了变化而需要重新构建

      重绘不一定引起回流 回流必然引起重绘

      程序执行时 常常会操作页面 所以常常引起重绘/回流 太过频繁就会造成页面性能不好==>页面卡 迟缓 手机发烫

      所以操作页面时 避免高频重绘(通过冰元素)或者使用框架(MVVM)

      冰元素document.createDocumentFragment():它自己不会添加到文档树中用于渲染 但是它的子代元素都会添加进去 它会自动融化(删除)将操作执行完成后一次添加到页面中 只回流了一次 避免了高频重绘回档