html
html
ahaott
追本溯源
展开
-
介绍下重绘和回流(Repaint & Reflow),以及如何进行优化?
浏览器渲染机制浏览器采用流式布局模型(Flow Based Layout); 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tree); 有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上; 由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花 3 倍于同等...原创 2021-08-01 21:58:22 · 150 阅读 · 0 评论 -
浏览器渲染原理
首先解析收到的文档,根据文档定义构建一颗 DOM 树,DOM 树是由 DOM 元素及属性节点组成的; 然后对 CSS 进行解析,生成 CSSOM 规则树; 根据 DOM 树和 CSSOM 规则树构建 Render Tree。渲染树的节点被称为渲染对象,渲染对象是一个包含有颜色和大小等属性的矩形,渲染对象和 DOM 对象相对应,但这种对应关系不是一对一的,不可见的 DOM 元素不会被插入渲染树。 当渲染对象被创建并添加到树中,它们并没有位置和大小,所以当浏览器生成渲染树以后,就会根据渲染树来进行布局(也原创 2021-08-23 23:30:23 · 48 阅读 · 0 评论 -
页面导入样式时,使用link和@import的区别
1.从属关系的区别:@import 只能导入样式表,link 还可以定义 RSS、rel 连接属性、引入网站图标等;2.加载顺序区别:加载页面时,link 标签引入的 CSS 被同时加载;@import 引入的 CSS 将在页面加载完毕后被加载;...原创 2021-07-30 13:46:48 · 57 阅读 · 0 评论 -
什么是webp
WebP 是谷歌开发的一种新图片格式,它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用 webp 格式的最大优点是是,在相同质量的文件下,它拥有更小的文件体积。因此它非常适合于网络图片的传输,因为图片体积的减少,意味着请求时间的减少,这样会提高用户的体验。这是谷歌开发的一种新的图片格式。浏览器如何判断是否支持 webp 格式图片?通过创建 Image 对象,将其 src 属性设置为 webp 格式的图片,然后在 onload 事件中获取图片的宽高,如果能够获取,则说明浏览器支持 webp原创 2021-07-30 13:42:52 · 1748 阅读 · 0 评论 -
网络中使用最多的图片格式有哪些?
JPEG,GIF,PNG,最流行的是jpeg格式,可以把文件压缩到最小 在ps以jpeg格式存储时,提供11级压缩级别。推荐在线压缩网站:https://tinypng.com/原创 2021-07-06 18:20:32 · 1046 阅读 · 0 评论