html 面试考点全面总结下篇

Offer / 字节跳动
Word count: 5.2k   |   Reading time≈ 18 min

# html 面试考点全面总结下篇

拿到 字节跳动实习生 offer 总结

回馈分享一波自己的知识点总结

希望读者依此构建自己的知识树（思维导图）

偷懒一下：可参考我自己总结思维导图 : 点这里

附带：高频面试题积累文档。 来自于（学长、牛客网等平台）

自己开发的博客地址：zxinc520.com

github 地址: 点击

此篇 html 共总结 22 大知识点： 全部弄懂了，面试很容易。

# 11、label 标签

作用：用于定义表单控件的关系，点击时自动将焦点移至相关联的控件。

# 两个有用属性

  • for
    • 关联相关控件
    • 通过控件 id 关联
  • accessKey ：设置访问快捷键 例如：accesskey=“h”

注意 ：该标签不能为 a 和 button 标签的后代

link ：建议使用

@import ：慎用 【会造成 “无样式内容闪烁”】

  1. 从属和作用
    • link 是 HTML 提供的标签
      • 可以加载 css
      • 可以定义 rel 等属性（rel 属性规定当前文档与被链接文档之间的关系。） 【技巧：这里引申到 预加载知识：可以关注 Resource Hint 标准 — 页面加载性能利器】
    • @import 是 css 提供的语法
      • 只有导入样式表的作用
  2. 加载顺序
    • link 在页面加载时 css 同时被加载
    • @import 引入的 css 需要等页面加载后再加载
  3. 兼容性问题
    • link 是 HTML 提供的语法，没有兼容性问题
    • @import 是 css2.1 提供的语法，ie5 以上才兼容
  4. DOM 可控性
    • js 可以通过插入 link 标签来改变样式
    • js 不可以通过 @import 去引入新的 css 文件来改变样式

# 13、target

属性作用：指定所连接的页面在浏览器窗口中的打开方式

# 属性
  • _self（默认值）：在当前窗口打开
  • _blank： 在新窗口中打开
  • _parent ： 在父级窗口打开
  • _top ： 在顶级窗口打开

# 14、部分标签 / 属性区别

# 标签区别

  • title 和 h1
    • title ：只表示是个标题
    • h1-h7
      • 表示层次明确的标题
      • 对页面信息的抓取有帮助
  • b 与 strong
    • b：展示为粗体
    • strong
      • 标明重点内容，有语气加强的含义 u
      • 使用阅读设备时，会重读
  • i 与 em
    • i：展示为斜体
    • em：表示强调的文本

# 属性区别

  • src 与 href
    • src：引入；将指定资源应用到文档内.
    • href：引用；建立与当前文档之间的链接.
  • 【img】title 和 alt
    • title
      • 全局属性
      • 提供关于元素的额外信息
      • 鼠标移至显示
    • alt
      • 用于图片无法加载时显示
      • web Quality（无障碍）易访问的

# 15、Shadow DOM（影子 DOM）

# 是什么？

浏览器的一种能力 ：渲染时插入独立的 DOM 树

# 特点？

  • 与原始 DOM 完全隔离
  • 具有自己的元素和样式

# 作用？

  • 封装需要隔离外部的文档细节 / 组件
  • 防止开发人员随意修改样式

# 使用方式？

  • Node1.attachShadow(Node2)
  • Node2.innerHTML = …

# 16、浏览器的数据存储方式有哪些

分为三类来讲：

cookie 、localStorage 和 sessionStorage 、userData。

h5 之前，存储主要用 cookies，缺点是在请求头上带着数据，导致流量增加。大小限制 4k

# 创建目的
  • 为了保持 HTTP 的状态
  • 为了识别用户信息而储存在本地上的数据
# 特点
  1. 可储存大小为 4k
  2. 储存个数有限制（各浏览器不同）
  3. 有效时间在设置的 cookie 过期时间之前一直有效

# localStorage 和 sessionStorage

创建目的：便于客户端储存数据

# 相同点
  • 都由 HTML5 Web Storage API 提供
  • 在本地保存
  • 可储存大小 5M 以上
# 不同点
  • 有效时间不同
    • localStorage（以键值对 (Key-Value) 的方式存储）
      • 储存持久数据
      • 浏览器关闭后数据不丢失除非主动清除数据
    • sessionStorage
      • 数据在当前浏览器关闭后自动删除
  • 作用域不同
    • localStorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中都是共享的。
    • sessionStorage 不在不同的浏览器页面中共享，即使是同一个页面

安全性：需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的，因为它们保存在本地容易被篡改，使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。所以千万不要用它们存储你系统中的敏感数据。

# userData

# 特点
  • IE 专属 ：早期 IE 浏览器用来本地储存数据用的
  • 以文件的形式保存在磁盘上 ：持久化储存方式
  • 可以设置失效日期
  • 可储存大小 1MB 左右

