本文记录了我学习过程中整理的前端相关的知识点,以摘抄为主，绝大部分非原创。未能全部都标明出处，在此致歉

前言

为什么选择前端

前端和后端，我选择将前端作为我的主要技术栈。这和我个人的学习习惯有关。

我喜欢学以致用,对于一门尚未掌握的技术，我倾向于先看文档看个百分之二三十,有个大体的了解后，就开始动手去做。但后端的微服务等技术，我缺乏实际的实践环境，没法实践去应用，学起来就感觉很虚。

但前端不太一样。在我自己的项目中，为了实现更快的响应时间、更实用美观的界面，我有充分的动力去学习新的技术，然后将其运用，这形成了一个正反馈的过程。比如说我去年用webassembly写了一个Game of Life，当我对代码进行优化后，我确实能看到帧数肉眼可见地提升了。

为什么要记八股

最近在准备找实习，网上的八股光看也不太能记得住，还得是自己整理记录下。

我之前有点认为记八股是一种应试行为，有点抵触。但有天晚上我排查EuDs63/postkid出现的一个问题,为了完全搞懂，我就自发地去搜React的生命周期。

这时候我意识到八股的那些问题，其实不少是蛮常见的问题。要写好代码确实得去知道。

看面试官视角下的技术面——为什么要“背八股”_牛客网。

如果被问八股，要学会自己主动去延伸，进而在一定程度上把握面试的主动权。

Html

表单数据校验

表单数据校验 - 学习 Web 开发 | MDN

锚点

  • 示例
<a href="#javascript深入之重新认识箭头函数的this" aria-hidden="true" class="header-anchor">#</a>

html5新特性

wip

HTML5语义化

  • title v.s. h1
  • strong v.s. b

input

ol

img

浏览器

浏览器一帧都会干些什么？

  1. 接受输入事件
  2. 执行事件回调
  3. 开始一帧
  4. 执行 RAF (RequestAnimationFrame)
  5. 页面布局，样式计算
  6. 绘制渲染
  7. 执行 RIC (RequestIdelCallback)

浏览器引擎的工作原理

wip

浏览器渲染过程

  1. 解析 HTML 和样式计算 (parsing and style calculation)
  2. 布局 (Layout)
  3. 绘制 (paint)
  4. 合成 (compositing)

浏览器事件循环

wip

浏览器的多线程

  1. JavaScript 引擎线程
  2. GUI 渲染线程
    • GUI 渲染线程与 JavaScript 引擎是互斥的
    • 当 JavaScript 引擎执行时 GUI 线程会被挂起，GUI 更新会被保存在一个队列中等到 JavaScript 引擎空闲时立即被执行。
  3. 事件触发线程
    • 当一个事件被触发时该线程会把事件添加到“任务队列”的队尾，等待 JavaScript 引擎的处理。这些事件可来自 JavaScript 引擎当前执行的代码块如 setTimeout、也可来自浏览器内核的其他线程如鼠标点击、Ajax 异步请求等，但由于 JavaScript 是单线程执行的，所有这些事件都得排队等待 JavaScript 引擎处理。

输入URL到页面渲染的过程

script标签中的defer和async的区别？

  • defer
    • 示例: <script defer src="https://javascript.info/article/script-async-defer/small.js"></script>
    • 文档顺序（它们在文档中的顺序）
    • 具有 defer 特性的脚本不会阻塞页面
    • 具有 defer 特性的脚本总是要等到 DOM 解析完毕，但在 DOMContentLoaded 事件之前执行
    • 具有 defer 特性的脚本保持其相对顺序，就像常规脚本一样
    • 仅适用于外部脚本: 如果 <script> 脚本没有 src，则会忽略 defer 特性
  • async
    • async 特性意味着脚本是完全独立的：
      1. 浏览器不会因 async 脚本而阻塞（与 defer 类似）。
      2. 其他脚本不会等待 async 脚本加载完成，同样，async 脚本也不会等待其他脚本。
    • 仅适用于外部脚本: 如果 <script> 脚本没有 src，则会忽略 async 特性
    • 由于其完全独立的特性，所以很适用于独立的第三方脚本
  • 参考：脚本：async，defer

兼容

  • 例:
addEventListener("paste", (event) => {
  event.preventDefault();
  //兼容不同浏览器中获取剪贴板数据的方式
  let paste = (event.clipboardData || window.clipboardData).getData("text");
  paste = paste.toUpperCase();
  const selection = window.getSelection();
  if (!selection.rangeCount) return; //检查是否存在文本范围
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
  selection.collapseToEnd();
});

