HTML5 新特性、语义化
概念： HTML5的语义化指的是 合理正确使用语义化的标签来创建页面结构
语义化标签： header nav main article section aside footer
语义化的优点：
- 在没有css样式的情况下，页面整体也会呈现很好的解构效果
- 增加代码可读性，方便阅读
- 有利于开发和维护，方便其他设备解析（如屏幕阅读器）根据语义渲染网页
- 有利于搜索引擎优化，搜索引擎爬虫会根据不同的标签来赋予不同的权重。
CSS选择器及优先级
选择器
从输入url到页面加载的全过程
1.url 解析
@1 ：地址解析
确定要访问的服务器和路径
协议，登录信息认证，域名，端口号，路径，查询参数，锚点
-
缓存检查
缓存位置：
Memory Cache ： 内存缓存
Disk Cache: 硬盘缓存
打开网页：查找 disk cache 中是否有匹配，如有则使用，如没有则发送网络请求
普通刷新 (F5)：因TAB没关闭，因此memory cache是可用的，会被优先使用，其次才是disk cache
强制刷新 (Ctrl + F5)：浏览器不使用缓存，因此发送的请求头部均带有 Cache-control: no-cache，服务器直接返回 200 和最新内容
浏览器缓存
强缓存 Expires / cache-Control
浏览器对于强缓存的处理： 根据第一次请求资源时返回的响应头来确定的
Expires：缓存过期时间，用来指定资源到期的时间（HTTP/1.0）
Cache-Control：cache-control: max-age=2592000第一次拿到资源后的2592000秒内（30天），再次发送请求，读取缓存中的信息（HTTP/1.1）
两者同时存在的话，Cache-Control优先级高于Expires
客户端检测缓存信息和缓存标识 Expires Cache-Control
有(且未过期)：客户端直接读取渲染缓存信息
没有(或者过期)：客户端重新向服务器发送新的 HTTP请求
返回该请求结果和缓存标识 Cache-control Expires
把请求结果和缓存标识存储到浏览器中
协商缓存 Last-Modified / ETag
协商缓存就是强缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据标识决定是否使用缓存的过程
客户端携带获取缓存标识发送HTTP请求 If-Modified-Since / If-None-Match
服务器根据资源文件是否更新
没更新 返回 304， 通知客户端读取缓存信息
更新过 返回200及最新资源信息，以及 Last-Modified / ETag
200： 直接渲染，并且把最新的结果和表示缓存到本地
304： 从本地缓存中获取内容进行渲染
- DNS 解析
DNS（Domain Name System）域名解析是将域名转换为 IP 地址的过程。
当用户在浏览器中输入一个网址时，例如 www.example.com，浏览器会首先将这个域名发送给 本地 DNS 服务器，进行解析。
DNS 解析的过程大致如下：
@1. 本地 DNS 缓存查询：浏览器首先会检查本地 DNS 缓存中是否有该域名对应的 IP 地址，如果有，则直接返回该 IP 地址，不需要进行后续的查询。
@2. 递归查询：如果本地 DNS 缓存中没有对应的记录，本地 DNS 服务器会向根域名服务器发起递归查询。根域名服务器负责返回顶级域名服务器的地址，如 .com、.org、.net 等。
@3顶级域名服务器查询：本地 DNS 服务器收到根域名服务器返回的顶级域名服务器地址后，会向顶级域名服务器发送查询请求。顶级域名服务器负责返回二级域名服务器的地址，如 example.com 的域名服务器。
@4 权限域名服务器查询：本地 DNS 服务器收到顶级域名服务器返回的域名服务器地址后，会向权限域名服务器（即存储了该域名具体信息的服务器）发送查询请求。权限域名服务器返回该域名对应的 IP 地址。
返回结果：最终，本地 DNS 服务器将获取到的 IP 地址返回给浏览器，浏览器可以使用该 IP 地址建立连接并访问网站。
- TCP 三次握手 第一次握手：客户端发送一个 SYN=1(请求建立连接)，seq=x(随机序列号)的数据包到服务器端口
第二次握手： 服务端收到后，返回一个带有 SYN=1,ACK=1(确定字符),seq=y,ack=x+1(上一次的seq+1)的响应数据包到客户端，已传达确认信息
第二次握手，有服务器发起，告诉客户端我准备接受了，你可以发送了
第三次握手：客户端再回传一个带 ACK=1,seq=x+1，ack=y+1的数据包，代表握手结束
第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受了
然后双方就建立连接，开始传输数据
- 数据传输 连接建立成功了，浏览器向服务器发送 HTTP 请求报文，获取想要的数据
请求报文
1.请求行
请求方法，请求url,http协议等
2.请求头
浏览器的一些基础信息告诉服务器
空行
请求体
当使用post或者put方法是，需要传递数据，就放在请求正文中
响应报文
1. 状态行
http版本一些字段，状态码和状态码描述
2. 响应头
用于指示浏览器如何处理响应体
3. 空行
4. 响应体
返回客户端所需要的数据
- TCP四次挥手 任何一方都可以在数据传送结束后发出连接释放的通知，所以主动发起关闭请求可以是客户端，也可以是服务端
第一次挥手：主动方发送TCP连接释放报文段（FIN=1 ACK=1 seq=u ack=v），并进入终止等待1（FIN-WAIT-1）状态，并且停止发送数据
第二次挥手： 接收方收到TCP连接释放报文段后，会发送一个确认报文段,（ACK=1 seq=v ack=u+1）并进入关闭等待（CLOSE-WAIT）状态
第三次挥手：接收方将最后的数据发送完毕后，就向主动方发送连接释放报文，（ FIN=1 ACK=1 seq=w ack=u+1）
第四次挥手： 主动方收到接收方的连接释放报文后，发出确认报文（ACK=1 seq=w+1），接收方收到确认报文段后就进入关闭状态。主动发等待2MSL（MSL）后进入关闭状态
- 页面渲染
当我们从服务器获取HTML代码之后，浏览器需要按照代码规则，绘制出对应的页面
@1 创建“DOM TREE”
GUI渲染线程会自上而下，一行行的渲染解析页面中的代码；当渲染到底部的时候，浏览器已经规划出：当前页面的结构和层级嵌套关系(节点和节点之间的关系) -> 这就是DOM树
@2 创建“CSSOM TREE”
在DOM TREE生成后，浏览器把(从服务器获取的)样式代码进行渲染，生成CSSOM树!
在GUI渲染过程中，我们会遇到、、@import、、...等标签，遇到不同的标签有不同的处理方案！！
@3 把“DOM TREE”和“CSSOM TREE”合并在一起，生成“RENDER TREE”
@4 Layout布局：根据视口大小，计算出每一个节点在视口中的具体位置及大小等
@5 分层：规划出对应的层级，以及节点该在哪一个层级上「脱离文档流」
@6 Painting绘制：按照所有解析出来的规则，一层层的开始绘制
浏览器内容：
HTTP 和 HTTPS
http 是超文本传输协议，信息是明文传输，https 协议要比http协议安全
https 是以安全为目标的HTTP通道，即 http 下加入了 SSL层进行加密。其作用是建立一个信息安全通道，来确保数据的传输，确保网站的真实性。
http协议的默认端口号 80， https的默认端口号 443
http 的连接很简单，是无状态的。
https协议需要ca证书，费用较高；ssl证书需要绑定域名
http/1 的缺陷
延迟——对头阻塞
`队头阻塞`是指当顺序发送的请求序列中的一个请求因为某种原因被阻塞时，
在后面排队的所有请求也一并被阻塞，会导致客户端迟迟收不到数据
无状态特性-阻碍交互
无状态是指协议对于连接状态没有记忆能力
明文传输-不安全性
所有`传输的内容都是明文`，户端和服务器端都无法验证对方的身份
不支持服务端推送
http/2
新的二进制格式3
http/1 是基于文本的，http/2采用的事二进制格式，实现方便且
header压缩
http/1 的 header带有大量信息，而且每次都要重复发送，
HTTP/2使用 encoder来减少需要传输的header大小
服务端推送
例如我的网页有一个style.css的请求，在客户端收到 style.css数据的同时，
服务端会将style.js的文件推送给客户端
多路复用
多个请求可同时在一个连接上并行执行，某个请求任务耗时严重，不会影响到其它连接的正常执行
GET和POST有什么区别
请求参数的位置
get请求的请求参数会附加在url之后，参数之间使用 & 连接。多个参数会造成
url长度增加，而post请求的参数则包含在请求体重
请求长度的限制
由于get请求的参数附加在url之后，因此其请求长度受限于浏览器对URL长度的限制
安全性
get请求的参数会暴露在URL中，而post请求的参数放在请求体中
缓存
get请求可以被浏览器缓存，可以通过点击后退活刷新按钮来重复执行。
http状态码有哪些？并代表什么意思？
1xx
101 ws升级协议中有
2xx
200 请求成功
201 请求已经被实现，并因此创建了一个新的资源
204 服务器成功处理了请求，但是没有返回任何内容
3xx
301 请求的资源已被永久移动到新的 url 上
302 请求的资源现在临时从不同的url响应请求
304 协商缓存，资源没有改变（客户端已经执行了GET请求，但是文件未发生变化）
4xx
400 服务器无法理解请求
401 请求要求进行身份验证
403 服务器理解请求，但拒绝执行它
404 服务器无法找到请求的资源
405 请求中指定的方法不被允许
5xx
500 服务器遇到了一个未曾预料的情况，导致其无法完成对应请求的处理
501 服务器不支持当前请求所需要的某个功能
503 由于临时的服务器维护或者过载，服务器当前无法处理请求
loader和plugins的区别
loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中；
plugin赋予了webpack各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决 loader无法实现的其他事。
在运行时机上，loader 运行在打包文件之前；plugin则是在整个编译周期都起作用。
在配置上，loader在module.rules中配置，作为模块的解析规则，类型为数组。每一项都是一个 Object，内部包含了 test(类型文件)、loader、options (参数)等属性；
plugin在 plugins中单独配置，类型为数组，每一项是一个 plugin 的实例，参数都通过构造函数传入。
常见的loader
vue-loader: 加载编译Vue组件
url-loader: 处理图片和字体
image-loader: 加载并且压缩图片文件
less-loader: 加载并编译LESS文件
css-loader: 加载css，必须配合使用 style-loader
style-loader: 用于将css 编译完成后的样式，挂载到页面的style标签上
postcss-loader： 一般配合autoprefixer 插件自动补齐css3前缀
babel-loader: 将es6转换成es5
常见的plugin有哪些
BundleAnalyzerPlugin： 包分析工具
HtmlWebpackPlugin: 快速创建HTML文件
CleanWebpackPlugin: 目录清理
CompressionWebpackPlugin: 准备好用指定格式传送的压缩版资源包
MinCssExtractPlugin: 为每个包含cssde JS文件创建一个css文件
TerserPlugin: 压缩js, warning,drop_debugger,drop_console
CommonsChunkPlugin：提取chunk之间的公共模块用以共享
HotModuleReplacementPlugin: 启用热更新 HMR
如何提高webpack的构建速度
1.代码压缩
js压缩： terser-webpack-plugin
css压缩： css-minimizer-webpack-plugin
html压缩： HtmlWebpackPlugin插件来生成HTML模版
2. 图片压缩
image-webpack-plugin
3. tree shaking
消除死代码，依赖ES Module 的静态语法分析（不执行任何代码，可以明确知道模块的依赖关系）。在webpack实现 TreeShaking 有两种方案
usedExports通过标记某些函数是否被使用，之后通过 Terser 来进行优化的
sideEffects； 跳过整个模块、文件，直接查看该文件是否有副作用
4. 减少打包域
排除webpack 不需要解析的模块，即在loader的时候，在尽量少的模块中去使用，可以借助include 和 exclude 这两个参数，规定loader 只在哪些模块应用和在哪些模块不应用
5. 减少ES6 转为 ES5的冗余代码
使用bable-plugin-transform-runtime 插件
6. 提取公共代码
通过配置COMMONSChunkPlugin插件，将多个页面的公共代码抽历程单独的文件
7.splitChunks
通过optimization中使用splitchunks进行拆分包,cacheGroups
8. 代码懒加载
当异步加载的文件比较大时，配合使用preload和prefetch
preload: 提前加载后面用到的关键资源，通过 rel和as属性
<link rel='preload' href='path/to/resource' as="script(style/font)">
prefetch:浏览器空闲的时候进行资源的加载
<link rel='prefetch' href='path/to/resource'>
