服务器下载资源的过程就是先下载index.html,当遇到Javascript，css的时候再下载他们。
浏览器的内核是什么？
浏览器内核指的就说浏览器的排版引擎，排版引擎的英文全称：layout engine,也叫做浏览器引擎browser engine,页面渲染引擎rendering engine或样板引擎。也就是说当一个网页下载下来后就是由渲染引擎帮助解析的。
浏览器的内核有哪些？
常见的浏览器内核有：Trident,Gecko,Presto,Webkit,BlinkTrident中文名称叫三叉戟，是IE和早期的360安全浏览器，早期搜狗浏览器早期百度浏览器，早期的UC浏览器现在已经废弃。Gecko壁虎浏览器内核，是火狐浏览器内核Mozilla Firefox。Presto浏览器是由Opera Software开发的浏览器排版引擎,它是世界公认最快的渲染速度的引擎，但是在13年之后也加入了谷歌阵营Opera弃用了Presto。Webkit是苹果浏览器Safari的内核，是好多移动端浏览器的内核包括苹果和安卓。Blink内核其实是由于Webkit内核改版而来。由于苹果公司开源了Webkit浏览器内核，谷歌公司发现确实Webkit有他的优势于是借用Webkit的思想开发出了Blink内核的浏览器，后来被大范围使用，现在的Google Chrome谷歌浏览器，Edge浏览器，360极速浏览器，搜狗高速浏览器等好多都是用的Blink内核。
渲染引擎如何解析页面？
渲染引擎在拿到一个页面后，如何解析整个页面并且最总呈现在网页上？
渲染页面的详细流程是什么样的？
解析一：HTML解析
因为默认情况下服务器会给浏览器返回index.html文件，所以解析HTML是所有步骤的开始：解析HTML，会构建DOM TreeDOM树。
解析二：生成CSS规则
在解析的过程中，如果遇到CSS的link元素，那么会由浏览器负责下载对应的css文件。这里我们下载css文件是不会影响DOM书的解析的。
浏览器下载完成CSS文件后，就会对CSS文件进行解析，解析出对应的规则树。我们可以称之为CSSOM英文全称是CSS Object Model，也叫CSS对象模型。
解析三 构建Render Tree
当有了DOM Tree和CSSOM Tree后，就可以两个结合起来构建Render Tree渲染树了。
注意两点：
1.link元素不会阻塞DOM Tree的构建过程，但是会阻塞Render Tree的构建过程。这里因为Render Tree在构建的时候，需要对应的CSSOM TreeCSS对象模型。
2.Render Tree和DOM Tree并不是一一对应的关系，就比如对于display为none的元素不会出现在render tree中。
解析四 布局layout和绘制Paint
第四步是在渲染树Render Tree上运行布局Layout以计算每个节点的几何体，渲染时会表示显示哪些节点以及其他样式，但是不显示每个节点的尺寸位置等信息，布局是确定呈现书中所有节点的宽度高度和位置信息。
第五步是将每个节点绘制Paint到屏幕上，在绘制阶段，浏览器将布局阶段计算的每个frame转为实际的像素点。包括将元素的可见部分进行绘制， 比如文本，颜色，边框，阴影，替换元素比如img。
Match selectors：浏览器遍历CSSOMCSS对象模型，将选择器与DOM树中的元素匹配，这个过程决定了CSS规则应用于哪些DOM元素
Compute Style：在选择器匹配后，浏览器计算每个元素的最终样式，这包括计算具体的样式值，处理继承的样式和解析因层叠产生的任何冲突。
Construct frames：这通常是指生成布局树，它是渲染树的一部分，仅包含要布局和绘制的元素。这一步骤涉及确定文档的结构层次和包含快。布局树和渲染树是有微小的差异，布局树是渲染树的子集，不包含渲染树中元素的颜色，背景，阴影等信息。
感谢大家观看
[...]不同的浏览器存在兼容性问题的核心原因是不同的浏览器可能使用的是不同的浏览器内核。在现代化开发中，大多数的浏览器兼容性问题是可以通过工程化中的配置选项来解决的。1.比如browserslist可以配置目标的浏览器或者Node环境，然后在不同的工具中起作用，比如autoprefixer/babel/postess preset env等，在进行了正确的配置后，开发的Vue或者React项目在进行打包时[...]
[...]在BFC中，box会在垂直方向上一个挨着一个的排布垂直方向的间距由margin属性决定在同一个BFC中，相邻两个box之间的margin会折叠(collapse)在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的然后我们再看一下官方文档中如何说明的？总结BFC是什么？W3C文档讲：在标准流中，我们所有的盒子，不管是块级盒子还是行内盒子，它们都属于某一个FC格式化上下文，块级盒子属于BFC`块级格[...]
[...]什么是FC呢这里我们给出W3C给出的文档，FC文档FC的全称是FormattingContext，元素在标准流里面都是属于一个FC的。那么什么又是IFC，BFC呢？IFC行内元素的布局都属于Inline Formatting,inline level box都是在IFC中布局的BFCBFC英文全称是Block Formatting Context,也就是block level box都是在BFC中[...]
这确实是一个盲点，这个还是很有必要的，处理不好会导致网页内的元素出现抖动问题。
[...]我们知道，当浏览器在执行到script标签的时候，首先会停止构建DOM树，然后下载Javascript文件并且执行，当JavaScript脚本执行完毕之后才会继续解析HTML标签构建DOM树。为什么Javascript程序会这样做呢？原因是我们的Javascript的作用就是操作DOM并且可以修改DOM。如果我们等到HTML执行完成之后再去执行JavaScript就会造成严重的回流和重绘，尤其是现[...]
[...]async属性和defer属性目标一样它也是为了不让js阻塞DOM树的构建。不过他们两个还是有区别的。async让js脚本的下载和执行是独立的。浏览器不会因为async属性的script脚本的执行而阻塞，这一点和defer属性类似。然而async属性比较任性，只要脚本被浏览器下载完成之后就会立即执行，不会等待在DOMContentLoaded之前执行。所以它不能保证是在DOMContentLoad[...]
我热爱 旅游专栏。令人惊艳了解路线。
欣赏你的照片, 我明白, 世界很美。感谢 旅行灵感。
读起来像小说。继续保持 带来的灵感。
让人精神焕发的 帖子! 我准备订票了。