浏览器【WebKit内核】渲染原理【QUESTION-1】

news2024/9/23 6:33:39

浏览器【WebKit内核】渲染原理【QUESTION】

image-20240722103801093

1.浏览器输入一个网址(域名之后),浏览器会呈现一个新的页面,中间的过程是怎么实现的?

输入一个网址之后,首先DNS服务器会解析这个域名,将这个域名解析成IP地址,通过IP地址会访问到对应的服务器从该服务器中去请求资源,服务器首先会给浏览器返回index.html的静态资源,那么浏览器就可以通过一行行的从上到下的进行解析index.html文件【浏览器的内核:例如WebKit】,从而将HTML解析成一棵DOM树,如果中间有解析到link链接,就会去下载解析链接的内容,如css文件,但是这期间浏览器会继续向下进行解析,不会停留或者阻塞dom树的进行;下载完css文件后,会对css进行解析,生成cssom,称为css对象模型;通俗将也是一棵规则树。那么通过dom和cssom两棵树结合起来会生成一棵新的render tree。最后浏览器对这颗新的render tree的每个节点进行布局【排版引擎】和绘制到屏幕成,最终形成一个新个页面。

2.浏览器是如何解析服务器返回的静态资源的?然后呈现出页面的?

https://web.dev/articles/howbrowserswork?hl=zh-cn
html---->dom      
css----->cssom
结合构建-------->render tree
布局  ----- 绘制  ----- 呈现

3.什么是回流和重绘?

第一次确定页面节点的大小和位置称为布局,当第二次重新计算页面节点的大小和位置成为回流
第一次渲染内容称为绘制,第二次重新渲染称为重绘

4.什么情况下会引起回流?什么情况下会引起重绘?

1.DOM结构发生了改变        颜色、背景、样式等发生了改变
2.页面布局发生了改变
3.窗口resize发生了改变

5.怎么避免回流?

样式尽量一次性修改
尽量频繁的操作DOM

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1942932.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SAP 贷项销售订单简介

SAP 贷项销售订单简介 1. 什么是销售贷方销售订单?2. 创建销售贷方销售订单的场景3. 销售贷方销售订单的创建流程直接创建发票---VF01将会计凭证过账到会计核算查看贷项销售订单凭证流查看客户明细---FBL5N贷项后台配置SAP销售贷方销售订单(Sales Credit Memo Request)是销售…

北醒单点激光雷达更改id和波特率以及Ubuntu20.04下CAN驱动

序言: 需要的硬件以及软件 1、USB-CAN分析仪使用顶配pro版本,带有支持ubuntu下的驱动包的,可以读取数据。 2、电源自备24V电源 3、单点激光雷达接线使用can线可以组网。 一、更改北醒单点激光雷达的id号和波特率 安装并运行USB-CAN分析仪自带…

pdf压缩在线免费 pdf压缩在线免费网页版 在线pdf压缩在线免费 pdf压缩工具在线免费

在数字化时代,pdf文件已经成为我们工作、学习和生活中的重要组成部分。然而,体积庞大的pdf文件往往给我们的存储空间、传输速度带来不小的压力。本文将为您揭秘几种简单有效的pdf文件压缩方法,让您轻松应对文件体积过大带来的困扰。 方法一、…

C++从入门到起飞之——const成员函数Date类实现 全方位剖析!

🌈个人主页:秋风起,再归来~🔥系列专栏:C从入门到起飞 🔖克心守己,律己则安 代码链接:这篇文章代码的所有代码都在我的gitee仓库里面啦,需要的小伙伴点击自取哦…

【论文解读】大模型算法发展

一、简要介绍 论文研究了自深度学习出现以来,预训练语言模型的算法的改进速度。使用Wikitext和Penn Treebank上超过200个语言模型评估的数据集(2012-2023年),论文发现达到设定性能阈值所需的计算大约每8个月减半一次,95%置信区间约为5到14个月…

React中的无状态组件:简约之美

🎉 博客主页:【剑九 六千里-CSDN博客】 🎨 上一篇文章:【掌握浏览器版本检测:从代码到用户界面】 🎠 系列专栏:【面试题-八股系列】 💖 感谢大家点赞👍收藏⭐评论✍ 引言…

OS:处理机进程调度

1.BackGround:为什么要进行进程调度? 在多进程环境下,内存中存在着多个进程,其数目往往多于处理机核心数目。这就要求系统可以按照某种算法,动态的将处理机CPU资源分配给处于就绪状态的进程。调度算法的实质其实是一种…

