- 博客(375)
- 资源 (6)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 [qiankun]: Target container with #container not existed while childOne loading!
主应用container容器不存在导致无法挂载子应用。放在Router标签内，跟Router同级即可。
2024-04-19 15:47:37
73
原创 TerserWebpackPlugin详解
TerserWebpackPlugin，此文章来自于github翻译来，仅供参考，具体配置需要结合自己的技术框架配置（vue/react等）
2024-02-01 10:43:50
2133
原创 sass系统的一些总结
一、列表页1、查询条件input输入框长度限制 input输入框是否可以属于特殊字符 重置按钮 =》重置查询条件、分页到第一页（每页多少条到默认条数） 点击查询按钮，分页设置为第一页，每页条数根据实际情况定2、table表格表格宽度写死，例如：日期、手机号、身份号等能明确长度 操作列固定列，及宽度的设置3、分页点击分页带查询条件二、新增编辑详情页新增、编辑、详情共用一个页面（详情如果有特殊设计可单独一个页面） 保存接口需要区分是新增和编辑三、新增、编辑表单表单长度限
2023-10-27 10:36:28
150
原创 前端监控指的是什么？
解决技术产出的问题，技术产出和业务的好坏相关的，上线用户行为监控可以统计某个功能模块的具体使用情况，如果产品经理提出同类型产品需求的时候，如果上次产品效果不好，我们可以质疑产品经理提出的需求是否具有价值。在后端突然上线了某个需求，某个接口的数据格式发生了变化，造成lavaScript运行错误，导致我们的用户比如按钮点不动、页面白屏之类的错误，影响用户体验。测是不是接口返回速度过慢，直接去和后端沟通的话，没有数据支撑，无法使后端同学信服，最终影响用户体验。性能监控（监控页面的性能）
2023-04-05 09:17:53
1175
原创 性能优化之代码层 css
将元素设置display:none，操作结束再把它显示出来。因为在display属性为none的元素上进行DOM操作不会引起回流和重绘。color/background相关属性background-color,background-image等属性。outline相关属性outline-color,outline-width。使用absolute或者fixed，使元素脱离文档流。不要频繁操作元素的样式，可以采用修改类名。添加或者删除可见的DOM元素。元素的尺寸或者位置发生变化。元素的字体大小发生变化。
2023-03-29 14:32:46
224
原创 性能优化从那几方面考虑？
https://liulibin.blog.csdn.net/article/details/129801736https://liulibin.blog.csdn.net/article/details/129801567
2023-03-28 16:13:27
56
原创 性能优化之代码层 js
以看出for-in循环能够遍历对象的属性集，特别适合处理诸如JSON对象这样的未知属性集，但对通常的循环使用场景来说，由于它遍历属性的顺序不确定，循环的结束条件也无法改变，并且因为需要从目标对象中解析出每个可枚举的属性，即要检查对象的原型和整个原型链，所以其循环速度也会比其他循环方式要慢许多，如果循环性能有要求则尽量不要使用for-in循环。因为循环结束的判断是和常量0进行比较的，不存在对数组长度属性值的查找或局部变量的读取，其比较的运算速度会更快。
2023-03-27 19:40:44
684
原创 性能优化之图片的选择
好的做法是把图片先按照这两种格式分别输出，看 PNG-8 输出的结果是否会带来肉眼可见的质量损耗，并且确认这种损耗是否在我们（尤其是你的 UI 设计师）可接受的范围内，基于对比的结果去做判断。这里值得注意的是，尽量不要使用低质量的JPEG格式进行WebP转化，因为低质量的JPEG中可能包含压缩的伪像，这样WebP不仅要保存图像信息，还要保存JPEG添加的失真，从而影响最终的转化效果。前面我们提到，复杂的、色彩层次丰富的图片，用 PNG 来处理的话，成本会比较高，我们一般会交给 JPG 去存储。
2023-03-27 19:10:11
857
原创 vue3.0 知识点整理
来进行监听这个有点类似于const，他是定义一个无法修改的内存指针 (不知道这么叙述是否准确) ，但const定义的这个内存指针指向的内存地址的内容是可变的。proxy就是去监听ref定义的这个对象，以此来监听ref.value这个值的变化。关于ref，因为proxy。包裹成一个对象的形式。
2023-03-21 09:01:36
54
原创 webgl和canvas区别
图形的绘制主要通过 CanvasRenderingContext2D 接口完成。二维图形可以使用 ( Canvas API 或 WebGL API)三维图形使用 WebGL API。
2023-03-08 18:52:26
140
原创 输入url到页面加载发生了什么？
二者的值都是GMT格式的时间字符串， Last-Modified 标记最后文件修改时间， 下一次请求时，请求头中会带上 If-Modified-Since 值就是 Last-Modified 告诉服务器我本地缓存的文件最后修改的时间，在服务器上根据文件的最后修改时间判断资源是否有变化， 如果文件没有变更则返回 304 Not Modified ，请求不会返回资源内容，浏览器直接使用本地缓存。JS是单线程，也就是说，在同一个时间内只做一件事，所有的任务都需要排队，前一个任务结束，后一个任务才能开始。
2023-03-06 15:52:30
313
原创 ts知识点整理
变量str被推断为字符串类型，这种推断发生在初始化变量和成员，设置默认参数值和决定函数返回值时，如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态any类型。断言与类型守卫的概念非常相似，都是确定参数的类型，但断言更加霸道，它是直接告诉编辑器，这个参数就是这个类型，而类型守卫更像确定这个参数具体是什么类型。在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符!通过类型批注提供在编译时启动类型检查的静态类型，这是可选的，而且可以忽略而使用JavaScript常规的动态类型。
2023-02-21 16:09:20
445
原创 react知识点整理
reducer 接收两个参数，state，action。加入hooks，让react函数组件更加的灵活。类似生命周期函数，可以把useEffect看做。在跨组件层级获取数据时简化获取数据的代码。是一种让函数组件保存状态的方式。
2023-01-30 14:58:42
289
原创 webpack知识点整理及性能优化点
Loader 是webpack中提供了一种处理多种文件格式的机制，因为webpack只认识JS和JSON，所以Loader相当于翻译官，将其他类型资源进行预处理。Plugin功能更强大，主要目的就是解决loader 无法实现的事情，比如打包优化和代码压缩等。Plugin加载后，在webpack构建的某个时间节点就会触发plugin定义的功能，帮助webpack做一些事情。实现对webpack的功能扩展。常见的Plugin有哪些html-webpack-plugin 处理html资源，默认会创建一个空的H
2022-12-04 16:39:14
647
原创 http相关面试题
http2通过gzip与compress对头部进行压缩，并且在客户端与服务端各维护了一份头部索引表，只需要根据索引id就可以进行头部信息的传输，缩小了头部容量，间接提升了传输效率。：http1一个连接只能提交一个请求，而http2可以同时处理无数个请求，可以降低连接的占用数量，进一步提升网络的吞吐量。降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。http 传输的数据都是未加密的，也就是明文的，设置了 SSL 协议来对 http 协议。
2022-12-01 09:40:02
823
原创 js常见面试题整理
②：如果没有的话，它就在该对象的__proto__下查找，因为__proto__这个属性是指向对应的构造函数身上的protytpe，把它查找的时候找的就是构造函数的原型。③：如果原型身上也没有的话，那它会继续往外面找，直到找到最顶层的Object身上的prototype，如果都没有，则返回undefined。当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。当我们调用一个对象身上的属性或者方法的时候，他就会有一个查找规则。
2022-11-30 09:51:14
723
原创 【react】fiber解决了什么问题，及diff算法
1、reactfiber1、reactfiber这里说的是react16之前的版本，也就是说16之前没有加入fiber。假设我们的dom结果非常复杂，react在递归进行渲染时一定会非常耗时；而这段代码又是同步执行，。大家都知道浏览器是单线程，js线程和ui线程互斥，假设运行的时间足够久，那么浏览器就必须一直等待，严重情况下浏览器还可能失去响应。当然，react团队大佬云集，不至于说react会在渲染上严重卡顿。但在极端情况下，react在渲染大量dom节点时还是会出现丢帧问题，这个现象大家可以对比。
2022-09-20 14:51:54
830
1
原创 Vue3.2 中 Setup 知识点整理
在 Vue3.0 中变量必须 return 出来，template中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return，template 便可直接使用，非常的香啊！setup 语法糖中可直接使用 await，不需要写 async ， setup 会自动变成 async setup。提示：以下是本篇文章正文内容，下面案例可供参考。...
2022-08-11 09:56:42
421
原创 react-img-editor 图片编辑
demo：npm install react-img-editor -S引入和使用import ReactImgEditor from 'react-img-editor'import 'react-img-editor/assets/index.css'<ReactImgEditor src={src} width={656} height={300} plugins={[]} crossOrigin="anonymous" getSt.
2022-05-13 15:22:40
1535
1
原创 react-cropper图片的旋转裁剪
npm install --save react-cropper引入：import Cropper from 'react-cropper';import 'cropperjs/dist/cropper.css';使用：<Cropper src={src}//图片url style={{ height: 300, width: "100%" }} autoCropArea={1} // 默认裁剪框与画布比例 rotatable // 旋转 ref={crop.
2022-05-13 15:12:55
681
原创 react原理部分
一、batchUpdate和setState核心要点：setState主流程 batchUpdate机制 transaction事务机制左边分支对应左边的图，右边分支对应右边的图setState异步还是同步？setState无所谓异步还是同步 看是否命中batchUpdate机制 判断isBatchingUpdates那些能命中batchUpdate机制？生命周期（和它调用的函数） React中注册的事件（和它调用的函数） React可以“管.
2022-05-11 15:25:57
384
原创 useEffect模拟组件生命周期
一、让函数组件模拟生命周期默认函数组件没有生命周期 函数组件是一个纯函数，执行完即销毁，自己无法实现生命周期 通过Effect hook把生命周期“钩”到纯函数中 // 模拟 class 组件的 DidMount 和 DidUpdate useEffect(() => { console.log('在此发送一个 ajax 请求') }) // // 模拟 class 组件的 DidMount useEffect(() => {
2022-05-07 15:15:17
9056
原创 什么是自定义Hook
举例来说明：封装hookimport { useState, useEffect } from 'react'import axios from 'axios'// 封装 axios 发送网络请求的自定义 Hookfunction useAxios(url) { const [loading, setLoading] = useState(false) const [data, setData] = useState() const [error, setError
2022-05-07 14:43:58
299
原创 react性能优化有哪些
一、shouldComponentUpdateshouldComponentUpdate(nextProps, nextState) { return true;}nextProps: 表示下一个props nextState: 表示下一个state的值。默认返回true，让react执行更新举例： constructor(props) { super(props); this.state = {count: 1}; } shouldCompone
2022-05-06 15:52:09
696
原创 vue3入门整理
setup函数，vue3入门知识点整理，ref, reactive, toRef, toRefs, watch, watchEffect等使用案例
2022-03-21 14:28:59
1336
原创 url从输入到返回请求的过程
一、dns解析URL中的域名对应的IP地址流程1、浏览器中输入域名（例如：www.baidu.com），操作系统会先查hosts文件是否有记录，有的话就会把相对应映射的IP返回。2、hosts文件没有的话就去查本地dns解析器有没有缓存3、然后去找计算机上配置的dns服务器上有没有缓存4、还没有的话就去找根DNS服务器（全球13台，固定ip地址），然后判断.com域名是哪个服务器管理，如果无法解析，就查找.baidu.com服务器是否能解析，直到查到www.baidu.com的ip地址注意：d
2022-02-14 16:05:09
1048
原创 a:visited为何不起作用及如何清除缓存
首先a标签这几个伪类是有顺序的，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的a:link{color:yellow;} /* 未访问的链接 */a:visited {color:black;} /* 已访问的链接 */a:hover{color:red;} /* 鼠标划过链接 */a:active{color:green;} /* 已选中的链接 */四个状态 同时存在，是有先后顺序的：a:.
2021-10-09 19:02:14
1675
原创 react native 模块阴影 shadow
//android elevation: 5, //ios shadowColor: '#000000', shadowRadius: px(3), shadowOpacity: 0.14, shadowOffset: { width: px(1), height: px(5) },
2021-07-26 15:33:28
370
原创 react native 背景颜色渐变
首先安装依赖包npm installreact-native-linear-gradientimport LinearGradient from "react-native-linear-gradient";<LinearGradient colors={['#1849F1', '#007EFF']} //渐变 start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}> <Text style={styles.business}>..
2021-07-26 15:28:16
912
原创 nofollow的使用以及作用
“nofollow” 标签是Google、Yahoo和微软公司前几年一起提出的一个标签，链接加上这个标签后就不会被计算权值，搜索引擎支持nofollow属性，在很大程度上抑制博客或论坛的垃圾留言。对站长来说是一件大好事。nofollow是HTML元标签(meta)的content属性和链接标签(a)的rel属性的一个值，告诉机器(爬虫)无需追踪目标页，为了对抗blogspam(博客垃圾留言信息)，Google推荐使用nofollow，告诉搜索引擎爬虫无需抓取目标页，同时告诉搜索引擎无需将的当前页的Pag
2021-05-24 14:55:40
820
原创 Nunjucks简单入门
1、页面全局变量<script type="text/javascript"> try { ____json4fe = {{ other.json4fe | dump | safe }}; }catch (err) { console.warn("__wuba_list_model parse error: ", err); }</script>2、‘if‘有多个‘和‘或‘或‘条件{% if (item.t
2021-04-30 15:15:24
310
1
原创 webpack简单总结
注意：1、webpack 配置文件路径。默认为 ./webpack.config.js。2、注意，命令行接口（Command Line Interface）参数的优先级，高于配置文件参数。例如，如果将 --mode="production" 传入 webpack CLI，而配置文件使用的是 development，最终会使用 production。--watch/-w 监听文件变化--progress 在构建过程中打印编译进度--hot/-h 启用HMR（热更新）...见...
2021-04-26 16:50:05
217
原创 移动端不停刷新页面
bug描述：这里遇到的问题，是底层是three.js的代码，实现的全景VR效果在pc端，及pc模拟移动端没有问题，但是到了手机侧，不停的刷新页面解决办法：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover">对于meta的讲解见：https://li
2021-04-09 16:03:09
768
TA创建的收藏夹 TA关注的收藏夹
TA关注的人