web解析过程

MiracleWong 发布于2019-08-01 16:48 / 1586人阅读

摘要：所以选择器嵌套层次越深，匹配的时间会越长。加载会阻塞初次渲染对于首页无关的样式，需要使用适当的方式避免其阻塞初次渲染会阻塞页面初次渲染使用媒体查询，虽然加载样式表，但只针对打印时才应用该样式，不会阻塞初次渲染。通过引入，可以避免阻塞。

浏览器渲染原理

DOM解析

DOM树构建
过程：
1.根据HTML文档的内容，根据标签进行分词Token
2.根据Token生产对应的节点Node
3.将节点根据嵌套关系组合成为一棵对象节点树DOM

浏览器解析文档对象模型DOM是增量进行的，无需等待整个HTML文档加载完毕，便可以开始解析DOM

CSSOM解析会阻塞HTML Parser；JavaScript脚本文件执行会阻塞HTML解析；CSS、JavaScript、Images和Font等静态资源的异步加载的，渲染页面与CSS解析与JavaScript执行会有相互的依赖

css解析

CSSOM树的构建
CSSOM的解析依赖于选择器，选择器的匹配是从内到外的。所以选择器嵌套层次越深，匹配的时间会越长。

CSSOM只解析可视部分body标签中的内容，将所有匹配的元素共同构建一个CSSOM树，从根节点一次向下，所有节点的属性向下继承

RenderTree树的构建

利用DOM和CSSOM组合构建生成RenderTree，对应Recaculate Style

RenderTree中包含所有渲染网页必须的节点

无需渲染的节点不会被添加到RenderTree中，如head和display:none;的节点

visibility: hidden;的节点会添加到RenderTree中

浏览器通过GET请求获取网页HTML，同时将增量解析HTML文档，生成DOM树
解析DOM节点树时，对于需要加载的资源全部执行异步加载，但是CSS的解析、JavaScript的执行与font文件的下载会阻塞HTML Parser
局部DOM树与CSSOM树构建完成后，立即组装RenderTree进行渲染

浏览器渲染页面的时机

增量解析解析DOM树，并且完成相应CSSOM解析后（RenderTree依赖于DOM树，CSSOM树），开始直接渲染页面。

4.2 CSS加载会阻塞初次渲染

对于首页无关的样式，需要使用适当的方式避免其阻塞初次渲染：

document.write()会阻塞页面初次渲染
使用media=print媒体查询，虽然加载样式表，但只针对打印时才应用该样式，不会阻塞初次渲染。
通过DOMAPI引入CSS，可以避免阻塞。
CSS中。

哎呀文章有点乱了
搬运地址

GPU云服务器云服务器 cdn解析过程域名解析的过程 cdn解析域名过程二级域名解析过程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50751.html

彻底理解从输入URL与页面展现

摘要：五浏览器绘制网页绘制过程主要是结构与样式的结合，以及行为动态效果的展现。之后会写系列文章，欢迎围观主要参考文章基础进阶详解与编码前端面试题从到页面展现，这之中发生了什么图解流程概述：地址栏输入URL ——> 域名解析 ——> 服务器处理请求 ——> 浏览器处理响应 ——> 浏览器绘制网页一.地址栏输入URL 认识URL showImg(https://segmentfault....

abson 2019-08-21 11:41 评论0 收藏0
spring MVC -- controller参数的解析

摘要：是提供的类，为了在容器中建立容器而服务的。主要处理的请求分发，对进行管理。接收到请求由进行匹配，匹配成功后交由进行业务逻辑的处理，业务逻辑处理完成后交由进行数据的解析同时找到对应的，最终由将的结果到浏览器进行解析。 spring给我们带来了什么? spring IoC、AOP、Transaction这些都是很重要的特性，但是这篇这些都不是主角，主要来谈谈springMVC是如何对请求参...

suemi 2019-08-14 15:41 评论0 收藏0
通过对nginx中FastCgi进程管理器的学习,了解php动态网站的网页的生成过程、nginx解析

摘要：其主要行为是将解释器进程保持在内存中并因此获得较高的性能。当子进程关闭连接时，请求便处理完成。关于factcgi和cgi的学习 1、FastCGI是什么？首先我们看下CGI,CGI全称为通用网关接口 Common Cateway Interface.用于HTTP服务上的程序服务通信交流的一种工具，可以让一个客户端，从网页浏览器向执行在网络服务器上的程序请求数据。CGI描述了服务器...

zhaochunqi 2019-07-01 10:37 评论0 收藏0
通过对nginx中FastCgi进程管理器的学习,了解php动态网站的网页的生成过程、nginx解析

摘要：其主要行为是将解释器进程保持在内存中并因此获得较高的性能。当子进程关闭连接时，请求便处理完成。关于factcgi和cgi的学习 1、FastCGI是什么？首先我们看下CGI,CGI全称为通用网关接口 Common Cateway Interface.用于HTTP服务上的程序服务通信交流的一种工具，可以让一个客户端，从网页浏览器向执行在网络服务器上的程序请求数据。CGI描述了服务器...

yanwei 2019-07-25 14:26 评论0 收藏0
Web性能优化

摘要：性能优化网站的性能细线在几个方面网站首页加载速度动画的流畅度通过分析浏览器的渲染原理资源对渲染的影响，得出优化网站性能的办法。查看性能的工具的面板录制网页加载的过程，分析记录浏览器渲染过程中每个过程的耗时。通过引入，可以避免阻塞。 1 Web性能优化 Web网站的性能细线在几个方面：网站首页加载速度动画的流畅度通过分析浏览器的渲染原理、资源对渲染的影响，得出优化网站性能的办法...

ZHAO_ 2019-08-21 11:39 评论0 收藏0