0%

html高频考题

发表于 分类于 Valine：

整理了一下常见的HTML的问题

DOCTYPE 的作用是什么?

声明位于 HTML 文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。

DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。

标准模式与兼容模式各有什么区别?

标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。

在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

  • 从属关系区别。 @import 是 CSS 提供的语法规则，只有导入样式表的作用；link是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性、引入网站图标等。
  • 加载顺序区别。加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。
  • 兼容性区别。@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题。
  • DOM 可控性区别。可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于DOM 方法是基于文档的，无法使用 @import 的方式插入样式。
  • link方式的样式的权重 高于@import的权重.

从敲入 URL 到渲染完成的整个过程

  • 用户输入 url 地址，浏览器根据域名寻找 IP 地址
  • 浏览器向服务器发送 http 请求，如果服务器段返回以 301 之类的重定向，浏览器根据相应头中的 location 再次发送请求
  • 服务器端接受请求，处理请求生成 html 代码，返回给浏览器，这时的 html 页面代码可能是经过压缩的
  • 浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染
  • 解析渲染该过程主要分为以下步骤：解析 HTML、构建 DOM 树、DOM 树与 CSS 样式进行附着构造呈现树
  • 布局
  • 绘制

什么是 DOM 和 BOM？

  • DOM 指的是文档对象模型，它指的是把文档当做一个对象来对待，这个对象主要定义了处理网页内容的方法和接口。
  • BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。

BOM 的核心是 window, window 对象含有 location 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对象的子对象。

浏览器的渲染原理(渲染引擎)

  • 首先解析收到的文档，根据文档定义构建一颗 DOM 树，DOM 树是由DOM 元素及属性节点组成的；
  • 然后对 CSS 进行解析，生成 CSSOM 规则树；
  • 根据 DOM 树和 CSSOM 规则树构建 Render Tree。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和DOM 对象相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。
  • 当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情就是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
  • 布局阶段结束后是绘制阶段，比那里渲染树并调用对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。

所有的 html 解析完成之后再去构建和布局 render tree。它是解析完一部分内容就显示一部分内容，同时可能还在网络下载其余内容。

浏览器解析过程(JS 引擎)

JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时，HTML解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。

也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。

什么是重绘和回流?

重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background color，我们将这样的操作称为重绘。
回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。

常见引起回流属性和方法:

任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。

  1. 添加或者删除可见的 DOM 元素；
  2. 元素尺寸改变——边距、填充、边框、宽度和高度
  3. 内容变化，比如用户在 input 框中输入文字
  4. 浏览器窗口尺寸改变——resize 事件发生时
  5. 计算 offsetWidth 和 offsetHeight 属性
  6. 设置 style 属性的值
  7. 当你修改网页的默认字体时。

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。

Canvas 和 SVG 有什么区别?

Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的，因此当我们对 Canvas 进行缩放时，会出现锯齿或者失真的情况。

SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保存的是图形的绘制方法，因此当 SVG 图形缩放时并不会失真。

浏览器架构

  • 用户界面
    • 主进程
    • 内核
      • 渲染引擎
      • JS 引擎
        • 执行栈
    • 事件触发线程
      • 消息队列
        • 微任务
        • 宏任务
    • 网络异步线程
    • 定时器线程

常用的 meta 标签

点击跳转

disabled 和 readonly 的区别？

  • disabled 指当 input 元素加载时禁用此元素。input 内容不会随着表单提交。
  • readonly 规定输入字段为只读。input 内容会随着表单提交。
  • 无论设置 readonly 还是 disabled，通过 js 脚本都能更改 input 的 value

扫描二维码登录网页是什么原理，前后两个事件是如何联系的？

浏览器获得一个临时 id，通过长连接等待客户端扫描带有此 id 的二维码后，从长连接中获得客户端上报给 server 的帐号信息进行展示。并在客户端点击确认后，此前获得的令牌或丢失、或失效，对授权过程形成有效的安全防护。

get 请求传参长度的误区

误区：我们经常说 get 请求参数的大小存在限制，而 post 请求的参数大小是无限制的。

实际上 HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对 get 请求参数的限制是来源与浏览器或 web 服务器，浏览器或 web 服务器限制了 url 的长度。

  1. HTTP 协议未规定 GET 和 POST 的长度限制
  2. GET 的最大长度显示是因为浏览器和 web 服务器限制了 URI 的长度
  3. 不同的浏览器和 WEB 服务器，限制的最大长度不一样
  4. 要支持 IE，则最大长度为 2083byte，若只支持 Chrome，则最大长度8182byte

(…未完待续)

-------------本文结束感谢您的阅读-------------
没办法,总要恰饭的嘛~~