一、客户端和服务器端
客户端：可以向服务器发请求，并接收返回的内容进行处理
服务器端：能够接收客户端请求，并且把相关资源信息返回给客户端
二、客户端和服务器端交互模型
- 1.客户端输入网址(如):http:www.baidu.com
- 2.客户端向服务器发送请求(request)过程：
- 1)URl地址解析
- 2)DNS域名解析 通过DNS解析 向服务器发送请求
- 3)和服务器建立TCP连接
- 4)把客户端信息传送给服务器(发送HTTP请求)
- 5)服务器得到并处理请求，HTTP响应内容，服务器把信息返回给客户端（response响应阶段）
- 6)客户端渲染服务器返回的内容，页面进行渲染
- 7)和服务器断开TCP连接
三、URL地址解析
1.URL/URN/URI
- URL（Uniform Resource Locator）：统一资源定位符，根据这个地址能找到对应的资源
- URN（Uniform Resource Name）：统一资源名称，一般指国际上通用的（标准的）一些名字（例如：国际统一发版的编号）
- URI（Uniform Resource Identifier）：统一资源标识符，URL和URN是URI的子集
2.一个完整的URL所包含的内容
-
2.1协议（http://）：传输协议就是，能够把客户端和服务器端通信的信息，进行传输的工具（类似于快递小哥）
- http 超文本传输协议，除了传递文本，还可以传递媒体资源文件（或者流文件）及XML格式数据
- https 更加安全的http，一般涉及支付的网站都要采用https协议（s:ssl 加密传输）
- ftp 文件传输协议（一般应用于把本地资源上传到服务器端）
- 辅助：FileZilla:ftp上传工具,通过这个工具，通过FTP传输协议，我们可以把本地的文件上传到服务器上（project项目文件夹下的css、js、images、index.html上传到服务器）
-
- 顶级域名 qq.com (域名去阿里云买)
- 一级域名 www.qq.com
- 二级域名 sports.qq.com
- 三级域名 kbs.sports.qq.com
- .com 国际域名
- .cn 中文域名
- .com.cn
- .edu 教育
- .gov 政府
- .io 博客
- .org 官方组织
- .net 系统类
-
2.3 端口号（:80）：端口号的取值范围0~65535，用端口号来区分同一台服务器上的不同项目
- http默认端口号：80
- https默认端口号：443
- ftp默认端口号：21
- 如果项目采用的就是默认端口号，我们在书写地址的时候，不用加端口号，浏览器在发送请求的时候会帮我们默认给加上
- 辅助：服务器接收到请求后：1)根据端口号找到对应的项目 2)根据请求资源的路径名称找到资源的文件 3)读取资源文件中的内容 4)把内容返回
-
2.4 请求资源路径名称（/stu/index.html）
- 默认的路径或者名称 （xxx.com/stu/ 不指定资源名，服务器会找默认的资源，一般默认资源名是default.html、index.html...当然这些可以在服务器端自己配置）
- 注意伪URL地址的处理（URL重写技术是为了增加SEO搜索引擎优化的，动态的网址一般不能被搜索引擎收录，所以我们要把动态网址静态化，此时需要的是重写URL） 静态的：item.jd.hk/2688449.htm… => 动态的：item.jd.hk/index.php?i…
-
2.5 问号传参信息（?from=wx&lx=1）
- 客户端想把信息传递给服务器，有很多的方式
- URL地址问号传参
- 请求报文传输（请求头和请求主体）
- 也可以不同页面之间的信息交互，例如:从列表到详情
- 客户端想把信息传递给服务器，有很多的方式
-
2.6 HASH值（#zhenyu）
- 也能充当信息传输的方式
- 锚点定位
- 基于HASH实现路由管控（不同的HASH值，展示不同的组件和模块）
3.特殊字符加密和解密
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>特殊字符加密和解密</title>
</head>
<body>
<button id="link">我是按钮</button>
<script>
//基于js实现页面跳转
link.onclick=function () {
//1.获取当前页面的url地址
let url=window.location.href;
//2.跳转页面(本页面打开 )
window.location.href="http://www.baidu.cn"
//3.跳转页面(在另一个页面打开)
window.open("http://www.baidu.cn");
}
</script>
</body>
</html>
请求的地址中如果出现非有效UNICODE编码内容，现代版浏览器会默认的进行编码
-
1.基于encodeURI编码，我们可以基于decodeURI解码，我们一般用encodeURI编码的是整个URL，这样整个URL中的特殊字符都会自动编译
- 编码：encodeURI("mbd.baidu.com/newspage/da…");
- 解码：decodeURI("mbd.baidu.com/newspage/da…");
- 空格会解码为：20%
-
2.encodeURIComponent/decodeURIComponent它相对于encodeURI来说，不用于给整个URL编码，而是给URL部分信息进行编码（一般都是问号传参的值编码）
- 编码： encodeURIComponent("www.baidu.cn/stu/?from=" + encodeURIComponent(url)")
- 解码：decodeURIComponent
- 客户端和服务器端进行信息传输的时候，如果需要把请求的地址和信息编码，我们则基于以上两种方式处理，服务器端也存在这些方法，这样就可以统一编码解码了
-
3.客户端还存在一种方式，针对于中文的编码方式 escape/unescape，这种方式一般只应用于客户端页面之间自己的处理，例如：从列表跳转到详情，我们可以把传递的中文信息基于这个编码，详情页获取编码后的信息再解码，再比如我们在客户端种的cookie信息，如果信息是中文，我们也基于这种办法编码...
- 中文的编码：escape('百度')
- 中文解码：unescape("%u767E%u5EA6");
四、DNS服务器域名解析
DNS服务器：域名解析服务器，在服务器上存储着 域名<=>服务器外网IP 的相关记录
而我们发送请求时候所谓的DNS解析，其实就是根据域名，在DNS服务器上查找到对应服务器的外网IP
1.DNS优化
- DNS缓存（一般浏览器会在第一次解析后，默认建立缓存，时间很短，只有一分钟左右）
- 减少DNS解析次数（一个网站中我们需要发送请求的域名和服务器尽可能少即可）
- DNS预获取(dns-prefetch)：在页面加载开始的时候，就把当前页面中需要访问其他域名(服务器)的信息进行提前DNS解析，以后加载到具体内容部分可以不用解析了
<!-- DNS预获取： -->
//开启DNS预获取
<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel="dns-prefetch" href="//static.360buyimg.com"/>
<link rel="dns-prefetch" href="//misc.360buyimg.com"/>
<link rel="dns-prefetch" href="//img10.360buyimg.com"/>
<link rel="dns-prefetch" href="//img11.360buyimg.com"/>
<link rel="dns-prefetch" href="//img12.360buyimg.com"/>
<link rel="dns-prefetch" href="//img13.360buyimg.com"/>
<link rel="dns-prefetch" href="//img14.360buyimg.com"/>
<link rel="dns-prefetch" href="//img20.360buyimg.com"/>
<link rel="dns-prefetch" href="//img30.360buyimg.com"/>
五、和服务器建立TCP（http协议）连接（三次握手）
- 1.第一次握手：由浏览器发起，告诉服务器要发送请求了
- 2.第二次握手：由服务器发起，告诉浏览器我准备接受了，你赶紧发送吧
- 3.第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受吧
六、把客户端资源传递给服务器 发送HTTP请求
- 请求报文：所有经过传输协议，客户端传递给服务器的内容，都被成为请求报文
- 起始行
- 请求头（请求首部）
- 请求主体
-
响应报文：所有经过传输协议，服务器返回给客户端的内容，都被成为响应报文
- HTTP状态码
- 响应头
- 响应主体
-
HTTP报文：请求报文+响应报文
-
辅助：谷歌浏览器F12 =>Network（所有客户端和服务器端的交互信息在这里都可以看到） =>点击某一条信息，在右侧可以看到所有的HTTP报文信息
六、WEB服务器得到并处理请求
1.web服务器和数据服务器
- 1.1 网站前端和后端开发好了
- 1.2 购买服务器(阿里云：www.aliyun.com/),购买服务器后，一定…
- 1.3 服务器部署
- 通过FTP把项目资源上传到服务器
- 构建web服务器 tomcat、apache、iis、nginx、node
- 指定项目目录;指定了端口号(我们一般端口号80/443服务器上除项目需要的环境之外,其余所有东西都不要安装;保证绝对安全和端口不被占用等);还可以指定默认,指定错误页,指定支持的资源文件类型等;相当于创建了一个服务，后期客户端请求过来后，这个服务负责接收请求，查找对应的资源文件，最后把信息返回给客户端=>'web服务器'
- 1.4 购买域名，并且进行DNS域名解析
- 1.5 备案(到工信部备案)
2.HTTP状态码
1~5开头，三位数字
- 200 OK：成功
- 201 CREATED：一般应用于告诉服务器创建一个新文件，最后服务器创建成功后返回的状态码
- 204 NO CONTENT：对于某些请求（例如：PUT或者DELETE），服务器不想处理，可以返回空内容，并且用204状态码告知
- 301 Moved Permanently：永久重定向（永久转移）
- 302 Moved Temporarily：临时转移，很早以前基本上用302来做，但是现在主要用307来处理这个事情，307的意思就是临时重定向Temporary Redirect =>主要用于：服务器的负载均衡等
- 304 Not Modified：设置HTTP的协商缓存
- 400 Bad Request：传递给服务器的参数错误
- 401 Unauthorized：无权限访问
- 404 Not Found：请求地址错误
- 500 Internal Server Error：未知服务器错误
- 503 Service Unavailable：服务器超负荷
七、客户端渲染服务器端返回信息
遇到link/img/audio/video等是异步去加载资源信息（浏览器分配一个新的线程去加载，主线程继续向下渲染页面）,如果遇到的是script或者@import，则让主线程去加载资源信息（同步），加载完成信息后，再去继续渲染页面
1.浏览器渲染页面的步骤
- 1.1 解析HTML，生成DOM树，解析CSS，生成CSSDOM树
- 1.2 将DOM树和CSSOM树结合，生成渲染树（Render Tree）
- 1.3 Layout(回流):根据生成的渲染树，计算它们在设备视口(viewprot)内的确切位置和大小，这个阶段事回流
- 1.4 Painting(重绘):根据渲染树及回流得到的几何信息，得到节点的绝对像素
- 1.5 Display:将像素发送给GPU，展示在页面上
2.DOM的重绘和回流
- 2.1 重绘：元素样式的改变(但宽高、大小、位置等不变)
- 2.2 回流：元素的大小或者位置发生变化(当页面布局和几何信息发生变化的时候)，触发了重新布局，导致渲染树重新计算布局和渲染
- 2.3 注意：回流一定会触发重绘，而重绘不一定会回流
3.前端性能优化之：避免DOM的回流
- 3.1 放弃传统操作dom的时代，基于vue/react开始数据影响视图模式
- 3.2 分离读写操作（现代的浏览器都有渲染队列的机制）
- 3.3 样式集中改变
- 3.4 缓存布局信息
- 3.5 元素批量修改
- 3.6 动画效果应用到position属性为absolute或fixed的元素上(脱离文档流)
- 3.7 CSS硬件加速（GPU加速）
- 3.8 牺牲平滑度换取速度
- 3.9 避免table布局和使用css的javascript表达式
八、四次挥手（断开连接）
- 1.第一次挥手：由浏览器发起，发送给服务器，我请求报文发送完了，你准备关闭吧
- 2、第二次挥手：由服务器发起，告诉浏览器，我接受请求报文，我准备关闭，你页准备关闭吧
- 3、第三次挥手：由服务器发起，告诉浏览器，我相应报文发送完毕，你准备关闭吧
- 4、第四次挥手：由浏览器发起，告诉服务器，我相应报文接受完毕，我准备关闭，你也准备吧
