一个关于技术学习、项目实践与独立思考的个人博客https://caorushizi.cn/https://caorushizi.cn/blog/github-contributions/https://caorushizi.cn/blog/github-contributions/GitHub在每年的10月31日，也就是西方的传统节日万圣节，为了庆祝这个节日，会将提交记录的绿色变成黄色至深红色，更加具有节日气氛。如果你在这一天打开自己的GitHub页面，会看到色彩斑斓的提交记录。这种设计不仅增添了节日的喜庆氛围，也让我们对自己的努力更加充满期待。希望大家在明年的万圣节也能打开GitHub，看看自己的提交记录是否也是色彩斑斓的，让我们一起努力！Thu, 31 Oct 2024 02:45:39 GMThttps://caorushizi.cn/blog/5pww57ue44cb6zo6kgo44cb5qci44cb6zif5yix/https://caorushizi.cn/blog/5pww57ue44cb6zo6kgo44cb5qci44cb6zif5yix/数组 lc26 删除重复项 function removeDuplicates(nums: number[]): number { let index = 0 for (let i = 0; i < nums.length; i++) { if (i === 0 || nums[i - 1] !== nums[i]) { nums[index] = nums[i] index++ } } ...Sun, 09 Jun 2024 07:31:49 GMThttps://caorushizi.cn/blog/5/https://caorushizi.cn/blog/5/一面 你在百度做过不少优化方面的事情，5min到9秒， 做了什么 webpack 或者 vite 是不是可以打包成二进制在系统上执行呢 js 有协程吗，webpack 打包的时候用了几个线程 webworker怎么通讯 协程、线程、进程怎么理解 线程和进程的区别是什么 体积优化做的什么 怎么实现的动态加载特定业务的bundle 拆和不拆对前端的性能有什么影响 关注哪些前端的性能指标， 分别是怎么测算的 前端使用的什么打点的库 前端的js执行异常怎么上报，资源加载的异常怎么...Wed, 15 May 2024 08:14:00 GMThttps://caorushizi.cn/blog/57yw56il5bf5ash5z656ga77yaioiuoeeulacuue7hoaikowoneqhuoageatjes9noezue7noageiuoeeulacuue9kee7na/https://caorushizi.cn/blog/57yw56il5bf5ash5z656ga77yaioiuoeeulacuue7hoaikowoneqhuoageatjes9noezue7noageiuoeeulacuue9kee7na/计算机发展历史 计算机发展简史 1946年： 电子管计算机 1957年： 晶体管计算机 1964年：集成电路计算机 1980年： 超大规模集成电路计算机 第一阶段计算机 第二次世界大战是电子管计算机产生的催化剂（解密德国海军的密文） 集成度小，空间占用大 功耗幔，运行速度慢 操作复杂，切换程序需要接线 第二个阶段： 晶体管计算机 集成度相对较高，空间占用相对小 功耗相对较低，运行速度较快 操作相对简单，交互更加方便 第三个阶段： 集成电路计算机 计算机变得...Mon, 29 Apr 2024 11:32:57 GMThttps://caorushizi.cn/blog/vue-react-webpack/https://caorushizi.cn/blog/vue-react-webpack/Vue 基本使用 指令、插值 插值、表达式 指令、动态属性 v-html 会有 xss 风险，会覆盖子组件 ​ computed 和 watch computed 有缓存，data 不变则不会重新计算 watch 如何深度监听 watch 监听引用类型，拿不到 oldVal watch : { handler (oldVal, val) { console.log('watch info', oldVal, val) }, deep: ...Sun, 03 Mar 2024 16:33:21 GMThttps://caorushizi.cn/blog/5ymn56uv5z656ga55l6kg5l2t57o7ioi3sanvewkpwoguwhewkhw/https://caorushizi.cn/blog/5ymn56uv5z656ga55l6kg5l2t57o7ioi3sanvewkpwoguwhewkhw/HTML 和 CSS 原型、作用域、异步 DOM 事件和 Ajax 性能优化 手写各种代码 HTTP 协议 HTML 和 CSS 如何理解 HTML 语义化 让人更容易读懂（增加代码的可读性） 让搜索引擎更容易读懂（SEO） 块状元素 & 内联元素 display:block/table; 有 div h1 h2 table ul ol p 等 display:inline/inline-block 有 span img input button 等 盒模型宽度的计算 offs...Sun, 03 Mar 2024 16:32:35 GMThttps://caorushizi.cn/blog/shell-linux/https://caorushizi.cn/blog/shell-linux/shell 基础 自定义变量 变量名遵循原则 变量是任何字母、数字和下划线组成的字符串，且不能以数字开头 区分字母大小写，例如 Var1 和 var1 是不同的 变量、等号、值中间不能出现任何空格 ​ 变量引用 var1=10 等号前后不能有空格 echo $var1 #!/bin/bash var1=abc echo $var1 位置变量 当一个命令或者脚本执行的是哦户，后面可以跟多个参数，我们使用位置参数变量来表示这些参数 位置参数变量含义 $nn 为数...Sun, 03 Mar 2024 16:32:08 GMThttps://caorushizi.cn/blog/vuejs-vuex-typescript/https://caorushizi.cn/blog/vuejs-vuex-typescript/说说 application/json 和 application/x-www-form-urlencoded 二者之间的区别。 application/x-www-form-urlencoded 方式是 Jquery 的 Ajax 请求默认方式，这种方式的好处就是浏览器都 支持，在请求发送过程中会对数据进行序列化处理，以键值对形式，例如: key1=value1&key2=value2 的方式发送到服务器。如果用 Jquery，它内部已经进行了处理，如果自己写原生的 Ajax 请求，就需要...Sun, 03 Mar 2024 16:31:26 GMThttps://caorushizi.cn/blog/virtualdom-diff/https://caorushizi.cn/blog/virtualdom-diff/Virtual DOM 及 Diff 算法 1. JSX 到底是什么 使用 React 就一定会写 JSX，JSX 到底是什么呢？它是一种 JavaScript 语法的扩展，React 使用它来描述用户界面长成什么样子。虽然它看起来非常像 HTML，但它确实是 JavaScript 。在 React 代码执行之前，Babel 会对将 JSX 编译为 React API. <div className="container"> <h3>Hello React</h3> <p>React i...Sun, 03 Mar 2024 16:31:02 GMThttps://caorushizi.cn/blog/react-1/https://caorushizi.cn/blog/react-1/React 基础回顾 笔记 Virtual DOM & Diff 算法 笔记 githubSun, 03 Mar 2024 16:30:29 GMThttps://caorushizi.cn/blog/react/https://caorushizi.cn/blog/react/1. React 介绍 React 是一个用于构建用户界面的 JavaScript 库，它只负责应用的视图层，帮助开发人员构建快速且交互式的 web 应用程序。 React 使用组件的方式构建用户界面。 2. JSX 语法 在 React 中使用 JSX 语法描述用户界面，它是一种 JavaScript 语法扩展。 在 React 代码执行之前，Babel 会将 JSX 语法转换为标准的 JavaScript API。 JSX 语法就是一种语法糖，让开发人员使用更加舒服的代码构建用户界面。 2...Sun, 03 Mar 2024 16:30:08 GMThttps://caorushizi.cn/blog/1/https://caorushizi.cn/blog/1/从 2020 年初到现在已经开坑了快一年了。其实我最初想做一个完全模仿百度网盘的客户端程序，那时候还是 2019 年年初的时候，最初就是想做一个客户端，用来上传静态的网站到七牛云方便一些，以下是软件的截图。 当时也只是想做一做玩一玩，基本功能做完之后也就没有什么进度了。知道今年年初的时候才有个想法把这个客户端完善一下。下面是新坑的页面截图： 开坑 oss-client：基础环境搭建 使用 electron-forge electron-forge是用于创建，发布和安装现代Electron...Sun, 03 Mar 2024 16:29:41 GMThttps://caorushizi.cn/blog/vuejs-30-composition-apis-30/https://caorushizi.cn/blog/vuejs-30-composition-apis-30/Vue 3.0 性能提升主要是通过哪几方面体现的？ 响应式系统升级：vue3 使用了 proxy 重写了响应式系统，因为 proxy 可以对整个对象进行监听，所以不需要对整个对象深度遍历 编译优化：vue3 中标记和提升所有的静态节点，diff 过程中只需要对比动态节点 源码体积优化：vue3 中移除了不经常使用的 API，tree-sharking 减小打包体积 Vue 3.0 所采用的 Composition Api 与 Vue 2.x 使用的 Options Api 有什么区别？...Sun, 03 Mar 2024 16:29:13 GMThttps://caorushizi.cn/blog/ssrssg-vuejs/https://caorushizi.cn/blog/ssrssg-vuejs/作业要求 使用 Gridsome 实现下面博客内容。 实现左侧前四个侧边栏的效果和内容。 项目地址 https://github-laziji.github.io/#/user/new/main 仓库地址： https://gitee.com/caorushizi/vblog 预览：http://ziying.site/vblogSun, 03 Mar 2024 16:28:53 GMThttps://caorushizi.cn/blog/vuex-vuejs-ssr/https://caorushizi.cn/blog/vuex-vuejs-ssr/使用 NuxtJS 实现 RealWorld 全部功能 https://demo.realworld.io/#/ 要求：发布码云上，可以直接展示网页 仓库地址： https://gitee.com/caorushizi/realworld 预览：http://ziying.site/realworld/Sun, 03 Mar 2024 16:28:34 GMThttps://caorushizi.cn/blog/vuejs-dom/https://caorushizi.cn/blog/vuejs-dom/一、简答题 1、请简述 Vue 首次渲染的过程。 Vue 初始化：初始化 vue 的实例成员、静态成员； new Vue()：初始化结束之后，调用 vue 构造函数。构造函数中调用了 this._init() ，这个方法相当于 vue 的入口，最终调用 vm.$mount() ； 调用入口文件的 vm.$mount()：这个方法主要是将模板编译成 render 函数。先判断是否传递了 render 选项，如果没有传递 render ，就把模板编译成 render 函数。这个过程是通过 ...Sun, 03 Mar 2024 16:28:15 GMThttps://caorushizi.cn/blog/vue-router-dom-diff/https://caorushizi.cn/blog/vue-router-dom-diff/一、简答题 当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。 let vm = new Vue({ el: "#el", data: { o: "object", dog: {}, }, method: { clickHandler() { // 该 name 属性是否是响应式的 this.dog.name = "Trump"; }, }...Sun, 03 Mar 2024 16:27:45 GMThttps://caorushizi.cn/blog/webpack/https://caorushizi.cn/blog/webpack/一、简答题 1、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。 根据用户在命令窗口输入的参数以及 webpack.config.js 文件的配置，得到最后的配置。 根据上一步得到的最终配置初始化得到一个 compiler 对象，注册所有的插件 plugins，插件开始监听 webpack 构建过程的生命周期的环节（事件），不同的环节会有相应的处理，然后开始执行编译。 根据 webpack.config.js 文件中的 entry 入口...Sun, 03 Mar 2024 16:26:59 GMThttps://caorushizi.cn/blog/5bya5yr6isa5oml5p625yk5bcb6kof6ieq5yqo5yyw5p6e5bu65bel5l2c5rwb/https://caorushizi.cn/blog/5bya5yr6isa5oml5p625yk5bcb6kof6ieq5yqo5yyw5p6e5bu65bel5l2c5rwb/简答题 1、谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。 答：前端工程化课题提高开发效率，避免人工操作失误。可以开发业务工程脚手架，自动化构建，以及组件化、模块化等；可以使用工程化在发布生产前添加代码质量检查工具，提升开发时的效率以及在开发中不必要的错误； 2、你认为脚手架除了为我们创建项目结构，还有什么更深的意义？ 提升效率，可以快速搭建一个基础项目架构；规范化 对技术选型、项目结构等做一些规范，以降低沟通成本 编程题 1、概述脚手架实现的过程...Sun, 03 Mar 2024 16:26:05 GMThttps://caorushizi.cn/blog/es-typescriptjs/https://caorushizi.cn/blog/es-typescriptjs/简答题 一、请说出下列最终的执行结果，并解释为什么。 var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); 最终结果是在控制台输出 10；for 循环中使用 var 定义变量没有块级作用域，在 a[6]方式执行的时候会根据 js 的词法作用域向上查找找到的 i 是已经经过++操作的 10； 二、请说出下列最终的执行结果，并解释为什么。 var tm...Sun, 03 Mar 2024 16:25:22 GMThttps://caorushizi.cn/blog/jspromise/https://caorushizi.cn/blog/jspromise/简答题 谈谈你是如何理解 JS 异步编程的，EventLoop、消息队列都是做什么的，什么是宏任务，什么是微任务？ javascript 为了实现浏览器页面的交互，不得不使用单线程的方式渲染页面，以保证 dom 可以被正确的渲染。然而单线程就以为着浏览器有多个任务的时候需要排队依次执行，这样就会造成阻塞。event loop 主线程从消息队列中读取事件，这个过程是一直重复循环的，所以整个机制被称作 event loop。消息队列是暂时存放异步任务的地方，我们的异步代码会存放到消息队列中，等到...Sun, 03 Mar 2024 16:24:51 GMThttps://caorushizi.cn/blog/m3u8/https://caorushizi.cn/blog/m3u8/什么是流媒体 流媒体（英语：Streaming media）是指将一连串的多媒体数据压缩后，经过互联网分段发送数据，在互联网上即时传输影音以供观赏的一种技术与过程，此技术使得数据数据包得以像流水一样发送，如果不使用此技术，就必须在使用前下载整个媒体文件。 视频文件格式 视频文件格式被称为容器格式 编码格式则为容器中视频流的压缩编码格式 编码格式 没有编码的数字视频数据量很大储存困难、传输困难 国际上制定视频编码技术的组织有两家：国际电联（ITU-T）、国际标准化组织（ISO） 国际电联：H2...Sun, 03 Mar 2024 16:23:26 GMThttps://caorushizi.cn/blog/socketio/https://caorushizi.cn/blog/socketio/翻译自：https://socket.io/get-started/chat/ 开始：聊天应用 这个教程里我们会建立一个聊天应用，这个教程几乎没有用到Node.js与Socket.io的基本前置知识，因此它适合于所有知识水平的用户。 介绍 利用像LAMP（PHP）的通用的网络应用程序堆栈创建一个聊天应用是非常困难的，它涉及了服务器的轮询，跟踪时间戳，因此它就会比websocket慢了很多。 Sockets是很多即时聊天系统的解决方案，它在客户端与服务器之间提供了一个双向交流的渠道。 这意味着服...Sun, 14 Jan 2024 15:56:33 GMThttps://caorushizi.cn/blog/html5-canvas-1/https://caorushizi.cn/blog/html5-canvas-1/在画布中画出一个时钟 https://codepen.io/caorushizi/pen/JjVjWPm 用鼠标在canvas画布上画出图像 https://codepen.io/caorushizi/pen/dyLyvyr 画布上矩形的移动 https://codepen.io/caorushizi/pen/LYvYWEqSun, 14 Jan 2024 15:54:14 GMThttps://caorushizi.cn/blog/python-1/https://caorushizi.cn/blog/python-1/python与数据分析概况 数据分析概况 数据分析，是指用适当的分析方法，对收集的数据进行分析，总结规律，提取有价值的信息，形成有效结论的过程。 数据分析的作用 现状分析 原因分析 预测分析 数据分析的流程 明确目的和思路 - 做任何事情都要有目标，一切都要以解决问题为中心 - 搭建分析框架，确定从哪几个角度，用那些指标进行分析 数据准备 - 主要数据来源有数据库、公开出版物、互联网以及市场调查 数据处理 - 数据处理是指对收集到的数据进行加工整理，形成适合数据分析的样式，...Sun, 14 Jan 2024 15:51:17 GMThttps://caorushizi.cn/blog/python/https://caorushizi.cn/blog/python/数据挖掘概况 数据挖掘定义 数据挖掘是指从大量的数据中，通过统计学、人工智能、机器学习等方法挖掘出未知的且具有价值的信息和知识的过程。 数据挖掘和数据分析的区别 项目数据分析数据挖掘 定义根据分析的目的，使用适当的分析方法及工具，对收集来的数据进行处理和分析，提取有价值的信息，发挥数据的作用从大量的数据中，通过统计学、人工智能、机器学习等方法，挖掘出未知的、且具有价值的信息和知识的过程 作用现状分析、原因分析、预测分析解决四类问题：分类、聚类、关联、预测 方法对比分析、...Sun, 14 Jan 2024 15:48:41 GMThttps://caorushizi.cn/blog/5lid54mb5lqr5a2y5yko5a6i5oi356uv77yi5lu55m5bqm5lqr572r55uy5psv5oyb5pah5lu25ouw5ou977ym5lu5pah5lu25as55pon5l2c77ym5psv5oyb5lia6zsu5lik5lyg77yj/https://caorushizi.cn/blog/5lid54mb5lqr5a2y5yko5a6i5oi356uv77yi5lu55m5bqm5lqr572r55uy5psv5oyb5pah5lu25ouw5ou977ym5lu5pah5lu25as55pon5l2c77ym5psv5oyb5lia6zsu5lik5lyg77yj/从 2020 年初到现在已经开坑了快一年了。其实我最初想做一个完全模仿百度网盘的客户端程序，那时候还是 2019 年年初的时候，最初就是想做一个客户端，用来上传静态的网站到七牛云方便一些，以下是软件的截图。 当时也只是想做一做玩一玩，基本功能做完之后也就没有什么进度了。知道今年年初的时候才有个想法把这个客户端完善一下。下面是新坑的页面截图： 开坑 oss-client：基础环境搭建 使用 electron-forge electron-forge是用于创建，发布和安装现代Electron...Sun, 14 Jan 2024 15:40:22 GMT