jsp页⾯读取不到css样式_浏览器渲染页⾯那些事
浏览器
浏览器是⼀种软件，它可以从远程服务器(或本地磁盘)中加载⽂件并显⽰⽂件，它可以允许⽤户和它交互。
浏览器的核⼼是浏览器引擎。在不同的浏览器中，根据浏览器引擎的不同，它们显⽰页⾯的内容或者顺序会有所区别。
⽕狐的浏览器引擎称为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字节并将它们转换为屏幕上的渲染像素之间采取的步骤的过程称为关键渲染路径。
css最新优化您的⽹站的性能就是优化关键的渲染路径。
⼀个经过优化的站点应该进⾏渐进式渲染，并且不会阻塞整个过程。
这就是⽹络应⽤程序被视为慢速或快速的区别。
总结
现在的浏览器都提供开发者了开发者⼯具，通过它我们可以详细了解到页⾯的渲染，资源的加载整个过程，我们平时只要多打开它，多分析它，就能让我们的⽹站以最快的⽅式呈现在客户⾯前。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。