【HTML/CSS面经】

HTML/CSS面经

HTML
- [1. script标签中的async和defer的区别](#1. script标签中的async和defer的区别)
- [2. H5新特性](#2. H5新特性)
- - [（1 标签语义化](#（1 标签语义化)
  - [（2 表单功能增强](#（2 表单功能增强)
  - [（3 音频和视频标签](#（3 音频和视频标签)
  - [（4 canvas和svg绘画](#（4 canvas和svg绘画)
  - [（5 地理位置获取](#（5 地理位置获取)
  - [（6 元素拖动API](#（6 元素拖动API)
  - [（7 Web Worker](#（7 Web Worker)
  - [（8 Web Storage](#（8 Web Storage)
  - [（9 Web Socket](#（9 Web Socket)
- [3. 浏览器渲染页面](#3. 浏览器渲染页面)
- [4. 重绘和重排](#4. 重绘和重排)

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:

容量小4kb左右，可设置过期时间

是每次 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。

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