前端基础之HTTP/HTML/浏览器

最新推荐文章于 2022-05-31 15:15:02 发布

森林之心98

最新推荐文章于 2022-05-31 15:15:02 发布

阅读量191

点赞数

分类专栏：前端文章标签： http tcp/ip udp

原文链接：https://www.nowcoder.com/tutorial/96/4700c6f1f3334c9191a38406002efa65

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端基础之HTTP/HTML/浏览器

网络模型
- OSI七层模型
- OSI七层VSTCP/IP五层
协议
HTML
WEB/浏览器

网络模型

OSI七层模型

OSI参考模型

OSI七层VSTCP/IP五层

OSI与TCPIP

协议

协议分布在五层模型中

协议在五层模型的分布

http

http：HyperText Transfer Protocol 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（通常运行在TCP上），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
Keywords：TCP/IP、应用层

常用http状态码

100：继续。客户端应继续其请求。
200：访问正常。表示请求已成功，请求所希望的响应头或数据体将随此响应返回。
301：永久重定向。表示被请求的资源已永久移动到新位置。服务器返回此响应（如GET或HEAD）时，会自动将请求者转到新位置。常用于域名跳转。
302：临时重定向。请求的资源现在临时从不同的URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。常用于临时跳转，比如未登陆的用户访问用户中心重定向到登录页面。
304：未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。如果发送了带条件的GET请求且请求被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个304状态码。
400：请求无效。客户端请求的语法错误，服务器无法理解。要求提交字段类型一致，并转化为字符串。
401：请求要求身份验证。
403：服务器已经得到请求，但是没有权限访问，拒绝执行。
404：访问失败。表示请求资源不存在。
500：服务器内部代码出错。表示内部服务器错误，无法完成对请求的处理。
501：服务器功能未实现。服务器无法识别请求的方法，不支持当前请求所需要的某个功能。

http的请求方式

1. GET

请求指定的页面信息，返回实体主体。
可在URL中附带查询参数，格式?参数名=参数值，因此不应该用于处理敏感数据。
在浏览器地址栏输入网址访问资源都是通过GET方式发送HTTP请求。
GET请求参数大小受到URI限制，要支持IE，则最大长度为2083byte，若只支持Chrome，则最大长度 8182byte。
GET请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。

2. POST

向指定资源提交数据进行处理请求（如提交表单或者上传文件）。
请求的参数包含在请求体（body）中。
POST可能会导致新的资源的建立和/或已有资源的修改。
POST请求的参数大小是无限制的。
POST一般用于修改和删除，所以必须与数据库交互，所以不能使用缓存。

3. HEAD

类似GET请求，但是只请求资源的首部，返回的响应中没有具体的内容，用于获取报头。

检查超链接的有效性
检查网页是否被修改
用于自动搜索机器人获取网页的标志信息，获取rss种子信息，或者传递安全认证信息等

4. OPTIONS

允许客户端查看服务器的性能，如服务器支持的请求方式等。

5. PUT, DELETE, CONNECT, TRACE, PATCH

⭐⭐GET和POST的区别

get参数通过url传递，post放在request body中。
get请求在url中的参数有长度限制，post没有。
get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
get请求只能进行url编码，而post支持多种编码方式。
get请求参数会被完整保留在浏览历史记录，而post中的参数不会被保留。
get和post本质上都是tcp链接，但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
get产生一个tcp数据包；post产生两个tcp数据包。

http常用Header

http首部分为通用首部，请求首部，响应首部，实体首部。

通用首部表示一些通用信息，比如date表示报文创建时间。
请求首部就是请求报文中独有的，如cookie，和缓存相关的如if-Modified-Since(Last-Modified)。
响应首部就是响应报文中独有的，如set-cookie，和重定向相关的location。
实体首部用来描述实体部分，如allow用来描述可执行的请求方法，content-type描述主题类型，content-Encoding描述主体的编码方式。

Header	解释	示例
Accept	可接受的响应内容类型（Content-Types）	Accept: text/plain, text/html
Accept-Charset	可接受的字符集	Accept-Charset: iso-8859-5
Connection	表示是否需要持久连接。（HTTP 1.1默认进行持久连接）	Connection:close
Cookie	HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。	Cookie: $Version=1; Skin=new;
Content-Length	请求的内容长度	Content-Length: 348
Content-Type	请求体的MIME类型	Content-Type: application/x-www-form-urlencoded;charset=utf8
Origin	发起一个针对跨域资源共享的请求（该请求要求服务器在响应中加入一个Access-Control-Allow-Origin的消息头，表示访问控制所允许的来源）
User-Agent	浏览器的身份标识字符串	User-Agent: Mozilla/5.0 (Linux; X11)

