fat-cat

---

theme: fat-cat

author: tangmuchw

email: tangmuchw@163.com

description: studying notes about front-end technology, mainly javascript, secondary unlimited.

---

AJAX

• AJAX 介绍

Library

• JS 高级程序设计(第 3 版)
• HTTP 权威指南
• 深入浅出 Webpack
• 算法图解
• CSS 权威指南（第三版）

Algorithm

• 广度优先遍历
• 深度优先遍历
• 排序
• 时间和空间复杂度
• 动态规划

CSS

• CSS 权重
• Flex 布局
• 媒体查询属性
• scroll-snap-type
• 盒模型介绍
• 重排（回流）和重绘
• 经典三分栏布局
• line—height 如何继承
• CSS3 利用伪元素(::before)获取标签自定义属性(data-xx)的值
• CSS 实现自适应正方形
• CSS 是怎么工作的
• 移动布局

Browser

• 浏览器缓存

Design Patterns

• 发布订阅者模式
• 单例模式

HTML5

• HTML5 介绍

HTTP

• 缓存
• Cros
• HTTP 版本
• P2P
• 请求方法
• 状态码
• TCP
• 三次握手
• UDP
• DNS 解析

Installer

• Yarn

JS

• 逻辑非运算符 (!)
• 相等性 (==, !=, ===, !==)
• 关系运算符 (>, <, >=, <=)
• apply
• bind
• call
• reduce
• chatCodeAt
• const
• debounce
• deepClone
• extendsES5
• flat
• formCharCode
• hasOwnProperty&in
• instanceOf
• let
• new
• promise
• regExp
• roundOff
• this
• throttle

Module

• 认识 CJS、AMD、UMD 和 ESM
• 简单对比 Webpack、Rollup、ESbuild、Parcel、Snowpack 和 Vite

Optimization

• 当 QPS 达到峰值时 该如何处理

SEO

• 对于已有 SPA 项目进行 SEO 优化，可以采用几种方法以最小代价提升 SEO 效果

SSH

• Mac 上生成以及查看 ssh-key

TS

• 基本类型
• interface

Webpack

• 概念
• hmr
• plugins
• tree shaking

Principle

• JavaScript 事件循环

React

• DOM Diff
• hooks
• setState（React < 18.x）
• HOC，RenderProps, Hooks 简单对比
• DOM Update Process
• 事件机制
• useEffect 和 useLayoutEffect 区别
• React.memo 和 useMemo 区别
• Concurrent Mode 并发模式（React >= 18.x）
• ReactJS 是什么以及它是如何工作的？
• state 如同一张快照
• React 渲染和提交
• lanes (车道模型)类型任务的位掩码优先级体系
• React 15、16、17、18 各版本的区别（特点）
• React 17.x 为什么要废弃 ComponentWillMount、ReceiveProps 和 Update 这三个生命周期

Security

• CSRF
• DDos
• DNSHijack
• JSONHijack
• XSS

Tech

• Docker
• Nginx 基础和负载均衡简单配置
• Prisma
• SSG
• SSR
• 技术调研的核心步骤

规范

• Commit Message 规范
• 本作者推荐在使用觉得好用的 git config 配置

问答题

• 箭头函数与普通函数区别？能不能作为构造函数？
• 对 requestAnimationFrame 的理解
• package.json 中的 peerDependencies 的作用
• 虚拟 DOM 的好处
• 简单说一下 react 16.x 执行过程
• cookie 跨域时候要如何处理
• 301, 302, 303, 307, 308 的区别
• Number() 的存储空间是多大？如果后台发送了一个超过最大自己的数字怎么办
• JS 数据类型
• 同一个链接，PC 打开的是 web 应用，手机打开的是 h5 应用
• 设计一套全站请求耗时统计工具

编程题

• 合并两个有序数组
• 将 ‘aabbcca’ 转变成 ‘a2b2c2a1’
• 字符串的全排列
• 如何让 (a == 1 && a ==2 && a == 3) 返回 true
• 将单个函数参数转化成 this 输出
• compose 实现
• 找出所有出现两次的元素。需要不用到任何额外的空间并在 O(n)时间复杂度内解决这个问题
• 给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素
• 简单的洗牌算法
• 数组中的第 K 个最大元素，在未排序的数组中找到第 k 个最大的元素。请注意，你需要找的是数组排序后的第 k 个最大的元素，而不是第 k 个不同的元素
• 爬楼梯。假设你正在爬楼梯，需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶，你有多少种不同的不同的方法可以爬到楼顶
• 使用最小花费爬楼梯。数组的每个索引作为一个阶梯，第 i 个阶梯对应着一个非负数的体力花费之 cost[i](索引从 0 开始)，每当你爬上一个阶梯你都要花费对应的体力花费，然后你可以选择继续爬一个阶梯或者两个阶梯。您需要找到达到楼层顶部的最低花费。在开始时，你可以选择从索引 0 或 1 的元素作为初始阶梯
• 编辑距离。给定两个单词 word1 和 word2，计算出将 word1 转换成 word2 所使用的最少操作数。可以对一个单词进行如下操作：1.插入一个字符 2.删除一个字符 3.替换一个字符梯
• 求二叉树所有根到叶子路径组成的数字之和
• compareVersion(version1, version2) {} 版本号可能是 7.5.0 或者 1.12 这种格式，输出较大的版本号
• 给出 n 个字母（小写字母从 a 到 z），找出出现次数最多的字母，输出该字母
• JS 简单实现：根据奖品权重计算中奖概率实现抽奖

LeetCode

• 存在重复元素
• 买卖股票的最佳时机 II
• 删除排序数组中的重复项
• 旋转数组

Live

• RTMP 协议
• RTSP 协议

Interview

• Skill Demands

---

将来的你，一定会感谢此刻拼命的自己