跳到主要内容

第一章：Day 1

问题 1：HTML5 新特性有哪些​

  • 语义化标签
    • header
    • footer
    • aside
    • nav
    • article
    • section
  • history API:
    • history.pushState()
    • history.replaceState()
    • history.back()
    • history.forward()
    • history.go()
    • history.state
  • WebSocket
    • new webSocket(), socket.on 赋值给监听事件
    • socket.send/close/message/error
  • 本地存储
    • localStorage
    • sessionStorage
    • cookie
  • 地理接口
    • navigator.geolocation
  • audio/video
  • webGL(Web 图形库)/canvas
  • requestAnimationFrame
  • 表单控件：calendar、date、time、email、url、search
  • 拖放 API:
    • draggable
    • ondragstart
    • ondrag
    • ondragenter
    • ondragleave
    • ondragover
    • ondrop
    • ondragend
  • Web Worker：后台执行耗时计算、数据处理、图像处理
    • 与 Service Worker 的区别：离线缓存、消息推送、后台同步、拦截请求

问题 2：HTTP 状态码​

  • 2xx：成功
    • 200 OK：请求成功
    • 201 Created：请求成功并创建了新的资源
    • 204 No Content：请求成功但没有资源返回
  • 3xx: 重定向
    • 301 Moved Permanent：永久重定向
    • 302 Found：临时重定向
    • 304 Not Modified：资源未修改，使用缓存
  • 4xx：客户端错误
    • 400 Bad Request：请求错误
    • 401 Unauthorized：未授权
    • 403 Forbidden：禁止访问
  • 5xx：服务器错误
    • 500 Internal Server Error：服务器错误
    • 502 Bad Gateway：网关错误

问题 3：正则表达式的用法？​

问题 4：HTML5 语义化的优点​

问题 5：介绍下 304 过程​

问题 6：数组的常用方法有哪些?​

问题 7：CSS 选择器及优先级​

问题 8：强缓存和协商缓存​

问题 9：== 和 === 区别​

问题 10：script 标签放在 header 里和放在 body 底部里有什么区别？​

  • 放在 <header> 里面: 在浏览器解析到 <script> 的时候，会立即执行 js 代码
    • 可能遇到 "undefined" 或 "null": js 里有修改或访问 dom ，而此时未解析 body 形成 dom
      • 解决：在事件 document.addEventListener("DOMContentLoaded", function() {})
    • 影响用户体验：脚本过大，网络请求，会阻塞页面的渲染
  • 放在 <body> 底部
    • 用户体验上可以先看到页面，再去加载 http 请求
    • js 里有修改 dom 的操作，也不会出错

延伸：什么情况会阻塞页面的渲染？

  • HTML 解析阻塞：遇到 <script> （不含 "defer" 或 "async" 属性）
  • CSS 解析阻塞
  • JavaScript 阻塞 CSSOM 构建

第二章：Day 2

问题 1：HTTP1、HTTP2、HTTP3 的区别​

  1. HTTP1
  • HTTP 1.0
  • 1.0 每次请求都会建立一个 TCP 连接，请求完毕后就会断开
  • HTTP 1.1
  • 1.1 持久连接
      • 1.1 浏览器对每个域名的最大并发连接数为 6 个 TCP 连接
  • 分块机制（chunk transfer）
  • 如果某些块丢失了怎么办？： 底层协议 TCP 有错误检测机制和重传机制
  • CDN 分片
  1. HTTP2(从上往下：HTTP2->TCP->二进制分帧->IP)

  • 头部压缩

  • 头部压缩的必要性：客户端发送 HTTP 到服务端获取数据的时候，body 很多时候是空的

  • HPACK 算法: 客户端和服务端同时维护头部信息表，对于同样的头部信息只需要发送索引，减少重复传输

  • 静态表：固定字典 例如：content-type: application/json，发送方和接收方事先约定好

  • 动态表：可变的字典，发送方和接收方各自维护。固定大小，超过大小会淘汰最早的

  • 队头阻塞：等待前面的请求完毕才会继续请求

  • 服务器推送

  • 多路复用: TCP 并发请求，建立多个管道

  • 二进制分帧实现多路复用

  • 发送时通过 二进制分帧层 处理，输出 带有流标识符（Stream Identifier）的帧

  • 服务器解析根据流标识符（Stream Identifier）识别对应请求/响应

  • 接受时通过 二进制分帧层 解析，输出到浏览器

  • 浏览器根据 ID 交给对应的请求

    分层
    HTTP2
    二进制分帧层
    TLS(Transport Layer Security 传输层安全性) (可选)
    TCP
    IP

