1、说一下http和https

（1）http和https的基本概念

HTTP是超文本传输协议，是互联网上应用最为广泛的一种网络协议。HTTPS可以理解为HTTP的安全版，也就是加密的HTTP。HTTPS协议的主要作用就是建立一个信息安全通道，来确保数组的传输，确保网站的真实性。（2）两者区别？
http传输的数据未加密，明文传输。而https协议是由http协议和ssl协议构建的可进行加密传输和进行身份验证的网络协议，比http安全性高。
使用不同的链接方式，端口也不同，http协议端口为80,https端口为443
https协议需要ca证书，费用较高

（3）https协议的工作原理

客户端使用https url访问服务器，与服务器建立ssl链接。
服务端收到客户端请求后将网站的证书（公钥等）传给客户端。
客户端和服务端协商SSL加密等级，建立会话密钥，然后通过公钥加密会话密钥，并传送给服务端。
服务端通过自己的私钥解密出会话密钥。
服务器通过会话密钥加密与客户端之间的通信。

（4）https协议优点

使用https协议可认证用户和服务器，确保数据发送到正确的客户机和服务器。
比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。

（5）https协议的缺点

https握手阶段比较费时，会使页面加载时间延长50%，增加10%~20%的耗电。
缓存不如http高效，会增加数据开销。
ssl证书需要钱，功能越强大证书费用越高。
ssl证书需要绑定IP，不能在同一个ip上绑定多个域名。

2、TCP三次握手

客户端和服务端都需要各自可收发。

第一次握手：浏览器向服务器发起建立连接请求。

第二次握手：服务器告诉浏览器，同意你的连接请求，同时我也向你发起建立连接的请求

第三次握手：浏览器告诉服务器，我同意建立连接。

3、TCP和UDP的区别

（1）tcp和udp是什么？

TCP传输控制协议，是一种面向连接的、可靠的、基于字节流的传输层通信协议。

UDP用户数据报协议，一种无连接的传输协议，无需建立连接就可以发送封装的IP数据包。

（2）区别？

TCP面向连接，UDP是无连接的，即发送数据前不需要先建立连接。
TCP提供可靠的服务。TCP连接传送的数据，无差错不丢失不重复，适合大数据量的交换。
TCP面向字节流，实际上tcp把数据看成了一连串无结构的字节流，由于连接的问题，当网络出现波动的时候，连接可能出现响应问题；UDP是面向报文的，UDP没有拥塞控制，因此网络拥塞不会使源主机的发送效率降低。
TCP是点到点的，只能1对1。UDP并不建立连接，所以支持1对1，多对1，1对多。
TCP需要建立连接，首部开销20字节相比8个字节的UDP显得比较大。
TCP是面向连接的可靠性传输，而UDP是不可靠的。

4、webSocket的实现和应用

（1）概念: 是一种协议，可以在单个TCP连接上进行全双工通信，该协议使得客户端和服务端之间的数据交换变得简单，可以让服务器端主动向客户端推送数据。

（2）作用: 在WebSocket API中，浏览器与服务器只需要完成一次握手，两者就可以创建持久性的连接并进行双向数据传输。通过HTTP/1.1协议的101状态码进行握手。

（3）应用场景: 数据传输实时性要求较高的场景，比如网页聊天室，直播等。

5、常见BOM属性对象方法

BOM：浏览器对象模型

（1）location对象

location.href--返回或设置当前文档的URL
location.search--返回URL中的查询字符串部分，?后面的内容
location.hash--返回URL#后面的内容，如果没有返回空
location.host--返回URL中的域名部分，例如www.dreamdu.com
location.hostname--返回URL中的主域名部分，例如dreamdu.com
location.port--返回URL中端口号
location.assign--设置当前文档的URL
location.replace()--重载当前页面

（2）history对象

history.go(num)--前进或后退指定的页面数
history.back() -- 后退一页
history.forward()--前进一页

（3）navigator对象

