浏览器

浏览器是一种软件，它可以从远程服务器(或本地磁盘)中加载文件并显示文件，它可以允许用户和它交互。

浏览器的核心是浏览器引擎。在不同的浏览器中，根据浏览器引擎的不同，它们显示页面的内容或者顺序会有所区别。

火狐的浏览器引擎称为Gecko，Chrome的浏览器引擎称为Blink，而最新版的IE浏览器内核也已经投入Blink的怀抱。

数据接收和转换

浏览器处理的是字节而不是我们写的代码，因此，它需要对我们的代码比如html，css，js进行数据的转换才能处理。

HTML和DOM

HTML是标记语言，它是由一个个闭合的标签构成的，而浏览器需要将他们进行拆分统计，形成一个从根节点到子节点的数据结构，我们把这种结构叫做dom。可以说dom树是浏览器的一个核心功能，正是有了dom树的存在，我们的html代码才有了层次和结构。

CSS和CSSOM

css是样式表，它是用来给文档添加样式的。同HTML一样，它也需要进行解析，它会解析成CSSOM树，有了树级结构，样式就可以继承和单独拆分了。

渲染树

DOM和CSSOM树结构是两个独立的结构。

DOM包含有关页面HTML元素的关系的所有信息，而CSSOM包含有关元素样式的信息。

浏览器将DOM和CSSOM树合并为一个称为渲染树的东西。有了它，我们才能看到丰富多彩的页面。

渲染树包含有关页面上所有可见DOM内容的信息，以及不同节点所需的所有CSSOM信息。

请注意，如果元素被CSS隐藏，该节点将不会在渲染树中表示。

隐藏的元素将出现在DOM中，但不会出现在渲染树中。

原因是渲染树结合了来自DOM和CSSOM的信息，因此它知道在树中不包括隐藏元素。

布局

构建好渲染树后，下一步就是执行“布局”。

有了渲染树之后，我们在屏幕上就拥有了所有可见内容的内容和样式信息，但实际上我们还没有在屏幕上呈现任何内容。

浏览器需要通过从DOM和CSSOM接收到的内容和样式计算页面上每个对象的确切大小和位置。这样才能显示在页面上。这个过程就是布局，也被称为重排。

绘制

布局之后，我们需要的就是在浏览器中绘制出我们的页面。

根据渲染树和布局之后的信息，浏览器只要一个个像素点进行绘制，就可以画出整个页面。

JS和阻塞

一个不错的Web应用程序肯定会使用一些JavaScript。而且JavaScript可以修改页面的内容和样式。
言外之意，JS可以从DOM树中删除和添加元素，也可以修改元素的CSSOM属性。为什么很多时候我们都会把引入的js放到页面底部，目的就是为了防止JS阻塞布局。因为浏览器是顺序读取的，所以越早的构造出渲染树，我们看页面的时间就越短。不过async异步的引入，让我们可以不会因为js的加载而停止dom树的构建，而是在js加载完成之后来使用。

关键渲染路径

在接收HTML，CSS和JS字节并将它们转换为屏幕上的渲染像素之间采取的步骤的过程称为关键渲染路径。

优化您的网站的性能就是优化关键的渲染路径。

一个经过优化的站点应该进行渐进式渲染，并且不会阻塞整个过程。

这就是网络应用程序被视为慢速或快速的区别。

总结

现在的浏览器都提供开发者了开发者工具，通过它我们可以详细了解到页面的渲染，资源的加载整个过程，我们平时只要多打开它，多分析它，就能让我们的网站以最快的方式呈现在客户面前。

file_get_contents js没有渲染数据_浏览器渲染页面那些事相关推荐

火狐浏览器title过长显示不全_浏览器渲染
简述浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎.渲染引擎在不同的浏览器中也不是都相同的.目前市面上常见的浏览器内核可以分为这四种:Trident(I ...
android 重绘如何能不闪一下屏幕_浏览器渲染机制——重绘重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程我们先看看当浏览器拿到服务端返回的资源时 ...
浏览器渲染机制面试_浏览器渲染原理
本文目录结构问题浏览器渲染原理渲染过程 1. 浏览器接收到 HTML ⽂件并转换为 DOM 树当我们打开⼀个⽹⻚时,浏览器都会去请求对应的 HTML ⽂件.虽然平时我们写代码时都会分为 JS ...
Python笔记_64_Vue_M-V-VM思想_显示数据_常用指令_操作属性_绑定事件_操作样式_条件渲染指令_列表渲染指令
文章目录 Vue vue.js的M-V-VM思想快速使用显示数据常用指令操作属性绑定事件操作样式条件渲染指令列表渲染指令 Vue vue.js是目前前端web开发最流行的工具库,由尤雨 ...
div置于页面底部_浏览器渲染页面的原理及流程
浏览器渲染页面的原理及流程浏览器将域名通过网络通信从服务器拿到html文件后,如何渲染页面呢? 1.根据html文件构建DOM树和CSSOM树.构建DOM树期间,如果遇到JS,阻塞DOM树及CSSO ...
多个html页面拼接成一个页面_浏览器渲染页面机制以及如何减少DOM操作
为了能更好.更快的为用户呈现出他们想要的页面,基于浏览器的渲染机制,我们在开发中应该了解浏览器,了解浏览器的运行机制,以及在开发中我们能更好的提高性能,虽然现在市面上流行的VUE和react,但也应该 ...
JS 打印 data数据_寒冬求职季之你必须要懂的原生JS(中)
本文原载于SegmentFault专栏"前端进阶" 作者:前端小姐姐整理编辑:SegmentFault 互联网寒冬之际,各大公司都缩减了HC,甚至是采取了"裁员&quo ...
html图片视频渲染原理,初识浏览器渲染原理和CSS动画
1.浏览器渲染原理浏览器到底是怎么将一个html文件渲染成生动的页面的?话不多说,直接看图以图中的过程,浏览器的渲染过程大致就是: 通过HTML解析将HTML文件解析为 DOM 树; 通过CSS解 ...
vue 组件第一次不渲染问题_解决vue页面渲染但dom没渲染的操作
我就废话不多说了,大家还是直接看代码吧~ this.$nextTick(() => { $("select[name='ddlCostCenter']").select2({ ...

file_get_contents js没有渲染数据_浏览器渲染页面那些事

浏览器