【HTML/CSS面经】

HTML

1. script标签中的async和defer的区别

当浏览器在解析html的时候一旦遇到了script标签，那么就会停下来把script标签内的内容给执行掉，如果script标签引入的是外部文件，就需要等待下载和执行完才会回去继续往下解析。如果外部文件刚好是在一个网络情况较差的服务器上，那整个网站的加载都会带来很大影响。这就是script标签同步解析带来的阻塞弊端，从而影响页面加载性能。

📌async异步 和 defer推迟：两者都是异步加载js。
不同点：async是js一加载完就会马上执行，不管html是否解析完毕，可能出现阻塞；而defer要等到html解析完毕之后才执行，不会阻塞html解析。

2. H5新特性

html5是一种描述性的标记语言。

（1 标签语义化

（2 表单功能增强

可以输入类型type(如email、date、url、tel)
新属性和功能：placeholder：输入框提示文本、required：必填字段、
autofocus：自动聚焦、pattern：正则验证等

（3 音频和视频标签

添加<audio>和<vedio>标签
属性有：autoplay：自动播放（许多浏览器已限制）、loop：循环播放
muted：静音、preload：预加载等

（4 canvas和svg绘画

（5 地理位置获取

（6 元素拖动API

• 设置元素 draggable="true"

• 监听拖动事件：dragstart, drag, dragend

• 定义放置区域并监听：dragenter, dragover, dragleave, drop

（7 Web Worker

Web Worker 允许在后台线程中运行 JavaScript，不会阻塞 UI。

（8 Web Storage

• 提供了比 cookies 更强大的客户端存储机制。Web Storage 更适合存储纯客户端的数据，而 Cookie 更适合需要在客户端和服务器之间传递的小量数据（如身份验证令牌）

• 两种存储方式：

  localStorage - 永久存储，除非手动删除

  sessionStorage - 会话期间有效，关闭标签页后删除

cookie:

1. 容量小4kb左右，可设置过期时间
2. 是每次 HTTP 请求都会自动携带（通过请求头 Cookie）
   服务器可以通过响应头 Set-Cookie 设置客户端的 Cookie
   3.适合使用 Cookie 的情况：
   (1) 需要与服务器交互的小量数据（如会话 ID）
   (2) 需要设置过期时间的场景
   (3) 需要跨子域共享数据的场景

（9 Web Socket

WebSocket 提供了全双工、持久化的网络通信协议，适合实时应用。
特点：单个 TCP 连接、低延迟通信、服务器可以主动推送数据

3. 浏览器渲染页面

（1.）主要过程：
- DOM树构建：渲染引擎解析HTML文档，将各个元素转换为DOM节点，从而生成DOM树
- CSSOM树构建：解析CSS，将其转化为CSS对象，组装构建成CSSOM树
- 渲染树构建：DOM树和CSSOM树构建完成后，浏览器会根据这两棵树构建除渲染树
- 页面布局：渲染树完成后，元素的位置关系以及样式确定，这时浏览器会计算出所以元素的大小和绝对位置
- 页面绘制

4. 重绘和重排

渲染树是动态构建的，DOM节点和CSS节点的改动都可能会造成渲染树的重新构建。也就造成页面的重排（回流）和重绘

• 重排
  当DOM树中几何尺寸的变化（如元素大小，位置，布局方式等），这时渲染树里有改动的节点和受影响的节点都要重新计算。会导致要重新经历页面渲染的整个流程，所以开销很大。

以下操作都会导致页面重排：

页面首次渲染； 浏览器窗口大小发生变化； 元素的内容发生变化； 元素的尺寸或者位置发生变化； 元素的字体大小发生变化； 激活CSS伪类；
查询某些属性或者调用某些方法； 添加或者删除可见的DOM元素。

• 重绘
  当对DOM修改导致样式的变化（如颜色，背景色），则无需重新计算，直接为该元素进行绘制。重绘就是对元素绘制属性的修改。
  相较于重排，省去了布局和分层阶段，所以执行效率相对会高。

下面这些属性会导致重绘：

color、background 相关属性：background-color、background-image 等； outline
相关属性：outline-color、outline-width 、text-decoration；
border-radius、visibility、box-shadow。

注意：当触发重排，一定会触发重绘；但重绘不一定引发重排