![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
性能优化
文章平均质量分 61
batype
付出多少,回报就有多少,永远它们是成正比的。
展开
-
如何实现浏览器内多个标签页之间的通信?
实现多个标签页之间的通信,本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信,因此我们可以找一个中介者,让标签页和中介者进行通信,然后让这个中介者来进行消息的转发。原创 2023-08-22 22:44:05 · 166 阅读 · 0 评论 -
如何⽤webpack 来优化前端性能
⽤webpack 优化前端性能是指优化 webpack 的输出结果,让打包的最终结果在浏览器运⾏快速⾼效。原创 2023-08-09 22:32:45 · 692 阅读 · 0 评论 -
如何对项目中的图片进行优化
如何对项目中的图片进行优化?原创 2023-08-09 21:54:01 · 179 阅读 · 0 评论 -
节流和防抖
节流可以使用在 scroll 函数的事件监听上,通过事件。函数防抖是指在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件。又被触发,则重新计时。这可以使用在一些点击请求的事件上,避免因。函数节流是指规定一个单位时间,在这个单位时间内,只能有一次触发。事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只。为用户的多次点击向后端发送多次请求。节流来降低事件调用的频率。原创 2023-08-09 21:35:59 · 127 阅读 · 0 评论 -
浅谈回流与重绘
浏览器针对页面的回流与重绘,进行了自身的优化——渲染队列浏览器会将所有的回流、重绘的操作放在一个队列中,当队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会对队列进行批处理。上面,将多个读操作(或者写操作)放在一起,就会等所有的读操作进入队列之后执行,这样,原本应该是触发多次回流,变成了只触发一次回流。当页面中某些元素的样式发生变化,但是不会影响其在文档流中的位置时,浏览器就会对元素进行重新绘制,这个过程就是重绘。注意: 当触发回流时,一定会触发重绘,但是重绘不一定会引发回流。原创 2023-08-09 18:22:24 · 112 阅读 · 0 评论 -
前端懒加载
根据这个原理,我们使用 HTML5 的data-xxx 属性来储存图片的路径,在需要加载图片的时候,将 data-xxx 中图片的路径赋值给src,这样就实现了图片的按需加载,即懒加载。懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分图片数据,这样就浪费了性能。懒加载的实现重点在于确定用户需要加载哪张图片,在浏览器中,可视区域内的资源就是用户需要的资源。原创 2023-08-09 17:59:53 · 811 阅读 · 0 评论