fetch api

fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。

对于HTTP GET方式不会发送两次请求。
对于HTTP POST方式会发送两次请求，第一次使用HTTP OPTIONS方式询问服务器是否支持所修改的请求头（如跨域等），然后才发起实际的HTTP请求。

http2.0

http2.0是基于1999年发布的http1.0之后的首次更新。

提升访问速度。相比http1.0，请求资源所需时间更少，访问速度更快。
允许多路复用。允许同时通过单一的HTTP/2连接发送多重请求-响应信息。改善了：在http1.1中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。
二进制分帧。将所有的传输信息分割为更小的信息或帧，并用二进制进行编码。
首部压缩
服务器端推送

https

HTTP+SSL，安全版HTTP，SSL加密。
作用：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。

https工作原理

客户端在使用HTTPS方式与Web服务器通信时步骤如图所示：
（1）客户使用https的URL访问服务器，要求与Web服务器建立SSL连接。
（2）Web服务器收到客户端请求后，将网站的证书（含公钥）返回给客户端。
（3）客户端的浏览器与Web服务器开始协商SSL连接的安全等级，即信息加密的等级。
（4）客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥加密会话密钥，传送回网站。
（5）Web服务器利用自己的私钥解密出会话密钥。
（6）Web服务器利用会话密钥加密与客户端之间的通信。

https优点

可认证用户和服务器，确保数据发送到正确的客户机和服务器。
https是由SSL+HTTP协议构建的可进行加密传输和身份认证的网络协议，比http协议安全，可防止数据在传输途中被窃取、篡改，确保数据的完整性、
https是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。
谷歌称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

⭐⭐http和https的区别

HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP）数据传输过程是加密的，安全性较好。
HTTPS协议需要到数字证书认证机构（CA）申请证书，费用较高。
HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换 3 个包，而 HTTPS除了 TCP 的三个包，还要加上 ssl 握手需要的 9 个包，所以一共是 12 个包。
完全不同的连接方式，不同的端口，HTTP端口80，HTTPS是443。
HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要比较 HTTPS 比 HTTP 要更耗费服务器资源。

TCP三次握手

tcp三次握手
（1）客户端C向服务器S发起请求连接，发送初始序号x和SYN=1请求标志。
（2）服务器收到客户端的请求，发出响应，发送确认标志ACK，发送自己的序号seq=y，发送客户端的确认序号ACK=x+1。
（3）客户端收到响应，认为连接建立成功，返回ACK确认号，发送自己的序列seq=x+1，发送对方的确认号ACK=y+1。

⭐⭐tcp和udp的区别

tcp是面向连接的，udp是无连接的即发送数据前不需要先建立连接；
tcp提供可靠的服务，而udp不保证可靠交付；
1. tcp保证数据正确性，udp可能丢包；
2. tcp保证数据顺序，udp不保证；
tcp是面向字节流，udp面向报文，且网络出现拥塞不会使得发送速率降低；
udp具有较好的实时性，工作效率比tcp高，适合实时应用如IP电话和视频会议等；
tcp只能1对1，udp支持1对1，1对多；
tcp的首部较大为20字节，需要较多的系统资源；udp只有8字节，对系统资源要求较少。

什么是Websocket

WebSocket是HTML5中的协议，支持持久连接，http协议不支持持久性连接。
Websocket是HTML5推出的基于tcp，独立于http的全双工网络通信协议。

HTML

实现图片URL访问后直接下载

方法1：oss

请求的返回头里，用于浏览器解析的重要参数就是oss的api文档了的返回http头，决定用户下载行为的参数

x-oss-object-type: normal
x-oss-request-id:
x-oss-storage-class: standard

方法2：H5的download属性

HTML5中<a>标签新增了downloa属性，此属性会强制触发下载操作，指示浏览器下载 URL 而不是导航到它，并提示用户将其保存为本地文件。

<a href="./debug.zip" download="">download</a>

PS：

兼容性除IE其它皆可；
常规浏览器（chrome、edge）会识别文件类型并直接用浏览器打开，所以尽量原来下载一些浏览器无法识别的类型如zip等；
重命名一般也无效，因为提供了修改名字和位置的步骤。
仅适用于同源 URL。

