前端面试：浏览器渲染过程

已于 2023-07-17 13:16:48 修改
阅读量122 收藏
点赞数
分类专栏： web面试 浏览器相关 开发DEMO 文章标签： 面试 职场和发展
于 2023-05-30 10:05:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43592064/article/details/130929699
版权

1. html转成dom

2. 计算style

3. 生成布局树

4. 分层，生成分层树

5. 主线程给每个图层生成绘制列表，交给合成线程处理

6. 合成线程将图层分块

7. 合成线程在光栅化线程池中将图块转成位图

8. 合成线程发送绘制图块的命令drawquad给浏览器进程

9. 浏览器根据命令绘制，并显示在显示器上

啃火龙果的兔子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
5一面 5：浏览器相关知识点与高频考题解析.md
03-31
Web 前端工程师写的页面要跑在浏览器里面，所以面试中也会出现很多跟浏览器相关的面试题目。 ## 知识点梳理 - 浏览器加载页面和渲染过程 - 性能优化 - Web 安全 本小节会从浏览器的加载过程开始讲解，然后介绍...
前端面试题---浏览器是如何渲染页面的？什么是 reflow？什么是 repaint？为什么 transform 的效率高？
wy080815的博客
08-16 162
reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。repaint 的本质就是重新根据分层信息计算了绘制指令。
浏览器渲染页面的过程
de683905的博客
11-13 263
一、渲染引擎 　　浏览器的核心部分是渲染引擎，也称为浏览器的内核，负责对网页语法（如HTML、CSS、JavaScript等）的解释并显示网页。Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome使用webkit内核。 二、webkit引擎渲染流程 　　1.渲染引擎首先通过网络获得所请求文档的内容； 　　2.解析html以构建dom树 -&...
浏览器渲染机制
qq_45022698的博客
07-16 3710
浏览器渲染机制浏览器渲染机制。
从 8 道面试题看浏览器渲染过程与性能优化（转）
weixin_42924048的博客
01-08 344
前言 移动互联网时代,用户对于网页的打开速度要求越来越高。百度用户体验部研究表明,页面放弃率和页面的打开时间关系如下图 所示。 根据百度用户体验部的研究结果来看,普通用户期望且能够接受的页面加载时间在 3 秒以内。若页面的加载时间过慢,用户就会失去耐心而选择离开。 首屏作为直面用户的第一屏,其重要性不言而喻。优化用户体验更是我们前端开发非常需要 focus 的东西之一。 本文我们通过 8 道面试题...
【1.5w字】前端面试必问的浏览器渲染，建议精读收藏
一缕清风
05-22 529
常用浏览器内核 IE tridentt内核 Chrome blinkt内核（基于webkit，谷歌与Opera software共同开发） Firefox geckot内核 Safari webkit内核 Opera blinkt内核(跟Chrome一样)，之前为presto 浏览器页面加载过程 (网络篇) 从输入url到得到html的详细过程会发生什么？ 在浏览器地址栏输入了百度的网址: https://www.baidu.com/ 构建请求 浏览器会
前端面试重点____浏览器渲染原理
m0_61773971的博客
07-11 187
reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。repaint 的本质就是重新根据分层信息计算了绘制指令。
浏览器页面渲染原理解析：面试题解析
m0_73442777的博客
06-27 90
在前端开发面试中，常常会被问及浏览器如何渲染页面的问题。理解浏览器页面渲染原理对于构建高效的前端应用至关重要。本文将对浏览器页面渲染的过程进行解析，介绍关键的环节和组件，帮助读者更好地理解这个面试题的答案。
VUE 前端 面试 技术 八股文
07-07
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 基于上面一点，SPA 相对对服务器压力小； 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理； 缺点： 初次...
前端实习面试题一
01-08
内核是浏览器的核心，内核是基于标记语言显示内容的程序，浏览器内核可以分为两部分，渲染引擎（负责对HTML，CSS的解析），js引擎（负责对js代码的解析） 目前的浏览器内核有：trident，Gecko，presto，webkit等 ...
前端面试最新最全面经（带个人笔记）
05-23
包含近几年高频前端开发工程师面试题，每个题目都有详细答案和个人笔记。1.JavaScript章节包括：基础知识、ES6、原型与原型链、作用域链闭包、异步编程等。 2.Vue章节包括：Vue基础、生命周期、组件通信、路由、Vuex...
存储篇 1：浏览器缓存机制介绍与缓存策略剖析(1).md
最新发布
04-01
前端性能优化实践# 知识体系与小册格局 ## 写给读者 提起性能优化，大家现在脑海里第一时间会映射出什么内容呢？ 可能是类似[“雅虎军规”](https://developer.yahoo.com/performance/rules.html?guccounter=1)和...
前端面试题34网页渲染的基本过程
craneEnd的博客
05-02 1008
34.网页渲染的基本过程 整个渲染的过程其实就是将URL对应的各种资源，通过浏览器渲染引擎的解析，输出可视化的图像。 渲染模块： 从图中可以看出，一个渲染引擎大致包括HTML解释器、CSS解释器、布局和JavaScript引擎。 HTML解释器：解释HTML语言的解释器，本质是将HTML文本解释成DOM树（文档对象模型）。 CSS解释器：解释样式表的解释器，其作用是将DOM中的各个元素对象加上样式信息，从而为计算最后结果的布局提供依据。 布局：将DOM和css样式信息结合起来，计算它..
中高级前端面试宝典之浏览器篇
学骑扫把的小女巫
03-03 1236
总结了各个大厂的中高级前端面试题，然后进行分门别类整理，将知识点划成一整块一整块的，便于理解记忆和查询
面试 页面dom渲染过程_前端面试题之渲染原理
weixin_42130786的博客
01-17 794
浏览器的内核是指支持浏览器运行的最核心的程序，分为JS引擎和渲染引擎两个部分。页面加载完成的过程在网页的地址栏中输入url后，浏览器经历了什么样的过程？客户端根据DNS服务器得到域名对应的ip地址；客户端向该ip地址发送http请求；服务器端收到、处理并返回http请求；客户端收到响应并返回内容。客户端渲染浏览器收到的其实就是HTML文件，只有HTML格式浏览器才能正确解析。接下来就是浏览器的渲染...
浏览器渲染过程（前端常见面试题）
weixin_40231155的博客
06-11 1193
描述浏览器渲染过程 DOM Tree和CSS RULE Tree将html和css解析成树形数据结构，然后Dom和css合并后生成Render Tree，用layout来确定节点的位置以及关系，通过painting按照规则来画到屏幕上，由display打击最终看到效果 什么是DOCTYPE及作用？ DTD（Document Type Definition）：文档类型定义 作用：浏览器会使用DTD来判断文本类型 常见的DOCTYPE声明有几种？ 1、**HTML 4.01 Strict**：（严格的） &
面试 页面dom渲染过程_页面渲染过程解析
weixin_39631632的博客
01-17 467
为什么做优化经典问题：白屏时间过长，用户体验差产生的原因：网络问题、关键渲染路径(CRP)问题怎么做优化如何做好优化呢，网上随便一搜，就有很多优化总结，无非就是网络优化、静态资源(html、js、css、image)优化。下面我们撇开网络方面的优化，只分析静态资源方面的优化。而静态资源的优化关键在于你要去深入理解关键渲染路径(CRP)的运行原理和规则。一、了解浏览器关键渲染路径(html加载过程)...
JS面试—页面加载和渲染过程
We_jia的博客
05-12 2830
目录 一、题目 1、从输入url到得到html的详细过程 2、window.onload和DOMContentLoaded的区别 二、知识点 2.1 加载资源的形式 2.2 加载一个资源的过程 2.3 浏览器渲染页面的过程 一、题目 1、从输入url到得到html的详细过程 浏览器根据DNS服务器得到域名的IP地址（域名解析） 向这个IP的服务器发送http请求 服务器...
面试：TS中type 和 interface 的区别
热门推荐
qq_43592064的博客
05-23 3万+
TS中type 和 interface 的区别
2021前端面试重点梳理
09-08
2021前端面试的重点主要涵盖以下几个方面： 1. HTML和CSS基础：包括了解HTML的新特性、语义化标签、常见的CSS布局方式、盒模型、选择器优先级等。 2. JavaScript核心知识：包括原型链、作用域与闭包、事件循环机制、异步编程等。 3. ES6+新特性：包括let和const、箭头函数、模板字符串、解构赋值、Promise、async/await等。 4. 前端框架：熟悉至少一种主流前端框架，如React、Vue或Angular，了解其基本原理和常用功能。 5. 前端工程化：了解模块化开发、打包工具如Webpack、代码质量检查工具如ESLint、自动化构建工具如Gulp等。 6. 网络相关知识：了解HTTP协议、常见的状态码、缓存机制、跨域解决方案等。 7. 前端性能优化：了解页面加载优化、渲染优化、网络请求优化等方面的常用方法和技巧。 8. 移动端开发：了解响应式设计、移动端适配、触摸事件处理等移动端开发相关知识。 9. 数据结构与算法：熟悉常见的数据结构如数组、链表、栈、队列等，了解常见算法思想和排序算法。 10. 浏览器工作原理：了解浏览器的渲染流程、重绘和回流、事件机制等。 以上是2021前端面试的重点梳理，希望能对你有帮助！如果你还有其他问题，可以继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值