苏格拉没有底的小站

# 前言 axios 目前用于处理前端项目里的 ajax 请求，每个项目里为了方便对 axios 进行操作，都会对 axios 进行封装，本文主要结合之前项目实践以 vue3 和 typescript 对 axios 完成统一封装，做到一个开箱即用的 axios。封装后具有以下好处： 使用时代码提示功能更丰富； 灵活的拦截器； 支持请求重试功能，以及自定义请求重试次数； 支持扩展自定义请求头配置。 # 安装依赖 首先需要先安装依赖 1npm i axios -S # 基础封装 request 类 新建...

# 什么是微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web...

这篇文章主要讲述前端资源预加载方案与可控预加载方案。 资源预加载对于前端来说并不陌生，可以提升性能，preload 与 prefetch 便是常用的预加载实现方案，但是当预加载过度使用时，也会适得其反，这时可控预加载方案便登场了。 # preload preload 是一个新的 Web 标准，在页面生命周期中提前加载你指定的资源，同时确保在浏览器的主要渲染机制启动之前。这样就可以保证了其不会阻止浏览器的渲染并提前加载资源以此来提高性能。通常使用 preload 是用来加载图片、CSS、JavaScript 和字体文件。preload 的语法和加载 CSS 类似 12<link...

# 缩短资源传输距离 缩短资源的传输距离，最重要的是把资源存储在距离⽤户更近的地⽅。缓存，就是⼀种最常见的⽅案。在 WEB 系统中，缓存在不同环境 都有相关的实现。浏览器侧、APP 侧、CDN 侧，甚⾄后端服务器上，都可以做缓存。这⾥主要讨论服务端之外的缓存。缓存能很⼤地提 升系统性能，但相应地带来了额外的存储开销。同时，如何更新缓存，也是⼀个重要 的问题。 常见方案 配置 HTTP 缓存 原理：让资源从浏览器的 http 缓存中就近获取。HTTP 缓存是 Http 协议的标准功能，所有浏览器都会遵循。 适用资源：静态资源 实现方式：给资源添加 cache-control 响应...

# 性能组成分析 页⾯性能的组成和影响因素⽐较复杂，⽤户设备性能、webview 容器能⼒、⽤户⽹络、后端接⼝等都是影响页⾯性能的因素。回归页⾯ 的本质，是内容的呈现。接下来从 “内容呈现” 这个本质出发， 推导出我们在性能上需要关注的环节。 ⼴义地来理解页⾯内容，包含： 页⾯上视觉呈现的内容 （最终借助 html 元素 、图⽚ 、 等资源来呈现） 内容背后可交互的能⼒ （借助 js 资源实现） 内容是由 资源 组成的，⽽在 web 技术下，资源是基于 http...

# 概述 性能优化对于前端是一个很重要的知识，网上文章有很多，但都比较零散，因此空闲时对性能优化做一个总结。 要优化一个网站的性能，首先需要学会如何衡量一个网站的性能。 如果不能衡量性能，就不能优化性能。性能衡量领域涉及的内容非常多，基础的有衡量指标、性能采集和上报方式、性能分析维度。 先只关注最基础的：性能衡量指标。 # 性能衡量指标（参考 w3c） onLoad 统计页面 onLoad 性能 统计方式： 页面 onload 事件触发事件 -...

# gzip 简介 在讨论性能优化的时候，你可能会经常听到一个叫 gzip 压缩的名词，这篇文章就对 gzip 做一个详细的介绍。 gzip 就是 GNUzip 的缩写，也是一个文件压缩程序，可以将文件压缩进后缀为.gz 的压缩包。而我们前端所讲的 gzip 压缩优化，就是通过 gzip 这个压缩程序，对资源进行压缩，从而降低请求资源的文件大小。 gzip 压缩优化应用非常广泛，基本上你打开任何一个网站，看它们的 html，js，css 文件都是经过 gzip 压缩的（即使 js，css 这类文件经过了混淆压缩之后，gzip 仍然可以明显的优化文件体积。） Tips：通常 gzip...

# 起因 今天，突然间收到阿里云发来的一封安全告警处理的邮件，然后登录到阿里云工作台，在安全告警处理页面看到有很多紧急告警项，此时意识到自己的云服务器被攻击了，阿里云识别出的是植入挖矿程序，这种挖矿程序会占用服务器 99% 的 CPU，严重影响正常的运行。 继续往下看，可以看到攻击入口是通过暴力破解了服务器子用户 git 的登陆密码进到服务器里的，也怪自己当时子用户密码设置的比较随意 # 解决办法 从分析中看到进程命令行是./tti，然后登陆到服务器里面，运行 top 命令，看到第一行正是因为 git 用户的 tti 命令使得 CPU 占满 看到这，第一反应，是直接执行 killall...

在团队协作开发项目时，如果每个人的提交规范不一致，或者提交时代码有错误，那么在定位 git 提交记录或者 review 代码时将会是一团糟，因此我们可以使用 husky 结合 eslint 来实现 git 提交规范化，保证错误的 commit 不能提交成功。 # commitlint 什么是 commitlint 当我们运行 git commit -m 'xxx' 时，commitlint 是用来检查提交信息是否满足固定格式的工具 为什么使用 commitlint 团队中规范了 commit 可以更清晰的查看每一次代码提交记录，还可以根据自定义的规则，自动生成...

# 前言 前几天正准备往 github 上提交代码时，直接 push 失败，而且无法拉取代码，然而之前还是好好的，后来查看 git 日志后发现报了这个错 这个错误的意思是说自从 2021 年 8 月 13 日起，github 便不再支持密码验证了，要使用个人 token 来进行验证，那么如何来解决这个问题呢 # 解决办法 既然官方说了必须要使用 token 验证，那么我们就去 github 官网去申请 token，申请的步骤依次如下截图： 1、点击头像里的 Settings，选择右侧的 Developer settings 2、选择 Personal access...