方法3：JS

<button onclick="download('./debug.zip')">Download</button>
<script>
	function download(href, filename = "") {
		const a = document.createElement("a");
		a.download = filename;
		a.href = href;
		document.body.appendChild(a);
		a.click();
		a.remove();
	}
</script>

效果和法2一样。但是跨域也可。

方法4：HTTP响应头Content-Disposition

前后端交互时可以Content-Disposition
HTTP 上下文中的第一个参数是inline（默认值，表示它可以显示在网页内，或作为网页）或attachment（表示它应该下载;大多数浏览器呈现“另存为”对话框，预先填入filename如果存在参数的值

Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"

HTML5变动

1）标签增删

8个语义元素：header、section、footer、aside、nav、main、article、figure。
内容元素：mark高亮、progress进度。
新的表单控件：calander、date、time、email、url、search。
新的input类型：color、date、datetime、datetime-local、email、tel、search……
移除过时标签：big、font、frame、frameset。

2）canvas绘图，支持内联SVG。支持MathML。

3）多媒体：audio、video、source、embed、track。

4）本地离线存储，把需要离线存储在本地的文件列在一个manifest配置文件。

5）web存储。localStorage、SessionStorage。

HTML5语义化

HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签。

HTML5 drag api

事件	On事件处理	触发时刻
drag	ondrag	当拖拽元素或选中的文本时触发。
dragend	ondragend	当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键)。
dragenter	ondragenter	当拖拽元素或选中的文本到一个可释放目标时触发。
dragexit	ondragexit	当元素变得不再是拖拽操作的选中目标时触发。
dragleave	ondragleave	当拖拽元素或选中的文本离开一个可释放目标时触发。
dragover	ondragover	当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）。
dragstart	ondragstart	当用户开始拖拽一个元素或选中的文本时触发。
drop	ondrop	当元素或选中的文本在可释放目标上被释放时触发。

iframe

定义：iframe元素会创建包含另一个文档的内联框架
提示：可以将提示文字放在<iframe></iframe>之间，来提示某些不支持iframe的浏览器
缺点：
- 会阻塞主页面的onload事件
- 搜索引擎无法解读这种页面，不利于SEO
- iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

Doctype

声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。
声明必须在 HTML 文档的第一行，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
- 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
- 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。向后兼容，模拟老式浏览器，防止浏览器无法兼容页面
- 区分：
  - 严格 DTD ——严格模式
  - 有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式
  - DTD不存在或者格式不正确——混杂模式
  - HTML5 没有严格和混杂之分
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5 不基于 SGML，所以不需要引用 DTD。HTML5的声明 <!DOCTYPE HTML> 不区分大小写

viewport

viewport 是用户网页的可视区域。

<!-- 常用 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

其中属性有：

属性	值
width	设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes"

响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
https://juejin.cn/post/6844903814332432397

addEventListener

element.addEventListener(event, function, useCapture)

event指定事件名；
function指定要事件触发时执行的函数；
useCapture指定事件是否在捕获或冒泡阶段执行。

<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>
<script>
	// 改变t2的函数
	function modifyText() {
	  var t2 = document.getElementById("t2");
	  if (t2.firstChild.nodeValue == "three") {
	    t2.firstChild.nodeValue = "two";
	  } else {
	    t2.firstChild.nodeValue = "three";
	  }
	}
	
	// 为table添加事件监听器
	var el = document.getElementById("outside");
	el.addEventListener("click", modifyText, false);
</script>

WEB/浏览器

主流浏览器及内核

主流浏览器	内核
IE	trident
Chrome	webkit/blink（目前是）
firefox	Gecko
Opera	presto
Safari	webkit

⭐⭐⭐跨域

同源三要素：
- 协议
- 域名
- 端口
存在跨域的情况：
- 网络协议不同，如http协议访问https协议。
- 端口不同，如80端口访问8080端口。
- 域名不同，如qianduanblog.com访问baidu.com。
- 子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。
- 域名和域名对应ip,如www.a.com访问20.205.28.90.
跨域请求资源的方法

proxy代理
proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
- 实现方法：通过nginx代理；
- 注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。
jsonp跨域【仅限GET】
网页通过script标签向服务器请求json数据，服务器受到请求后，将数据放在一个指定名字的回调函数的参数里面传给前端。