思考🤔： HTTP2 一定比 HTTP1.1 快吗？

  • 当丢包率很高的时候，HTTP2 比 HTTP1.1 慢
    • HTTP2 的队头阻塞： 是多个请求共用一个 TCP 连接，如果一个请求丢包了，那么这个 TCP 连接就会被阻塞，其他所有请求也会被阻塞
    • HTTP1.1 是建立6个 TCP 连接，如果一个请求丢包了，那么这个 TCP 连接就会被阻塞，其他5个请求不会被阻塞

  1. HTTP3

  • QUIC 协议：由于 UDP 不可靠，该协议可以保持

  • 实现了 TCP 流量控制，传输可靠的功能。提供了数据包重传，拥塞控制

  • TLS 加密

  • 多路复用

  • 快速握手

  • UDP: 免去三次握手、四次挥手操作

  • QUIC 利用 UDP 的无连接特性，实现了快速握手，避免了 TCP 的慢启动（三次握手、四次挥手）

  • UDP 特性：不需要连接，直接发送数据包，不需要等待确认

  • 彻底解决队头阻塞问题

  • 从物理连接上独立的逻辑数据流

    分层
    HTTP3
    QUIC(多路数据流、快速握手、TLS、可靠性、有序交付)
    UDP
    IP

总结

问题 2：async​

问题 3：CSS3 新特性​

问题 4：加密算法​

问题 5：JS 中的 8 种数据类型及区别​

问题 6：position 属性的值有哪些及其区别​

问题 7：GET 与 POST 的区别​

问题 8：var, cosnt, let 三者之间的区别​

问题 9：CSS 盒子模型​

问题 10：WebSocket​

第三章：Day 3

问题 1：BFC（块级格式上下文）​

问题 2：Socket 连接的步骤​

问题 3：数据类型判断 instanceof 和 typeof 的区别​

问题 4：隐藏页面元素的方法​

问题 5：DNS 协议是什么？​

问题 6：深拷贝浅拷贝的区别​

问题 7：Flex 布局​

问题 8：浏览器的主要功能​

问题 9：闭包​

问题 10：Rem 布局​

第四章：Day 4

问题 1：浏览器是如何渲染 UI 的？​

问题 2：浏览器重绘与回流​

问题 3：百分比布局​

问题 4：重绘与重排的区别？​

问题 5：行内元素、块级元素、空元素​

问题 6：浮动布局​

问题 7：Cookie、sessionStorage、localStorage 的区别​

问题 8：获取表单元素的事件​

问题 9：em/px/rem/vh/vw 区别?​

问题 10：WEB 攻击​

~~1. CSRF（跨站脚本攻击）: 例如在一个页面中弹出一个图片，图片的链接是一个转账的链接，因为img的url没有跨域。点击了就会触发转账的操作，此时如果浏览器登录了，就会用到登录的状态 2. SQL 注入：使用包含 SQL 的脚本，插入到 HTML 中

  • 对input等输入的内容进行过滤转换，将脚本转为字符串
  • 前端禁止使用 insert_html 的方法
  1. Cookies 窃取：~~

浏览器为了防止不同源请求资源，所以规定了同源策略

但是为了方便用户，允许跨域请求js/css/img等资源

csrf (cross site request forgery): 跨站请求伪造​

场景

  • 伪造成一个吸引人的弹窗，诱导点击，点击后会窃取页面的
    • 进行转账
    • 发送恶意邮件

防范： 验证码

xss (cross site scripting): 跨站脚本攻击​

场景

  • 页面输入框中插入脚本，窃取 document.cookie 或 执行 SQL 语句

