前端性能优化
文章平均质量分 52
结合业务,具体实践性能优化方案
coder__wang
脚踏实地行,海阔天空飞
展开
-
前端性能优化之控制请求并发数
在我们平时开发中,经常会遇到页面数据初始化时,频繁调同一个接口的情况。比如echarts项目中,一个页面可能会有几十张图表,如果一个接口返回所有图表数据的话,会造成用户过长的等待时间,再者过多图表同时渲染,也会给页面增加压力,造成卡顿的现象。...原创 2022-08-01 19:08:55 · 741 阅读 · 0 评论 -
谷歌调试工具小技巧
谷歌调试工具的使用是每一名前端开发者必备技能之一,其中有些比较有意思的小彩蛋,因为并不常用,所以很多人可能并不知道,下面一起来涨姿势吧!打开调试工具面板:1.更改调试工具的主题色ctrl + shift + p在出现的输入框中输入dark,选中第一个:点击ReloadDevTools按钮,重启工具面板:2.调整工具面板的位置ctrl + shift + p 出现的输入框中输入 dock,选择对应的位置:3.console.log() 打印的内容增加样式..原创 2021-09-13 14:45:14 · 515 阅读 · 0 评论 -
前端性能优化之防抖、节流
本篇主要封装防抖、节流方法,并简述它们的使用场景:防抖:/** * 如果短时间内触发多次同一事件,只执行一次 * @param {*} callback callback: 需要处理的回调函数 * @param {*} delay delay:期限 * @returns */export function debounce(callback, delay) { return function (event) { // 如果上次事件还没有真正处理, 取消它 //原创 2021-08-23 17:04:58 · 147 阅读 · 0 评论 -
前端性能优化实践-gzip
一名优秀的前端工程师必备技能之一就是要会性能监控,并且能相应的进行性能优化。最近,有需求将项目做一些优化,提升用户的体验。看了一下项目并没有开启gzip,于是着手实现gzip压缩,下面就是具体的实践过程。我们在打开网站时,会加载各种资源文件,如js、css、html等等,如果这些文件较大的话,下载耗时过长,打开网页就会比较慢,用户体验不好。此时,可以采用gzip,可以大幅提高网页加载速度。首先需要安装插件:npm i -D compression-webpack...原创 2021-07-14 23:04:47 · 232 阅读 · 0 评论