- 博客(83)
- 收藏
- 关注
RSS订阅原创 前端浏览器缓存的好处和弊端以及如何处理弊端
随后我们每次请求时，浏览器会自动带上一个叫 If-Modified-Since 的时间戳字段给服务器，它的值正是上一次 response 返回给它的 Last-modified 值，然后服务器会根据 If-Modified-Since 的值对比资源的最后修改时间判断资源是否进行了修改更新。因为存储在内存中，MemoryCache 是响应速度最快的一种缓存，但由于同样的原因，缓存持续性很短，会随着进程的释放而释放，一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。设置网页头（header）
2023-07-05 00:19:07
2168
原创 JavaScript设计模式中的职责链模式
使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止
2022-11-10 01:54:21
154
原创 JavaScript设计模式中的模版方法模式
模版方法模式通过封装提高系统扩展性，把不变的逻辑抽象到父类，子类继承父类方法，子类逻辑方法是可变的。通过增加新的子类，就可以增加新的功能，并不需要改动抽象父类以及其他子类
2022-11-04 00:35:26
433
原创 解决 Uncaught SyntaxError: Unexpected token ‘＜‘ 问题的一个方法
此处因为之前为了代码托管改的，后期变动导致遇到报错。把publicPath的路径改下就好了
2022-06-03 04:41:36
493
原创 github如何托管页面、部署静态资源、部署vue静态资源的步骤和遇到的问题
github如何托管页面、部署静态资源、部署vue静态资源的步骤和遇到的问题
2022-04-23 18:48:22
1889
1
原创 git 切换仓库
git 查看远程仓库git remotegit remote -vgit 切换分支git remote rm origingit remote add origin [url]
2022-04-23 16:10:53
319
转载 用performance监控web性能
监控的指标：google开发者提出了一种RAIL模型来衡量应用性能。Response：响应用户输入，Animation：动画或者滚动需在10ms内产生下一帧，Ilde：最大化空闲时间，Load：页面加载时长不超过5秒。Animation，Idle，Load，分别代码web应用生命周期的四个不同方面。以用户为中心，最终目标是不是让你的网站在任何特定设备上都能运行很快，而是让用户满意，立即响应用户，在100毫秒以内确认用户输入，设置动画或滚动时，在10毫秒以内生
2022-02-13 20:58:54
1517
原创 通过JavaScript执行机制去学习闭包，执行上下文，作用域，作用域链。
函数执行中的变量和函数：在执行过程中，若使用了未声明的变量，那么 JavaScript 执行会报错。在一个变量定义之前使用它，不会出错，但是该变量的值会为 undefined，而不是定义时的值。在一个函数定义之前使用它，不会出错，且函数能正确执行。下面是关于同名变量和函数的两点处理原则：如果是同名的函数，JavaScript编译阶段会选择最后声明的那个。如果变量和函数同名，那么在编译阶段，变量的声明会被忽略变量提升：JS代码在执行过程中，JS去引擎把变量的声明部分和函数的声明部分提升到
2022-02-09 00:32:58
379
17
原创 APP端调试抓包工具Charles和HTTP Catcher的使用
手机端下载HTTP Catcher。PC端下载Charles在手机上打开APP页面调用接口，在PC端上显示接口详情，需要在同一局域网中。手机端下载HTTP Catcher之后，打开它点击配置代码输入wifi的IP+PC端Charles自己设置的端口。获取wifi的ip设置PC端Charles的端口号：在手机端HTTP Catcher配置代理：配置代理功能需要花28块钱手机APP调用接口，手机端HTTP Catcher提前启动。以上步骤就是我配置的步骤，没有遇
2022-01-24 20:24:40
5596
原创 启动项目报Can‘t resolve ‘core-js/modules/es6.array.find-index‘的报错
解决方法：yarn add [email protected]
2022-01-12 17:46:39
1132
2
原创 解决localstorage容量大导致页面加载变慢
项目场景：提示：性能优化之localstorage的大容量导致加载变慢：例如：我负责一个项目，原先的数百条数据是存储在localstorage里面，但是localstorage容量标准是5MB问题描述：问题：我负责的项目localstorage存储的数据量太大，高达200+条。而且每条数据很长，所以每次页面加载/更新慢的让人受不了 原因分析：原因：localstorage容量标准是5MB，我负责的项目原先的存储在localstorage的数据量太大，导致性能低下。解决方案：我的解决
2021-09-05 14:44:53
2654
51
原创 如何把JSON文件下载到本地
// 创建a标签 var publish_files = document.createElement('a'); //文件的名称为时间戳加文件名后缀 publish_files.download = "file.txt"; publish_files.style.display = 'none'; //生成一个blob二进制数据，内容为json数据 var blob = new Blob($scope...
2021-08-19 15:23:00
4264
2
原创 原生实现DIV拖拽功能(修复)和搜索框的模糊查询
项目场景：筛选框增加拖拽功能问题描述：拖拽功能增加之后，点击筛选框里面的数据进行筛选的时候会发生移位 原因分析：发生移位是因为点击筛选框里面的数据发生了拖拽，我写的拖拽功能是在整个筛选框中解决方案：提示：这里填写该问题的具体解决方案：例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sen
2021-08-04 11:51:23
170
2
原创 LINUX上传文件到服务器的常用命令
ctrl + r 查看linx 的历史命令rz -y -b 上传单文件到服务器sz + 文件 放到桌面 用beyond做代码比较zip -q -r layui.zip layui/ 压缩文件ssh_out -p 36000 [email protected]两个数组合成一个数组如何实时更新ll *.zip 查看目录下所有的zip包发布到外网先进行 git pullrz -e 上传压缩文件zip 文件.zip 文件/* 文件压缩cp ..
2021-08-03 13:02:53
1069
原创 记录一次safari和chrome浏览器时间格式不兼容的问题
问题描述：需要兼容到mac用户自带的safari浏览器，但是时间控件在safari上显示失败。原因分析：safari的时间格式是 2021/7/18但是chrome浏览器的时间格式是 2021-7-18所以需要兼容两者的时间格式解决方案：1. 写一个全局函数，用来兼容safari和chrome的时间格式。用时间的时候调用这个函数。function sarifa_window() { var explorer =navigator.userAgent ; let date
2021-07-18 19:10:34
781
24
原创 记录一次toml库CommonJS规范与项目不兼容的问题
项目场景：我需要解析toml文本为json，然后遍历它得出想要的数据问题描述：我的项目支持toml库CommonJS规范原因分析：我的项目一直在维护中，项目环境不支持CommonJS规范，而toml库用的是CommonJS规范最初我使用的toml低版本，可以支持我的项目。但是不能解析最新版本的toml格式。然后我换成另一个toml库版本，我手动修改源码把CommonJS我项目支持的ES6规范，但是稳定性不好最后的使用browerify编译我的toml库文件解决
2021-07-10 16:30:28
248
8
原创 新标签页打开链接_显示空白的问题！
问题描述：提示：右键打开新的标签页跳转之后显示about:blank#blocked。花费两个小时很久的问题，最后在打印出来的href解决掉它。解决方案：代码document.addEventListener("contextmenu", (event) => { var location = window.location.href.split('#/')[0] + '#/' + event.target.title; event.toElement.
2021-07-05 20:00:23
7754
1
原创 解决window.open打开之后，原窗口不能操作
答案： window.open(url, “_blank”, “noreferrer”);window.open(url, windowName, [windowFeatures]);url要加载的urlwindowName 可选的A DOMString的浏览上下文（窗口，指定的名称 或标签）到其中加载指定的资源; 如果名称不指示现有上下文，则会创建一个新窗口并为其指定名称windowName。windowFeatures 可选的这些功能包括窗.
2021-07-02 00:23:17
3238
原创 记录一次strict-origin-when-cross-origin的错误
用了异步的情况下，是因为http协议的问题。我们平台用的是http，直接输入域名，默认是https导致的错误。谷歌的90之后版本，默认会带https错误复现：输入xxx.com -----> 90版本的chrome： https://xxx.com报: strict-origin-when-cross-originReferer-PolicyReferer 请求头可能暴露用户的浏览历史，涉及到用户的隐私问题。所以 HTTP 提供了 Referrer-Policy 标头，其用来监.
2021-06-25 15:35:00
214191
30
原创 Vue源码数据侦测篇
Vue最大的特点就是数据驱动视图，动态变化，他由前一个状态到了后一个状态，页面也就应该变化，所以我们得到以下公式 UI = render(state)UI公式中：状态state是输入，页面UI输出，一旦状态发生改变，页面输出也就随之也改变，把这种特性称之为数据驱动视图。把UI公式分为三个部分，state，render()，UI。 state和UI都是用户顶的，不变的是render()，所以Vue就扮演了render()角色，当Vue发生state变化之后，经过一系列加公，最后变化反映在UI上Vue.
2021-06-25 11:36:20
101
4
原创 Vue生命周期源码分析~
Vue实例的生命周期大致可分为四个阶段初始哈阶段：为Vue实例上初始化一些属性，事件以及响应式数据模板编译阶段：将模板编译成渲染函数挂载阶段： 将实例挂载到指定的DOM上，即将模板渲染到真实DOM中销毁阶段： 将实例自身从父组件中删除，并取消依赖追踪及事件监听器初始化阶段：初始化阶段所做的第一件事就是new Vue()创建一个Vue实例，那么new Vue()的内部都干了上面，我们知道，new关键字在JS中表示从一个类中实例化出一个对象来，由此可见，Vue实例上是一个类，所以new .
2021-06-25 11:18:07
207
18
原创 前端性能优化方案总结~~干货满满！！！
图片格式和应用场景介绍jpg 存储和传输照片 有损压缩，加载快，体积小，不支持透明适合颜色丰富的照片，banner图，背景图png 透明，无损，体积大。适用于小logo，颜色简单且对比强烈的图片Gif动画，图标，不适合彩色图片，支持透明和不透明Webp适用于图形和半透明图像，提供有损和无损压缩不适用于彩色图片，图片压缩压缩png： node-pngquant-a=native跨平台，压缩比高，压缩png24非常好压缩 jpg： jpegtran压缩 gifGifsicle改变每
2021-06-05 16:37:35
331
46
原创 Vue源码之虚拟DOM
----- 元素节点： 元素节点更贴近于我们通常所看到的真实DOM节点，他有描述节点标签名词的tag属性，描述节点属性如class，attributes等的data属性，有描述包含的子节点信息的children属性等，由于元素节点所包含的情况相对而言比较复杂，源码中没有像前三种节点一样直接写死。VNode的作用： 用js的计算性能来换取操作真实DOM所消耗的性能，----- VNode在Vue的整个虚拟DOM过程起到了什么作用呢。 其实VNode的作用是相当大的，我们在视图渲染之前，把写好的..
2021-05-28 13:24:03
773
61
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人