- 博客(76)
- 收藏
- 关注
RSS订阅
原创 浏览器缓存详解
引言其实关于浏览器缓存的内容网上已经不胜枚举，之所以产出本文的目的是，遇到缓存相关的问题后，在网上看到的所有相关内容大都雷同对细节的描述都不够全面。因此阅读了缓存相关的RFC文档及浏览器内核的实现文档等对缓存相关内容进行整理。在了解浏览器缓存之前，我们不妨先谈谈缓存的意义。这里引用RFC文档上的一句话：缓存如果不能用以提升性能，那么它就毫无用处。以HTTP缓存为例，如果缓存未过期那么就减少了网络请求，如果缓存通过验证那么就减少了传输资源大小。而关于过期与验证机制的讲解将在下文中展开。顺便一提，本文详细
2021-04-19 22:58:22
1105
原创 从渲染原理谈前端性能优化
前言合格的开发者知道怎么做，而优秀的开发者知道为什么这么做。这句话来自《web性能权威指南》，我一直很喜欢，而本文尝试从浏览器渲染原理探讨如何进行性能提升。全文将从网络通信以及页面渲染两个过程去探讨浏览器的行为及在此过程中我们可以针对那些点进行优化，有些的不足之处还请各位不吝雅正。一、关于浏览器渲染的容易误解点总结关于浏览器渲染机制已经是老生常谈，而且网上现有资料中有非常多的优秀资料对...
2019-06-03 17:56:26
2336
原创 80端口占用问题
通过监视器查询与端口关联进程145获得信息，父进程为launched，用户为root。由于系统守护进程中包含了一个httpd服务,导致该服务会自启动并占用80端口。由于该服务被kill掉以后会被立即重启，因此需要从守护服务当中关闭掉该服务。使用vite将项目启动配置到80端口的时候发现80端口被占用。查找系统守护进程目录下的httpd服务，并移除该服务。尝试通过命令停用服务释放端口占用，显示该服务未启用。删除掉该守护服务后，80端口被释放。通过端口命令，查找占用端口的进程。通过浏览器访问该页面时显示。
2023-10-24 23:25:29
205
原创 与AI的技术探讨——依赖注入与控制反转
当我们使用依赖注入（DI）和控制反转（IoC）时，我们通常使用一个容器（例如 Spring）来管理对象和它们之间的依赖关系。而依赖注入是实现控制反转的一种方式，它通过将依赖关系注入到对象中，来解耦对象和它们的依赖关系。同时，依赖注入也提高了代码的可测试性，因为我们可以通过注入不同的依赖，来测试对象不同的行为和状态。使用依赖注入和控制反转，我们可以将对象的依赖关系从代码中分离出来，并将它们交给容器来管理。总之，依赖注入是控制反转的一种具体实现，它通过将依赖关系注入到对象中，来解构服务和依赖之间的耦合关系。
2023-07-25 19:48:58
210
原创 echarts容器不匹配问题
有可能的是刷新的绘制机制与正常加载不同，导致了超出预料的加载顺序。因此echarts组件渲染时没能拿到正确的父容器宽度。当正常加载的时候echarts能够正常跟随父容器进行适配，但是刷新时echarts将会超过父容器宽度。导致刷新后不匹配的原因是，echarts组件渲染时没能拿到正确的父容器宽度。如果是这样，那么只需要延迟子组件的加载就完全可以避免刷新异常了。
2023-07-10 11:08:30
359
原创 与AI的技术探讨——参数解构语法
以上说法在部分情况下是成立的。在这个例子中，由于展开对象时，…需要注意的是，虽然 Object.assign() 方法可以避免循环引用的问题，但是在更新对象时需要确保原始对象的引用不会丢失，以避免引用错误或内存泄漏等问题。如果原始对象中包含循环引用的属性，那么在复制属性时，Object.assign() 方法会直接将引用复制到目标对象中，而不是创建新的对象。在复制 b 属性时，Object.assign() 方法会直接将 a.b 属性的引用复制到新对象中，并不会创建新的对象，因此不会出现循环引用的问题。
2023-07-02 16:01:47
1021
原创 jest单元测试支持ts文件方案
鉴于以上问题，使用tsc将引入文件转化为js进行处理。为了不影响项目的ts处理，将该ts配置命名为tsconfig.test.json。至此，当运行test命令的时候会先将引入文件转成js文件，并将该js文件输出到测试目录当中，避免对源文件的侵入性。但即使增加了ts处理能力，仍然不能对引入文件的interface等作出正确解析。然后在测试文件当中引入已经转换好的待测试文件即可。暂时不太了解以上方案推荐去看一下官方文档就行了。并在测试命令当中指定该测试ts文件所在位置。
2023-07-02 15:39:31
1287
原创 ts中Omit损失类型问题
因此，当你尝试从该接口中剔除某个属性时，TypeScript 会为了保持一致性而将其他属性的类型也更改为索引签名指定的类型。此时剔除属性data，预期应当获得类型date与任意键值类型接收，即date可以获得[string, string]的类型提示，但实际a的类型为。结论：被继承的基础接口类型应当避免使用[key: string]: any，以避免产生后续类型提示上的问题。当Omit剔除的ts本身包含任意键即[key: string]，则Omit的类型会丢失其余属性的类型。因此，获得的类型与预期不符。
2023-07-02 15:29:53
695
原创 csv下载的excel乱序问题
在 UTF-8 编码中，BOM 的字节序列是 EF BB BF，将 BOM 添加到文件内容前，可以让 Excel 正确识别文件编码，并且按照正确的方式解析文件内容。在下载 CSV 文件时，如果不添加 BOM（Byte Order Mark，字节顺序标记），会出现 Excel 打开乱码或者数据错误的问题。这是因为 Excel 默认使用 ANSI 编码打开 CSV 文件，而 ANSI 编码与 UTF-8 编码存在差异，如果没有 BOM，Excel 无法正确识别文件编码，从而导致乱码或者数据错误的问题。
2023-07-02 15:27:00
405
原创 rollup打包第三方依赖
相比于webpack的通用性来说，rollup更专用于esmodule的处理。这在某些场景下会需要一些额外的配置来处理特殊场景。但是如果你使用的这个三方库没有默认default，则需要配合@rollup/plugin-commonjs使用。这是因为rollup打包会处理相对路径，对于npm包的绝对路径引用是不会做任何处理的。这种情况可以用插件处理。此时不出意外的话，第三方模块已经顺利打包进bundle包了。rollup在打包时是不会处理process环境的，这种情况需要插件额外处理。至此配置就全部完成了。
2022-09-29 19:04:18
5406
原创 webpack动态加载——懒加载实现
webpackMode如果不写的话，模块是不会单独打包成一个独立模块的。因为使用本地真实路径，node_modules的相关配置都会失效的。其中symlinks配置是用来标识是否将模块引入解析为真实路径。如果你需要打包的模块是自己用npm link链接的模块记得关闭。对于懒加载来说，不是独立模块是没办法在需要的时候单独加载的。./conf.base.cjs 基础配置。
2022-09-29 18:46:49
1673
原创 git——仓库合并不丢失git记录
在开始进行仓库合并之前先大致梳理一下合并的原理，这样才能在出错的时候找到合理的解决方案。如果想直接看操作，看部分即可。
2022-09-22 18:41:48
837
原创 sentry——sourceMap解析错误解决
在local的22.8版本sourcemap执行正常，在远端的22.5版本，sourcemap解析异常。发现并无差异，这里推测是22.5到22.8升级时做了更合理化的解析。经过验证为框架内路径与线上路径映射问题，最终解决方案路径为更名。至于为什么本地可以解析远端不可以，在对比相关配置后。至此，sentry就可以正确寻址到对应源框架了。这时sourceMap解析可以正常解析。经过cli工具分析得到错误如下。这里尝试修改源文件的映射地址。可以看到这里的url地址是。完整的解决方案分为两种。
2022-09-22 18:15:57
1837
原创 监控——前端性能监控方案
总阻塞时间 (TBT) 指标测量First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。鉴于 FID 也是一个加载响应指标，其背后的基本原理是，如果在加载阶段与页面进行的第一次交互几乎没有或没有可察觉的输入延迟，那么该页面就会给人留下良好的第一印象。采用会话窗口，所有会话窗口的最大分数，用于较小的会话窗口（上限为 5 秒，它们之间有 1 秒的间隔）。
2022-09-20 20:52:08
973
原创 HTTP资源预取
如果用户进入指定的链接，隐藏的这个页面就会立马进入用户的视线。用户代理应尽可能尝试启动预连接并执行完整的连接握手（DNS+TCP 用于 HTTP，DNS+TCP+TLS 用于 HTTPS 源），但允许选择执行部分握手（DNS 仅用于 HTTP , 和 DNS 或 DNS+TCP 用于 HTTPS 来源），或完全跳过它，由于资源限制或其他原因。作为元素 的属性 rel 的值，是为了提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器有可能通过事先获取和缓存对应资源，优化用户体验。
2022-09-20 20:36:00
418
原创 sentry安装过程故障排查
将安装prefix目录设置为该目录。当不设置，将默认安装至node安装的目录,最后更新path。报错EACCES: permission denied。具体原理是切到用户目录创建用户有权限的全局文件，查看所有创建的全局链接。
2022-09-20 20:34:19
523
原创 错误监控——自建sentry
因为项目相关信息填写多处用到，可以直接配置sentry-cli。由于生产环境发布的内容往往已经经过了压缩，因此上报的信息是无法对应到源码行列号的。地址：https://github.com/getsentry/self-hosted/releases/tag/22.8.0。进入 /settings/account/api/auth-tokens/由于我们下面会用到sentry-cli，为了避免多次在命令行传入信息，先来进行环境配置。此时该项目的错误上报可以追踪到具体的行列号了。
2022-09-14 17:59:56
297
原创 奇妙的跨域错误-Access-Control-Request-Private-Network
目前看到产生该问题的场景都是内网之间测试时产生的该字段用于防止用户代理无意中对运行在用户本地 Intranet 上的设备或直接在用户机器上运行的服务进行攻击。因此：当其客户端是安全上下文并且对目标源的CORS 预检请求成功时，才允许私有网络请求。更改chrome相关配置不使用chrome更改请求地址，使其避开这个问题。
2022-09-08 11:02:57
1854
原创 彻底解决全局安装权限问题
虽然像这种权限问题加个sudo运行就可以顺利安装，但这绝非一个好的方法，因为当我之前毫不犹豫这样解决的时候遇到了很多问题。其次因为这个文件是sudo安装的，因此文件权限就是root，之后对这个文件的操作更是会面临诸多问题。当不设置，将默认安装至node安装的目录,最后更新path。因此我尝试了新的解决方案，创建一个用户有权限的global目录。比如每次像这样的全局安装卸载等操作时都需要sudo。至此完美解决，此后不需要在每次全局安装都sudo。具体原理是切到用户目录创建用户有权限的全局文件，
2022-09-06 19:47:55
2204
原创 nginx环境配置
快速安装配置的方式：1、安装yum install nginx2、启用：sudo systemctl start nginx关于systemctl这一个系列的指令，包括开启、关闭、状态查看、重启等可以看下阮老师的文章http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html3、配置你的站点,先打开配置文件vim /etc/nginx/nginx.conf将root改为你静态资源存放的地址，这个静态资源就可以
2021-11-19 22:15:00
2100
原创 centOS安装mysql
1、安装mysqlsudo dnf install @mysql2、接下来启动mysql服务sudo systemctl enable --now mysqld运行结果如下： 3、来查看下上一步的启动状态sudo systemctl status mysqld运行结果如下：4、接下来进行mysql的安全相关配置，键入命令后续都是问答形式。sudo mysql_secure_installation4.1、执行后，他会给你提醒现在是空白密码，问你要不要设置密码提升安全性，这里键
2021-11-16 16:47:10
689
原创 Serverless
什么是Serverless？Serverless的字面含义是无服务器，但这个无服务器不是真的不需要服务器，而是不需要关注服务器。在CNCF关于Serverless的白皮书中，更多的关注not require server managemen和billed in response to the exact demand,也即无需关心运维和按需付费这两点。无服务器计算是指构建和运行不需要服务器管理的应用程序的概念。它描述了一个更细粒度的部署模型，将应用程序捆绑为一个或多个功能，上传到一个平台，然后根据当
2021-11-09 17:11:41
338
原创 ice中redux转useState
背景：由于业务变更需要将业务组件抽离成公共业务组件转换方式// import store from '../../store'// const [state, stateDispatcher] = store.useModel('advance'); const [state, stateDispatcher] = transform(models, 'advance');import { useState } from 'react';import { cloneDeep } from '
2021-10-22 17:54:32
334
原创 基于Webpack的多目录框架打包
直接用vue-cli创建的项目可以创建一个单页面应用，开发环境和生产环境都是以一个单独的项目为目录的。但是在写一些有共性的模块时需要将所有组件放在同一个大的框架下的同时又需要每个模块可以进行单独的启动和打包。此时就需要进行个性化配置。本文将介绍两种多目录框架配置方案适用于不同情况。pages多目录配置这种方案需要基于vue-cli3及以上的版本。优点是快捷方便稳定，适合绝大部分的开发场景。缺点是可配置性较差。目录格式目录格式大致如下，其实就是常见的src文件内部挪一层就行。vue.config.
2021-05-24 19:09:08
1668
原创 Vue源码阅读——框架分析
随着Vue框架状态越来越火热，不少feder已经不仅仅满足于vue框架的使用，有很多人都打算阅读vue源码来提升自己。那么提到源码阅读就不免产生了一个问题，到底要从何处开始源码阅读呢？package的入口：// package.json"main": "dist/vue.runtime.common.js"经过全局搜索文件名找到入口源码的打包配置在scripts/config.js// scripts/config.js 'web-runtime-cjs-dev': { entry
2021-05-17 09:46:37
640
1
原创 详解JS中的原型与继承
每当我们提起原型链时不免会想到原型对象，对象的原型，还有众多的继承方式。于是prototype、[[prototype]]、constructor等等难免在头脑中打架。然而原型其实并不是什么高大上的内容，事实上随处可见。每当我们尝试调用对象方法或者获取对象属性时。js引擎都会检测对象上是否存在这个方法或属性，如果没有会检查他的原型链上是否存在这个方法或属性。直到检查到了结果或者遍历完了整条原型链都没有找到。除了对象，例如数组或函数本质上也都是对象，因此原型在js中其实是一个很基础但重要的内容。本文尝试用
2021-05-10 18:20:24
823
原创 实现一个简易的webpack打包过程
在实现一个简单的webpack之前，我们需要知道webpack为什么会诞生。在前端刚开始没有模块化工具的时候，会遇到什么问题呢？你可能需要把js都依次引入html中。这样做有几个问题多标签引入意味这这么多次的资源请求，对性能是极大的挑战如果资源有依赖关系，那么需要确保资源的引入顺序，可能会出问题文件中的东西不一定都能用到，但是都会进行资源传输，无法通过依赖分析只传输用到的内容如果在两个文件中定义了同名函数会冲突，除非全都给一个命名空间，把函数作为对象方法来使用<script src="
2021-04-25 21:10:49
703
1
原创 webpack优化——Dllplugin
前言我入行的时候前端框架就盛行，react、angular、vue等框架大行其道。这些框架的好处是十分显然的，便捷、快速且稳定。如果框架搭建的足够便捷不熟悉业务的人也能够快速上手项目，拿vue-cli来说，现成的脚手架已经集成了webpack、eslint、bable等常见框架的基础配置，而这些配置未必最优却通用性很强，对于初学者来说甚者可以不去了解这些常见框架就可以直接上手开发了。正是由于框架的便捷性，使得框架更加流行。vue-cli3更是直接把配置内置在了第三方插件里，让你在工作目录中完全看不到基础配
2021-03-04 01:57:05
1717
1
原创 Vue源码阅读（三）——实例初始化
可以看到在实例初始化的过程当中，在vue的原型链当中挂载了_init方法，该方法当中进行了uid递增，performance标记标记，_isVue赋值，判定实例化是否传入组件化参数，是则进行内部组件初始化，否则进行传入参数覆盖式合并构造器参数的数据。在非生产环境对实例进行代理，在生产环境则将实例自身赋值给_renderProxy将实例赋值给_self属性，并进行一系列初始化操作非生产环境下存在性能属性则进行监测实例的$options对象存在el属性则挂载// src/core/instance
2020-08-29 00:57:19
401
原创 Web中的音视频
web 开发者们一直以来想在 Web 中使用音频和视频，自21世纪初以来，我们的带宽开始能够支持任意类型的视频。传统的 web 技术（如 HTML ）不能够在 Web 中嵌入音频和视频，所以一些像 Flash (后来有 Silverlight ) 的专利技术在处理这些内容上变得很受欢迎。这些技术能够正常的工作，但是却有着一系列的问题，包括无法很好的支持 HTML/CSS 特性、安全问题，以及可行性问题。传统的解决方案能够解决许多这样的问题，前提是它能够正确的工作。幸运的是，几年之后 HTML5 标准提出，其
2020-08-28 01:16:27
770
原创 网络类型获取的兼容性问题
网络类型的获取现有方案：Navigator.connectionNavigator.connection 是只读的，提供一个NetworkInformation 对象来获取设备的网络连接信息。例如用户设备的当前带宽或连接是否被计量， 这可以用于基于用户的连接来选择高清晰度内容或低清晰度内容。connecType枚举enum ConnectionType { "bluetooth", "cellular", "ethernet", "mixed", "none"
2020-08-28 01:10:10
781
原创 x5浏览器内核全屏播放
x5内核+video，这两个词放在一起他就会有一些坑。比如全屏问题、同层渲染问题、自动播放问题。陆续更新中。。。（等更完找时间做个video踩坑合集）一、x5-video-player-fullscreen全屏方式如果不申明此属性，页面得到视口区域为原始视口大小(视频未播放前)，比如在微信里，会有一个常驻的标题栏，如果不声明此属性，这个标题栏高度不会给页面，播放时会平均分为两块（上下黑块）全屏监听进入监听：myVideo.addEventListener("x5videoenterfullscre
2020-08-28 01:05:24
3152
原创 css动效代码（持续更新中。。。）
主要更新一些按钮动效的实践。静态按钮往往不够吸引人，试试让它动起来吧～悬浮球 .susbension { position: fixed; top: 156px; right: 10px; z-index: 9; display: inline-block; width: 60px; height: 60px; overflow: hidden; background: radial-gradient(circle at 50% 5
2020-08-28 00:59:13
514
原创 UC中video脱离文档流的规避方案（含常见浏览器判定）
首先声明目前没有找到彻底的解决方案找到的是规避方案，可以根据业务场景灵活食用。我的业务场景是要在video上盖东西，video会跑到最上层，体验很差。如果是相同场景可以继续看，不是可以直接退出。1、判断他是个uc浏览器navigator.userAgent.indexOf("UBrowser")2、当video上需要盖东西的时候把video标签隐藏起来。（对，就是这么简单粗暴。因为即使隐藏起来效果也比video跑到文档外面乱跑视觉效果好的多）以下是各种浏览器ua判定var OsObject=na
2020-08-28 00:20:36
2430
原创 inject/provide与响应式数据
provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。说人话就是如果你把对象都改了那这个改动就追踪不到了，如果你就改了个对象属性那这种响应就能追踪到。以下是具体的代码分析。这意味着，出于某种考虑，vue故意将provide/inject设定为不可响应的。也就是说如果你的provide的数据改变，inject是不会接受到这个改变，然而如果你provide的内容是一个可响应的数据，比如一个对象引用，那么这个对象的属性是可以
2020-08-28 00:12:44
2378
2
原创 iphonex适配的n种方案
一、方案（原理见第二部分）1、简单粗暴的方法，不需要知道是不是iphonex，有safe area就空出来。padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */2、多媒体查询/* iPhone X 和 iPhone XS */@media only screen
2020-08-28 00:02:04
1018
原创 薛定谔的拼多多会员
事情的起因是这样的，这段时间拼多多与特斯拉大战的讨论如火如荼，于是怀着见识下牛逼的百亿补贴是怎么把并夕夕改观成拼爹爹的下载了拼多多。看着确实低于市场价的百亿补贴，心里暗暗后悔自己的mate30买早了。拼多多上比我买便宜1000了。而且还是品牌方入驻正品保障，不说了，我打算此后抛弃淘宝奔向拼多多。此时看到拼多多在推送会员，说让我免费体验一个月。白嫖我能不要嘛，我欣然接受。然后看到拼多多又拿出了裂变的老套路，说送三个人会员，我就能得到6个月的会员。我觉得白嫖的好事确实应该带上兄弟就发了。然后奇妙的事情发生了
2020-08-24 03:01:53
422
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人