首页 技术 正文
技术 2022年11月15日
0 收藏 791 点赞 3,316 浏览 843 个字

浏览器请求发往服务器以后,返回HTML页面,页面内容开始渲染,具体的执行顺序为:

1. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件。

2. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件。

3. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了。

4. 浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码。

5. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码。

6. 浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它。

7. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<style>(style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码。

8. 终于等到了</html>的到来,实数不容易呀。。。

9. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径。

10. 浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

总结:

1> 影响页面二次渲染的原因

  img:图片未加载完的时候,HTML会继续渲染,当图片加载完以后需要重新渲染图片的这部分内容。

  display:none:内置样式也会影响加载,原来已经加载完成的元素需要隐藏重新渲染其他的元素排版。

2> 页面文件引用顺序

  1.总的来说就是按照html文档的顺序加载

  2.为了增加页面的额加载速度,应该把样式文件放在header中,把js文件放在所有的HTML内容之后加载,这样不至于在加载完多有的js文件之后再去加载html文件出现的浏览器的空白区。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,087
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,562
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,412
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,185
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,821
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,905