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。
注意：当触发重排，一定会触发重绘；但重绘不一定引发重排