学前端视频笔记
浏览器进程模型
渲染主线程是如何工作的
何为异步
任务优先级
页面渲染
什么是 reflow
什么是 repaint
为什么 transform 的效率高
UI 组件的二次封装
UI 组件的二次封装_ui 的slot-CSDN博客
Vue 基础组件二次封装的高级技巧及方法,能更优雅的进行二次封装组件（Vue3组件封装--继承第三方组件的Methods方法）_vue moment时间处理二次封装-CSDN博客
TypeScript
深入理解 TypeScript 中的 Keyof 运算符，让你的代码更安全、更灵活！-CSDN博客
绝对路径和相对路径
相对路径
相对路径是相对于当前文档位置的路径。它不以斜杠(/)开头。
<img src="images/logo.png">
<a href="about.html">About Us</a>
<script src="js/main.js"></script>在这些例子中:
- "images/logo.png" 指向与当前文件同级的 images 文件夹中的 logo.png
- "about.html" 指向与当前文件同级的 about.html
- "js/main.js" 指向与当前文件同级的 js 文件夹中的 main.js
相对路径的优点是它们使项目更容易移植,因为文件之间的相对关系保持不变。
绝对路径
绝对路径提供了从网站根目录到文件的完整路径。它以斜杠(/)开头。
<img src="/images/banner.jpg">
<a href="/index.html">Home</a>
<link rel="stylesheet" href="/css/styles.css">在这些例子中:
- "/images/banner.jpg" 指向网站根目录下的 images 文件夹中的 banner.jpg
- "/index.html" 指向网站根目录下的 index.html
- "/css/styles.css" 指向网站根目录下的 css 文件夹中的 styles.css
绝对路径的优点是它们总是指向同一位置,不管当前页面在哪里。
根相对路径
还有一种特殊类型的路径叫做根相对路径,它以斜杠开头但不包含域名。这种路径相对于当前域的根目录。
<a href="/contact.html">Contact Us</a>这里,"/contact.html" 指向网站根目录下的 contact.html,不管 post.html 文件位于哪个子目录。
总结
- 相对路径: 相对于当前文件位置
- 绝对路径: 从网站根目录开始的完整路径
- 根相对路径: 相对于网站根目录,但不包含域名
为什么使用 form
Vue.js 使用Vue.js提交表单，是否应该使用form标签|极客笔记
给 fetch 添加超时功能
【JS】如何给fetch添加超时功能_js fetch 超时-CSDN博客
never类型的妙用
TypeScript：never 类型的神奇妙用-CSDN博客
深入理解插槽
深入理解与运用Vue 2中的插槽（Slots）_vue2 slot-CSDN博客
https://juejin.cn/post/7258582103326752824
this 指向
深入浅出 js 中 this 的指向问题_js 点击事件this-CSDN博客
在vite中自动生成路由
https://juejin.cn/post/7233695223401283641
使用CORS解决跨域问题
前端跨域解决方案之CORS详解_前端cors解决跨域-CSDN博客
对象数组去重
function deepEqual(obj1, obj2) {if (obj1 === obj2) return true;if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {return false;}const keys1 = Object.keys(obj1);const keys2 = Object.keys(obj2);if (keys1.length !== keys2.length) return false;for (let key of keys1) {if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {return false;}}return true;
}const array = [{ id: 1, name: 'Alice', details: { age: 25, hobbies: ['reading', 'painting'] } },{ id: 2, name: 'Bob', details: { age: 30, hobbies: ['coding', 'gaming'] } },{ id: 1, name: 'Alice', details: { age: 25, hobbies: ['reading', 'painting'] } },{ id: 3, name: 'Charlie', details: { age: 28, hobbies: ['traveling', 'cooking'] } }
];const uniqueArray = array.filter((item, index, self) =>index === self.findIndex(t => deepEqual(t, item))
);console.log(uniqueArray);深度克隆
function isObject(obj) {return obj !== null && typeof obj === 'object';
}function deepClone(obj, hash = new WeakMap()) {if (!isObject(obj)) {return obj;}if (hash.has(obj)) {return hash.get(obj);}const constructor = obj.constructor;let clone;if (constructor === Date) {clone = new Date(obj);} else if (constructor === RegExp) {clone = new RegExp(obj);} else {clone = new constructor();}hash.set(obj, clone);for (let key in obj) {if (obj.hasOwnProperty(key)) {clone[key] = deepClone(obj[key], hash);}}return clone;
}const originalObject = {name: 'Alice',age: 25,details: {hobbies: ['reading', 'painting'],address: {city: 'New York'}},getGreeting: function() {return `Hello, ${this.name}`;}
};const clonedObject = deepClone(originalObject);console.log(clonedObject);前端 脚本加载失败怎么办?
如何解决JS脚本加载失败的问题_css加载很快js加载不出来-CSDN博客
【前端】脚本加载失败怎么办_线上加载脚本失败怎么配置-CSDN博客
JSX 封装命令式弹框组件
https://juejin.cn/post/7251515125048213541
模块自动导入
Vite使用unplugin-auto-import实现vue3中的自动导入_vite autoimport-CSDN博客
幻影依赖
https://juejin.cn/post/7268300461727481868
console.log导致的内存泄露
【性能优化】console.log引起内存泄漏_console.log影响性能吗-CSDN博客
computed&v-model
https://juejin.cn/post/7277089907974422588
封装resize指令
vue3，封装检测元素大小变化的自定义指令 - Hhuizi - 博客园
超详细：在Vue3中实现自定义指令在Vue项目中，大多数人都会使用到Vue内置的一些指令，在使用的时候不知道有没有想过自 - 掘金
数据分组引发的思考
JS数据分组引发的思考_js 对数据分组-CSDN博客
参数归一化
参数归一化-实现时间格式化_参数格式化-CSDN博客
你不知道的CSS选择器
你可能不知道的CSS选择器！_css伪类元素选择器-CSDN博客
状态仓库持久化
https://juejin.cn/post/7400589189391908899
node的模块查找策略
Node.js 模块查找机制_node查找模块的机制-CSDN博客
彻底迈过js赋值运算的坑
https://juejin.cn/post/7370275556904468489
watchEffect中的异步问题
https://juejin.cn/post/7310786618391265317
函数签名
前端 JS 经典：函数签名_js函数签名-CSDN博客
箭头函数的意义
箭头函数存在的意义（消除函数的二义性）_箭头的函数出现的意义-CSDN博客
ESModule的工作原理
ESModule的工作原理【渡一教育】_哔哩哔哩_bilibili
判断是不是数组
JS判断是否是数组的四种做法 - 听风是风 - 博客园
token无感刷新
token无感刷新【渡一教育】_哔哩哔哩_bilibili
布尔判定和短路规则
JavaScript中逻辑或（||）逻辑与（&&）_javascript逻辑与-CSDN博客
parseInt和Math.floor
JavaScript 中 Math.floor() 和 parseInt() 的应用场景和区别_math.floor js-CSDN博客
【JS】parseInt与Math.floor的区别_math.floor parseint-CSDN博客
极简精妙的JS代码片段
JS极简代码片段 - Alan明宇's Blog
script setup到底做了什么
Vue3 ＜script setup＞是什么？作用？_<script setup>-CSDN博客
https://juejin.cn/post/7420272008146190362
TS获取参数和返回值类型
TypeScript 获取函数的参数类型、返回值类型_ts 获取函数参数的类型-CSDN博客
内存泄漏和闭包
解析JavaScript中的闭包和内存泄漏：真相与误解在JavaScript开发领域，闭包常常被误解为导致内存泄漏的罪魁 - 掘金
Proxy和DefineProperty
defineProperty 与 proxy 详解_defindeproperty proxy-CSDN博客
css 多行文本擦除效果
多行文本擦除效果_css文字擦除效果-CSDN博客
组件循环依赖问题
组件循环依赖问题_vue 组件循环依赖-CSDN博客
从视频文件提取画面帧
前端开发攻略---从视频文件中提取画面帧_前端视频抽帧-CSDN博客
服务监控与数据埋点
服务监控与数据埋点
图片边框
https://juejin.cn/post/7136833061320146974
JS中的计时是否精确
https://juejin.cn/post/7254572372136984613
JS中的计时是否精确
跟随系统的主题切换
实现网页跟随系统主题切换_window.matchmedia("(prefers-color-scheme: dark)")-CSDN博客
跟随系统的主题切换【渡一教育】_哔哩哔哩_bilibili