首页 > 其他分享 >浏览器

浏览器

时间:2022-10-14 01:33:41浏览次数:78  
标签:CSSOM 浏览器 DOM 渲染 10px 属性

浏览器

渲染引擎

世界五大浏览器,在自身发展时都使用了一种或多种渲染引擎作为自身的渲染引擎。

  • Google ChromeWebkit(前期)、Blink(后期)
  • Apple SafariWebkit
  • Mozilla FirefoxGecko
  • ASA OperaPresto(前期)、Blink(后期)
  • Microsoft IExplorerTrident
  • Microsoft EdgeTrident(前期)、Blink(后期)

关键渲染路径

关键渲染路径指浏览器从最初接收请求得到HTMLCSSJS等资源,然后解析、构建、渲染、布局、绘制和合成,到最后呈现在用户眼前的整个过程。

将关键渲染路径划分理解,那网页的渲染过程可分为以下部分。

解析文件

  • DOM树:将html文件转换为DOM树

  • CSSOM树:将css文件转换为CSSOM树

  • 渲染树:将DOM树CSSOM树合并生成渲染树

绘制图层

  • 回流:根据渲染树生成布局渲染树

  • 重绘:根据布局渲染树生成绘制渲染树

  • 合成图层:根据绘制渲染树合成图层显示在屏幕中

解析文件

HTML文档描述网页的结构,浏览器通过HTML解析器HTML解析为DOM树结构HTML文档中所有内容皆为节点,各节点间拥有层级关系,彼此相连,组成DOM树

构建DOM树的过程:读取HTML文档字节(Bytes),将字节转换成字符(Chars),根据字符确定标签(Tokens),将标签转换成节点(Nodes),以节点为基准构建DOM树

CSS文档描述网页的表现,浏览器通过CSS解析器CSS解析为CSSOM树结构,与DOM树结构较像。CSS文档中所有内容皆为节点,与HTML文档中的节点一一相应,各节点间拥有层级关系,彼此相连,组成CSSOM树

构建CSSOM树的过程:读取CSS文档字节(Bytes),将字节转换成字符(Chars),根据字符确定标签(Tokens),将标签转换成节点(Nodes),以节点为基准构建CSSOM树。与DOM树的构建过程完全一样。

在构建DOM树时,当HTML解析器遇到<script>时会立即阻塞DOM树的构建,将控制权移交给浏览器的JS引擎,等到JS引擎运行完毕,浏览器才会从中断的地方恢复DOM树的构建。

			HTML
			
				
			
			
					
			
		<script>的脚本加载完毕,JS引擎通过DOM API与CSSOM API操作DOM树与CSSOM树。为何会产生渲染阻塞?其根本原因在于JS操作DOM后,浏览器无法预测未来DOM的具体内容,为了防止无效操作与节省资源,只能阻塞DOM树的构建。

浏览器的渲染引擎将DOM树CSSOM树合并生成渲染树,只渲染需显示的节点及其样式。DOM树CSSOM树渲染树三者的构建并无先后条件先后顺序,非完全独立而是存在交叉并行构建的情况,因此会形成一边加载,一边解析,一边渲染的工作现象。

绘制图层

进入绘制阶段,遍历渲染树,调用渲染器的paint()在屏幕中绘制内容。根据渲染树布局计算样式,即每个节点在网页中的布局、尺寸等几何属性。HTML默认是流式布局,CSSJS会打破这种布局,改变DOM的几何属性与外观属性。在绘制时根据渲染树布局,再根据布局绘制,这就是回流重绘

在此涉及两个核心概念:回流重绘。我用两句精简的话概括它们。

  • 回流:改变几何属性的渲染
  • 重绘:改变外观属性而不影响几何属性的渲染

当生成渲染树后,至少会渲染一次,在后续交互时还会不断地重新渲染。这时只会回流重绘只有重绘,因此引出一个定向法则:回流必定引发重绘,重绘不一定引发回流

合成图层

将回流重绘生成的图层逐张合并并显示在屏幕中。上述几个步骤并非一次性顺序完成,若改动DOM/CSSOM,上述过程会被重新执行,实际上CSSJS往往会多次改动DOM/CSSOM。简而言之,用户的交互操作引发了网页的重渲染。

加入浏览器私有属性