<script src="http://www.test.com/getData?callback=getData"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字

// 处理服务器返回回调函数的数据
<script type="text/javascript">
    // 服务器返回的数据会放到回调函数里面
    function getData(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

CORS 【Cross-Origin Resource Sharing】最常用的方式。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。

res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});

vue里配置cors

在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域
localhost8080跨localhost8081

// vue.config.js
let proxyObj = {};
proxyObj["/api"] = {
	//websocket
	ws: false,
	//目标地址
	//发送请求头host会被设置target
	target: "http://localhost:8081",
	//允许跨域
	changeOrigin: true,
	 /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api */
	pathRewrite: {
		"^/api": "",
	},
};
module.exports = {
	devServer: {
		host: "localhost",
		port: 8080,
		proxy: proxyObj,
	},
};

express里配置cors
在这里插入图片描述

浏览器缓存

因为服务器上的资源不是一直固定不变的，大多数情况下它会更新，这个时候如果我们还访问本地缓存，那么对用户来说，那就相当于资源没有更新，用户看到的还是旧的资源；所以我们希望服务器上的资源更新了浏览器就请求新的资源，没有更新就使用本地的缓存，以最大程度的减少因网络请求而产生的资源浪费。

缓存机制

强缓存优先于协商缓存执行
协商缓存失败，返回200，重新返回资源和缓存标识
协商缓存成功，返回304，读取缓存

强缓存

不会向服务器发送请求，直接从缓存中读取资源
状态码：200
相关Header
- Expires ：response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存。
- Cache-Control：常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。当值设为max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。

协商缓存

通过服务器来告知缓存是否可用
状态码：304
相关Header
- ETag/If-None-Match：ETage是上一次加载资源时，服务器返回的响应头，是对该资源的一种唯一标识；只要资源有变化，Etag就会重新生成；浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到请求头里的If-None-Match里；服务器接受到If-None-Match的值后，会拿来跟该资源文件的Etag值做比较，如果相同，则表示资源文件没有发生改变，命中协商缓存。
- Last-Modified/If-Modified-Since：Last-Modified是该资源文件最后一次更改时间，服务器会在响应头里返回；同时浏览器会将这个值保存起来，下一次发送请求时，放到请求头里的If-Modified-Since里；服务器在接收到后也会做对比，如果相同则命中协商缓存。

浏览器在生成页面的时候，会生成哪两颗树？

构造两棵树，DOM树和CSSOM规则树；
当浏览器接收到服务器相应来的HTML文档后，会遍历文档节点，生成DOM树；
CSSOM规则树由浏览器解析CSS文件生成。

在地址栏里输入一个URL，到这个页面呈现出来，中间会发生什么？

DNS解析
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束

一、DNS域名解析

根据输入的 URL 域名找到真实 IP 地址，在查找的过程中，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：

浏览器缓存 -> 操作系统缓存 -> 路由器缓存；
缓存中没有则查找系统的hosts文件中是否有记录；
如果没有则查询DNS服务器，首先从顶级域名（一般顶级域名已经在缓存中了），再到二级域名，以此类推。

二、建立TCP连接

根据 IP 地址，客户端与服务端进行三次握手，建立连接。
为了准确无误地把数据送达目标处，TCP采用了三次握手策略：

发送端首先给接收端发送一个带SYN标志的数据包。
接收端收到后，回传一个带有SYN/ACK标志的数据包以表示正确传达，并确认信息。
最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。
注：

握手过程中使用了TCP的标志，即SYN和ACK
若在握手过程中的某个阶段莫名中断，TCP会再次以相同的顺序发送相同的数据包

三、传输数据

连接后，客户端向服务端发起 HTTP 请求，服务器接收到请求后，返回请求静态资源，并同时调用 apache 服务器请求接口数据。
注：得到服务器的IP 地址后，浏览器根据这个IP 以及相应的端口号，构造一个HTTP 请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个HTTP 请求封装在一个TCP包中，这个TCP包会依次经过传输层，网络层，数据链路层，物理层到达服务器。

四、关闭TCP连接

数据传输完成，客户端与服务端进行四次挥手，关闭连接。
断开一个TCP连接则需要“四次挥手”：

