zoukankan      html  css  js  c++  java
  • html渲染过程

    1.解析html文件,创建DOM树
      自上而下解析,遇到任何样式(link、style)和脚本(script)都会阻塞
      1)css加载不会阻塞html文件的解析,但会阻塞dom的渲染
      2)css加载会阻塞后面js语句的执行
      3)js会阻塞html的解析和渲染
      4)没有defer和async标签的script会立即加载并执行
      5)有async标签的js,js的加载执行和html的解析和渲染并行
      6)有defer标签的js,js的加载和html的解析和渲染并行,但会在html解析完成后执行,在触发DOMContentLoaded事件前执行
      7)DOMContentLoaded和onload的区别:DOMContentLoaded在html解析完毕后执行,loload在页面完全加载完成后执行(包括样式和图片)
    2.解析css,生成CSSOM,css对象模型
    3.dom和css合并,构建渲染树(Render Tree)
    4.布局(Layout)和绘制(Paint),重绘(repaint)和重排(reflow/回流)
      1)重绘:根据元素的新属性重新绘制,使元素呈现新的外观
      2)重排:当渲染树中的一部分因为元素的规模尺寸,布局,隐藏等改变而需要重新构建
      3)重排必定会引发重绘,但重绘不一定会引发重排

    补充:
    监听资源加载完成有四种方式
      1. window.onload = function(){....}
      2. window.addEventListener("load",function(){....});
      3. document.body.onload = function(){....}
      4. <body onload = "load()">

  • 相关阅读:
    js 实现商品放大镜效果
    Angular.js数据绑定时自动转义html标签及内容
    Sublime 快捷键一览表
    这么牛的简历,你见过么?
    正向代理与反向代理
    负载均衡
    redis搭建与安装
    svn服务配置和日常维护命令
    Mysql导出导入
    linux搭建svn服务器
  • 原文地址:https://www.cnblogs.com/yaolei0422/p/13827834.html
Copyright © 2011-2022 走看看