- 博客(375)
- 资源 (6)
- 问答 (1)
- 收藏
- 关注
原创 [qiankun]: Target container with #container not existed while childOne loading!
主应用container容器不存在导致无法挂载子应用。放在Router标签内,跟Router同级即可。
2024-04-19 15:47:37
584
2
原创 TerserWebpackPlugin详解
TerserWebpackPlugin,此文章来自于github翻译来,仅供参考,具体配置需要结合自己的技术框架配置(vue/react等)
2024-02-01 10:43:50
5984
原创 sass系统的一些总结
一、列表页1、查询条件input输入框长度限制 input输入框是否可以属于特殊字符 重置按钮 =》重置查询条件、分页到第一页(每页多少条到默认条数) 点击查询按钮,分页设置为第一页,每页条数根据实际情况定2、table表格表格宽度写死,例如:日期、手机号、身份号等能明确长度 操作列固定列,及宽度的设置3、分页点击分页带查询条件二、新增编辑详情页新增、编辑、详情共用一个页面(详情如果有特殊设计可单独一个页面) 保存接口需要区分是新增和编辑三、新增、编辑表单表单长度限
2023-10-27 10:36:28
234
原创 前端监控指的是什么?
解决技术产出的问题,技术产出和业务的好坏相关的,上线用户行为监控可以统计某个功能模块的具体使用情况,如果产品经理提出同类型产品需求的时候,如果上次产品效果不好,我们可以质疑产品经理提出的需求是否具有价值。在后端突然上线了某个需求,某个接口的数据格式发生了变化,造成lavaScript运行错误,导致我们的用户比如按钮点不动、页面白屏之类的错误,影响用户体验。测是不是接口返回速度过慢,直接去和后端沟通的话,没有数据支撑,无法使后端同学信服,最终影响用户体验。性能监控(监控页面的性能)
2023-04-05 09:17:53
1315
原创 性能优化之代码层 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
259
原创 性能优化从那几方面考虑?
https://liulibin.blog.csdn.net/article/details/129801736https://liulibin.blog.csdn.net/article/details/129801567
2023-03-28 16:13:27
93
原创 性能优化之代码层 js
以看出for-in循环能够遍历对象的属性集,特别适合处理诸如JSON对象这样的未知属性集,但对通常的循环使用场景来说,由于它遍历属性的顺序不确定,循环的结束条件也无法改变,并且因为需要从目标对象中解析出每个可枚举的属性,即要检查对象的原型和整个原型链,所以其循环速度也会比其他循环方式要慢许多,如果循环性能有要求则尽量不要使用for-in循环。因为循环结束的判断是和常量0进行比较的,不存在对数组长度属性值的查找或局部变量的读取,其比较的运算速度会更快。
2023-03-27 19:40:44
715
原创 性能优化之图片的选择
好的做法是把图片先按照这两种格式分别输出,看 PNG-8 输出的结果是否会带来肉眼可见的质量损耗,并且确认这种损耗是否在我们(尤其是你的 UI 设计师)可接受的范围内,基于对比的结果去做判断。这里值得注意的是,尽量不要使用低质量的JPEG格式进行WebP转化,因为低质量的JPEG中可能包含压缩的伪像,这样WebP不仅要保存图像信息,还要保存JPEG添加的失真,从而影响最终的转化效果。前面我们提到,复杂的、色彩层次丰富的图片,用 PNG 来处理的话,成本会比较高,我们一般会交给 JPG 去存储。
2023-03-27 19:10:11
1137
原创 vue3.0 知识点整理
来进行监听这个有点类似于const,他是定义一个无法修改的内存指针 (不知道这么叙述是否准确) ,但const定义的这个内存指针指向的内存地址的内容是可变的。proxy就是去监听ref定义的这个对象,以此来监听ref.value这个值的变化。关于ref,因为proxy。包裹成一个对象的形式。
2023-03-21 09:01:36
83
原创 webgl和canvas区别
图形的绘制主要通过 CanvasRenderingContext2D 接口完成。二维图形可以使用 ( Canvas API 或 WebGL API)三维图形使用 WebGL API。
2023-03-08 18:52:26
192
原创 输入url到页面加载发生了什么?
二者的值都是GMT格式的时间字符串, Last-Modified 标记最后文件修改时间, 下一次请求时,请求头中会带上 If-Modified-Since 值就是 Last-Modified 告诉服务器我本地缓存的文件最后修改的时间,在服务器上根据文件的最后修改时间判断资源是否有变化, 如果文件没有变更则返回 304 Not Modified ,请求不会返回资源内容,浏览器直接使用本地缓存。JS是单线程,也就是说,在同一个时间内只做一件事,所有的任务都需要排队,前一个任务结束,后一个任务才能开始。
2023-03-06 15:52:30
339
原创 ts知识点整理
变量str被推断为字符串类型,这种推断发生在初始化变量和成员,设置默认参数值和决定函数返回值时,如果由于缺乏声明而不能推断出类型,那么它的类型被视作默认的动态any类型。断言与类型守卫的概念非常相似,都是确定参数的类型,但断言更加霸道,它是直接告诉编辑器,这个参数就是这个类型,而类型守卫更像确定这个参数具体是什么类型。在上下文中当类型检查器无法断定类型时,一个新的后缀表达式操作符!通过类型批注提供在编译时启动类型检查的静态类型,这是可选的,而且可以忽略而使用JavaScript常规的动态类型。
2023-02-21 16:09:20
507
原创 react知识点整理
reducer 接收两个参数,state,action。加入hooks,让react函数组件更加的灵活。类似生命周期函数,可以把useEffect看做。在跨组件层级获取数据时简化获取数据的代码。是一种让函数组件保存状态的方式。
2023-01-30 14:58:42
316
原创 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
678
原创 http相关面试题
http2通过gzip与compress对头部进行压缩,并且在客户端与服务端各维护了一份头部索引表,只需要根据索引id就可以进行头部信息的传输,缩小了头部容量,间接提升了传输效率。:http1一个连接只能提交一个请求,而http2可以同时处理无数个请求,可以降低连接的占用数量,进一步提升网络的吞吐量。降低请求量:合并资源,减少 HTTP 请求数,minify / gzip 压缩,webP,lazyLoad。http 传输的数据都是未加密的,也就是明文的,设置了 SSL 协议来对 http 协议。
2022-12-01 09:40:02
865
原创 js常见面试题整理
②:如果没有的话,它就在该对象的__proto__下查找,因为__proto__这个属性是指向对应的构造函数身上的protytpe,把它查找的时候找的就是构造函数的原型。③:如果原型身上也没有的话,那它会继续往外面找,直到找到最顶层的Object身上的prototype,如果都没有,则返回undefined。当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。当我们调用一个对象身上的属性或者方法的时候,他就会有一个查找规则。
2022-11-30 09:51:14
760
原创 【react】fiber解决了什么问题,及diff算法
1、reactfiber1、reactfiber这里说的是react16之前的版本,也就是说16之前没有加入fiber。假设我们的dom结果非常复杂,react在递归进行渲染时一定会非常耗时;而这段代码又是同步执行,。大家都知道浏览器是单线程,js线程和ui线程互斥,假设运行的时间足够久,那么浏览器就必须一直等待,严重情况下浏览器还可能失去响应。当然,react团队大佬云集,不至于说react会在渲染上严重卡顿。但在极端情况下,react在渲染大量dom节点时还是会出现丢帧问题,这个现象大家可以对比。
2022-09-20 14:51:54
932
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
472
原创 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
1656
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
756
原创 react原理部分
一、batchUpdate和setState核心要点:setState主流程 batchUpdate机制 transaction事务机制左边分支对应左边的图,右边分支对应右边的图setState异步还是同步?setState无所谓异步还是同步 看是否命中batchUpdate机制 判断isBatchingUpdates那些能命中batchUpdate机制?生命周期(和它调用的函数) React中注册的事件(和它调用的函数) React可以“管.
2022-05-11 15:25:57
425
原创 useEffect模拟组件生命周期
一、让函数组件模拟生命周期默认函数组件没有生命周期 函数组件是一个纯函数,执行完即销毁,自己无法实现生命周期 通过Effect hook把生命周期“钩”到纯函数中 // 模拟 class 组件的 DidMount 和 DidUpdate useEffect(() => { console.log('在此发送一个 ajax 请求') }) // // 模拟 class 组件的 DidMount useEffect(() => {
2022-05-07 15:15:17
9137
原创 什么是自定义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
326
原创 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
725
原创 vue3入门整理
setup函数,vue3入门知识点整理,ref, reactive, toRef, toRefs, watch, watchEffect等使用案例
2022-03-21 14:28:59
1364
原创 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
1090
原创 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
1759
原创 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
400
原创 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
1003
原创 nofollow的使用以及作用
“nofollow” 标签是Google、Yahoo和微软公司前几年一起提出的一个标签,链接加上这个标签后就不会被计算权值,搜索引擎支持nofollow属性,在很大程度上抑制博客或论坛的垃圾留言。对站长来说是一件大好事。nofollow是HTML元标签(meta)的content属性和链接标签(a)的rel属性的一个值,告诉机器(爬虫)无需追踪目标页,为了对抗blogspam(博客垃圾留言信息),Google推荐使用nofollow,告诉搜索引擎爬虫无需抓取目标页,同时告诉搜索引擎无需将的当前页的Pag
2021-05-24 14:55:40
862
原创 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
330
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
239
原创 移动端不停刷新页面
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
852
TA创建的收藏夹 TA关注的收藏夹
TA关注的人