![](https://img-blog.csdnimg.cn/20210905205958869.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
浏览器
文章平均质量分 74
♥
一颗冰淇淋
这个作者很懒,什么都没留下…
展开
-
浏览器重排(回流)重绘以及优化方案
一、什么是重排和重绘要说清重排(reflow)和重绘(repaint),首先要理解排列和绘制,浏览器渲染页面时,在获取完html、css资源之后,会大致经过以下步骤。(1) html生成html树(2) css形成css规则(3) 两者形成一个渲染树(4) 去文档当中找寻各自的布局位置----- 排列(5) 将内容填充到文档上 ----- 绘制【排列】就是计算位置调整布局的过程,而【绘制】就是把它画上去的过程。【重排】也就是除了最开始排列的布局,后续经过一些操作而使得dom元素重新找寻位置的过原创 2021-03-20 23:04:58 · 2136 阅读 · 0 评论 -
浏览器缓存机制(强缓存和协商缓存)
1、为什么需要浏览器缓存?当我们访问同一个页面时,请求资源、数据都是需要一定的耗时,如果可以将一些资源缓存下来,那么从第二次访问开始,就可以减少加载时间,提高用户体验,也能减轻服务器的压力2、有哪些缓存?浏览器缓存分为强缓存和协商缓存,当存在缓存时,客户端第一次向服务器请求数据时,客户端会缓存到内存或者硬盘当中,当第二次获取相同的资源,强缓存和协商缓存的应对方式有所不同。强缓存:当客户端第二次向服务器请求相同的资源时,不会向服务器发送请求,而是直接从内存/硬盘中间读取协商缓存:当客户端第二次原创 2021-03-24 19:12:06 · 2876 阅读 · 2 评论 -
浏览器工作原理及V8引擎
浏览器解析过程当浏览器加载html资源时,会进行如下的解析过程遇见 HTML 标记,构建 DOM 树遇见 style/link 标记调用相应解析器处理CSS标记,并构建出CSS样式树遇见 script 标记 调用javascript引擎 处理script标记、绑定事件、修改DOM 树/CSS树等将 DOM树 与 CSS树 合并成一个渲染树根据渲染树来渲染,以计算每个节点的几何信息最终将各个节点绘制到屏幕上用一张非常经典的图来表示浏览器引擎浏览器引擎分为两部分,渲染引擎和js引擎。原创 2021-09-25 21:21:59 · 284 阅读 · 0 评论 -
从浏览器日志里看渲染过程
当浏览器获取到html、css、js及其他资源之后,如何将内容展示到屏幕上,这时候需要渲染引擎来进行处理,渲染引擎中包括html解析器、css解析器、js引擎、布局模块、绘图模块,各个模块都在页面绘制中有其作用。html解析器用来将html解析成dom树,css解析器为dom各个元素计算出样式信息,js引擎可以修改网页的内容,也能修改css信息,布局模块用于在dom创建之后,将dom元素和样式结合起来,计算大小位置及布局,绘图模块用于将布局计算后的各节点绘制成图像。以上各个解析器及模块结..原创 2021-06-06 22:19:49 · 346 阅读 · 0 评论