- 博客(59)
- 收藏
- 关注
RSS订阅原创 首屏优化如何做
因为在SSR中，服务器返回的是已经渲染好的HTML页面，而不是由JavaScript生成的动态内容。app.js中的页面拆分成单独的js文件，按需加载，加速app.js文件的下载速度从而减少首页加载时间。4. 更好的用户体验：由于SSR能够更快地呈现出首屏内容，用户可以更快地看到页面的基本结构和内容，减少了等待时间，提升了用户体验。文件中，我们引入压缩和合并后的静态资源文件，可以减少网络请求次数和文件大小，提高页面加载速度。同时，可以使用懒加载技术，延迟加载非首屏可见区域的图片，减少首屏的加载时间。
2024-07-02 17:39:11
449
原创 vue性能优化方案
3. 优化资源利用： 路由懒加载可以将应用划分为多个独立的模块，每个模块可以按需加载，提高代码的复用性和可维护性。同时，由于只加载当前需要的模块，可以更好地控制资源的使用，避免一次性加载过多的资源。2. 提升页面加载速度： 当用户访问某个具体的页面时，只需要加载该页面所需的代码，而不是一次性加载所有页面的代码。这样可以减少初始加载的代码量，提升网页的加载速度，特别是在应用有很多页面的情况下效果更为明显。组件缓存是指将组件的状态缓存起来，当组件再次被渲染时，可以直接使用缓存的状态，而不需要重新渲染组件。
2024-07-02 16:28:30
454
原创 大文件上传是怎么做的
这种方法可以减少单个请求的数据量，提高上传效率，并且可以在上传失败后只重新上传失败的部分，而不需要重新上传整个文件。断点续传：当文件上传过程中出现网络断开或其他异常情况时，可以通过记录已上传的部分，下次从上次上传的位置继续上传。1. 切割文件，将要上传的文件切割成多个小文件片段。3. 后端接收并保存文件片段，后端接收到每个文件片段后，将其保存在临时位置，并记录文件片段的序号和文件ID等信息。4. 续传处理，如果上传过程中断，下次继续上传时，通过查询后端已保存的文件片段信息，得知已经成功上传的文件片段，
2024-07-01 23:05:42
331
原创 前端无感登录（无感刷新token）
1. 登录成功后保存两个token（登录成功的token）和refresh_token（重新调用新token的接口的token）2. 后端返回过期时间，前端判断token的过期时间，去调用刷新token的接口。6. 如果refresh_token也过期了，就要清除所有token重新登录。1. 在响应器中拦截（判断token返回过期后，调用刷新token的接口）2. 在响应拦截器中对401状态码引入刷新token的api方法调用。4. 把错误对象里的token替换。3. 替换保存本地新的token。
2024-07-01 21:35:20
246
原创 浏览器的缓存策略
使用Service Worker可以实现更灵活的缓存控制，可以离线运行和更细粒度地控制缓存策略。通过在Service Worker中定义缓存策略，可以实现自定义的缓存行为。通过设置`Cache-Control`和`Expires`响应头来控制资源缓存的有效期。如果资源未过期，浏览器直接从缓存中加载资源，不会向服务器发送请求。浏览器在发起请求时，通过`If-Modified-Since`和`If-None-Match`使用CDN（内容分发网络）可以将静态资源缓存在离用户较近的服务器节点上，加快资源加载速度。
2024-07-01 20:19:02
150
原创 精灵图和base64的区别
精灵图：把多张小图整合到一张大图上，利用定位的一些属性把小图显示在页面上，这样访问页面的时候，可以减少请求次数，提高加载速度。base64：这是一种传输8bit字节代码的编码方式，是一种用64个字符来表示二进制数据的方法，最后组成字符串。1. Base64会和html，css一起下载到浏览器中，减少请求；一些低版本不支持，若base64体积比原图片大，不利于css的加载。2. 减少跨域问题；
2024-07-01 20:06:44
128
转载 get请求和post请求的区别
GET：由于数据包含在URL中，大多数浏览器和服务器对URL的长度有限制，这间接限制了GET请求所能携带的数据量，一般不超过2KB-4KB。POST：请求参数放在请求体（Request Body）中，不会在URL中显示，因此参数不会被浏览器记录在历史记录中，也不在地址栏展示。POST：相对安全，因为数据不在URL中显示，但需要注意，HTTPS协议应该被用于任何敏感数据的传输，无论使用GET还是POST。GET：幂等的，意味着对同一URL的多次请求应该产生相同的结果，不会改变服务器上的资源。
2024-07-01 17:40:44
17
原创 ES6的新特性有哪些
9. 新增了模块化（import，export）1. 新增了块级作用域（let，const）3. 新增了一种基本数据类型（symbol）2. 新增了定义类的语法糖（class）10. 新增了set和map数据结构。7. 对象和数组新增了扩展运算符。11. 新增了generator。5. 新增了函数参数的默认值。6. 给数组新增了API。12. 新增了箭头函数。4. 新增了解构赋值。
2024-07-01 16:50:57
401
原创 理解前端内存泄露
在处理DOM元素时，如果不当使用或引用DOM元素，可能会导致内存泄漏。例如，在处理DOM元素的引用时，如果没有正确解除这些引用，即使元素不再需要，它们仍然会保留在内存中。例如，在异步操作中使用闭包时，如果没有正确管理闭包内部的引用，可能会导致内存泄漏。JS里已经分配内存地址的对象，但是由于长时间没有释放或者没办法清除，造成长期占用内存的现象，会让内存资源大幅度浪费，最终导致运行速度慢，甚至崩溃的情况。）上添加事件监听器时，如果没有正确移除这些监听器，即使组件或页面不再需要它们，它们仍然会保留在内存中。
2024-07-01 14:41:12
321
原创 JS对数据类型的检测方式
3. constructor几乎可以判断基本数据类型和引用数据类型（如果声明了一个构造函数，并把它的原型指向了Array，这个时候constructor就判断不出来了）2. instanceof()只能判断引用数据类型，不能判断基本数据类型。1. typeof()对于基本数据类型没问题，遇到引用数据类型就不管用。
2024-07-01 01:12:15
273
原创 ::before和:after中双冒号和单冒号有什么区别
:before和::after也常常会用来进行样式布局。::before和::after一般用于清除浮动。
2024-06-29 18:40:04
91
原创 H5/C3面试题——语义化标签
3. IE8是不兼容H5标签的（需要通过html5shiv.js去处理）2. seo成分会更好，蜘蛛抓取会更好。1. 易读性和维护性更好。
2024-06-29 18:19:07
86
原创 工作记录2
首先通过调用接口获取机构在机构端对客服的一些配置，可以选择配置客服的方式（有h5和js客服），选择配置h5客服的话，就必须得填写客服链接，选择配置js客服的话，就必须得填写JS客服代码，如果获取到接口返回的信息表示机构配置的是h5客服，那就直接用window.opend打开当时填的客服链接即可，但如果是js客服的话，就可以调用螳螂客服的一些api来实现了。本来是可以前端自己去生成schemaUrl的，但是生成的链接有时效性，然后最新的那种明文码它好多设备不支持，所以最后决定让后端生成。
2024-06-20 11:25:53
498
原创 工作记录1
如果不是，就校验名字是否重复，名字校验没问题的话，就开始校验手机号，手机号没问题的话，就开始校验图片验证码，图片验证码也没问题的话，就会开始倒计时，此时按钮变成“重新发送 (${timer}s)”。首先校验输入的验证码是否为空，如果为空就给setCodeStatus赋值为1，不为空后，再校验输入的验证码是否为6位数，不为6位数字的话，就给setCodeStatus赋值为2，剩下的就给setCodeStatus赋值为3，并在页面中做判断以展示不同状态对应的不同页面。并做判断不同的名称状态给出不同的提示。
2024-06-16 20:37:28
709
原创 上班必备——项目部署环境
ui，产品和测试的同事在前端开发的过程中，都会时刻关注着进度，是要看页面效果的，这个时候怎么看呢？部署到公司私有的服务器或者局域网服务器上，主要用于测试是否存在bug，一般不会让用户和其他人看到，并且测试环境会尽量与生产环境相似。开发环境：开发环境时，程序员们专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告和测试工具。生产环境：是指正式提供对外服务的，一般会关掉错误报告，打开错误日志，是最重要的环境。大家都知道，互联网行业有很多的岗位，前端，后端，产品，测试，ui等。
2023-12-10 22:37:04
169
原创 上班必备代码托管工具git
将本地仓库的代码推送到远程仓库（github,gitee,gitlab等之一），然后你的同事就可以通过一个git命令拉下你推送到远程仓库的代码了。1 // 在拉取远程代码的时候，必须执行上面两步，将你刚写的代码存放到本地仓库，如果你不执行上面两步，那你刚写的代码就会被拉下来的代码覆盖。同样，只有你的同事将他写的代码推送到远程仓库后，你执行git命令才能把他写的代码拉下来，合并到你的代码里。使用分支，可以更加有条理的进行代码管理。拉取远程的代码到master分支（将同事的代码和你之前提交到远程的代码拉回来）
2023-12-10 21:48:40
115
原创 实现单行/多行文本溢出
在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号。-webkit-box-orient: vertical // 和1结合使用，设置或检索伸缩盒对象的子元素的排列方式。text-overflow: ellipsis // 多行文本的情况下，用省略号"..."隐藏溢出范围的文本。-webkit-line-clamp: 2 // 用来限制一个块元素显示的文本行数。
2023-10-01 20:02:56
284
原创 响应式设计的实现方式
页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整。比如当浏览器的宽度或者高度发送变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。CSS3中增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体查询，并根据对应的条件，height，width属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。
2023-10-01 15:23:14
387
原创 常见的BOM对象
这个方法会根据最有效的方式刷新页面，如果页面自上一次请求以来没有改变过，页面就会从浏览器缓存中重新加载，如果要强制从服务器中重新加载，传递一个参数true即可。history对象用来操作浏览器URL的历史记录，可以通过参数向前，向后或者向指定URL跳转。window.open()，既可以导航到一个特定的url，也可以打开一个新的浏览器窗口。window.close()，仅用于通过window.open()打开的窗口。比如，如何进行页面的后退，前进，刷新，滚动条的滚动等等。五. history。
2023-09-27 16:17:37
66
原创 DOM操作
createDocumentFragment，用于创建一个文档碎片，它表示一种轻量级的文档，主要用来存储临时节点，然后把文档碎片的内容一次性添加到DOM中。inndeHTML，可以修改一个DOM节点的文本内容，还可以通过HTML片段修改DOM节点内部的子树。setAttribute，在指定元素中添加一个属性节点，如果元素中已有该属性就会改变该属性的值。appendChild，把一个子节点添加到父节点的最后一个子节点。删除一个节点，首先要获得该节点本身以及它的父节点。
2023-09-27 12:15:41
117
原创 浏览器从输入URL到页面展示这个过程中都经历了什么
1. 确认双方的收发能力。TCP建立连接之前，需要确认客户端和浏览器双方的收包和发包的能力，最开始的一次握手，客户端发送网络包，服务端收到了，这样服务端就能得出结论：客户端的发送能力，服务端的接收能力是正常的。对于四次挥手，因为TCP是全双工通信，在主动关闭方发送FIN包后，接收端可能还要发送数据，不能立即关闭服务器端到客户端的数据通道，所以也就不能将服务器端的FIN包和对客户端的ACK包合并发送，只能先确认ACK，然后服务器等到无需发送数据时再发送FIN包，所以四次挥手时必须是四次数据包的交互。
2023-09-26 21:51:38
248
原创 Event Loop——事件循环
比如主线程中需要发一个 AJAX 请求，就把这个任务交给另一个浏览器线程（HTTP 请求线程）去真正发送请求，待请求回来了，再将 callback 里需要执行的 JS 回调交给 JS 引擎线程去执行。也就是说，“JS 是单线程的”指的是执行 JS 代码的线程只有一个，是浏览器提供的 JS 引擎线程（主线程）。事件循环的过程中，执行栈在同步代码执行完成后，优先检查微任务队列是否有任务需要执行，如果没有，再去宏任务队列检查是否有任务执行，如此往复。而其他异步任务完成后，将回调放入任务队列中待执行栈来取出执行。
2023-09-24 18:22:50
396
原创 元素定位——实现对页面元素的拖拽效果
offsetLeft: 元素左边框与最近定位的父级元素的距离，若在所有的父级上都没有定位，则相对于整个文档。screenX: 鼠标相对于显示器屏幕左侧位置的x坐标（跟浏览器窗口不一样，把浏览器往左边移动能看出效果）getBoundingClientRect().left: 元素左边框相对于可视区的距离，有可能为负值。pageX: 鼠标相对于文档的x坐标，而非窗口坐标，如果没有滚动距离，则跟clientX是一样的。offsetX: 鼠标相对于事件源元素的x坐标。clientLeft: 元素左边框的宽度。
2023-09-24 16:51:46
183
原创 事件委托（也称作事件代理）
事件委托的原理是DOM元素的事件冒泡。给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。原因是在于：这些事件仅发生于自身上，而它的任何父节点上的事件都不会产生，所以不会冒泡。可以大量节省内存占用，减少事件注册（比如在ul上代理所有的click事件）；事件委托把原本需要绑定的事件委托给父元素，让父元素担任事件监听的职务。3. UI事件：load、unload、scroll、resize。事件委托是JavaScript中常用的绑定事件的技巧。
2023-09-23 12:43:46
41
原创 原型和原型链
对象都有__proto__属性，这个属性指向它的原型对象，原型对象也是对象，它也有__proto__属性，指向原型对象的原型对象，这样一层一层形成的链式结构称为原型链，最顶层找不到则返回null。在js里面，Array.prototype上面挂载了很多方法，例如Array.prototype.splice，Array.prototype.sort等等，js已经提前写好了。构造函数Array---------------->Array.prototype原型。因为这个属性的值是个对象，也称为原型对象。
2023-09-22 18:31:15
37
原创 JS中的call( )方法和apply( )方法以及bind()
它们的第一个参数都是this要指向的对象，不同的是，call方法传递函数调用形参是以散列形式，apply方法的形参是一个数组。在传参情况下，call的性能要高于apply，因为apply在执行时还多一步解析数组。运用call()和apply()这两个方法，是为了改变this的指向。上面的this指向的是window，如何让他指向对象obj呢？3. JS的继承，构造函数的继承就是靠call来实现的。1. 使用call实现判断复杂数据类型。2. es5把伪数组转为真正的数组。二. call和apply的区别。
2023-09-22 18:29:54
79
原创 Vue3，Pinia
二. Vue2 vs Vue3一. Vue3的优势1. 更容易维护组合式API，更好的TypeScript支持2. 更快的速度1. 重写diff算法；2. 模板编译优化；3. 更高效的组件初始化3. 更小的体积1. 良好的TreeShaking；2. 按需引入4. 更优的数据响应式Proxy二. Vue2 vs Vue3整个配置项中，有着一个一个的选项，data是一个选项，methods是一个选项，computed是一个选项等等。
2023-09-09 12:52:59
182
原创 vuex的简介
二. 使用vuex管理数据一. 认识vuex1. 什么是vuexvuex是一个vue的状态管理工具，状态就是数据大白话：vuex是一个插件，可以帮我们管理vue通用的数据（多组件共享的数据）2. vuex的应用场景1. 某个状态在很多组件都要用（个人信息）2. 多个组件共同维护一份数据（购物车）3. vuex的优势1. 共同维护一份数据，数据集中化管理2. 响应式变化3. 操作简洁（vuex提供了一些辅助函数）4. 构建vuex环境。
2023-09-04 16:49:35
435
原创 JavaScript(ECMAScript+DOM+BOM)
一. JavaScript基础1. JavaScript初识1. JavaScript是什么JavaScript是一种运行在客户端的脚本语言（Script是脚本的意思）脚本语言： 不需要编译，运行过程中由Js解释器（Js引擎）逐行来进行解释并执行。现在也可以基于Node.js技术进行服务器端编程。2. JavaScript的发展历史布兰登艾奇（1961年~），在1995年利用10天时间完成JavaScript设计网景公司最初命名位LiveScript，后来以Sun合作之后将其
2023-08-31 21:38:24
198
原创 HTML，CSS，移动端布局
一. HTML基础1. HTML中的注释为了便于阅读和理解，就需要使用注释标签。HTML中的注释以”<!—“开头，以”-->”结束<!--注释语句-->注意：注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的2. HTML中的特殊字符重点记住：空格，大于号，小于号就行 空格符   < 小于号 &
2023-08-31 08:49:03
245
原创 微信小程序
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。2. 小程序中常用的事件类型绑定方式事件描述tapbindtap或bind:tap手指触摸后马上离开，类似于HTML中的click事件inputbindinput或bind:input文本框的输入事件changebindchange或bind:change状态改变时触发3. 事件对象的属性列表当事件回调触发的时候，回调会收到一个事件对象event，它具有如下属性：属性类型说明。
2023-08-30 20:07:11
204
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人