路旁有花，心中有歌，

天上有星。

Algorithm

2021.11.19

经典的算法。 1. Kadane 算法 Kadane算法，用于计算数组中连续子数组的最大或最小值。 1.1 计算连续子数组最大和、最小和 【1.求子数组最大和】 求一个非空数组A中的一个子数组SubA，使得SubA中元素的加和最大。 （子数组：在原数组中必须是连续的，长度最小为1。单个元素构成的数组和数组A本身也是A的子数组。） Kadane算法，基于以...

JavaScript

2021.11.08

作用域(Scope)、闭包(Closure)、作用域链和上下文(Context) JS函数词法环境和作用域问题，还有var和let的区别问题。 一、执行环境 Execution Context 二、作用域 Scope、作用域链、闭包 三、上下文 Context：this属性指向 四、var和let的区别 五、箭头函数和普通函数的区别 一、执行环境(Ex...

工程化

2021.11.01

前端项目构建 打包构建 Bundle 为什么需要打包？ 每个资源需要单独发起Http请求，Http2.0之前不支持TCP连接多路复用，浏览器限制了TCP最大并发数，同时请求资源过多造成堵塞，影响加载性能； 打包后，多个资源可以整合为一个大的资源，减少了请求次数，使加载更快。 无打包 Bundleless Bundleless 的产生背景 打包构建过程缓慢，起...

Network

2021.11.01

Web Socket协议 Web Socket 协议诞生的原因（相比于http的优势） WS支持服务端推送: http协议中，请求只能由客户端发起，无法进行服务端推送（获取实时信息只能轮询，浪费网络资源）； WS在建立连接之后，数据包头部字段较轻: http协议每次都要携带完整头部，字节数较大。 WS支持二进制流式传输； WS可扩展，用于实现自定义的子协议。 ...

Performance

2021.10.10

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

JavaScript

2021.10.10

IEEE 754 双精度数字表示法 数字在JavaScript中按IEEE 754标准中双精度浮点数（64bit）来表示。一个数占用64位，其格式如下： 用这种形式表示出来的数字，叫做这个数值的原码。 其中的阶码部分： 阶码有11位，可表示的数范围是0 ~ 2047，这样对应的指数计算结果是2^0 ~ 2^2047，无法表示很小的小数； 因为既需要表示很小的小数，又需要...

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的区别 待补充。