通常编写CSS都会在一些CSS3属性前加入-webkit--moz--ms--o-,这些奇形怪状写到手软的东西就是浏览器私有属性

对于编写私有属性的顺序需特别注意:兼容性写法放到前面,标准性写法放到最后。在浏览器解析CSS时,若标准属性无法使用则使用当前浏览器相应私有属性。

/* Chrome、Safari、New Opera、New Edge */
-webkit-transform: translate(10px, 10px);
/* Firefox */
-moz-transform: translate(10px, 10px);
/* IExplorer、Old Edge */
-ms-transform: translate(10px, 10px);
/* Old Opera */
-o-transform: translate(10px, 10px);
/* 标准 */
transform: translate(10px, 10px);

当然不是所有CSS3属性都需补齐-webkit--moz--ms--o-,上述代码只是一个示例,真正的transform私有属性只有-webkit--ms-。这些私有属性需查看Caniuse以确保编写正确,若想偷懒也可全部写上。

每个CSS3属性都编写这么一堆兼容性代码,无疑是对生命最大的浪费。在使用webpack打包代码时,可接入postcss-loaderpostcss-preset-envpostcss-preset-env内置了autoprefixer,它会根据Caniuse提供的数据对代码中的CSS3属性批量加入私有属性。

Can I use... Support tables for HTML5, CSS3, etc

标签:CSSOM,浏览器,DOM,渲染,10px,属性
From: https://www.cnblogs.com/yxyc/p/16790235.html

相关文章

  • 手机浏览器还有存在的意义吗,你多久没打开它了?
    还记得上次点开手机浏览器是什么时候吗?网上购物,你会找淘宝、京东;点餐,你会找饿了么、美团外卖;看新闻,你会打开今日头条;打车,你会找滴滴......其他的能用微信的就用微信。在工......
  • 老牌浏览器已非最佳选择? 新生国产浏览器值得一试
    国内老牌浏览器用户数量众多,但比如360安全浏览器,QQ浏览器等、百度浏览器,UC等大厂浏览器,变的日益臃肿,更加让使用者苦不堪言,它们都成了各式流量的入口。虽然这些厂商都推出过......
  • 浏览器渲染页面常见问题
    构建过程中可能会产生的阻塞​​html​​​的代码,是从上到下一行行执行的,也就是说如果​​js​​​代码写在​​head​​​头里,且没有用加在​​window.onload​​​方法里,......
  • 浏览器滚动条css设置webkit-scrollbar样式方式
    样式代码示例body::-webkit-scrollbar{width:12px;height:12px;}body::-webkit-scrollbar:horizontal{border-top:1pxsolid#efefef;}......
  • 浏览器缓存
    1.什么是浏览器缓存?浏览器和服务器的通信方式是应答模式。浏览器想得到数据,需要发送http请求给服务器,服务器响应该请求并返回结果。如果每一次浏览器都重新去请求服务器,那......
  • 判断设备系统和浏览器
    varisMac=/macintosh|macosx/i.test(navigator.userAgent);varisWindows=/windows|win32/i.test(navigator.userAgent);varisAndriod=/andriod/i.test(navigato......
  • Chrome浏览器提示您的连接不是私密连接解决办法
    解决方案:是在当前页面用键盘输入thisisunsafe,不是在地址栏输入,就直接敲键盘就行了,页面即会自动刷新进入网页。原因:因为Chrome不信任这些自签名ssl证书,为了安全起见,......
  • 让隐私更安全,多御浏览器通过黑科技保护用户隐私
    浏览器被称为连接用户和互联网世界的桥梁,不管是刷新闻、刷视频、还是查资料,都需要使用浏览器。在我们的工作生活中,浏览器已经成为不可缺少的软件之一。在泄露事件频发的今......
  • 谷歌浏览器Chrome时无法翻译如何解决?
    最近谷歌官方宣称由于使用人数少,关停了中国的翻译服务,导致谷歌浏览器上的翻译服务无法使用,当我们使用谷歌浏览器自带翻译功能时,会报出:无法翻译此网页,或者没有翻译反应。在......
  • 消除google浏览器记住密码自动填充背景色
    //消除google浏览器记住密码自动填充黄色框背景:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-webkit-autofill:active{//字体颜色......