转载自：

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. 怎么对C++枚举(不是类)里面的东西进行随机

    把枚举里面的东西取到一个数组如: enum 枚举类型 a[]={ 枚举元素 }; 变成了一个数组,然后把随机结果当成枚举数组的索引,就可以得到随机的枚举元素了.

  2. 从GoogLeNet至Inception v3

    从GoogLeNet至Inception v3 一.CNN发展纵览 我们先来看一张图片: 1985年,Rumelhart和Hinton等人提出了后向传播(Back Propagation,BP)算法( ...

  3. 【NOIP2018模拟11.01】树

    题目 描述 题目大意 维护一个序列,支持三种操作: 1.修改一段区间,将这段区间内的所有数都andandand一个数. 2.询问区间和. 3.询问区间两两相加的平方和. N≤10000N\leq 10 ...

  4. 移动端video视频播放问题

    1.视频播放后自动全屏 video添加playsinline  webkit-playsinline属性 2.安卓暂停或播放完毕不能滑动 通过js判断机型,安卓去掉controls属性,ios保留co ...

  5. Quick BI 的模型设计与生成SQL原理剖析

    一.摘要 随着物联网的告诉发展,数据量呈现井喷式的增长,如何来分析和使用这些数据,使数据产生商业价值,已经变得越来越重要.值得高兴的是,当前越来越多的人已经意识到了用数据分析决定商业策略的重要性,也都 ...

  6. [CQOI2011]放棋子--DP

    题目描述: 输入格式 输入第一行为两个整数n, m, c,即行数.列数和棋子的颜色数.第二行包含c个正整数,即每个颜色的棋子数.所有颜色的棋子总数保证不超过nm.N,M<=30 C<=10 ...

  7. IT外包概要

    IT外包 前两天和朋友聊起这个外包的问题,就顺便给他说了一下,自己也整理了一下,发出来,方便更多的人. 如果有说的不准确的地方欢迎大家补充分享. 大致分两种: 项目外包, 人力外包. 简而言之:项目外 ...

  8. Web前后端缓存技术（缓存的主要作用是什么）

    Web前后端缓存技术Web前后端缓存技术(缓存的主要作用是什么) 一.总结 一句话总结: 加快页面打开速度 减少网络带宽消耗 降低服务器压力 1.在Web应用中,应用缓存的地方有哪些? 主要有浏览器缓 ...

  9. PAT甲级——A1060 Are They Equal

    If a machine can save only 3 significant digits, the float numbers 12300 and 12358.9 are considered ...

  10. sort方法

    作用:对列表进行排序 >>> spam=[2,5,3,14,1,-7] >>> spam.sort() >>> spam [-7, 1, 2, 3 ...