- 博客(310)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 ElementUI el-select 组件动态设置disabled后，高度变更的问题解决办法
Vue2 项目在使用 el-select 组件时，动态将disabled变更为了true，元素的高度发生了变化。
2024-07-15 14:53:54
474
原创 vue2.6 和 2.7对可选链的不同支持导致构建失败
已知 node14 之后就支持可选链了，我和同事用的是 node14和node16，所以和node版本也没关系。有两个vue2项目，构建配置和依赖基本上都一样，但一个可以在 template 模板中使用可选链(已知 vue2.7 是支持可选链的，所以我怀疑是这个原因导致产生了现在的区别。已知 vue2.6 不支持可选链，但可以通过 babel 编译：需要安装。但是报错的那个项目，在另一个同事那又不报错。发现，其中支持可选链的项目中。，再次运行，项目也支持可选链了。了，而另一个不支持的项目中。
2023-10-12 16:39:16
1342
原创 Vue 项目安全扫描漏洞，JS 库版本太低，要求升级 YUI，过程总结
检测到目标站点存在javascript框架库漏洞 - YUI2版本引发的安全漏洞解决方案
2023-04-07 16:58:39
9923
5
原创 数据结构与算法学习 02 树与二叉树
对于左子节点，上限就是当前节点，下限就是当前节点检测的下限（即当前节点作为右子节点的父节点或无限）；对于右子节点，上限就是当前节点检测的上限（即当前节点作为左子节点的父节点或无限），下限就是当前节点；）入栈，栈中存储的就是等待操作的节点，当遍历完左子树，再从栈中提取右子节点依次操作，操作右子树也遵循前序遍历的顺序进行入栈出栈。列表，所以要验证一个二叉搜索树，就可以对其进行中序遍历，下一个节点总是大于上一个节点，则验证成功，否则验证失败。注意这里的F是右子节点，用数组表示C的子节点时，可以用。......
2022-07-21 10:48:04
407
1
原创 数据结构与算法学习 01 栈、队列、链表
时会导致后续元素位移，性能开销大。数组之所以要占用一段连续的内存空间，是为了快速通过索引获取数据，这也是相对链表所具有的优点。性能测试示例。
2022-07-21 10:44:56
456
原创 Web Components 学习 02 Web Components 历史、深入理解 Custom Elements
尤雨溪在创建 Vue 的时候大量参考了 Web Components 的语法，下面写个简单示例。首先写个 Vue 组件 ：这是很标准的 Vue 组件，不过非常遗憾的是 HTML 文件并不能有效的利用这个 vue 文件，如果想让它能够正确运行，还需要下载 node、webpack、vue-loader 将其打包，而且它只能在 Vue 的项目中使用，也就是必须依赖 Vue 的安装包。如果在 React、Angular 甚至 jQuery 项目中，这个组件就不能用了。但是以前只需要将它稍稍修改一下，它就会变成
2022-06-16 09:57:05
1753
2
原创 Web Components 学习 01 认识 Web Components、一些组件库使用
开发项目的时候为什么不手写原生 JS，而是要用现如今非常流行的前端框架，原因有很多，例如：Web Components 就是为了解决“组件化”而诞生的，它是浏览器原生支持的组件化，不依赖任何库、依赖和打包工具就可以在浏览器中运行。Vue、React 的组件化并不是真正的组件化，虽然写代码时写的是确实的组件化代码，但是编译后就不再是组件化了。例如用 Vue + ElementUI 开发的应用，ElementUI 的组件都是 开头的，如 ，但编译后显示在页面上的就不再是 标签了。这有点类似于 CSS 预处理
2022-06-16 09:55:01
2181
原创 Serverless 学习 04 云开发高阶应用(FaaS 运行机制、CloudBase Framework、重构 TodoList、文件上传及云存储、用户管理及登录授权、绑定自定义域名)
FaaS 的运行机制参考：深入理解云函数云函数 工作原理在 FaaS 平台中，函数默认是不运行的，也不会分配任何资源。甚至 FaaS 中都不会保存函数代码。只有当 FaaS 接收到触发器的事件后，才会启动并运行函数。前面我们就是使用 HTTP 的触发器来执行函数代码的，整个函数的运行过程实际上可以分为四个阶段：代码下载：FaaS 平台本身不会存储代码，而是将代码放在对象存储中，需要执行函数的时候，再从对象存储中将函数代码下载下来并解压，因此 FaaS 平台一般都会对代码包的大小进行限制
2022-05-30 16:28:10
727
原创 Serverless 学习 03 TodoList API 接口案例
TodoList API 接口案例前面将云函数与 Express 进行了整合，下面通过一个 TodoList 接口案例继续学习云函数的使用开发，这个案例具备最基础的增删改查等功能。添加业务路由修改 app.js 将 TodoList 的业务处理分发到不同的路由请求：// nihao\functions\node-app\app.jsconst express = require('express')const app = express()app.use(express.json())ap
2022-05-30 16:20:45
670
原创 Serverless 学习 02 本地环境及开发工具、本地测试工具、Express 与云函数
本地环境及开发工具腾讯提供了云开发的开发工具，访问 云开发文档，找到并打开工具插件中的 CloudBase CLI。CloudBase CLI 是云开发（Tencent CloudBase，TCB）开源的命令行界面交互工具，用于帮助用户快速、方便的部署项目，管理云开发资源。CloudBase CLI 是基于 Node.js 开发的工具。安装和登录# 安装npm i -g @cloudbase/cli# 输出版本号，测试安装是否成功tcb v# 查看所有命令tcb -h每个云环境都是和
2022-05-30 16:14:21
1197
原创 Serverless 学习 01 认识 Serverless 、基本应用
认识 ServerlessSeverless：云计算的下一个十年Severless 国外发展较早，比较有代表性的是亚马逊和谷歌，而在国内，腾讯和阿里都将 Serverless 定义为集团战略型项目，不遗余力的推广和研发自己的 Serverless 技术。Serverless 是一种后端架构技术，更准确的说，它应该是一种后端架构的概念或者思维。Serverless 本身和前端没有任何关系，但它却是前端程序员最希望落地应用的技术，而很多后端程序员漠不关心甚至排斥，要搞清楚这一奇怪现象的原因，就要从后
2022-05-30 16:05:07
1222
原创 前端性能优化学习 09 其它参考文章
前端性能优化清单[译] 2019 前端性能优化年度总结 — 第一部分2020 前端性能优化清单2020前端性能优化清单（一）2020前端性能优化清单（二）2020前端性能优化清单（三）2020前端性能优化清单（四）2020前端性能优化清单（五）2020前端性能优化清单（六）2021 前端性能清单（原文）谷歌开发者 - Web 性能优化https://web.dev/rail/Web 性能 | MDNWeb页面全链路性能优化指南我是如何将网页性能提升5倍的 — 构建优.
2022-05-23 16:17:27
276
原创 前端性能优化学习 08 资源加载优化
图片延迟加载什么是延迟加载首先来想象一个场景，当浏览一个内容丰富的网站时，比如电商的商品列表页、主流视频网站的节目列表等，由于屏幕尺寸的限制，每次只能查看到视窗中的那部分内容，而要浏览完页面所包含的全部信息，就需要滚动页面，让屏幕视窗依次展示出整个页面的所有局部内容。显而易见，对于首屏之外的内容，特别是图片和视频，一方面由于资源文件很大，若是全部加载完，既费时又费力，还容易阻塞渲染引起卡顿；另一方面，就算加载完成，用户也不一定会滚动屏幕浏览到全部页面内容，如果首屏内容没能吸引住用户，那么很可能整个页面
2022-05-23 16:17:02
1171
原创 前端性能优化学习 07 图片优化
图片优化前端大部分的工作都围绕在 JavaScript 和 CSS 上，考虑如何更快地下载文件，如何提供给用户复杂而优雅的交互，如何高效合理地应用有限的处理和传输资源等，这些是用户感知的全部吗？当然，他们在前端开发和性能优化中的地位举足轻重，但 JavaScript 和 CSS 对用户感知而言，并不是最重要的部分，图像才是。我们在公众号发布文章或用 PPT 进行演讲时，都知道一条高效传递信息的原则：字不如表，表不如图。网站作为一种信息传递的媒介，且如今各类 Web 项目中，图像资源的使用占比也越来越大
2022-05-23 16:16:16
2279
原创 一道面试题 简单介绍 node 环境下事件循环机制
面试题console.log('1');setTimeout(function() { console.log('2'); process.nextTick(function() { console.log('3'); }); new Promise(function(resolve) { console.log('4'); resolve(); }).then(function() { console.log('5'); });}); p
2022-05-20 09:08:25
249
原创 前端性能优化学习 06 渲染优化 03 页面布局与重绘优化、合成处理、小结
页面布局与重绘优化页面布局也叫作重排和回流，指的是浏览器对页面元素的几何属性进行计算并将最终结果绘制出来的过程。凡是元素的宽高尺寸、在页面中的位置及隐藏或显示等信息发生改变时，都会触发页面的重新布局。通常页面布局的作用范围会涉及整个文档，所以这个环节会带来大量的性能开销，我们在开发过程中，应当从代码层面出发，尽量避免页面布局或最小化其处理次数。如果仅修改了 DOM 元素的样式，而未影响其几何属性时，则浏览器会跳过页面布局的计算环节，直接进入重绘阶段。虽然重绘的性能开销不及页面布局高，但为了更高的性能体
2022-05-17 10:59:33
489
原创 前端性能优化学习 06 渲染优化 02 JavaScript 执行优化、计算样式优化
JavaScript 执行优化实现动画效果前端实现动画效果的方法有很多，比如在 CSS 中可以通过 transition 和 animation 来实现，在 HTML 中可以通过 canvas 来实现，而利用 JavaScript 通常最容易想到的方式是利用定时器 setInterval 或 setTimeout 来实现，即通过设置一个间隔时间来不断地改变目标图像地位置来达到视觉变化的效果。实践经验告诉我们，使用定时器实现的动画会在一些低端机器上出现抖动或者卡顿的现象，这主要是因为浏览器无法确定定时器
2022-05-17 10:58:20
523
原创 前端性能优化学习 06 渲染优化 01 渲染优化介绍、关键渲染路径
渲染优化如果把浏览器呈现页面的整个过程一分为二，前面所讲的主要是浏览器为呈现页面请求所需资源的部分；本章将主要关注浏览器获取到资源后，进行渲染部分的相关优化内容。在前面的前端页面的生命周期章节中，介绍过关键渲染路径的概念，浏览器通过这个过程对 HTML、CSS、JavaScript 等资源文件进行解析，然后组织渲染出最终的页面。本章将以此为基础，对渲染过程进行更深入的讨论，不仅包括打开一个网站的首次渲染，还有用户与页面进行交互后导致页面更改的渲染，即所谓的重绘与重排。其中除了对渲染过程的充分介绍，更重要
2022-05-17 10:56:17
1162
原创 前端性能优化学习 05 请求和响应优化 02（HTTP 缓存[强缓存、协商缓存、缓存策略等]、CDN 缓存）
HTTP 缓存在任何一个前端项目中，访问服务器获取数据都是很常见的事情，但是如果相同的数据被重复请求了不止一次，那么多余的请求次数必然会浪费网络带宽，以及延迟浏览器渲染所要处理的内容，从而影响用户的使用体验。如果用户使用的是按量计费的方式访问网络，那么多余的请求还会隐性地增加用户的网络流量资费。因此考虑使用缓存技术对已获取的资源进行重用，是一种提升网站性能与用户体验的有效策略。缓存的原理是在首次请求后保存一份请求资源的响应副本，当用户再次发起相同请求后，如果判断缓存命中则拦截请求，将之前存储的响应副本返
2022-05-16 11:47:00
1251
1
原创 前端性能优化学习 05 请求和响应优化 01（DNS 解析、HTTP 长连接、HTTP2、避免重定向、压缩传输的数据资源）
请求和响应优化**目的：**更快的内容到达时间。核心思路：更好的连接传输效率更少的请求数控i昂更小的资源大小合适的缓存策略最佳实践：减少 DNS 查找：每次主机名的解析都需要一次网络往返，从而增加了请求的延迟时间，同时还会阻塞后续的请求。重用 TCP 连接：尽可能的使用持久连接，以消除因 TCP 握手和慢启动导致的延迟。减少 HTTP 重定向：HTTP 重定向需要额外的 DNS 查询、TCP 握手等非常耗时，最佳的重定向次数为0。压缩传输的资源：比如 Gzip、图片压缩。使用缓
2022-05-16 11:39:39
1588
1
原创 前端性能优化学习 04 前端页面的生命周期
前端页面的生命周期性能问题呈现给用户的感受往往是简单而直接的：加载资源缓慢、运行过程卡顿或响应交互迟缓等，当把这些问题呈现到前端工程师面前时，却是另一种系统级别复杂的图景。从域名解析、TCP 建立连接到 HTTP 的请求与响应，以及从资源请求、文件解析到关键渲染路径等，每一个环节都有可能因为设计不当、考虑不周、运行出错而产生性能不佳的体验。作为前端工程师，为了能在遇到性能问题时快速而准确地定位问题所在，并设计可行的优化方案，熟悉前端页面的生命周期是一堂必修课。下面从一道常见的前端面试题开始，通过对此问
2022-05-13 16:07:37
796
原创 前端性能优化学习 03 Web 性能测试
Web 性能测试作为网站应用的开发者或维护者，我们需要时常关注网站当前的健康状况，譬如在主流程运行正常的情况下，各方面性能体验是否满足期望，是否存在改进与提升的空间，如何进行快速且准确的问题定位等，为了满足这些诉求，我们需要进行全面且客观的性能检测。性能检测的认知性能检测作为性能优化过程中的一环，它的目的通常是给后续优化工作提供指导方向、参考基线及前后对比的依据。性能检测并不是一次性执行结束后就完成的工作，它会在检测、记录和改进的迭代过程中不断重复，来协助网站的性能优化不断接近期望的效果。在展开介绍
2022-05-13 11:46:49
1919
1
原创 前端性能优化学习 02 Web 性能指标
Web 性能指标我们已经直到性能的重要性，但当我们讨论性能的时候，让一个网页变得更快，具体指哪些内容？事实上性能是相对的：对于一个用户而言，一个站点可能速度很快（在具有功能强大的设备的快速网络上），而对于另一个用户而言，一个站点可能会较慢（在具有低端设备的慢速网络上）。两个站点可能会在完全相同的时间内加载，但一个站点似乎加载速度会更快（如果它逐步加载内容，而不是等到最后显示所有内容）。一个网站可能加载很快，但在后来的用户交互会很慢。所以在讨论性能的时候，精确的、可量化的指标很重要。但是，一
2022-05-13 11:39:39
2268
原创 前端性能优化学习 01 前端性能优化介绍
前端性能优化介绍什么是 Web 性能MDN：Web 性能（web performance）是网站或应用程序的客观度量和可感知的用户体验。**减少总体加载时间：**减少文件体积，减少 HTTP 请求数量、使用预加载**使网站尽快可用：**仅加载首屏内容，其他内容根据需要进行懒加载**平滑和交互性：**使用 css 动画代替 js 动画、减少 UI 重绘**感知表现：**耗时操作要给用户反馈，比如 loading 动画、进度条、股价平等提示信息**性能测定：**性能指标、性能测试、性能监控持续优
2022-05-13 11:36:46
476
原创 网站部署到服务器后 CSS 文件加载成功，但是没有生效
刚解决了一个问题，前端代码发布到服务器后，样式没有生效。开始以为 nginx 配置的静态资源路径有问题，通过 network 发现 css 文件确实请求成功。然后怀疑代码有问题，查看 css 文件中其中一个 dom 节点的样式，确实能匹配上（data-xxx 一致），将样式拷贝后通过 elements 看板手动添加上，样式也生效了。文件下载成功，内容没问题，但就是没有生效，好像浏览器并没有据此构建 CSSOM（这一点也许可以通过性能调试工具查看），如此神奇的事情之前没有遇到过。后来发现原来是 ngi
2022-05-09 11:35:43
2232
1
原创 个人用安全防护配置笔记
XSS 防护输入输出过滤xss.js - HTML 转义encodeURI or encodeURIComponent - url 地址转义Cookie 设置 HttpOnlyCookie 设置 HttpOnly 禁止通过 JS 方式读取 Cookie。Content-Security-Policy 内容安全策略CSP（Content-Security-Policy） 本质上是开发者可以自定义的白名单制度，可以告诉浏览器可以加载和执行哪些外部资源。有两种方式可以启用 CSP：设置 H
2022-05-05 09:12:19
730
原创 Vue3+Vite+Ts 项目实战 07 打包构建部署
打包构建构建生产版本 | Vite 官方中文文档打包# 打包构建npm run build# 预览 测试构建结果是否可以用npm run preview# 访问 http://localhost:4173由于 domain 跨域，cookie 无法携带，后端无法通过 cookie 获取登录验证码。可以从 npm run dev 中登录将浏览器缓存的 USER 拷贝到 http://localhost:4173 跳过登录，查看页面内容。TS 检查报错当前使用的 element-pl
2022-04-20 16:08:32
5630
原创 Vue3+Vite+Ts 项目实战 06 自动注册全局组件、封装分页和 Dialog 组件、权限管理
创建全局组件页面容器组件<!-- src\components\PageContainer\index.vue --><template> <el-space alignment="flex-start" class="content-space" direction="vertical" prefix-cls="content-space" size="large" > <slot /> &l
2022-04-20 16:07:51
3932
2
原创 Vue3+Vite+Ts 项目实战 03 初始化 Element Plus、API 和组件自动导入、ElMessage 组件使用、Vue 全局属性、Axios、环境变量、跨域
配置 Vue RouterVite 创建的项目没有集成 Vue Router，需要手动安装集成。Vue 3 使用最新版本的 Vue Router v4.x。# 安装npm install vue-router@4创建路由配置文件：<!-- src\views\home\index.vue --><template> <div> 首页 </div></template><script setup lang=
2022-04-20 16:07:04
10105
3
原创 Vue3+Vite+Ts 项目实战 05 用户登录和身份认证
用户登录页面添加登录接口// src\api\common.ts// 公共基础接口封装import request from '@/utils/request'import { DemoData, LoginResponse } from '@/api/types/common'export const demo = () => { return request<DemoData>({ method: 'GET', url: '/demo' })}
2022-04-20 16:05:56
6373
1
原创 Vue3+Vite+Ts 项目实战 04 搭建 Layout 布局
Layout 布局容器<!-- src\layout\AppLayout.vue --><template> <el-container> <el-aside width="200px"> Aside </el-aside> <el-container> <el-header>Header</el-header> <el-main>
2022-04-20 16:05:08
7627
2
原创 Vue3+Vite+Ts 项目实战 02 配置 VueRouter、Pinia 配置和简单介绍、配置 SCSS
配置 Vue RouterVite 创建的项目没有集成 Vue Router，需要手动安装集成。Vue 3 使用最新版本的 Vue Router v4.x。# 安装npm install vue-router@4创建路由配置文件：<!-- src\views\home\index.vue --><template> <div> 首页 </div></template><script setup lang=
2022-04-20 16:01:28
3633
原创 Vue3+Vite+Ts 项目实战 01 Vite 创建项目、ESLint+TS+GitCommit配置、Vue3新特性介绍
前置声明：Vue3 和 Vite 还在持续更新，中文文档仍未全部完善，该笔记的内容在未来可能过时，建议多参考英文文档，使用最新版本。本案例使用的后端 API 服务，基于 Express 搭建，使用 json 文件管理数据，Git 仓库和使用文档。本案例旨在学习 Vite 和 Vue3 搭建配置应用，并没有开发完整的业务功能。项目初始化使用 Vite 创建项目Vite 官方中文文档 (vitejs.dev)官方声明：Vite 需要 Node.js 版本 >= 12.0.0。然而，.
2022-04-20 15:56:53
7043
4
原创 Koa 学习 02 Koa 实现原理和极简模拟案例
通过模拟一个极简版本的 Koa 学习实现原理。初始化项目# 安装 koanpm i koa添加启动文件：// app.jsconst Koa = require('koa')const app = new Koa()app.listen(3000, () => { console.log('server is running on http://localhost:3000')})nodemon ./app.js启动服务。源码目录结构查看 node_modul.
2022-04-02 10:55:46
1007
原创 Koa 学习 01 Koa 介绍和基本使用（路由、静态资源托管、中间件）
Koa 介绍Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。官网：https://koajs.com/GitHub 仓库：https://github.com/koajs/koa一个翻译的中文网：https://koa.bootcss.com/Koa 的原理和内部结构很像 Express，但是语法和内部结构进行了升级Koa 内部使用 ES6 编写，号称是下一代 Node.js
2022-04-02 10:54:45
2895
2
原创 Express 实现原理学习 - 简单模拟
本笔记通过模拟实现 Express 的一些功能学习 Express 的实现原理。初始化应用mkdir my-expresscd ./my-expressnpm init -ynpm i express添加 app.js：// app.jsconst express = require('express')const app = express()app.get('/', (req, res) => { res.end('get /')})app.get('/ab.
2022-04-01 09:04:35
455
原创 SSR 学习 - 传统服务端渲染 Web 应用、客户端渲染、同构渲染、优缺点和案例演示
概述随着前端技术栈和工具链的迭代成熟，前端工程化、模块化也已成为了当下的主流技术方案。在这波前端技术浪潮中，涌现了诸如 React、Vue、Angular 等基于客户端渲染的前端框架。这类框架所构建的 **单页应用（SPA）**的优点：用户体验好开发效率高渲染性能好可维护性好…**单页应用（SPA）**也有一些很大的缺陷，其中主要涉及到以下两点：首屏渲染时间过长与传统服务端渲染直接获取服务端渲染好的 HTML 不同单页应用使用 JavaScript 在客户端生成 HTML 来
2022-03-29 15:38:20
1652
原创 E2E 端到端测试学习 - E2E 介绍、Cypress 案例基本使用
E2E 测试介绍E2EE2E（end to end）端到端测试是最直观可以理解的测试类型。在前端应用程序中，端到端测试可以从用户的视角通过真实浏览器自动检查应用程序是否正常工作。E2E 把整个系统当作一个黑盒，测试人员模拟真实用户在浏览器中操作 UI，测试在真实浏览器环境运行测试，测试出的问题可能是前端也可能是后端导致的，比如：用户登录注册加入购物车订单结算…E2E 测试一般是由 QA 测试工程师来做。稍小的项目可能根据测试用例（excel）操作一遍就完了，稍大一点的会些一些自动化测试的
2022-03-29 14:43:39
21965
1
webpack 模块联邦学习源码 - 微前端解决方案初探 03 模块联邦（概述、案例介绍、应用初始化）
2022-04-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人