![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端性能优化
文章平均质量分 62
前端同学
学习为主,兴趣为辅,致力于向前端更深层次发展。
展开
-
tree shaking的原理是什么?
别名叫摇晃树,最早是由Rollup实现,是一种采用删除不需要的额外代码的方式优化代码体积的技术tree-shaking会在打包过程中 静态分析 模块之间的导入导出,确定哪些模块导出值没有被使用,并将其删除,从而实现了打包产物的优化。在之前CommonJs、AMD、CMD的模块化方案中,这种导入导出是动态的,难以预测的,因此在打包阶段,是无法分析哪些模块被使用,例如:而ES 静态module方案下,模块之间的依赖关系是高度确定的静态的,与运行状态无关,可以进行可靠的静态分析,因此整个依赖树可以被静态地推导原创 2022-07-14 15:13:22 · 2939 阅读 · 0 评论 -
webpack配置优化
多进程打包,可以大大提高构建的速度,使用方法是将thread-loader放在比较费时间的loader之前,比如babel-loader。由于启动项目和打包项目都需要加速,所以配置在webpack.base.jscache-loader缓存资源,提高二次构建的速度,使用方法是将cache-loader放在比较费时间的loader之前,比如babel-loader,由于启动项目和打包项目都需要加速,所以配置在webpack.base.js开启热更新比如你修改了项目中某一个文件,会导致整个项目刷新,这非原创 2022-06-23 16:35:11 · 687 阅读 · 0 评论 -
白屏时间、首屏时间
浏览器显示第一个字符或者元素的时间可使用 Performance API 时白屏时间 = firstPaint - performance.timing.navigationStart;白屏时间 = firstPaint - pageStartTime;首屏时间是指用户打开网站开始,到浏览器首屏内容渲染完成的时间,dom处于比较稳定的阶段。对于用户体验来说,首屏时间是用户对一个网站的重要体验因素。通常一个网站,如果首屏时间在5秒以内是比较优秀的,10秒以内是可以接受的,10秒以上就不可容忍了。超过1原创 2022-06-10 16:28:42 · 1048 阅读 · 0 评论 -
compression-webpack-plugin配合nginx进行gzip压缩
gzip是什么gzip是一种文件压缩格式,浏览器可以自动解压这种格式,服务器返回的是gzip的格式文件时,response的头部会有Content-Encoding: gzip 这样的头部告诉浏览器:“我返回的是gzip格式文件,你要用对应的方法去解压它”开启方式有两种方式可以让服务器返回的资源是gzip压缩文件:一、在服务器端开启压缩http请求的目标文件,比如nginx(我只会nginx),在nginx的配置文件里开启下面的配置,当http请求资源的时候,服务器就会将资源压缩后再传输给浏览器。原创 2022-04-02 16:50:51 · 1080 阅读 · 0 评论 -
什么是内存泄漏?什么原因会导致呢?
内存泄露的解释:程序中己动态分配的堆内存由于某种原因未释放或无法释放。根据JS的垃圾回收机制,当内存中引用的次数为0的时候内存才会被回收全局执行上下文中的对象被标记为不再使用才会被释放内存泄露的几种场景1、全局变量过多通常是变量未被定义或者胡乱引用了全局变量// main.js// 场景1function a(){ b=10;}a();b++;// 场景2setTimeout(()=>{ console.log(b)},1000)2、闭包。未手动解原创 2022-03-22 17:46:26 · 712 阅读 · 0 评论 -
在vue中使用装饰器
1、什么是装饰器器是一种与类相关的语法糖,用来包装或者修改类或者类的方法的行为,其实装饰器就是设计模式中装饰者模式的一种实现方式2、场景举一个例子在日常开发写bug过程中,我们经常会用到防抖和节流,比如像下面这样class MyClass { follow = debounce(function() { console.log('关注我') }, 100)}const myClass = new MyClass()// 多次调用只会输出一次myClass.follow()原创 2021-12-21 13:48:48 · 4673 阅读 · 0 评论 -
前端-提升自己的代码水平
数据双向绑定优化vue中data的数据默认便会进行双向数据绑定,若是将大量的和渲染无关的数据直接放置在data中,将会浪费双向数据绑定时所消耗的性能,将这些和渲染无关的数据进行抽离并配合Object.freeze进行处理table中columns数据可以单独提取一个外部js文件作为配置文件,也可以在当前.vue文件中定义一个常量定义columns数据,因为无论如何都是固定且不会修改的数据,应该使用Object.freeze进行包裹,既可以提高性能还可以将固定的数据抽离,一些下拉框前端固定的数据也建议此操原创 2021-08-10 16:09:50 · 182 阅读 · 0 评论 -
长列表优化
导致浏览器卡顿的原因是因为操作dom次数太多了,可以使用document.createDocumentFragment创建虚拟节点,从而避免引起不必要的渲染当所有的 li 标签都创建完毕后,一次性把虚拟节点的 li 标签都渲染出来可以采用分段渲染的方式,比如一次只渲染一屏的数据最后使用window.requestAnimationFrame来逐帧渲染正常的操作 : let ul = document.getElementById('ul'); let frag = document.cr原创 2021-05-21 18:30:20 · 264 阅读 · 0 评论 -
promise.all .race 分别实现请求并发个数限制
// 为了演示方便,我们在此用fetchImage函数来模拟异步请求图片,返回成功提示function fetchImage(url) { return new Promise((resolve)=>{ console.log('start ' + url); setTimeout(()=>{ console.log('end ' + url); resolve() },Math.random()*3000) })}// 待请原创 2021-04-12 15:57:36 · 620 阅读 · 1 评论 -
JS装饰器----检验方法耗时性能
直接献上代码function log(target, name, descriptor) { const fn = descriptor.value descriptor.value = async function() { console.time(name) await fn.apply(this, arguments) console.timeEnd(name) } return descriptor} @log//装饰器原创 2021-03-20 15:16:36 · 330 阅读 · 1 评论 -
100条终极前端优化大全
本文主要考虑客户端性能、服务器端和网络性能,内容框架来自Yahoo Developer Network,包含 7 个类别共 35 条前端性能优化最佳实践,在此基础上补充了一些相关或者更符合主流技术的内容。前端性能的一个重要指标是页面加载时间,不仅事关用户体验,也是搜索引擎排名考虑的一个因素。一、页面内容(1)减少HTTP请求数Web 前端 80% 的响应时间花在图片、样式、脚本等资源下载上。最直接的方式是减少页面所需资源,但并不现实。所以,减少HTTP请求数主要的途径是:合并JS/CSS文原创 2020-12-23 18:04:32 · 508 阅读 · 0 评论 -
前端性能优化
• 缓存利用: 缓存 Ajax,使用 CDN、外部 JavaScript 和 css 文件缓存,添加 Expires 头,在服务器端配置 Etag,减少 DNS 查找等。• 请求数量.合并样式和脚本,使用 css 图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载。• 请求带宽:压缩文件,开启 GZIP 。• css 代码:避免使用 css 表达式、高级选择器、通配选择器 。• JavaScript 代码:用散列表来优化查找,少用全局变量,用 innerHTML 代替 DOM 操作,减少 D原创 2020-12-16 10:51:26 · 11925 阅读 · 1 评论 -
http缓存和浏览器缓存
一、前言前端缓存主要是分为HTTP缓存和浏览器缓存。其中HTTP缓存是在HTTP请求传输时用到的缓存,主要在服务器代码上设置;而浏览器缓存则主要由前端开发在前端js上进行设置。缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了原创 2020-11-27 13:30:29 · 1431 阅读 · 2 评论 -
前端页面性能优化的几种方式(强烈推荐)
提升页面性能优化的常见方式:1、资源压缩合并,减少http请求2、非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别3、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理缓存是所有性能优化的方式中最重要的一步【重要】有的人可能会回答local storage 和session storage,其实不是这个。浏览器缓存和存储不是一回事。4、使用CDN浏览器第一次打开页面时,缓存是起不了作用的。这个时候,CDN就上场了。5、DNS预解析一、资源压缩合原创 2020-10-20 11:51:50 · 6575 阅读 · 0 评论