js之页面渲染

今天给大家总结一下浏览器渲染的机制,页面渲染就是浏览器的渲染引擎将html代码根据CSS定义的规则显示在浏览器窗口中的过程。

大致工作原理如下:

  • 用户输入网址,浏览器向服务器发出请求,服务器返回html文件;

  • 渲染引擎开始载入html代码,并将HTML中的标签转化为DOM节点,生成DOM树;

  • 如果引用了外部css文件,则发出css文件请求,服务器返回该文件;

  • 如果引用了外部js文件,则发出js文件请求,服务器返回该文件后开始运行;

  • 渲染引擎继续载入html中的部分的代码,并开始解析前面返回的css文件,然后根据css选择器计算出节点的样式,创建渲染树;

  • 从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该出现在屏幕上的精确坐标;

  • 如果body中的引用了图片资源,则立即向服务器发出请求,此时渲染引擎不会等待图片下载完毕,而是继续渲染后面的代码;

  • 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排版,因此引擎需要回过头来重新渲染这部分代码;

  • 如果此时js脚本中运行了style.display=”none”, 布局被改变,引擎也需要重新渲染这部分代码;

  • 直到页面渲染完毕。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值