防范

  • 用 npm 库对输入的内容进行过滤转换，将脚本转为字符串
  • 禁止使用 innerHTML 的方法
  • cookie 设置 httpOnly 为 true
  • 设置 CSP（Content Security Policy）策略

第五章：Day 5

问题 1：如何使用 rem 或 viewport 进行移动端适配​

问题 2：输入 URL 回车后发生了什么?​

问题 3：html dom 的 event 事件​

问题 4：清除浮动的几个方式​

问题 5：AJAX 原理？​

问题 6：JS 中 this 的情况​

问题 7：CSS 预处理器 Sass、Less、Stylus 的区别​

问题 8：前端性能优化（结合项目实践）​

根据浏览器的原理实际使用的场景下，来分析性能优化的措施

  1. 由于单页面应用，第一次需要加装资源比较多
  • 可以优化代码体积：使用打包工具 webpack、使用 gzip 压缩
  • 可以优化代码传输：CDN 文本分发网络、使用 HTTP2 协议和缓存、优化代码请求个数和数据的优化
  1. 减少页面渲染代价高的行为
  • 减少 DOM 操作
  • 减少重排

  1. 数据大的时候，分页、懒加载

  2. 动画多的页面，使用新技术 react18（使用链表代替栈结构）

项目经验：

问题 9：call, apply, bind 三者的区别​

  • 相同之处：函数的方法，函数修改函数的 this 的指向，this 是指当前上下文，跟作用域有关。
  • 区别：
    • call 会立刻执行，返回执行结果
    • apply 和 bind 是绑定 this 后返回一个函数
      • ....apply(this, arguments) 参数是数组
      • ....bind(this, arg1, arg2, arg3, ...) 参数是多个

问题 10：元素水平垂直居中​

第六章：Day 6

问题 1：如何理解 CDN？实现原理？​

问题 2：常见的类型转换​

问题 3：伪元素、伪类区别​

问题 4：跨域​

问题 5：Event Loop 的执行顺序​

问题 6：渐进增强与优雅降级的理解及区别​

问题 7：浏览器样式兼容​

问题 8：列举 ES6 的新特性​

问题 9：常见的兼容性问题​

问题 10：GC 垃圾回收机制​

第七章：Day 7

问题 1：对比各种继承​

问题 2：什么是原型 ? 什么是原型链 ？​

问题 3：什么是作用域 ? 什么是作用域链 ?​

问题 4：怎么解决父元素高度塌陷​

问题 5：webpack 中 loader 和 plugin 的区别​

问题 6：让一个元素水平垂直居中的方法​

问题 7：如何自定义一个 webpack 插件 ？​

问题 8：对比 import、import() 和 requrie 的区别​

common.js es6

前端模块化的发展历史

  • COMMON.JS ，通过 require 引入模块，是动态的。应用到 nodejs 中
    • 因为是动态引入，所以很多问题在运行时才会暴露出来
  • import 是 ESM 模块化，可以运用到 ES6 语法中，现在的主流浏览器也都原生支持了
  • import() 是动态加载，可以实现按需加载，可以实现懒加载

Node.js 的模块加载的方法​

ESM 和 CJS 的区别

  • CJS 导出的是值，ESM 导出的是引用
  • CJS 运行时加载，ESM 编译时输出接口
  • CJS 的require()是同步加载模块，ESM 的import是异步加载模块

使用

  • nodejs 13.2.0 之后，已经原生支持 ESM 模块化了
  • 编写 ESM 模块，可以命名 .mjs
  • 编写 COMMON.JS 模块，可以命名 .cjs

问题 9：async/await 的错误捕获方式​

问题 10：box-sizing 所有的属性​

参考

自问自答​

react class 中，构造函数中为什么需要绑定 this?​

执行上下文、this 的关系？​

闭包是什么？作用域和作用域链？​

js 寻找自由变量和寻找 this 的过程​

  • 自由变量是在代码定义的位置中就决定了
  • this 的是执行的时候才决定
    • 如果一个函数当做普通函数调用，它会指向全局对象 window, 所以有个严格模式可以规避改问题，使它 undefined
    • 通过 call apply bind 可以显式指定 this 的指向
    • 对象调用方法，this 指向该对象