转载自：

http://www.php.cn/div-tutorial-386900.html

（本文对读者有帮助的话请移步支持原作者）

笔记：

这样会先加载css的样式，在渲染dom的时候已经知道了自己的样式了，所以一次渲染成功

如果css放在底部，那么需要先渲染dom，然后加载css后会重新渲染之前dom，需要两次渲染

转载自：

https://www.cnblogs.com/Walker-lyl/p/5262075.html

（本文对读者有帮助的话请移步支持原作者）

笔记：

html、css、js文件加载顺序及执行情况

今天看书，看到html，css，js加载执行情况，发现自己并不是真正的了解，网上搜了半小时依然未弄明白，就在这时我找到了让我恍然大悟的一段话，如下：

HTML页面加载和解析流程

1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。

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

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

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

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

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

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

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

9. 终于等到了</html>的到来，浏览器泪流满面……

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

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

html DOM（CSS放置位置的问题）的更多相关文章

  1. 关于css,js放置位置的问题

    一天,小明正在网上查找资料,项目中遇到的问题需要通过查阅资料来解决,他看到一个标题很有意思,觉得这应该是他要找的答案,于是他就点了进去,结果进入网站后几秒钟的时间,网页还是一片空白,过了好久才加载完成 ...

  2. JS代码放置位置、变量与数据类型、运算符与逻辑表达运算符

    内容简要: 1.JS代码放置位置的问题: 2.变量与数据类型: 3.运算符与逻辑表达式的运算符   我的位置 全局问题:为何在网页推荐位置(一般在<head></head>内部 ...

  3. Spring环境搭建之：导入jar包、配置文件名称及放置位置

    Spring环境搭建之:导入jar包.配置文件名称及放置位置 现在项目开发中spring框架应用的还是比较多的,自己用的还不太熟练,每次用的时候总配置半天,总有些配置弄错,就找个时间总结以下,方便以后 ...

  4. JavaScript放置位置区别

    JavaScript放置位置区别 页面中的脚本会在页面载入浏览器后立即执行.我们并不总希望这样.有时,我们希望当页面载入时执行脚本,而另外的时候,我们则希望当用户触发事件时才执行脚本. 位于 head ...

  5. javascript代码放置位置对程序的影响

    在编写html文档时,javascript可以放置的位置有两个地方<head>或者<body>,但是放置的地方,会对 JavaScript 代码的正常执行会有一定影响.由于 H ...

  6. 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

    亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...

  7. （11）JavaScript之[DOM HTML][DOM CSS]

    DOM HTML //改变HTML输出流 document.write(Date()); //改变HTML的内容 document.getElementById('box').innerHTML = ...

  8. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

  9. DOM CSS

    DOM CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: document.getElemen ...

随机推荐

  1. centos 以太坊多节点私链搭建

    环境  centos 7   搭建 3 个节点的 私链. 第一步 安装 一些依赖的 工具 yum update -y && yum install git wget bzip2 vim ...

  2. Mybatis-configuration 配置-settings配置

    设置参数 描述 有效值 默认值 cacheEnabled 这个配置使全局的映射器启用或禁用 缓存. true | false true lazyLoadingEnabled 全局启用或禁用延迟加载.当 ...

  3. PKU--2184 Cow Exhibition （01背包）

    题目http://poj.org/problem?id=2184 分析:给定N头牛,每头牛都有各自的Si和Fi 从这N头牛选出一定的数目,使得这些牛的 Si和Fi之和TS和TF都有TS>=0 F ...

  4. Cyclic GCDs

    Cyclic GCDs 题目链接 题面描述 有\(n\)个点,每个点有权值. 现有排列\(P\),\(p_i\)表示\(i\)个点向\(p_i\)连了一条边. 显然会形成若干个简单环.每个简单环的权值 ...

  5. 枚举进程，线程，堆 CreateToolhelp32Snapshot

    Takes a snapshot of the processes and the heaps, modules, and threads used by the processes.对当前系统进行一 ...

  6. Web交互增强

    刚刚google了一下这个概念,在其他的领域已经存在了这个概念,但是web方面还是没有被人提及的,所以我在这里第一次声明web方面的交互增强 交互增强 (interaction enhance) 相对 ...

  7. C# 利用Newtonsoft.Json 序列化生成Json数据

    现在需要将一些数据转化成json格式返回给调用者, 使用Newtonsoft.Json.DLL库来帮助我们序列化 举例: {"300033":{"MC":&qu ...

  8. java记录CST时间类型的字符串转换问题

    下列代码可以实现把Java的CST格式的时间字符串转为为Date对象和所需要的日期时间格式! String dateStr = "Wed Sep 16 11:26:23 CST 2009&q ...

  9. pytest框架-介绍、Mark（打标签）、命令运行用例、用例执行顺序、

    1.pytest介绍:基于unittest 之上的单元测试框架 1.1.自动发现测试模块和测试用例: unitest 需要添加用例,(泰斯特楼贷)加载器加载测试用例 pytest 只需要一条代码就可以 ...

  10. mapreduce join操作

    上次和朋友讨论到mapreduce,join应该发生在map端,理由太想当然到sql里面的执行过程了 wheremap端 join在map之前(笛卡尔积),但实际上网上看了,mapreduce的笛卡尔 ...