第一次挥手：主动关闭方发送一个FIN，用来关闭主动关闭方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方，主动关闭方已经不会再给被动关闭方发送数据了（当然，在FIN包之前发送出去的数据，如果没有收到对应的ACK确认报文，主动关闭方依然会重发这些数据），但是，此时主动关闭方还可以接收数据。
第二次挥手：被动关闭方收到FIN包后，给对方发送一个ACK，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，被动关闭方的数据也发送完了，不会再给主动关闭方发送数据了。
第四次挥手：主动关闭方收到FIN后，给被动关闭方发送一个ACK，确认序号为收到序号+1，至此，完成四次握手。

五、渲染页面

对于浏览器根据服务端返回的静态资源，浏览器使用 Native GUI 引擎渲染 HTML 和 CSS ；使用 JS 引擎加载 JS 。

将 HTML 节点解析成 DOM 树结构

在DOM树的构建过程中如果遇到JS脚本和外部JS连接，则会停止构建DOM树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐JS代码应该放在html代码的后面。
从 HTML 字节码到 DOM 树结构的流程：字节(Bytes) -> 字符串(Characters) -> Tokens -> 节点(Nodes) -> DOM
计算机只能识别0和1的字节，根据字节的编码规则将字节转换成字符串，再将字符串转化为 W3C 定义的各种标签，生成 tokens（令牌），匹配字符串，将 tokens 按照规则转换为包含属性和规则的节点对象（nodes）,根据每个节点的层次关系（父子节点关系）和规则转换为直观的树形结构。HTML 是增量构建的，在 HTML 文件还在传输时，这个转换过程就已经开始了。最终得到完整的 DOM(Document Object Module文档对象模型)

将 CSS 解析成 CSSOM 规则树

这里主要做的是排除非视觉节点，比如script，meta标签和排除display为none的节点；有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系
CSS 构建的过程跟 DOM 差不多，只不过 CSS 会涉及到复杂的计算，如 CSS 的属性来源，匹配不同的类（id 或者 class）,确认复写规则及权重，最后确定每个节点的样式值，形成 CSSOM(CSS Object Module CSS对象模型)。

将 DOM 与 CSSOM 组合成 Render-tree（渲染树）
布局：计算出每个节点在屏幕中的位置
绘制：即遍历render树，并使用UI后端层绘制每个节点

六、加载 JavaScript 脚本

虽然 HTML\CSS 与 JS 是通过不同的引擎加载，但是却是互斥的，即加载 HTML\CSS 时，JS 会停止加载，相反亦然，这是因为 JS 引擎可以操作 DOM，改变样式、内容等。所以当执行了 JS 之后，渲染树要重新构建。

当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。 Cache-Control和Expires的区别在于Cache-Control使用相对时间，Expires使用的是基于服务器端的绝对时间，因为存在时差问题，一般采用Cache-Control，在请求这些有设置了缓存的数据时，会先查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验，如果一致，继续校验 Last-Modified，没有设置ETag则直接验证Last-Modified，再决定是否返回304

————————————————
版权声明：本文为CSDN博主「易安sparkle」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43675447/article/details/98117332

web quality（无障碍）

能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。
残障人士指的是那些带有残疾或者身体不健康的用户。

使用alt属性：

<img src="person.jpg"  alt="this is a person"/>

有时候浏览器会无法显示图像。具体的原因有：

用户关闭了图像显示
浏览器是不支持图形显示的迷你浏览器
浏览器是语音浏览器（供盲人和弱视人群使用）
如果您使用了alt 属性，那么浏览器至少可以显示或读出有关图像的描述。

BOM

BOM指Browser Object Model浏览器对象模型，用于管理浏览器窗口，因此其核心对象是window对象。

window对象

Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
常用属性

window.closed – 返回窗口是否已被关闭。
window.defaultStatus – 设置或返回窗口状态栏中的默认文本。
window.document – 对 Document 对象的只读引用。
window.history – 对History 对象的只读引用。
window.innerheight – 返回窗口的文档显示区的高度。
window.innerweight – 返回窗口的文档显示区的宽度。

常用方法

alert() – 警告框。
confirm() – 确认框。点击确定返回true，点击取消返回false
prompt(“提示语”,“默认值”) – 提示框。点击确定返回当前值，点击取消返回null
setTimeOut(要执行的函数,时间) – 在指定的毫秒数后调用函数或计算表达式。返回线程id
setInterval(要执行的函数，时间) – 按照指定的周期（以毫秒计）来调用函数或计算表达式。返回线程id
clearInterval(id) – 取消由 setInterval() 设置的 timeout。
clearTimeout(id) – 取消由 setTimeout() 设置的 timeout。