navigator.userAgent -- 返回用户代理头的字符串表示，就是包括浏览器版本信息等的字符串

6、说一下http2.0

首先http2.0是基于1999年发布的http1.0之后的首次更新。主要改进如下：

提升访问速度，相比1.0请求资源所需时间更少，访问速度更快。
二进制分帧。在应用层和传输层之间增加了一个二进制分帧层。HTTP2.0将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码。实现低延迟高吞吐量。
首部压缩。HTTP1.0不支持首部压缩。SPDY和HTTP2.0出现，SPDY使用DEFLATE算法，HTTP2.0使用专门为首部压缩设计的HPACK算法。在HTTP1.0中，使用文本形式传输header如果header带有cookie的话，每次传输需要几百到几千的字节，开销很大。而HTTP2.0中，使用HPACK压缩格式对传输的header进行编码，减少了其大小。
允许多路复用。HTTP1.0中浏览器会限制同一域名下的请求数量，当页面请求资源较多时还会队头阻塞。HTTP2.0可以在共享TCP连接的基础上同时发送请求和响应。
服务器端推送。HTTP2.0新增的一个强大新功能。就是服务器可以对一个客户端请求发送多次响应。服务端向客户端推送资源无需客户端明确的请求。

7、网站开发中，如何实现图片的懒加载

懒加载也就是滑动页面能看到图片的时候再加载图片，问题拆分成两个：如何判断图片出现在了当前视口和如何控制图片的加载

方案一：位置计算+滚动事件（Scroll）+DataSet API

方案二：getBoundingClientRect API + Scroll with Throttle + DataSetAPI 其中Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置

//clientHeight 代表当前视口的高度
img.getBoundingClientRect().top < document.documentElement.clientHeight;

方案三：IntersectionObserver API+DataSet API 这一个API十分的强大，可以直接监听到元素是否到了当前视口的事件。

const observer = new IntersectionObserver((changes)=>{
    //changes:目标元素集合
    changes.forEach((change) => {
        if(change.isIntersecting){
            const img = change.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
        }
    })
})
observer.observe(img)

8、浏览器是如何实现剪切复制粘贴内容的功能的？

最常用的Clipboard对象提供的四个方法，他们都是Promise对象。

1.Clipboard.readText() Clipboard.readText()方法用于复制剪贴板里面的文本数据,

2.Clipboard.read() 用于复制剪贴板里面的数据，可以是文本数据，也可以是二进制数据。

3.Clipboard.writeText() 用于将文本内容写入剪贴板。

4.Clipboard.write() 用于将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据。

9、重排和重绘

重排和重汇是关键渲染路径中的两步。

重排：元素的位置一发生变动就会重排，也叫回流。当一个元素位置发生改动时，后面的元素位置可能都得变动，代价及其高。
重绘：元素的样式发生变动，但是位置不变。重排必定会重汇，重绘不一定会重排。以下是避免重排或者重汇的方法：

使用DocumentFragment进行DOM操作
css样式尽量批量修改
避免使用table布局
为元素提前设置好宽高，不因多次渲染改变位置

10、什么是Data URL

data URL通常是将图片转换为base64直接嵌入到网页中，使用<img src="data:[MIMEtype];base64"/>这种方式引入图片，不再需要重新发送请求获取图片。但是使用 DATA URL也有缺陷：

base64编码后的图片会比原来的体积大三分之一左右。
Data URL形式的图片不会缓存下来，每次访问都要被下载一次。可以将Data URL写入到css文件中随着css被缓存下来。

11、HTML中有哪些语义化标签

header footer main aside article section address summary/details menu h1/h2../h6 img p strong/italic

12、如何取消请求的发送

根据发送网络请求的API不同，取消的方法也不同。

一、如果使用XMLHttpRequest发送请求可以使用XMLHttpRequest.Abort()取消请求

const xhr = new XMLHttpRequest();
method = "GET"
url = "https://developer.mozilla.org/"

html相关面试题