不同文件在浏览器中的存放形式和加载机制

  1. HTML 文件

    • 存放形式：

      • HTML 文件是文本文件，包含网页的结构化内容。浏览器解析 HTML 文件时，会构建一个 DOM 树（Document Object Model），该树表示页面的内容和结构。

    • 加载机制：

      • 浏览器首先会加载 HTML 文件，并根据它来确定其他资源（如 CSS、JavaScript、图片）的加载顺序。
      • HTML 文件可以包含 <script> 标签加载 JavaScript 文件和 <link> 标签加载 CSS 文件。这些资源文件可能是同步加载，也可能是异步加载。

  2. CSS 文件

    • 存放形式：

      • CSS 文件通常是外部链接的静态文件，包含网页的样式定义。浏览器会根据 CSS 文件构建 CSSOM（CSS Object Model）。

    • 加载机制：

      • 浏览器在解析 HTML 时遇到 <link> 标签引用的 CSS 文件，会同步加载这些文件，CSS 文件的加载会阻塞页面的渲染，直到所有 CSS 被加载和解析完毕。
      • 浏览器结合 DOM 和 CSSOM 构建渲染树，并根据渲染树对页面进行布局和绘制。

  3. JavaScript 文件

    • 存放形式：

      • JavaScript 文件是纯文本文件，通常会以外部文件的形式引用。浏览器会在解析过程中执行 JavaScript 代码，这些代码可以操作 DOM 树和 CSSOM 树。

    • 加载机制：

      • 如果 <script> 标签没有 async 或 defer 属性，JavaScript 文件会被同步加载和执行，阻塞页面的解析和渲染。
      • async 属性允许脚本文件异步加载，不会阻塞 HTML 的解析。
      • defer 属性也允许异步加载，但脚本执行会在 HTML 完全解析后进行。

  4. 图片、字体、音视频文件

    • 存放形式：

      • 这些文件通常是二进制文件，存储的是图像、字体、视频或音频数据。浏览器通过 URL 引用这些资源。

    • 加载机制：

      • 图片、音视频等文件的加载是异步的，不会阻塞 HTML 或 CSS 的解析。
      • 浏览器会根据资源的大小、网络带宽和页面布局优先级决定资源的加载顺序。

  5. 缓存机制

    • 浏览器会将静态资源（如 CSS、JavaScript、图片等）缓存在本地，以加快后续的加载速度。
    • 缓存策略可以通过 HTTP 头信息（如 Cache-Control、ETag 等）进行控制。文件修改时可以通过版本控制（如文件名哈希）来强制浏览器重新加载新版本的文件。

测试

杂项

SVG

  • 全称: Scalable Vector Graphics(可缩放矢量图形)
  • 介于DOM和Canvas之间，既提供了图形的绘制能力，又提供了元素的DOM交互能力
  • 特点
    • SVG不存在回流这种布局问题，最多也就是重绘。但是DOM的动画就可能导致回流。
    • SVG是矢量图形，而Canvas绘制的是位图
    • 当屏幕尺寸越大时，SVG的渲染速度差异不大，但是Canvas的渲染时长明显增加
    • 当绘制对象过多时，SVG的渲染时长指数增加，Canvas保持稳定增长
    • Canvas不支持DOM事件
  • 参考

Babel

JWT (Json Web Token)

见[进一步学习jwt]

路由

  • pushState
    • 在改变url的同时向浏览器历史栈中压入新的历史记录,且不会重新加载页面
    • 接受三个参数：状态对象，新状态的标题和可选的相对URL(不能跨域，即协议，域名，端口必须都是相同的)
  • replaceState
  • popState
    • 在浏览器提供的history对象上还有go, back方法，用以模拟用户点击浏览器的前进后退按钮。在某个web应用当中，比如点击了标签，发生了页面的跳转。这时调用history.back()方法后页面回退，同时页面发生刷新,这时window.onpopstate无法监听这个事件。但是如果是通过pushState或者replaceState来改变URL且不发生浏览器刷新的话，再使用history.back()或history.go(),这样popstate事件会被触发。
  • 参考

瀑布流

如何实现的长列表？ 瀑布流 如何实现的长列表？ 你是如何判断谁是底部元素的？ 如果一次只请求10条数据，前端只展示了5条数据，如何判断底部元素的交叉状态？

git merge和 git rebase的区别

实现一个Dialog模板

面试题：React实现一个Dialog模板_react dialog-CSDN博客

实现个栈（用了好几种方法实现，包括最原始的单链表），还讲了讲symbol等乱七八糟的东西

jsBridge原理

如何把一个对象变成可迭代对象（实现[Symbol.iteractor]属性）

Proxy对象能拦截什么

jss

字体反爬

参考