- 博客(67)
- 收藏
- 关注
RSS订阅原创 前端性能优化
尽早开始执行js，使用ContentLoaded触发。减少访问次数：合并代码、SSR服务端渲染、缓存。CSS放在HEAD，JS放到body最后面。频繁DOM操作合并到一起进行插入DOM结构。节流throttle 防抖debounce。懒加载（图片懒加载、上滑加载更多）减少代码体积：压缩代码。使用更快的网络：CDN。对DOM查询进行缓存。
2024-11-08 13:26:39
281
原创 javascript异步进阶
三种状态，状态的表现和变化then和catch对状态的影响（重要）then和catch的链式调用（常考）用同步的方式，编写异步。reject(new Error(`图片加载失败${reject(new Error(` 图片加载失败 ${ src } `)) } img . src = src }) return promise } async function loadImg1() {// 注意：await 必须放在 async 函数中，否则会报错 try {
2024-08-06 13:43:53
846
原创 http相关
初次请求，返回资源和cache-control，再次请求直接使用本地资源。Etag资源的唯一标识（一个字符串，类似人体的指纹）如果资源被重复生成，而内容不变，则Etag更精确。在Respongse Headers中，有两种。Last-modified资源的最后修改时间。Last- Modified只能精确到秒级。两者共存会优先使用Etag。
2024-08-04 23:15:39
545
原创 React Hooks
useState(0)传入初始值，返回数组[state, setState]通过state获取值通过setState(1)修改useEffect依赖[]，组件销毁时执行fn，等于WillUnMountuseEffect无依赖或依赖[a, b]，组件更新时执行fn即，下一次执行useEffect之前，就会执行fn，无论更新或卸载React默认会更新所有子组件class组件使用SCU和PureComponent做优化Hooks中使用useMemo，但优化的原理是相同的。
2024-08-04 12:44:07
842
原创 React原理
React.creatElement即h函数，返回vnode第一个参数，可能是组件，也可能是html tag组件名首字母必须大写（React规定）
2024-08-03 15:53:19
823
原创 React高级特性
SCU默认返回true，即React默认重新渲染所有子组件必须配合“不可变值”一起使用可先不用SCU，有性能问题时再考虑使用。
2024-08-01 17:37:26
903
原创 React组件生命周期
类组件有明确的生命周期方法，用于在组件的不同阶段执行特定操作。函数组件使用 Hooks (useEffect) 来处理副作用，模拟类组件的生命周期方法。useEffect 可以根据依赖数组来决定副作用的执行时机（挂载、更新、卸载）。但组件生命周期父子组件生命周期，和Vue的一样。
2024-07-31 17:01:26
798
原创 关于React的setState
在setState之前不能修改state的值，不要直接修改state,使用不可变值。state必须在构造函数中定义。
2024-07-30 21:04:15
262
原创 webpack5
启动本地服务在dev中添加配置在package.json script中添加命令处理ES6使用babel-loader处理样式处理图片开发环境：生产环境模块化高级配置多入口抽离CSS文件抽离公共代码懒加载引用动态数据处理JSX.babelrcwebpack.config.js–
2024-07-28 19:27:41
358
原创 前端为何要进行打包和构建
代码层面体积更小（tree-shaking、压缩、合并），加载更快编译高级语言或者语法（TS、ES6+、模块化、scss）兼容性和错误检查（polyfill、postcss、eslint）研发层面统一、高效的开发环境统一的构建流程和产出标准集成公司构建规范（提测、上线）
2024-07-27 17:13:25
386
原创 webpack性能优化
babel7.4之后弃用babel-polyfill，推荐直接使用corejs和regenerator。在webpack5中，使用thread-loader替代happypack。所以需要使用regenerator这个库来支持generator语法。实际在我们开发环境中都是使用devServer，其中已经默认设置。DllReferencePlugin - 使用dll文件。同一个版本只构建一次即可，不用每次都重新构建。前端框架vue react，体积大，构建慢。DllPlugin - 打包出dll文件。
2024-07-27 15:45:33
1050
原创 module chunk bundle的区别
chunk - 多模板合并成的，如entry import() splitChunk。module - 各源码文件，webpack中一切皆模块。bundle - 最终的输出文件。
2024-07-25 13:55:03
131
原创 TS中有哪些特殊符号，分别是什么意思
这里age为可选项，创建u这个变量不填age属性不会报错，这里的age类型就是 number | undefined。
2024-07-23 22:29:49
384
原创 如何理解TS中的泛型
泛型的使用可以穿入任何类型，包括interface和type可以当作任何类型来使用可自定义扩展泛型的属性泛型Generics，是为了通用型和扩展性泛型定义：函数class interface type泛型的使用：穿入任何类型，当作任何类型，扩展其他属性
2024-07-23 20:29:25
121
原创 typescript中type和interface有什么区别，如何选择？
【代码】typescript中type和interface有什么区别，如何选择？
2024-07-23 18:15:45
221
原创 Composition API和React Hooks对比
前者setup只会被调用一次，而后者函数会被多次调用前者无需useMemo useCallback，因为setup只会调用一次前者无需顾虑调用顺序，而后者需要保证hooks的顺序一致前者reactive+ref比后者useState，要难理解
2024-07-22 16:39:49
117
原创 为何Vue3比Vue2快
从编译结果代码可以看出，如果该事件方法已被定义则直接去缓存中的方法，没有则定义。静态字段将不再比较，这样diff算法将少比较很多节点。编译时，根据不同的情况，引入不同的API。
2024-07-22 15:36:08
558
原创 Vue3如何实现响应式
Proxy能规避Object.defineProperty的问题，但是无法兼容所有浏览器，无法polyfill。废话不多说，直接上代码。
2024-07-21 22:37:51
375
原创 Vue3升级了哪些重要的功能
在vue2.x中必须有根节点，按vue3.x这种写法会直接报错。vue3.x中会自动创建fragment，类似react的<></>。可以帮我控制显示和隐藏，在组件加载时显示fallback插槽内容。
2024-07-21 18:03:20
445
原创 Composition API对比Options API
Composition API带来了什么？更好代码组织更好的逻辑复用更好的类型推导如何选择不建议共用，会引起混乱小型项目、业务逻辑简单，用Options API中大型项目、逻辑复杂，用Composition API
2024-07-21 13:25:43
116
原创 vue常见的性能优化方式
合理使用v-show和v-if合理使用computedv-for时加key，以及避免同时使用v-for和v-if自定义事件、DOM事件及时销毁合理使用异步组件合理使用keep-alivedata层级不要太深使用vue-loader在开发环境做模板编译（预编译）webpack层面的优化前端通用的性能优化，如图片懒加载使用SSR
2024-07-21 09:27:21
135
原创 vue的三大核心知识点
响应式： 监听data属性getter setter(包括数组)模板编译： 模板到render函数再到vnodevdom： patch(elem, vnode)和patch(vnode, newVnode)
2024-07-20 16:33:47
218
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人