网页加载过程使用教程_加载菜鸟教程网

html解析过程1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;2.浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;3.浏览器又发出CSS文件的请求,服务器返回这个CSS文件;4.浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,

网页加载过程使用教程

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.display=”none”,它命令浏览器隐藏掉代码中的某个<div>。突然少了这么一个元素,浏览器不得不重新渲染这部分代码;
9.终于等到了</html>的到来,执行完了此次的页面加载渲染过程,浏览器泪流满面……
10.此时,如果用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;
11.浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

html解析完成后HTML解析完毕后DOM树与CSS样式已经得到,开始构建呈现树RenderTree

流程分析

浏览器下载的顺序是从上到下,渲染的顺序也是从上到下。
由于浏览器采用自上而下的方式解析,在遇到样式(link、style)与脚本文件(script)时都会阻塞浏览器的解析,直到外部资源加载并解析或执行完毕后才会继续向下解析html。

JS的加载

不能并行下载和解析(阻塞下载)
当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现。

海计划公众号
(0)
上一篇 2020/03/26 23:33
下一篇 2020/03/26 23:33

您可能感兴趣的内容

  • js中(function(){…})()立即执行函数写法理解菜鸟教程下载_函数小白攻略

    ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此。要理解立即执行函数,需要先理解一些函数的基本概念。函数声明、函数表达式、匿名函数函数声明:functio

    2020/03/26
  • KPI过时了?为什么科技公司更偏爱OKR?指南教程_职场小白帮助

    除了KPI,考核员工还有什么方式?OKR是一种简单的管理方法,但是对于其误解和各种疑惑却很多。推崇者把OKR说得是无所不能,反对者认为不过是新瓶装旧酒,和KPI差不多。到底OKR和KPI,哪种方式更靠谱?技术leader该怎么选?今天,阿里资深技术专家燕标谈谈,他对OKR的思考。引子每过一段时间,就会出现一波新的管理概念方法和理念。最近OKR逐渐走到聚光灯下

    2020/03/23
  • Planetary.js使用帮助创建交互式Web地球仪js插件

    Planetary.js基础入门 官方网址:http://planetaryjs.com GitHub:https://github.com/BinaryMuse/planetar…

    2020/03/05
  • javascript初学者可以看什么书?小白教程_书籍指南攻略

    在javascript的入门阶段,通过书籍来学习对于新手来说才是最好的手段。书籍的学习固然比较枯燥,但是也是最权威,最系统化的,对于新手来说能够快速的完成基础知识的奠基,而对于之后进一步的提升也是大有裨益。下面就为各位javascript初学者推荐几本不容错过的javascript书籍。1、《javascript面向对象编程指南》,风格轻松易懂,比较适合初学

    2020/03/20
  • video.js使用技巧入门攻略_插件小白帮助

    1 初始化Video.js初始化有两种方式。1.1 标签方式一种是在

    2020/03/24
  • css伪类和伪元素使用攻略_伪类小白攻略

    伪类和伪元素伪类和伪元素,对于绝大多数同学来说,都是耳熟能详的名字,但确实又有很多人搞不清楚它们之间的区别,以致于混淆概念。而当概念都混淆的时候,也往往意味着你不会经常使用它,怕出错,怕用不好。而这也会大大影响你的效率,本来几行代码就可以完成的工作,却要写上一大堆……所以,花点时间理清楚每一个看似微小的概念,会让我们的编程更有效率。下面进入正题。​

    2020/03/23
  • cocoscreator 防止button连击多次触发事件入门攻略_事件使用帮助

    很多时候,ui上面的button都只需要单击触发一次,当用户快速连续点击时就有可能出现非意料的事情,解决这个问题很简单,只要规定button在指定间隔时间内只能触发一次就行。将下面的代码保存为ButtonSafe.js, 只需要给每个button控件添加下面的脚本并指定间隔时间即可防止重复点击。/*** Created by skyxu on 2018/9/

    2020/03/23
  • vue实现网络图片瀑布流 小白基础 下拉刷新 上拉加载更多入门基础知识_瀑布流

    一、思路分析和效果图用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果。然后针对这几个效果的实现,捋下思路:根据加载数据的顺序,依次追加标签展示效果;选择哪种方式实现瀑布流,这里选择绝对定位方式;关键问题:由于每张图片的宽高不一样,而瀑布流中要求所有图片的宽度一致,高度随宽度等比缩放。而且由于图片的加载是异步延迟。在不知道图片高

    2020/03/20
  • mpvue开发微信小程序基础知识小白入门_小程序使用说明

    一、mpvue简介mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。mp 即 mini program 的缩写。 二、mpvue快速入门① 通过脚手架引入m

    2020/03/24
  • 海投网入门基础知识_帮助大学毕业生找到最合适的工作

    海投网入门基础知识 官方网址:https://www.haitou.cc/ 简介描述:帮助大学毕业生找到最合适的工作 为高校应届生网罗最全面的宣讲会、招聘、实习等校招求职信息,帮助…

    2020/03/06
  • Web容器菜鸟知识Web服务器及常见的Web容器有哪些?_容器小白攻略

    一、引言首先来理解一下简单的一个请求发送到响应的过程。首先,客户端,通常是浏览器或者一些应用发送请求到你的服务器地址,比如访问你的Url或者其他的东西。而我们的服务器通常要分为两个部分,一部分是服务器硬件,有了硬件之后还有有硬件上对应运行的软件。即服务器软件其次,服务器的硬件部分接收到了这一段请求,将其递交给对应的进程,服务器软件。此时这个服务器软件即为We

    2020/04/03
  • 如何去设计一个组件封装小白教程前端组件化设计思路_封装小白攻略

    目前前端三大框架(Vue.js, Angular.js, React.js)都在引领着前端的组件化开发方向,组件化的前端开发方式的确为业务实现带来了前所未有的方便,其实组件化开发早已经具有(YUI),但如何封装一个优秀的组件,可能并不是每位前端开发者都能够做好的。组件封装有一定的不确定性,更多时候是在做几个方面的权衡,并且在业务不断变化中,可能还会面临一些调

    2020/04/03
  • sweetalert基础入门教程_SweetAlert 是一个 JavaScript 原生弹框的完美的替代

    sweetalert基础入门 官方网址:http://t4t5.github.io/sweetalert GitHub:https://github.com/t4t5/sweeta…

    2020/03/05
  • vue用v-html加载渲染,里面的内容样式不生效基础知识_样式使用指南

    做一个商品的详情页,需要输出富文本的内容,需要设置里面的图片样式最大宽度100%。可是设置img 100%后没反应,看F12检查元素也没加上去。解决方法有2个:1、scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.解决

    2020/03/30
  • 可以使用css的方式让input不能输入文字吗?使用帮助_input新手入门

    在使用一个js插件时,不想让用户点击input输入和触发那个下拉框,用css的方式有什么方法?readonly和disabled都要写到标签上,但input都是这个插件生成的,有什么好的方法解决吗?最简单的一个css方法是:pointer-events: none;

    2020/03/23
  • U一点菜鸟教程_阿里巴巴(中国站)用户体验设计部博客U一点设计 UED团队

    U一点入门百科 官方网址:http://www.aliued.cn/ 简介描述:阿里巴巴(中国站)用户体验设计部博客U一点设计 UED团队 阿里巴巴中文站用户体验设计团队。&nbs…

    2020/03/06