随笔分类 -  前端优化

07-首屏优化策略
摘要：1.（1）路由懒加载：import动态引入路由组件 当打包构建应用时，JavaScript包会变得非常大，影响页面加载。 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 以函数的形式动态引入，这样就可以把各自的路由文件分别打包，只有在解析给 阅读全文
posted @ 2021-05-20 20:16 猎奇游渔 阅读(121) 评论(0) 推荐(0)
10-map/WeakMap/WeakSet的使用场景
摘要：set数据结构： 1.去重&&使用...运算符： var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] 2.Set可以很容易地实现并集（Union）、交集（Intersect）和差集（Difference） let a = new 阅读全文
posted @ 2021-05-17 02:41 猎奇游渔 阅读(610) 评论(0) 推荐(0)
18-vue-cli -项目优化策略-项目上线
摘要：项目优化策略： 1.ESLint语法报错代码换行了，ESlint与VScode代码格式化冲突如何解决？ 2.npm run build生产环境下，出现console的warning警告，去掉console 3.通过CND方式引入，webpack中的externals中声明不让第三方依赖包打包后全部合 阅读全文
posted @ 2021-05-05 23:06 猎奇游渔 阅读(166) 评论(0) 推荐(0)
06-大数据性能优化- 长列表优化 /Object.preventExtiensions()
摘要：（1）列表优化 （2）大型表单优化 （3）表格优化 渲染了四个下拉数都为1000条数据的下拉框： 用调试工具查看性能：（下图中的紫颜色的是在渲染，黄色的是JS在运算执行） 渲染了1000条的li标签，这样肯定是不好的，解决： 我们用一个长列表优化插件： npm i vue -virtual-scro 阅读全文
posted @ 2021-05-05 04:38 猎奇游渔 阅读(381) 评论(0) 推荐(0)
03-Object.freeze()优化vue想目，数据列表的优化
摘要：1 数据冻结 2 vue-virtual-scoller 3 vue-virtual-scoller-list 4 使用normalize.css解决浏览器样式兼容性问题 <link rel="stylesheet" href="http://cdn.staticfile.org/normalize 阅读全文
posted @ 2021-03-30 01:07 猎奇游渔 阅读(80) 评论(0) 推荐(0)
04-防抖和节流
摘要：先简明扼要概括一下： -- 区别： 函数防抖是单位时间内只执行一次； 函数节流是间隔时间执行，不管事件触发有多么的频繁，都会保证在规定时间内执行一次真正的事件处理函数。 -- 原理： 防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 阅读全文
posted @ 2021-03-17 19:00 猎奇游渔 阅读(87) 评论(0) 推荐(0)
03-webpack拆包
摘要：SPA 首屏加载性能优化之 vue-cli3 拆包配置 Webpack之SplitChunks插件用法详解 阅读全文
posted @ 2021-03-09 21:21 猎奇游渔 阅读(448) 评论(0) 推荐(0)
02-转>>chunk-vendors过大导致首屏加载太慢的优化
摘要：https://blog.csdn.net/qq_31677507/article/details/102742196 阅读全文
posted @ 2021-03-07 23:06 猎奇游渔 阅读(960) 评论(0) 推荐(0)
01-axios取消请求
摘要：具体使用 防抖去掉重复请求封装 阅读全文
posted @ 2021-03-01 19:07 猎奇游渔 阅读(59) 评论(0) 推荐(0)