网页加载html代码显示页面的过程

参考:https://zhidao.baidu.com/question/1802910770933772107.html

html代码从上到下运行:

  1. head标签中会包含一些引用外部文件的代码,从开始运行就会下载这些被引用的外部文件
    当遇到script标签的时候,浏览器暂停解析(不是暂停下载,外部文件还在继续下载),将控制权交给JavaScript引擎(解释器)
    如果<script>标签引用了外部脚本,就下载该脚本,否则就直接执行,执行完毕后将控制权交给浏览器渲染引擎
  2. 当head中代码解析完毕,会开始解析body中的代码
    如果此时head中引用的外部文件没有下载完,将会继续下载
    浏览器解析body代码中的元素,会按照head中声明一部分样式去解析
    如果此时遇到body标签中的<script>,同样会将控制权交给JavaScript引擎来解析JavaScript
    解析完毕后将控制权交还给浏览器渲染引擎。
    当body中的代码全部执行完毕、并且整个页面的css样式加载完毕后,css会重新渲染整个页面的html元素。
  3. 按照之前的描述,<script>写到body标签内靠后比较好,
    因为JavaScript 会操作html元素, 如果在body加载完之前写JavaScript 会造成JavaScript 找不到页面元素
    window.onload: 等待页面中的所有内容加载完毕之后才会执行
    $(document).ready(): 页面中所有DOM结构绘制完毕之后就能够执行
    可以这样理解:window.onload 和 $(document).ready()相当于写在body 内 最靠后的<script> 代码段
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值