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

时间：2022-05-09 09:37:23

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

html加载顺序以及影响页面二次渲染额的因素的更多相关文章

  1. JS 和 CSS 的位置对其他资源加载顺序的影响

    JS 和 CSS 在页面中的位置,会影响其他资源(指 img 等非 js 和 css 资源)的加载顺序,究其原因,有三个值得注意的点: JS 有可能会修改 DOM. 典型的,可能会有 document ...

  2. 无阻塞加载js，防止因js加载不了影响页面显示

    浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢 ...

  3. html页面元素加载顺序

    一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images/Css.JPG')" ...

  4. web&period;xml加载顺序

    一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...

  5. 【未整理】web&period;xml加载顺序&period;RP

    一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...

  6. 服务器启动时Webapp的web&period;xml中配置的加载顺序

    一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...

  7. 服务器启动时Webapp的web&period;xml中配置的加载顺序&lpar;转载）

    一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...

  8. 从html页面加载顺序来更好的理解jquery初始化

    一,html页面加载顺序 1,用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件:2,浏览器开始载入html代码,发现<head>标签内 ...

  9. web页面的加载顺序

    1.页面顺序 一个典型的web页面由于三个部分组成:html.css和JS.执行的顺序是: 在构造完HTML的dom结构时.触发DOMContentLoaded事件. 整个执行过程安装html的顺序来 ...

随机推荐

  1. 关于C&num;的内存释放问题

    最近在做一个要循环读取xml文件的功能. 想法是读取一个文件,释放一个文件,这样就不会消耗太多内存. 结果运行起来内存不停涨,最后内存溢出.用gc,disponse,异步都没有用. 后来改成relea ...

  2. 转载 HTTP常见状态码分析 200 301 302 404 500

    转载原地址:  http://www.cnblogs.com/starof/p/5035119.html HTTP状态码(HTTP Status Code) 一些常见的状态码为: 一.1开头1xx(临 ...

  3. 转：Jmeter之使用CSV Data Set Config实现参数化登录

    在使用Jemeter做压力测试的时候,往往需要参数化用户名,密码以到达到多用户使用不同的用户名密码登录的目的.这个时候我们就可以使用CSV Data Set Config实现参数化登录: 首先通过Te ...

  4. VS2010下创建的VB&period;NET项目打包发布安装包的流程

    VS2010下创建的VB.NET项目打包发布安装包的流程 参考:http://blog.csdn.net/liuyanlinglanq/article/details/8609675  关于relea ...

  5. netty4&period;x 传输文件

    一:简介 netty传输文件的例子并不多,当前的项目刚才需要使用netty,所以就记录一下使用方法,使用netty传输文件,首先需要启动一个服务端,等待服务端请求监听,然后传输文件的时候,启动一个客户 ...

  6. C&plus;&plus; Primer 有感（命名空间）

    1.命名空间定义以关键字namespace开始,后接命名空间的名字. 2.命名空间可以在全局作用域或其他作用域内部定义,但不能在函数或类内部定义. 3.定义在命名空间中的实体称为命名空间的成员.像任意 ...

  7. css&lowbar;属性

    老师的博客:https://www.cnblogs.com/liwenzhou/p/7999532.htm css的属性 整体属性的:作用于全局 width:表示宽 height:表示长 color: ...

  8. 总结jenkins Android自动打包遇到的坑

    一.ndk-build报错 [root@hejianlai-jenkins LearnGradle]# ndk-build /usr/local/android-ndk-r8/ndk-build: / ...

  9. 如何停止处于stopping状态的windows服务

    工作中有时需要启动和停止windows service,有时候会出现服务处于stopping或者starting的状态,但是,在services界面中,start service/stop servi ...

  10. Java8 异步编排类CompletableFuture

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. https://www.cnblogs.com/shijiaqi1066/p/8758206 ...

相关文章