【面试题】前端必修-浏览器的渲染原理

简介: 【面试题】前端必修-浏览器的渲染原理

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

 

 

1.浏览器的渲染原理

  1. #浏览器是如何渲染页面的
    1.什么叫渲染 render
当我们输入一个url地址的时候,拿到的其实是一个字符串,
渲染的过程就是把一个字符串经过一 系列的高度运算变成一个个像素点传递给显卡进行显示。
  1. 2.渲染的时间点
    当浏览器的网络线程收到html文档时,会产生一个渲染任务,并将其传递给渲染任务的主线程的消息队列中等待下次渲染的主线程轮询。
    整个渲染大概分为下面几点:html解析 ->样式计算->布局->绘制->分化->光栅栏->
  2. #解析html - Parse html
浏览器解析html的流程分为三步,第一首先拿到这个字符串的html,并且再次开一个线程,叫做预解析
线程,因为下载解析css也是会需要时间的,如果都放在主线程来做会有时间忧虑,
为了提高效率所
以先开始预解析进程帮助渲染主线程进行css的预下载和解析,解析好了返给渲染主线程,
让主线程
去生成cssom,这就是css不会阻塞html的根本原因。第二当碰到js文件的时候浏览器会怎么做呢,
他会先暂停浏览器的一切行为,等待预解析线程给返回提前下载好的js,
js也是预解析线程提前下载的,如果主线程解析到`script`位置,会停止解析 HTML,
转而等待 JS 文件下载好,并将全局代码解析执行完成后,才能继续解析 HTML。这是因为 
JS 代码的执行过程可能会修改当前的 DOM 树,所
以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因。最后解析完成后,
会得到 
DOM 树和 CSSOM 树,浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。
  1.  
  2. #布局 - Layout
第一步我们拿到了生成的DOM 树和 CSSOM 树,这一步就是要对DOM 树中每个节点中
有什么信息进行计算,这一过程中,很多预设值会变成绝对值,
比如`red`会变成`rgb(255,0,0)`;相对单位会变成
绝对单位,比如`em`会变成`px`,这一步完成后,会得到一棵带有计算后样式的 DOM 树。
  1. #分层 - Layer
上一步我们把每个DOM节点的样式都计算了出来,这一步的就是根据上一步提供的样式计
算出他的当前位置节点在哪大部分时候,DOM 树和布局树并非一一对应。
比如`display:none`的节
点没有几何信息,因此不会生成到布局树;又比如使用了伪元素选择器,
虽然 DOM 树中不存在这些
伪元素节 点,但它们拥有几何信息,所以会生成到布局树中。还有匿名行盒、
匿名块盒等等都会导致DOM 树 和布局树无法一一对应。
  1.  
  2. #分块 - Tiling
浏览器的分层模式在某些老版本的浏览器没有,建议更新谷歌到最新浏览器寻找
分层的设计理念就是为了防止用户频繁更新页面而设计出来的,用户更改这一层的数据只
会对这一层进行更新从而提升效率。滚动条、堆叠上下文、transform、opacity 等
样式都会或多或少的影响分层结果,也可以通过`will-change`属性更大程度的影响分
层结果
  1. #绘制 - Paint
在完成图层的构建后就进行到了绘制阶段,绘制阶段会把每个图层分成很多小的绘制指令,就好像我们
现在要画画你是一点点画的出来的并不是一下都出来的,每一步都会在你脑海中呈现每一条的指令

7 #分块 - Tiling

分块会将每一层分成多个小的区域

8. #光栅化 - Raster

  光栅化会将每个块变成位图,优先处理靠近视口的块
    合成线程会将块信息交给 GPU 进程,以极高的速度完成光栅化。
    GPU 进程会开启多个线程来完成光栅化,并且优先处理靠近视口区域的块。
    光栅化的结果,就是一块一块的位图

9. #画 - Draw

合成线程计算出每个位图在屏幕上的位置,最终交给GPU呈现

10. #课后小技巧

1.在前端开发中,div、p等为什么是块类型是因为按照w3c其默认的CSS样式规则被划分为两种类型,默认就
  给他们设置display:block。而并不是他们本身就是为块类型
2.在css中可以用js来控制css。使用document.styleSheets可以为css创建一个新规则来执行,并
  document.styleSheets 可以获取到当前除了内外联样式和内置默认的所有css(内外部)样式
3.什么是 reflow(回流)?
    reflow 的本质就是重新计算 layout 树。
    当进行了会影响布局树的操作后,需要重新计算布局树,会引发 layout。
    为了避免连续的多次操作导致布局树反复计算,浏览器会合并这些操作,当 JS 代码全部完成后再进
    行统一计算。所以,改动属性造成的 reflow 是异步完成的。也同样因为如此,当 JS 获取布局属性
    时,就可能造成无法获取到最新的布局信息。 浏览器在反复权衡下,最终决定获取属性立reflow。
4.什么是 repaint(重绘)?
  repaint 的本质就是重新根据分层信息计算了绘制指令(Paint)。
  当改动了可见样式后,就需要重新计算,会引发 repaint。
  由于元素的布局信息也属于可见样式,所以 reflow 一定会引起 repaint。
5.为什么 transform 的效率高?
  因为 transform 既不会影响布局也不会影响绘制指令,它影响的只是渲染流程的最后一个「draw」阶
  段由于 draw 阶段在合成线程中,所以 transform 的变化几乎不会影响渲染主线程。反之,渲染主线
  程无论如何忙碌,也不会影响 transform 的变化。

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

相关文章
|
11月前
|
存储 前端开发 开发者
|
6月前
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
12月前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
380 1
|
6月前
|
数据采集 消息中间件 JavaScript
浏览器渲染揭秘:从加载到显示的全过程;浏览器工作原理与详细流程
了解浏览器工作原理与流程,能有效帮助前端开发与性能优化。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
JavaScript 前端开发 API
浏览器渲染过程中如何处理异步任务
在浏览器渲染过程中,异步任务通过事件循环机制处理。JS执行时,同步任务在主线程上执行,形成一个执行栈。异步任务则被推入任务队列中,待主线程空闲时按顺序调用,确保页面流畅渲染与响应。
|
10月前
|
前端开发 JavaScript
宏任务和微任务在浏览器渲染过程中的执行顺序
宏任务和微任务是浏览器事件循环中的两种任务类型。宏任务包括整体代码块、setTimeout等,微任务有Promise.then、MutationObserver等。每个宏任务执行完毕后,会先执行完所有微任务,再进行下一轮渲染或执行下一个宏任务。
|
10月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
10月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
203 1
|
11月前
|
缓存 自然语言处理 前端开发
浏览器渲染
【10月更文挑战第28天】浏览器渲染涉及将HTML、CSS和JavaScript代码转换为可视网页,主要步骤包括:解析HTML构建DOM树、解析CSS构建CSSOM树、合并DOM与CSSOM生成渲染树、布局确定元素位置和尺寸、绘制元素到屏幕、合成图层形成最终图像。此过程不断优化以提升性能。
147 2
|
11月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
405 2

热门文章

最新文章