location对象

提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。

location.href – 返回或设置当前文档的URL。
location.search – 返回URL中查询字符串部分。如例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash – 返回URL#后面的内容，如果没有#，返回空。
location.host – 返回URL中的域名部分，例如www.dreamdu.com
location.hostname – 返回URL中的主域名部分，例如dreamdu.com
location.pathname – 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port – 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol – 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign – 设置当前文档的URL
location.replace() – 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() – 重载当前页面

history对象

保存用户上网的历史记录。

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

navigator对象

有关浏览器的信息。

navigator.appCodeName – 返回浏览器的代码名
navigator.appName – 返回浏览器的名称
navigator.appVersion – 返回浏览器的平台和版本信息
navigator.userAgent – 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.platform – 返回运行浏览器的操作系统平台
navigator.cookieEnabled – 返回浏览器是否支持(启用)cookie

存储方式

Cookie

服务器生成，随http请求在浏览器和服务器间来回传递。本地存放在客户的浏览器上。
存储容量小。单个不超过4K，很多浏览器都限制一个站点最多保存20个cookie。减轻服务器性能。
生命周期：可设置过期时间，在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭，当超过时间期限后，Cookie就会自动消失。
有路径概念，只属于某个路径下。
作用域：在所有同源窗口中都是共享的。
不够安全，别人攻击存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session。

Cookie 主要用于以下三个方面：

会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息），通过存储sessionId用来唯一标识用户。
个性化设置（如用户自定义设置、主题等）
浏览器行为跟踪（如跟踪分析用户行为等）

Cookie字段

属性	描述
name	Cookie的名称，Cookie一旦创建，名称便不可更改
value	Cookie的值，如果值为Unicode字符，需要为字符编码。如果为二进制数据，则需要使用BASE64编码
domain	可以访问该Cookie的域名。如果设置为“.google.com”，则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”。
path	Cookie的使用路径。如果设置为“/sessionWeb/”，则只有contextPath为“/sessionWeb”的程序可以访问该Cookie。如果设置为“/”，则本域名下contextPath都可以访问该Cookie。注意最后一个字符必须为“/”。
Size	设置Cookie的大小
expires/maxAge	Cookie失效的时间，单位秒。如果为整数，则该Cookie在maxAge秒后失效。如果为负数，该Cookie为临时Cookie，关闭浏览器即失效，浏览器也不会以任何形式保存该Cookie。如果为0，表示删除该Cookie。默认为-1。
http	Cookie的httponly属性。若为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie
secure	该Cookie是否仅被使用安全协议传输。安全协议。安全协议有HTTPS，SSL等，在网络上传输数据之前先将数据加密。默认为false。

sessionStorage

HTML5新增的一个会话存储对象。
用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
有效期：仅在当前浏览器窗口关闭前有效。
数据存放在服务器上。当访问增多会占用较多服务器性能，此时应使用Cookie。
作用域：不在不同的浏览器窗口中共享，即使是同一个页面。
存储容量比Cookie大，5M左右。

localStorage

有效期：始终有效，窗口或浏览器关闭也一直保存，直到手动去删除，因此用作持久数据。
localStorage 属性是只读的。
作用域：在所有同源窗口中都是共享的。
存储容量比Cookie大，5M左右。
可以用于存储该浏览器对该页面的访问次数。

共同点：都是保存在浏览器端，并且是同源的

Web安全

XSS攻击

XSS（跨站脚本攻击）是指攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，如获取cookie，或者其他用户身份信息。

XSS防范

HTML转义。对用户输入的内容进行HTML转义，转义后可以确保用户输入的内容在浏览器中作为文本显示，而不是作为代码解析。
- < by <
- > by >
- & by &
过滤输入文本中的 HTML 元素/属性
在输入文本中使用不同的标记样式
在HTTP头部设置Cookie属性：
- httponly – 这个属性可以防止XSS，它会禁止JavaScript脚本来访问Cookie。
- secure：告诉浏览器仅在请求为https时发送Cookie。

CSRF攻击

CSRF（跨站请求伪造），可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，比如用户登录了一个网站后，立刻在另一个tab页面访问攻击者用来制造攻击的网站，这个网站要求访问刚刚登陆的网站，并发送了一个恶意请求，这时候CSRF就产生了，比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库。