转载自：

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. 左神算法进阶班5_4设计可以变更的缓存结构(LRU)

    [题目] 设计一种缓存结构,该结构在构造时确定大小,假设大小为K,并有两个功能: set(key, value):将记录(key, value)插入该结构. get(key):返回key对应的valu ...

  2. 如何妥善处理WebBrowser对Javascript的错误问题，阻止JS弹出框，提高用户体验

    由于项目需求,最近转战客户端,开始搞浏览器开发.众所周知,现在在微软平台上开发浏览器,最常用的方法就是扩展Webbrowser,但是首先要清楚的是,WebBrowser控件仅仅是对WebBrowser ...

  3. ListCtrl使用指南

    http://blog.csdn.net/bqw2008/article/details/2047489 Windows ListCtrl使用技巧1. ListCtrl 风格       LVS_IC ...

  4. .net 设置默认首页

    解决方案一:设置默认首页 在 Web.config 文件中,加上红色字体间的内容 <configuration> <system.web> <compilation de ...

  5. 2019-2-18-VisualStudio-给项目添加特殊的-Nuget-的链接

    title author date CreateTime categories VisualStudio 给项目添加特殊的 Nuget 的链接 lindexi 2019-02-18 15:56:48 ...

  6. Leetcode963. Minimum Area Rectangle II最小面积矩形2

    给定在 xy 平面上的一组点,确定由这些点组成的任何矩形的最小面积,其中矩形的边不一定平行于 x 轴和 y 轴. 如果没有任何矩形,就返回 0. 示例 1: 输入:[[1,2],[2,1],[1,0] ...

  7. 11.Hibernate一对多关系

    创建JavaBean 一方: Customer private long cust_id; private String cust_name; private long cust_user_id; p ...

  8. rabbitmq类

    1.accept.php消费者代码需要在命令行执行 2.'username'=>'asdf','password'=>'123456' 改成自己的帐号和密码 RabbitMQCommand ...

  9. 如何用js造轮子

    写了一个非常通俗易懂的造轮子的方法 <div class="wrap"></div> <div class="wrap">& ...

  10. SQLSTATE[HY000] [2002] 乱码

    string(59) "SQLSTATE[HY000] [2002] ����Ŀ����������ܾ����޷����ӡ� " 实际意思是:SQLSTATE[HY000] [20 ...