617浏览

0评论

介绍下重绘和回流（Repaint & Reflow），以及如何 进行优化

1. 浏览器渲染机制 浏览器采用流式布局模型（Flow Based Layout） 浏览器会把 HTML 解析成 DOM，把 CSS 解析成 CSSOM，DOM 和 CSSOM 合并就产生了渲染树（Render...

•    热门
• 空空 / 性能优化 / 2023-03-21

524浏览

0评论

一个页面上有大量图片(大型电商),加载很慢,你有哪些优化方案

懒加载...

• 空空 / 性能优化 / 2023-02-08

604浏览

0评论

如何⽤webpack 来优化前端性能

⽤webpack 优化前端性能是指优化 webpack 的输出结果，让打包的最 终结果在浏览器运⾏快速⾼效。压缩代码：删除多余的代码、注释、简化代码的写法等等⽅式。可以 利⽤webpack的 UglifyJsPlugin 和 Paralle...

•    热门
• 空空 / 性能优化 / 2023-01-12

608浏览

0评论

如何对项目中的图片进行优化

1.不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片 完全可以用 CSS 去代替。2.对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪 费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然 后去请求相应裁剪好...

•    热门
• 空空 / 性能优化 / 2023-01-11

619浏览

0评论

如何优化动画

对于如何优化动画，我们知道，一般情况下，动画需要频繁的操作 DOM，就就会导致页面的性能问题，我们可以将动画的 position 属性 设置为 absolute 或者 fixed，将动画脱离文档流，这样他的回流就 不会影响到页面了。...

•    热门
• 空空 / 性能优化 / 2023-01-11

554浏览

0评论

. 如何避免回流与重绘？

减少回流与重绘的措施：操作 DOM 时，尽量在低层级的 DOM 节点进行操作不要使用 table 布局， 一个小的改动可能会使整个 table 进行重新 布局使用 CSS 的表达式不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样...

• 空空 / 性能优化 / 2023-01-07

637浏览

0评论

回流与重绘的概念及触发条件

（1）回流当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏 览器会重新渲染部分或者全部文档的过程就称为回流。下面这些操作会导致回流：页面的首次渲染浏览器的窗口大小发生变化元素的内容发生变化元素...

•    热门
• 空空 / 性能优化 / 2023-01-07

712浏览

0评论

懒加载的实现原理

图片的加载是由 src 引起的，当对 src 赋值时，浏览器就会请求图片 资源。根据这个原理，我们使用 HTML5 的 data-xxx 属性来储存图片...

•    热门
• 空空 / 性能优化 / 2023-01-07

744浏览

0评论

懒加载的特点

减少无用资源的加载：使用懒加载明显减少了服务器的压力和流量， 同时也减小了浏览器的负担。提升用户体验: 如果同时加载较多图片，可能需要等待的时间较长， 这样影响了用户体验，而使用懒加载就能大大的提高用户体验。防止加载过多图片而影响其他资源文...

•    热门
• 空空 / 性能优化 / 2023-01-07

609浏览

0评论

懒加载的概念

懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片 数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中， 如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口 的那一部分图片数据，这样就浪费了性能。如果使用图片的...

•    热门
• 空空 / 性能优化 / 2023-01-07