路旁有花，心中有歌，

天上有星。

Performance

2021.10.10

性能优化： 重绘和重排 什么是重绘和重排 重排：当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为重排。 重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），浏览器会将新样式赋予给元素并仅重新绘制它本身，这个过程称为重绘。 ...

Performance

2021.10.10

图片懒加载原理和实现。 图片懒加载的原理 图片懒加载的基本原理： 拿到所有的img元素； 绑定 window 的 scroll 事件，对其进行事件监听； 每次滚动，遍历每个img元素，判断当前img元素是否到了可视区范围内； 如果到了，就修改图片的 src 属性。 实现 getBoundingRect()方法 const imgs = document....

工程化

2021.10.10

前端工程化 几种不同的测试 单元测试：将代码分为若干个独立的单元进行分别测试。通常一个单元是一个函数、一个组件或一个复杂的算法； 端到端测试(e2e)：不将应用程序分解成单元，直接从用户层面模拟与应用程序的交互，查看是否返回了预期的结果。 前端测试工具 单元测试：Jest 安装、配置Jest // 安装jest npm i jest -D // 引导式命令行自动...

工程化

2021.10.10

前端工程化 前端工程化包括什么 前端工程化的含义 前端工程化一般包括四个方面：模块化、组件化、规范化和自动化。 模块化、组件化 模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。比如：CommonJS、ES6模块等。模块化是在文件层面上，对代码或资源的拆分。 组件化是在设计层面上，对用户界面的拆分。一个组件可能在页面上占据独立的一块，并且可以独...

Personal

2021.09.21

接触新事物 相比于同类事物，它是否有独特的优势？ 它解决了什么问题？ 它存在缺陷或冗余吗？可以优化吗？ 如果可以优化，它为什么是现在的样子？ 掌握新技术三个维度 学会使用； 探索原理； 理解设计思路；

JavaScript

设计模式

2021.09.21

《JS设计模式》 —— 曾探 一、基本概念 1. 高阶函数 高阶函数满足以下条件： 函数可以作为参数被传递； 函数可以作为返回值被输出； 高阶函数的部分应用： 面向切面编程 AOP； 感受面向切面编程 柯里化函数； 函数节流、防抖； 二、设计模式 单例模式 一个类只有一个实例，全局都可访问。 策略模式 定...

Promise

2021.09.20

Promise A+规范 与 手动实现 一、Promis A+ 规范 截自：字节路白讲义 Promise A+ 官方原文 1. 术语 promise 是一个有then方法的对象或者是函数，行为遵循本规范; thenable 是一个有then方法的对象或者是函数; value 是promise状态成功时的值，也就是resolve的参数, 包括各种数据...

Browser

2021.09.20

浏览器渲染基本流程 进程和线程的区别 浏览器线程和进程 浏览器进程？线程？傻傻分不清楚！ 进程 什么是进程 进程是cpu资源分配的最小单位（系统会给它分配内存）。操作系统会为每个进程分配独立的一块内存资源，进程之间互不影响（进程间也可以互相通信，但是代价较大）； 一个进程中可能有一个或多个线程在工作； 同一进程下的各个线程之间，共享系统为该进程分配...

Web

Web API

2021.09.20

目前的 Web 设备接口API： Web USB API; (USB通信) Web Serial API; （串口通信） Web NFC API; （NFC通信） Web Bluetooth API; （蓝牙通信） Web HID API; （人机接口设备通信） 为保证安全，这些API： 只在htttps或wss协议下...

Web

Web Component

2021.09.20

Web组件相关API： HTML模板) Shadow DOM 自定义组件 一、HTML模板 使用<template>标签包裹一系列DOM元素，叫做HTML模板。它有以下特性： 默认不会被浏览器渲染，内部内容包裹在一个DocumentFragment节点内； 内部内容不属于活动文档，因此document.querySel...

Vue

2021.09.12

Vue3组件：script setup 语法糖 Vue3 RFC: script-setup <script setup>语法糖引入的动机，是简化冗余代码，让SFC书写更简洁。 1. 书写形式 <script setup> // codes.. </script> 2. <script setup>基本用法 内...

Vue

2021.09.08

Vue使用的注意事项 一、v-for 与 v-if 不要同时使用 原因： 浪费性能。 v-for在Vue中比v-if优先级高，因此无论如何都会遍历所有列表中的子元素，才能确定哪些子元素被显示。（本意是只遍历+显示v-if为true的子元素集合） 解决方式： 使用computed等提前筛选出要显示的列表元素，然后用v-for遍历。 二、多个根节点的组件，需要显式指定Att...

Safety

2021.09.06

前端鉴权：掘金 一、cookie + session 浏览器登录发送账号密码，服务端查用户库，校验用户; 服务端把用户登录状态存为 session，生成一个 session_ID; 通过登录接口返回，把 sessionID set 到 cookie 上; 此后浏览器再请求业务接口，session_ID 随 cookie 带上; 服务端查 session_...

Safety

2021.09.06

前端安全 一、XSS：跨站点脚本攻击 二、CSRF：跨站点请求伪造 基本形式： 通过cookie等经过用户鉴权的页面，伪造用户请求，骗取服务器信任。 三、CSP：内容安全策略 四、HSTS：强制HTTPs连接 HSTS（HTTP Strict Transport Security） 五、X-Frame-Options：控制iframe嵌入 六、SRI： 子资源完整性校...

HTML

Performance

2021.09.06

一、preload和prefetch的功能 待补充。 二、preload和prefetch的区别 待补充。