1、HTML语义化
什么是语义化：根据内容的结构化（内容语义化），选择合适的语义化标签如<header><footer>等（代码语义化），以便于浏览器、搜索引擎和开发者理解和处理。
为什么要语义化：
①代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构。
②有利于SEO: 爬虫依赖标签来确定关键字的权重，语义化标签能让搜索引擎更容易理解网页内容，帮助爬虫抓取更多的有效信息，让网页在搜索引擎中的排名更加靠前。
③提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
④便于团队开发和维护: 语义化使得代码更具有可读性，便于理解和维护。
⑤有利于前端无障碍: 如屏幕阅读器、盲人阅读器、移动设备等以有意义的方式渲染网页。
标签分类
- 行内元素：包括
<a>、 <b>、<span>、<img>、<input>、<button>、<select>、<strong>等标签元素，其默认宽度是由内容宽度决定的。- 块级元素：包括
<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>、<h2>、<h3>、<h4>、 <h5>、 <h6>、<p>、<table>等标签元素，其默认宽度为父元素的100%。- 空元素：例如
<br>、<hr>、 <link>、<meta>、<area>、 <base>、<col> 、<command>、<embed>、 <keygen>、 <param>、<source>、<track>等不能显示内容，甚至不会在页面中出现，但是对页面的解析有着其他重要作用的元素。
2、浏览器渲染HTML的过程
- webkit渲染引擎首先通过网络获得所请求文档的内容。
- HTML文件被HTML解析器解析成对应的DOM树，CSS样式文件被CSS解析器解析生成对应的样式规则树。
- DOM树与CSS样式集解析完成后，附着合成一个渲染树。
- 布局渲染树，计算节点信息，即根据渲染树计算每个节点的几何信息。
- 渲染绘制，即根据计算完成的节点信息绘制整个页面。
3、cookie、sessionStorage和localStorage的区别
相同：
- 都是存储在浏览器本地的；
- 都遵循同源原则（SessionStorage还限制必须是同一个页面）
不同：
- 写入方式不同：cookie由服务器端写入，而SessionStorage、 LocalStorage都由前端写入。
- 生命周期不同：cookie的有效时间是由服务器端设置好的；LocalStorage是写入就一直存在，除非手动清除；SessionStorage是浏览器窗口关闭时自动清除。
- 存储空间大小不同：cookie大概4KB，SessionStorage、 LocalStorage大概5M。
- 前端给后端发送请求时会自动携带Cookie中的数据，但是SessionStorage、 LocalStorage不会。
应用：
- cookie 存储登陆验证信息（token/SessionID）
- SessionStorage 存储不易变动数据
- LocalStorage 检测用户是否是刷新进入页面（播放器恢复进度条）
4、HTTP1和HTTP2的区别
HTTP1：短连接，每一次请求都需要重新建立TCP连接（不支持断点续传）。前一个请求响应到达后才能发下一个请求，可能造成阻塞。
HTTP1.1：长连接，管道化，发送请求队列实现批量传输，响应返回需要按顺序。实现断点续传，可要求服务器从文件bytes字节处开始传送。增加host端口字段。加入了缓存处理（强缓存和协商缓存）。
HTTP2：
- 采用二进制帧封装
- 传输变成多路复用，所有的请求都是通过一个 TCP 连接并发完成
- 流量控制算法优化：滑动窗口算法
- 服务器端推送
- 首部压缩
- 优先级
- 使用HTTPS
HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密，让数据传输更加安全。
HTTP在HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
5、三次握手和四次挥手
三次握手：
- 客户端向服务器发送SYN包
- 服务器返回SYN+ACK包
- 客户端接收确认后返回ACK包，服务器接收确认则连接成功。
四次挥手：
- 当客户端的数据都传输完成后，客户端向服务端发出FIN连接释放报文
- 服务端收到FIN报文后给客户端回复ACK确认报文，进入关闭等待状态
- 服务端将数据发送完毕后向客户端发出FIN和ACK连接释放报文
- 客户端收到服务端发的FIN报文后，向服务端发出ACK确认报文
6、强缓存和协商缓存，http和https的状态码区别
- 强缓存：基于过期时间（Expires）和缓存标识（Cache-Control）的策略。当浏览器发起请求时，会先检查本地缓存是否过期。如果缓存未过期，浏览器直接从本地缓存中获取资源，不发送请求到服务器，返回状态码200 from memory cache / from disk cache。
- 协商缓存：基于实体标签（ETag）和最后修改时间（Last-Modified）的策略。当浏览器发起请求时，会发送资源的实体标签和最后修改时间等信息到服务器，由服务器验证资源是否已变更，返回的状态码为 304。
301是请求资源的 URL 已永久更改，302是所请求资源的 URI 已暂时更改
7、网络分层架构
1.应用层： 文件传输，电子邮件，文件服务，虚拟终端 TFTP，HTTP，SNMP，FTP，SMTP，DNS。传输报文。
2.表示层： 数据格式化，代码转换，数据加密,Telnet。
3.会话层： 解除或建立与别的接点的联系，DNS。
4.传输层： 提供端对端的接口 TCP，UDP，传输报文段。
5.网络层： 为数据包选择路由 IP，ICMP，RIP，OSPF，BGP，IGMP。多层交换机，防火墙。
6.数据链路层： 传输有地址的帧以及错误检测功能 SLIP，CSLIP，PPP，ARP，RARP，MTU，二层交换机。
7.物理层： 以二进制比特流数据形式在物理媒体上传输数据 ISO2110，IEEE802，IEEE802.2，网线，中继器，集线器。
8、跨域问题产生原因及解决方案
原因：违反了同源策略（协议+域名+端口都相同才算同源）。
- JSONP：利用 <script src="http://xxx.cn/api/jsonp?callback=fn"> 不受浏览器同源策略限制的原理，把请求拼接一个回调函数 fn ，后端会把数据和回调函数名称拼接成函数调用的形式返回，前端再解析这个回调函数即可获取到数据。
- CORS：后端设置 Access-Control-Allow-Origin 响应头，可以自定义跨域白名单。
- Nginx反向代理：proxy_pass
- Window.postMessage：页面和其打开的新窗口的数据传递；多窗口之间消息传递；页面与嵌套的 iframe 消息传递。
- WebSocket：本身不存在跨域问题
9、严格模式和混杂模式
- 严格模式：标准模式，浏览器按照
W3C标准解析代码- 混杂模式：怪异模式/兼容模式，浏览器按照
自己的方式解析代码区分办法就是看 DOCTYPE 正常不，H5有<!DOCTYPE html>所以没有严格模式和混杂模式之分。
区别：
严格模式：
- 元素的宽高，指的是元素内容的宽度和高度
- 给span等行内元素设置wdith和height都不会生效
- 如果父元素没有设置高度，子元素设置一个百分比的高度是无效的
- 使用
margin:0 auto可以使元素水平居中混杂模式：
- 宽高包含了padding和borde
- 给行内元素设置wdith和height会生效
- 用 text-align 使元素水平居中
- 设置图片的padding会失效
- Table中的字体属性不能继承上层的设置
- white-space:pre（保留空白）会失效
10、页面的三层结构
结构层（structural layer）：HTML标签
表示层（presentation layer）：如何显示有关内容。css样式。
行为层（behavior layer）内容应该如何对事件做出反应。这是 Javascript 语言和 DOM 主宰的领域。
11、TCP和UDP的区别
TCP（Transmission Control Protocol）和UDP（User Datagram Protocol）都是传输层协议，但它们在多个方面存在显著的差异。以下是TCP和UDP之间的主要区别：
连接性：
- TCP是面向连接的协议。在发送数据之前，必须首先建立连接，数据传输结束后还要释放连接。这提供了数据的可靠性保障。
- UDP则是无连接的协议。它只需要发送数据即可，无需建立和维护连接。这提高了数据传输的效率，但降低了数据的可靠性。
可靠性：
- TCP提供了可靠的传输服务。它通过序列号、确认机制、重传控制等确保数据的完整性和顺序性。如果数据包在传输过程中丢失或损坏，TCP会要求重新发送丢失的数据包。
- UDP则不保证数据的可靠性。它不提供确认机制，也不进行重传控制。因此，如果数据包在传输过程中丢失或损坏，UDP不会进行任何处理。
头部开销：
- TCP的头部开销较大，最少需要20字节（不含选项），TCP还含有一个可变长度的选项部分，最多可达40字节。
- UDP的头部开销较小，只有8个字节的固定长度。这使得UDP在处理大量小数据包时具有较高的效率。
传输效率：
- 由于TCP需要建立和维护连接，以及进行确认和重传控制等，其传输效率相对较低。但这也确保了数据的可靠性。
- UDP无需建立和维护连接，也不进行确认和重传控制等，因此其传输效率较高。但这也使得UDP在传输数据时可能面临数据丢失或损坏的风险。
应用场景：
- TCP适用于需要可靠传输的场景，如文件传输、邮件发送等。
- UDP适用于对实时性要求较高且对数据可靠性要求不高的场景，如实时视频传输、在线游戏等。此外，DNS查询也使用UDP协议，因为它对实时性要求较高且数据量较小。
流量控制：
- TCP具有流量控制功能，可以根据接收方的接收能力动态调整发送方的发送速率，以避免数据丢失和拥塞。
- UDP则没有流量控制功能，发送方会按照固定的速率发送数据，不考虑接收方的接收能力。
拥塞控制：
- TCP具有拥塞控制功能，可以通过慢启动、拥塞避免、快重传和快恢复等算法来避免网络拥塞。
- UDP则没有拥塞控制功能，当网络出现拥塞时，UDP数据包可能会被丢弃。
综上所述，TCP和UDP在连接性、可靠性、头部开销、传输效率、应用场景、流量控制和拥塞控制等方面存在显著的差异。选择使用哪种协议取决于具体的应用场景和需求。
扫一扫
1007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
