文档章节

html加载顺序以及影响页面二次渲染额的因素

前端老手
 前端老手
发布于 10/14 22:58
字数 755
阅读 21
收藏 0

本文转载于:专业的前端网站html加载顺序以及影响页面二次渲染额的因素

浏览器请求发往服务器以后,返回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文件出现的浏览器的空白区。

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文转载自:https://www.mk2048.com/blog/blog.php?id=hiih0kajji1j

前端老手
粉丝 10
博文 703
码字总数 0
作品 0
卢湾
技术主管
私信 提问
浏览器加载和渲染网页顺序

1.浏览器加载和渲染html的顺序 浏览器加载和渲染html的顺序 IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 在渲染到页面的某一部分时,其上面的所有部分都已经...

浅色的我
2016/02/16
78
0
浏览器加载和渲染html的顺序

前阵子,在组内给大家做了一次关于“浏览器加载和渲染HTML的顺序”的分享,这里再总结一下吧。 浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染...

凯文加内特
2014/03/19
197
0
HTML页面加载和解析流程 介绍

1.浏览器加载和渲染html的顺序 1.1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 1.2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说...

驛路梨花醉美
2016/12/05
385
0
页面渲染深入解析

基本渲染过程 用户请求的资源通过浏览器的网络层到达渲染引擎后,渲染工作开始。每次渲染文档通常不会超过8K的数据块,其中基础的渲染过程如下图所示: 第一步:渲染引擎首先解析HTML文档,转...

yope
2015/03/09
2.6K
0
浏览器加载渲染网页过程解析--总结(三)

1.浏览器加载和渲染html的顺序 1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有...

长平狐
2012/11/28
437
0

没有更多内容

加载失败,请刷新页面

加载更多

交换两数(函数)

#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> void Exchange(int* x, int* y){ int tmp = 0; tmp = *x; *x = *y; *y = tmp; } int main(){ int a; int b; scanf......

Lxxxxx256
12分钟前
2
0
给 K8s API “做减法”:阿里巴巴云原生应用管理的挑战和实践

作者 | 孙健波(天元) 阿里巴巴技术专家 本文整理自 11 月 21 日社群分享,每月 2 场高质量分享,点击加入社群。 早在 2011 年,阿里巴巴内部便开始了应用容器化,当时最开始是基于 LXC 技术...

阿里巴巴云原生
今天
6
0
数据平面

3.1数据平面的任务 解析数据包头 转发数据包到某些端口 通过查询由控制平面所生成的转发表 传统网络数据平面 数据包--输入端口---拆封和解析,转发策略匹配,转发调度---输出端口(协议相关,...

Firefly-
昨天
6
0
如何高效的阅读uni-app框架?(建议收藏)

作者 | Jeskson 来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js。脚本,应用程序,main.js。日志打印,定时器,生命周期,页面,页面通...

达达前端小酒馆
昨天
7
0
实现原理专题--存储器的实现(三)

计算机实现原理专题--存储器的实现(二)中描述了一种电平触发器,但是某些应用需要在保持位从0到1变化的过程中对数据端进行保存。这种触发器叫边沿触发器。 一开始Q为0,时钟信号为0。当数据...

FAT_mt
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部