使用 ComfyUI 跑 SD 图,就两个字:惊艳!

大家好,我是想象,AI 破局 9 颗 AI 之心持有者。ComfyUI 已经出来有一段时间了,一直没有深入去学习过,今天花了点时间跑了一下。体验下来,就两个字:惊艳! 这张 3 个小丑的图,很真实吧…

MT6816磁编码IC在自动缩口机中的应用

随着工业自动化的快速发展,各种智能传感器与执行器在制造业中发挥着越来越重要的作用。其中,磁编码IC以其高精度、高可靠性以及优秀的环境适应性,成为了工业自动化控制中不可或缺的一部分。本文将详细介绍MT6816磁编码IC在自动缩口机中的应用…

【数字】三态门,双向端口,HDL描述

#工作记录# 之前工作的时候,负责GPIO的同事被负责人问“三态的en开启的时候是直通的吗?” 他支支吾吾的回答“是的吧”,负责人又问了一句,他就有点不自信了,顺手记录一下这个在SoC设计中非常常见的逻辑。 目录 一、…

Python爬虫 instagram API获取instagram帖子数据信息

这个instagram接口可以通过url链接直接获取相关帖子信息。如有需求,可点击文末链接联系我们。 详细采集页面 https://www.instagram.com/p/CqIbCzYMi5C/ 请求参数 返回示例 { "__typename": "GraphSidecar", "accessibility_caption&qu…

STM32H7串口中断服务函数会禁止中断

STM32H7 在中断服务函数HAL_UART_IRQHandler中,会禁止接收中断 同时也会禁止发送完成中断,调用UART_EndTransmit_IT来进行操作

微信小程序-自定义组件生命周期

一.created 组件实例创建完毕调用。定义在lifetimes对象里。 不能在方法里面更改data对象里面的值,但是可以定义属性值。 lifetimes:{//不能给data设置值created(){this.testaaconsole.log("created") }}二. attached 模板解析完成挂载到页面。 可以更…

Unity:PC包直接查看Log日志

PC端会输出Log日志,位置在: C:\Users\用户名\AppData\LocalLow\公司名\项目名 在这里可以找到类似的文件: 打开便可以看到打印。

提交高通量测序原始数据到 SRA --- 操作流程

❝ 写在前面 由于最近在提交课题数据到 NCBI 数据库,整理了相关笔记。本着自己学习、分享他人的态度,分享学习笔记,希望能对大家有所帮助。推荐先按顺序阅读往期内容: 1. 提交高通量测序数据到 GEO --- 说明书 目录 1 注册 NCBI 账…

RedHat9 | Tomcat服务器部署

一、相关知识 Tomcat介绍 Tomcat 是 Apache 软件基金会(Apache Software Foundation)下的一个开源项目,主要用于实现 Java Servlet、JavaServer Pages (JSP)、Java Expression Language (JEL) 以及 Java WebSocket 技术的容器。作为轻量级的…

YOLOv8改进 | 融合改进 | C2f结合可变形大核注意力超越自注意力【含Seg、OBB、OD代码】

秋招面试专栏推荐 :深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 💡💡💡本专栏所有程序均经过测试,可成功执行💡💡💡 专栏目录 :《YOLOv8改进有效…

Linux进程间通信(管道,命名管道/FIFO,消息队列)

目录 前言 一、管道 二、命名管道/FIFO 三、消息队列 前言 前面我们学习了Linux进程编程的相关函数,也举了几个进程编程的实际应用场景;我们之前学到父进程等待子进程退出时也涉及到了一些进程间通信的概念,比如子进程调用exit函数&#…

AWS DMS MySQL为源端,如何在更改分区的时候避免报错

问题描述: 文档[1]中描述MySQL compatible Databases作为DMS任务的源端,不支持MySQL 分区表的 DDL 更改。 在源端MySQL进行分区添加时,日志里会出现如下报错: [SOURCE_CAPTURE ]W: Cannot change partition in table members…

2024年普通人怎么利用AI工具赚钱?

在当今这个信息爆炸的时代,AI技术的应用如同一股不可阻挡的潮流,为普通人开辟了全新的赚钱途径。以下是一些普通人就可以做的赚钱方法: 1、信息差模式 现在市场上AI应用工具很多,不是所有人都会对这些工具进行深入学习和测试&am…