最近看上了 LeetCode 官网上关于前端校招的学习小册, 且为 plus 会员专享. 然而一看会员价格: 30 天 79 元, 以为是多高质量的小册! 遂尝鲜, 为了物有所值, 因此有了本篇学习笔记.
第一本: 前端通关手册: HTML & CSS
HTTP 部分
- HTTP 报文状态码:
- 200 仅仅表示请求成功而已. (补充: 200 状态码具有局限性, 如缓存和跨域)
- 301 和 302 的区别(一句话概括):
- 301: 永久重定向(补充: 意思是请求的 url 已被服务端所移除, 以后请求该资源也使用新的 url), 默认可缓存, 搜索引擎更新资源的链接
- 302: 临时重定向(补充: 意思是请求的 url 仍可使用), 默认不缓存, 搜索引擎不更新链接
- https 支持的 http 版本为 2-3
- http 版本更新最重要的特点:
- 1.0: 无法复用 TCP 连接,
队头阻塞(多个请求无法异步执行, 后面的请求必须等前一个请求成功响应) - 1.1: 支持长连接,
管道化(浏览器支持给同一个域名开多个 TCP 连接, 此外给一个网站开多个域名, 但并发的规模有限, 并没有从根本上解决同一个 TCP 连接上队头阻塞的问题 - 2.0: 二进制分帧,
多路复用(给每一个 http 请求建立双向数据流, 帧头部记录数据流 id, 且数据流支持优先级和依赖, 帧可以乱序发送, 实现一个 TCP 连接上进行任意数量的 http 请求, 如: 可以实现几乎所有图片并行下载. 但还是没能从根本上解决队头阻塞问题) - 3.0: 改用 UDP 协议实现, 因为 TCP 无法解决"在 TCP 连接上一个包丢失, 整个会话都要等待重传, 后续请求全都被阻塞"的问题.
- 1.0: 无法复用 TCP 连接,
CSS 部分
- CSS 选择器效率:
ID > 类 > 类型（标签） > 相邻 > 子代 > 后代 > 通配符 > 属性 > 伪类 - 优先级补充: 用户配置的
!important> 开发者配置的!important, 这一点和直觉相反(开发者定义的选择器 > 用户定义的选择器) - % 单位相对于什么? 补充: 除了
line-height的 % 是相对于元素本身字体大小外, 其他几乎所有属性的 % 都是相对于元素的父元素对应属性(尺寸, 或者字体大小) - 工程化处理样式:
css-loader: 支持读取 css 文件, 并作为模块导入 jsstyle-loader: 将 CSS 作为<style>节点插入 DOM- webpack 中, loader 的加载顺序是
从后往前, 因此要将 style-loader 写在 css-loader 前面 - 可用插件
ExtractTextWebpackPlugin替换 stle-loader, 在打包后生成独立的 CSS 文件
第二本: 前端通关手册: JavaScript
- CommonJS 中, require() 导出的是值的
浅拷贝 - 用
WeakMap优化深克隆(补充: WeakMap 和 Map 的区别)
function deepClone(target, h = new WeakMap()) {
if (target && typeof target === 'object') {
if (h.has(target))
return h.get(target);
const newTraget = Array.isArray(target) ? [] : Object.create(null);
h.set(target, newTarget);
Object.keys(target).forEach(key => {
newTarget[key] = deepClone(target[key], h);
});
return newTarget;
} else {
// 如果 target 是基本类型或 null
// 补充: 如果要考虑正则, 则判断条件为 target.constructor === RegExp; 直接返回 target 即可
return target;
}
}
结论:
两本小册的特点:
- 文字精炼, 但远不够详尽(矛盾文学)
- 知识点遗漏较多, 质量一般, 不值得购买
