浏览器运行加载和解析步骤

  • 浏览器加载生成dom树和css树,两者合并生成渲染树,运用渲染树先布局后填充
    • 不要逐条修改css样式,改用class添加删除批量修改样式
    • 不要反复访问dom的样式(访问样式会造成渲染树强制生成?),改用变量缓存dom的样式值
    • 涉及过渡和动画的dom改用定位或2D\3D转变
    • 禁用表格布局
    • 图片给予元素内置宽高
    • CSS选择符是从右到左进行匹配的
      • 减少dom层次
      • 减少css数量
      • 避免后代选择器,尽量使用子选择器body > .class
      • 避免使用通配符*
  • html边加载边解析,生成dom树(DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 )
  • css加载不会阻塞dom树生成,但是会阻塞渲染树生成(谷歌)
  • 渲染树何时生成?可否理解为body下一个次级根节点完整解析完,就运用已解析的css树生成渲染树进行渲染?
  • js一般加载会阻塞html解析(script标签有异步加载属性可以避免阻塞),js加载完成后立马执行

猜你喜欢

转载自www.cnblogs.com/qq3279338858/p/9542207.html
今日推荐