Skip to main content

html

DOCTYPE 有什么用 √✨​

DOCTYPE 是一种文档声明类型

它主要作用是告诉浏览器的解析器，应该以什么样的渲染模式来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚至 JavaScript 脚本的解析。它必须声明在文档的第一行。

标准模式和怪异模式 √✨​

浏览器渲染页面的两种模式：标准模式和怪异模式。

  • 标准模式：以浏览器支持的最高标准运行，W3C 标准的盒模型
  • 怪异模式：兼容旧版浏览器的标准运行，IE 盒模型

如何提供包含多种语言内容的页面 √✨​

分为 2 种方式实现

第一种是客户端：客户端将不同语言写成不同 html，或者写成不同 JSON，在同一 html 通过变量拿取对应语言的 JSON 数据

第二种是服务端，服务端将不同语言写成 JSON，客户端发起请求时，带上 Aceept-language 请求头，然后服务端拿到对应的 JSON 返回与之匹配的 HTML 文档，HTML 标签中声明了 lang 属性

cookie、sessionStorage、localStorage 的区别 √✨​

  • cookie 由客户端或服务端初始化，手动设置过期时间，会在 HTTP 请求中发送给服务器，容量 4kb
  • localStorage 由客户端初始化，永不过期，容量 5mb
  • sessionStorage 由客户端初始化，当前页面关闭时，容量 5bm

<script>、<script async>、<script defer>的区别 √✨​

  • script：HTML 解析中断，脚本被提取并立即执行。
  • script async：脚本的提取、执行的过程与 HTML 解析过程并行。
  • script defer：脚本的提取与 HTML 解析过程并行，脚本的执行在 HTML 解析完毕后进行。

link 标签位置、script 标签位置 √✨​

为什么最好把 CSS 的<link>标签放在<head></head>之间？为什么最好把 JS 的<script>标签恰好放在</body>之前，有例外情况吗？

把<link>标签放在<head></head>之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。

脚本在下载和执行期间会阻止 HTML 解析。把<script>标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。

HTML 语义化 √✨​

  • 增加代码可读性
  • 让搜索引擎更容易读懂，有利于爬虫读取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重
  • 在没有 CSS 样式下，页面也能呈现出很好的内容结构，代码结构

HTML5 新增元素 √✨​

  • 语义化标签：header，footer，nav，aside，section 等

  • 增强表单，为 input 增加了 color，emial，data ，range 等类型

  • 在存储方面，提供了 sessionStorage，localStorage，和离线存储

  • 多媒体方面新增了音频 audio 和视频 video 标签、画布 canvas 标签，另外还有地理定位，拖放 api

  • 多线程编程方面，新增了 web worker 和 websocket 协议。

BOM √✨​

BOM 是浏览器对象，为了控制浏览器的行为而出现的接口

BOM 的常用属性：

  • window：表示的是浏览器的实例。它在 JS 中则代表全局对象
  • location：提供了当前窗口中加载的文档信息，以及一些导航功能。
  • history：表示当前窗口的历史导航记录
  • navigator：主要用来获取浏览器的版本、名称等信息。
  • screen：获取外部的显示器的信息，比如宽高

web worker √✨​

Web Worker 可以使脚本运行在新的线程中，它们独立于主线程，可以进行大量的计算活动，而不会影响主线程的 UI 渲染。

当计算结束之后，它们可以把结果发送给主线程，用户体验更好更流畅。

浏览器渲染机制 √✨​

  • 浏览器采用流式布局模型
  • 把 HTML 解析成 DOM，把 CSS 解析成 CSSOM，DOM 和 CSSOM 合并产生渲染树
  • 有了渲染树，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上

重排重绘 √​

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/24 https://juejin.cn/post/6844903569087266823#heading-2

  • 重绘

    • 当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

  • 回流

    • 当渲染树中元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
    • 一个元素的回流可能会导致了其所有子元素以及 DOM 中紧随其后的节点及其所有子元素的回流

会导致回流的操作​

  • 页面首次渲染
  • 浏览器窗口大小发生改变
  • 元素尺寸或位置发生改变
  • 元素内容变化（文字数量或图片大小等等）
  • 元素字体大小变化
  • 添加或者删除可见的 DOM 元素
  • 激活 CSS 伪类（例如：:hover）
  • 查询某些属性或调用某些方法

减少重绘回流​

  • css

    • 使用 visibility 替换 display: none
    • 避免使用 table 布局
    • 尽可能在 DOM 树的最末端改变 class
    • 避免设置多层内联样式
    • 对具有复杂动画的元素使用绝对定位
    • 避免使用 CSS 表达式

  • js

    • 避免频繁操作样式
    • 避免频繁操作 DOM
    • 避免频繁读取会引发回流/重绘的属性