- 博客(209)
- 收藏
- 关注
RSS订阅原创 输入url后，触发的前端相关事件
URL解析 -> DNS查询 -> DNS查询 -> 建立TCP连接 -> 发起HTTP请求 -> 服务器响应 -> 接收响应 -> 渲染页面 -> 下载资源 -> 并行下载资源 -> 执行js -> 渲染页面元素 -> 完成加载。：如果响应是 HTML 页面，浏览器会解析 HTML、构建 DOM 树、构建 CSSOM 树，然后将它们合并成渲染树，最终将页面内容显示在浏览器窗口中。：浏览器会根据 DOM 树和 CSSOM 树，计算每个元素的位置和样式，然后将页面元素绘制在浏览器窗口中。
2024-03-14 16:53:31
562
原创 前端页面加载性能优化
对于需要 SEO 优化和首屏加载性能要求较高的应用，可以考虑使用 Vue 的服务端渲染 (SSR) 来实现，以在服务端生成完整的 HTML，并提高首屏加载速度。：如果你使用 Vue Router，可以将路由进行懒加载，只在需要时加载相应的组件，而不是一次性加载所有路由组件，以减少初始加载时间。可以使用图片懒加载技术，延迟加载屏幕外的图片，以提高页面加载速度。：将代码拆分成更小的块，并按需加载。：当列表数据非常庞大时，可以考虑使用虚拟列表技术，只渲染可见区域内的列表项，以提高页面性能和用户体验。
2024-03-14 16:37:42
781
原创 前端页面渲染机制
DOM 树是一个对象表示网页的结构，其中每个 HTML 元素都是树中的一个节点，它们之间的关系由它们在 HTML 中的嵌套关系决定。: 类似于 DOM 树，浏览器还会构建 CSS Object Model（CSSOM）树，表示 CSS 的层次结构和规则。浏览器会监听用户的事件，如鼠标点击、键盘输入等，并触发相应的事件处理程序（通常是 JavaScript 函数），以响应用户的操作。这个过程称为 CSS 解析和样式计算。: 浏览器根据渲染树中的每个元素的几何属性（如大小和位置）来确定它们在屏幕上的确切位置。
2024-03-14 15:47:41
571
原创 如何提高webpack构建速度以及优化前端性能
可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件， 利⽤ cssnano （css-loader?: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存提取公共第三⽅库: SplitChunksPlugin 插件来进⾏公共模块抽取, 利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码。5.使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速。
2024-02-04 15:28:07
686
原创 如何对项目中的图片进行优化以及常见图片格式
对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然。很多时候会使用到很多修饰类图片，其实这类修饰图片。2.对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪。格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥。有肉眼识别无差异的图像质量，缺点就是兼容性并不好。3.小图使用 base64 格式。完全可以用 CSS 去代替。后去请求相应裁剪好的图片。
2024-02-04 15:06:39
226
原创 图片懒加载
图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。根据这个原理，我们使用HTML5的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时，获取图片的真实地址并赋值给图片即可。注意：data-xxx中的xxx可以自定义，这里我们使用data-src来定义。
2024-02-02 16:54:42
246
原创 树形结构扁平化，数组结构树形化（极致优雅版）
3.我的项目里面，需要转换的映射是 traderNo->id,traderName->label,parentTraderNo:父节点的no，这几个字段根据自己实际项目和转换需求来确定。2.parentId：父节点的id值，可能为null/'0'等，根据实际项目情况看。2.其他字段转换和上文一致。一.数组结构转树形结构。
2024-01-31 13:54:45
479
原创 springboot初始项目每一层的含义
控制器层，包含处理 HTTP 请求和响应的控制器类。: 存放配置类，如 Spring 配置、数据库配置等。: 存放数据访问层的接口或类，用于与数据库进行交互。三.有的项目下创建出来，存在更多不同的层级。: 存放实体类，代表数据库表的结构。: 服务层，包含业务逻辑的实现。一.创建的时候主要勾选了以下。
2024-01-23 09:48:57
457
1
原创 前端及其优雅的去重方式
NaN（Not a Number）是 JavaScript 中一个特殊的值，而 NaN 与自身不相等。对象是引用类型，即使两个对象具有相同的结构和值，它们也是不相等的。但是，该函数会将两个不同的对象视为相等，因为它仅仅检查了对象的引用而不是内容。在 JavaScript 中，null 和 undefined 被视为相等的，但是该函数会将它们视为不同的值。相较于new Set()方法，能区分出{},{}重复的筛选,new Set需要对对象进行重复的判断。核心思路：将一个值的的类型+值作为key。
2024-01-03 18:54:28
533
原创 前端.gitignore参考
Logslogs*.log.DS_Storedistdist-ssrcoverage*.local.vscode/*!.idea*.suo*.ntvs**.njsproj*.sln*.sw?
2023-10-27 17:22:28
111
原创 eslint+stylelint+prettier全流程配置
stylelintrc.cjs，具体文件内容如下。执行一次npx prettier . --write，格式化一次code，如果是使用的Vscode编辑器，格式化代码的时候选取prettier相关的格式方法。三.vite.config.ts引入。二.创建以下5个文件放在项目顶层。
2023-10-27 17:11:51
2206
原创 vue2封装单张图片上传（常用于身份证正反面）
提供2个方法给外部，onSuccess成功后的处理，onRemove移除照片后的处理，需要其他，就自己抛出事件，但是封装这个组件的本心是简化上传动作，因此尽量少抛出事件。另外如果修改了宽度的话，在外部组件需要用scss重写一下样式。
2023-06-29 15:58:47
1490
原创 uni-app一些开发技巧
我的项目pc版本cookie是后端去存放在请求里面的，实测这样的方式，在h5页面去实现的时候，无法读取，还是需要前端去存一次，并传递。uni.request不支持文件上传，即file类型的上传，需要用uni.uploadFile。一.如何在不同平台运行不同的代码。二.uni-app文件上传的坑。
2023-05-22 09:04:00
494
原创 uni-app省市区查询组件的封装
change里面会有点击确定的回调，回调里面包含了参数。另外几个文件放在旁边的博客文章里面，太长了.....addreeText是显示在那一行的地址信息。四.pickerAddress.vue。
2023-05-11 17:29:41
282
原创 uni-app封装手机端table组件
column：显示的字段 eg：[{ prop: 'businessType',label: '业务类型'}]IMG_BASE_URL是我的项目图片的基础地址，主要是放置下拉的那个箭头，根据自己项目去调整。tableData：table数据 eg:[{businessType:'1111'}]outerNum:table的header显示几个，默认3个。funcBtn:操作按钮的名称数组，eg：['审核']loadMoreData：点击加载更多的处理事件。一.最终实现效果如下。
2023-05-11 17:15:07
1380
原创 uni-app根据环境封装动态url
env：当前的运行环境，小程序会有development，test，production三个环境,根据不同的环境配置不同的使用地址。whichSupport是在进入项目时已经判断出来了当前是在哪个硬件环境下（通过//#ifdef APP去实现）小程序需要拼接全量的地址，而h5只需要给出后缀，通过ngix进行转发即可，这个操作放在全局的axios请求里面。baseUrl就是请求的url。
2023-05-11 16:36:48
1787
原创 关于vue3的pinia的使用
这样才能相应到，直接在页面写{{globalStore.payLoading}}是无法响应的。在/src/pinia下创建需要创建的store，比如创建一个user.ts。/src/pinia下创建一个主文件index.ts。1.如果想在页面上响应pinia的变化，需要。在mian.ts中挂载主文件。
2023-05-11 16:20:12
151
原创 华为ocr接口的前端封装
judgeFile:对文件进行合规性校验函数。idcardRecognize：后端返回接口。showToast：全局提示函数。二.judgeFile代码如下。
2023-05-11 15:56:05
172
原创 uni-app提示信息的封装
glPinia.canToast是放pinia的全局参数，用来控制在当前是否允许弹窗，比如https全局请求的时候，有可能出现一次性出现多个错误提示的情况，通过这个变量来劫持。背景：uni-app运行在微信小程序时，超过7个字符会进行截取，因此需要使用showModal进行提示。
2023-05-11 11:12:08
569
原创 vue3编码规范
**注** 页面与组件的命名，统一采用 **page-block/function** 的方式 如 **envelope-header envelope-tab-bar**- **store** \*全局 store 项目采用 **pinia** 代替 vuex\* **[pinia](https://pinia.web3doc.top/)**- **Atomic CSS** 原子化 css。- **接口函数** 统一以 **api** 结尾 如 ***getUserInfoApi****
2023-05-11 10:54:26
893
原创 微信点金计划（服务商角度）
引入的头部文件，除了./jsapiResult/cssFiles/jsapiResult.css这个文件外，其他直接去网上扒拉资源就好，我这里都是自己下载下来放置为静态文件调用,这个样式文件如下。②“商家小票”调试工具里面的，“从业机构商户号”是银行/服务商的商户号，底部的2个单号，可以在微信支付的“账单”里面点进去查询到。三.因为微信的前端回调没有跳转小程序的方法，所以设置了一个空白页面，先跳转到空白页面，空白页面再跳转到小程序，空白页面代码如下。这个文件，我目前是放置在index.html里面。
2023-02-17 15:43:45
1199
3
原创 vue下echarts的地图配置(3d悬浮效果)
2.series数据格式为：[{name:'四川省',amount:'123456'},{name:'海南省,amount:'456'}]1. zoomSize设置值为1.4。toolTip配置js文件如下。图片上面的水印是公司软件自带的。五.其他配置数据说明。
2022-11-04 15:33:07
5834
1
原创 前端微信支付代码(公众号支付)
其他商户跳转到我们支付页面，传入参数openId,fromTradeType,订单号，流水号，借由我们页面进行微信支付。具体在小程序后台如何配置，见微信官方文档。满足1.是在微信内核进入。2.传入了openId。三.控制微信支付按钮显示隐藏的代码。引入lodash主要使用防抖功能。五.进行微信搭桥，进行环境处理。一.场景 (完成代码见附录)四.点击微信支付后的流程代码。六.环境准备好后，拉起支付。
2022-11-04 13:59:42
2266
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人