注意：使用 IE 条件注释来避免其它浏览器载入上述代码 <!–[if IE]><[end If]– >

# 17、如何实现标签页面的通信

  1. 方法一 ：使用 localStorage

    • 使用 localStorage.setItem (key,value) 添加内容

    • 使用 Storage 事件监听添加、修改、删除的动作

      window.onstorage = (e) => {console.log(e)}
// 或者这样
window.addEventListener('storage', (e) => console.log(e)

  2. 方法二：使用 cookie+setInterval

    • 将要传递的信息储存在 cookie 中
    • 每隔一定时间读取 cookie 信息，获取要传递的信息
    • 具体描述 ：1、在页面 A 设置一个使用 setInterval 定时器不断刷新，检查 Cookies 的值是否发生变化，如果变化就进行刷新的操作。 2、由于 Cookies 是在同域可读的，所以在页面 B 审核的时候改变 Cookies 的值，页面 A 自然是可以拿到的。这样做确实可以实现我想要的功能，但是这样的方法相当浪费资源。虽然在这个性能过盛的时代，浪费不浪费也感觉不出来，但是这种实现方案，确实不够优雅。

  3. 方法三 ：websocket 通讯（HTML5）

    • 定义：WebSocket 是 HTML5 新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道，比如说，服务器可以在任意时刻发送消息给浏览器。
    • WebSocket 连接必须由浏览器发起，特点
      • 建立在 TCP 协议之上，服务器端的实现比较容易。
      • 与 HTTP 协议有着良好的兼容性。默认端口也是 80 和 443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
      • 数据格式比较轻量，性能开销小，通信高效。
      • 可以发送文本，也可以发送二进制数据。
      • 没有同源限制，客户端可以与任意服务器通信。
      • 协议标识符是 ws（如果加密，则为 wss），服务器网址就是

  4. SharedWorker（html5 浏览器的新特性 SharedWorker）

    • 本质还是单线程，只是利用了浏览器不同 JS 引擎
    • 必须在服务器上才跑得动
    • IE 未兼容

共同点：记录用户状态

# 区别：

  • 什么是 Cookie？

    HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

  • 采用的是在客户端保持状态的方案 ： 即运行在客户端

  • 有大小限制，存储个数有限

  • 有安全隐患 ：通过某些手法可以篡改本地储存的信息来欺骗客户端

  • 支持跨域名访问

# session

  • 什么是 Session？

    Session 代表着服务器和客户端一次会话的过程。Session 对象存储特定用户会话所需的属性及配置信息。这样，当用户在应用程序的 Web 页之间跳转时，存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。当客户端关闭会话，或者 Session 超时失效时会话结束。

  • 采用的是在服务端保持状态的方案： 即运行在服务端

  • 没有大小限制和服务器内存大小有关

  • 过多会增加服务器压力

  • 仅在他所在的域名内有效

1、用户第一次请求服务器的时候，服务器根据用户提交的相关信息，创建创建对应的 Session ，请求返回时将此 Session 的唯一标识信息 SessionID 返回给浏览器，浏览器接收到服务器返回的 SessionID 信息后，会将此信息存入到 Cookie 中，同时 Cookie 记录此 SessionID 属于哪个域名。

2、当用户第二次访问服务器的时候，请求会自动判断此域名下是否存在 Cookie 信息，如果存在自动将 Cookie 信息也发送给服务端，服务端会从 Cookie 中获取 SessionID，再根据 SessionID 查找对应的 Session 信息，如果没有找到说明用户没有登录或者登录失效，如果找到 Session 证明用户已经登录可执行后面操作。

3、根据以上流程可知，SessionID 是连接 Cookie 和 Session 的一道桥梁，大部分系统也是根据此原理来验证用户登录状态。

  • 第一种方案，每次请求中都携带一个 SessionID 的参数，也可以 Post 的方式提交，也可以在请求的地址后面拼接 xxx?SessionID=123456…。

  • 第二种方案，Token 机制。Token 机制多用于 App 客户端和服务器交互的模式，也可以用于 Web 端做用户状态管理。

    Token 的意思是 “令牌”，是服务端生成的一串字符串，作为客户端进行请求的一个标识。Token 机制和 Cookie 和 Session 的使用机制比较类似。

    当用户第一次登录后，服务器根据提交的用户信息生成一个 Token，响应时将 Token 返回给客户端，以后客户端只需带上这个 Token 前来请求数据即可，无需再次登录验证。

# 18.2、如何考虑分布式 Session 问题？

  • 在互联网公司为了可以支撑更大的流量，后端往往需要多台服务器共同来支撑前端用户请求，那如果用户在 A 服务器登录了，第二次请求跑到服务 B 就会出现登录失效问题。
  • 分布式 Session 一般会有以下几种解决方案
    • Nginx ip_hash 策略，服务端使用 Nginx 代理，每个请求按访问 IP 的 hash 分配，这样来自同一 IP 固定访问一个后台服务器，避免了在服务器 A 创建 Session，第二次分发到服务器 B 的现象。
    • Session 复制，任何一个服务器上的 Session 发生改变（增删改），该节点会把这个 Session 的所有内容序列化，然后广播给所有其它节点。
    • 共享 Session，服务端无状态话，将用户的 Session 等信息使用缓存中间件来统一管理，保障分发到每一个服务器的响应结果都一致。
  • 极高的扩展性和可用性
  • 不需要使用大量服务器资源
  • 简单性 Cookie 是一种基于文本的轻量结构，包含简单的键值对，结构简单。
# session
  • 易于读写
  • 易于站点的用户化

# 18.4：cookie 和 session 常见攻击方式及解决方案

  • 具体
    • 直接访问 Cookie 文件查找想要的机密文件
    • 进行 Cookie 信息传递时被截取
    • 攻击者伪造 Cookie 信息，客户端获取后进行操作
  • 解决方案
    • 不要早 Cookie 中保存敏感信息
    • 不要早 Cookie 中保存没有经过加密的或者容易被解密的敏感信息
    • 对从客户端获取得的 Cookie 信息进行严格校验
# session
  • 具体
    • 会话劫持（通过获取用户 Session ID 后，使用该 Session ID 登录目标账号）
    • 会话固定（诱骗受害者使用攻击者指定的会话标识 Session ID 的攻击手段）
  • 解决方案
    • 使用 User-Agent 检测请求的一致性，设置 HttpOnly，可以防止客户端脚本访问这个 Cookie，从而有效的防止 XSS 攻击；关闭透明化 Session ID；更改 Session 名称
    • 用户登录时生成新的 Session ID

# 19、谈谈对 WebSocket 的认识

创建原因：HTTP 协议只能由客户端发起 单向连接

# 19.1、是什么？

  • HTML5 中的协议，支持持久连接
  • WebSocket 是基于 HTTP 协议的 ： 借用了 Http 协议来完成一部分握手
  • 是真正意义上的双向绑定

# 19.2、WebSocket 区别 http 协议

  • http 协议 不支持持久性连接
  • HTTP1.1 中出现 keep-alive，合并多个 http 请求
  • HTTP 的生命周期通过 Request 来界定 ： 一个 Request 对应一个 Response
  • Response 是被动的，不能主动发起

# 19.3、如何模拟双向通信

  • 短轮询
    • 客户端定时向服务器发送 Ajax 请求，服务器接到请求后马上返回响应信息并关闭连接。
    • 优点 ： 后端编写容易
    • 缺点 ： 请求中大半是无用，浪费宽带和服务器资源
    • 适用 ： 小型应用
  • 长轮询
    • 客户端向服务器发送 Ajax 请求，服务器接到请求后 hold 住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。
    • 优点 ：在无消息的情况下不会频繁的请求，耗费资源小
    • 缺点
      • 服务器 hold 连接会消耗资源
      • 返回数据顺序无保证，难于管理维护
  • 长连接
    • 在页面嵌入一个隐藏 iframe，将这个隐藏 iframe 的 src 属性设为对一个长连接的请求或是采用 xhr 请求，服务器端就能源源不断的往客户端输入数据
    • 优点
      • 消息及时到达，不发无用请求
      • 管理起来也相对方便
    • 缺点：服务器维护一个长连接会增加开销

# 20、渲染 | 了解网页渲染流程与优化技巧

# 20.1、生成网页步骤

  • HTML 代码转成 DOM（Document Object Model）： 解析 HTML 生成
  • CSS 代码转化成 CSSOM（CSS Object Model）： 解析 CSS 生成
  • 结合 DOM 和 CSSOM 生成一颗渲染树： 包含每个节点的视觉信息
  • 生成布局（layout）： 将所有渲染树的所有节点进行平面合成
  • 将布局绘制（paint）在屏幕上

# 20.2、重新渲染 （重排【回流】和重绘）

# 重排（回流）

重新生成布局

# 布局改了就一定会重排
  1. 添加或删除可见的 DOM 元素
  2. 元素位置改变
  3. 元素尺寸改变 —— 边距、填充、边框、宽度和高度
  4. 内容改变 —— 比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
  5. 页面渲染器初始化
  6. 浏览器窗口尺寸改变 ——resize 事件发生时；

重排一定需要重绘

var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 重绘
s.backgroundColor = "#ccc"; // 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));// 添加node，再一次 回流+重绘

# 重绘

只是影响元素的外观，风格，而不会影响布局的，比如 background-color。则就叫称为重绘。

# 重新渲染出现情况

  • 修改 DOM
  • 修改样式表
  • 用户事件
    • 鼠标悬停
    • 页面滚动
    • 输入框输入文字
    • 改变窗口等

# 21、性能优化技巧

回答性能优化问题时：分两层阐述：

1、底层：重排【回流】和重绘层级 — 下面针对此层

2、应用层（雅虎军规 35 条）— 在性能优化专题会仔细分析。

# 21.1、减少重新渲染频率

  1. DOM 的多个读 / 写操作应该放在一起。

    • 不要两个读操作之间，加入一个写操作

  2. 如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候又要重排

  3. 不要一条条地改变样式

    • 通过改变 class，csstext，一次改变样式

  4. 尽量使用离线 DOM，而不是真实的网页 DOM，来改变元素样式

    • 例如

      • 操作 Document Fragment 对象

      • cloneNode 克隆节点操作后替换

  5. 使用虚拟 DOM 的脚本库，比如 React，vue 等

  6. 很新颖（嘻嘻）

  • 设为 dispaly：none（需要一次重排和重绘）后进行 n 次操作，最后再恢复显示（需要一次重排和重绘）
  • 用两次重新渲染，取代了可能 n（可能是个大树）次的重新渲染
  • 只有在必要的时候，才将元素的 display 属性为可见
  • visibility:hidden 的元素只对重绘有影响，不影响重排
  • 隐藏后不可见的元素读写不影响重排和重绘

  1. 使用调整重新渲染的方法 ： 可以大幅度提高网页性能

    • 使用 window.requestAnimationFrame () 方法
      • 作用：将某些代码放到下一次重新渲染时执行
      • 适用
        • 页面滚动事件的监听函数
        • 网页动画
    • 使用 window.requestdleCallback () 方法
      • 暂时就 Chrome 支持

# 21.2、减少渲染成本

  • position 属性为 absolute 或 fixed 的元素，重排的开销会比较小

    因为它们脱离文档，不用考虑他们对其他元素的影响，所以用 absolute，而少用 float

# 22、HTML5 概括

HTML（超文本标记语言 HyperText Markup Language）的最新本版本

# 新增特性

  1. 语义化元素 推荐使用

  2. 新的通讯方式

    • WebSockets
    • 重新绘制界面 布局没改，样式改了，需要重绘，不一定重排

  3. 缓存

    • 应用程序缓存
      • 使用方式
        • <html manifest=“demo.appcache” >
        • manifest 文件的建议的文件扩展名是：".appcache"
      • 优点
        • 离线浏览 - 用户可在应用离线时使用它们
        • 更快速度 - 已缓存资源加载得更快
        • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
    • 浏览器缓存
      • Web Storage
        • localStorage
        • sessionStorage

  4. 多媒体

    • audio
    • video

  5. 3D & 图像

    • canvas
    • WebGL：用 canvas 元素中的 API 实现 3D 图像功能
    • svg ：基于 XML 直接嵌入到 HTML 中的矢量图形格式

  6. 性能 & 集成

    • Web workers

      Web Worker 是为了解决 JavaScript 在浏览器环境中没有多线程的问题。正常形况下，浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态，而 HTML5 的 Web Worker 就是为了解决这个问题，提升程序的执行效率。 所以 Web Worker 的最佳使用场景是执行一些开销较大的数据处理或计算任务。

    • web worker 的创建

      • worker 是一个对象，通过构造函数 Worker 创建，参数就是一个 js 文件的路径；文件中的 js 代码将运行在主线程之外的 worker 线程；
      • 例如：var myWorker = new Worker (‘worker.js’);

    • History API ：允许对浏览器历史记录进行操作

    • XMLHttpRequest Level 2 (（XHR）对象可以与服务器交互。)

      新版本功能：

      • 可以设置 HTTP 请求的时限
      • 可以使用 FormData 对象管理表单数据。
      • 可以上传文件。
      • 可以请求不同域名下的数据（跨域请求）
      • 可以获取服务器端的二进制数据
      • 可以获得数据传输的进度信息

      老版本的缺点：

      • 只支持文本数据的传送，无法用来读取和上传二进制文件。
      • 传送和接收数据时，没有进度信息，只能提示有没有完成。
      • 受到 "同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据。

    • contentEditable

      • 让元素的区域可编辑
      • 已标准化

    • requestAnimationFrame ： 允许控制动画渲染以获得更优性能

    • 拖放 API draggable 属性、拖放事件 (dragstart、drag、dragenter、dragleave、dragover、drap、dragend)、dataTransfer 对象

    • 全屏 API

    • 在线和离线事件

  7. 设备访问

    • carnera ：能够操作计算机的摄像头
    • 地理位置定位 Geolocation
    • 触控事件
    • 检测设备方向 ：横向还是竖向
Donate
  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 2015-2021 zhou chen
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信