一、客户端和服务端信息交互模型
1.【问题】：什么是客户端和服务端？
2.【面试题】：当用户在地址栏中输入网址，到最后看到页面，中间都经历了什么？
二、URL地址解析
1.URI/URL/URN的区别
2.一个完整的URL解析
3.URL编码解析方式
/*
* 请求的地址中如果出现非有效UNICODE编码内容，现代版浏览器会默认的进行编码
* 1. 基于encodeURI编码，我们可以基于decodeURI解码，我们一般用encodeURI编码的是整个URL，这样整个URL中的特殊字符都会自动编译
* 2. encodeURIComponent/decodeURIComponent它相对于encodeURI来说，不用于给整个URL编码，而是给URL部分信息进行编码（一般都是问号传参的值编码）
* 客户端和服务器端进行信息传输的时候，如果需要把请求的地址和信息编码，我们则基于以上两种方式处理，服务器端也存在这些方法，这样就可以统一编码解码了
* 3.客户端还存在一种方式，针对于中文的编码方式 escape/unescape，这种方式一般只应用于客户端页面之间自己的处理，例如：从列表跳转到详情，我们可以把传递的中文信息基于这个编码，详情页获取编码后的信息再解码，再比如我们在客户端种的cookie信息，如果信息是中文，我们也基于这种办法编码...
*/
//=>基于JS实现页面跳转
link.onclick = function () {
//=>获取当前页面的URL地址
let url = window.location.href;
//=>跳转页面
window.location.href = "http://www.zhufengpeixun.cn/stu/?from=" + encodeURIComponent(url);
// window.open("http://www.zhufengpeixun.cn/");
}
三、DNS域名解析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 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"> -->
</head>
<body>
</body>
</html>
四、建立TCP连接（TCP三次握手）
五、发送HTTP请求
1.HTTP请求报文
2.强缓存、协商缓存、数据缓存
缓存位置：
打开网页：查找 disk cache 中是否有匹配，如有则使用，如没有则发送网络请求
普通刷新 (F5)：因TAB没关闭，因此memory cache是可用的，会被优先使用，其次才是disk cache
强制刷新 (Ctrl + F5)：浏览器不使用缓存，因此发送的请求头部均带有 Cache-control: no-cache，服务器直接返回 200 和最新内容
强缓存【 Expires / Cache-Control】
协商缓存【 Last-Modified / ETag】
数据缓存
六、服务器得到并处理请求（HTTP响应内容）
1.响应报文和HTTP报文
2.HTTP状态码
【Question】：如何构建一个网站？
七、客户端渲染页面
一个需要注意的地方：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
let link = document.getElementById('link');
console.log(link);//null=>拿不到
</script>
<!-- 遇到link/img/audio/video等是异步去加载资源信息（浏览器分配一个新的线程去加载，主线程继续向下渲染页面）,如果遇到的是script或者@import，则让主线程去加载资源信息（同步），加载完成信息后，再去继续渲染页面 -->
</head>
<body>
<button id="link">我是按钮</button>
</body>
</html>
1.浏览器渲染页面的步骤
2.DOM的重绘和回流
3.前端性能优化之：避免DOM的回流
减少DOM的回流：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>减少DOM回流-珠峰培训</title>
<style>
.box {
margin: 20px auto;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
/* for (let i = 0; i < 10; i++) {
let span = document.createElement('span');
span.innerHTML = i;
box.appendChild(span);
} */
/* let str = ``;
for (let i = 0; i < 10; i++) {
str += `<span>${i}</span>`;
}
box.innerHTML = str; */
//=>文档碎片：存储文档的容器
/* let frg = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
let span = document.createElement('span');
span.innerHTML = i;
frg.appendChild(span);
}
box.appendChild(frg);
frg = null; */
</script>
<script>
/* 批量设置样式 */
// box.className = 'box';
// box.style.cssText = "margin: 20px auto;width: 100px;height: 100px;background: red;";
</script>
<script>
/* DOM操作的读写分离 */
//=>现代版浏览器都有“渲染队列”机制：发现某一行要修改元素的样式，不立即渲染，而是看看下一行，如果下一行也会改变样式，则把修改样式的操作放到“渲染队列中”...一直到不在是修改样式的操作后，整体渲染一次，引发一次回流
//=>offsetTop、offsetLeft、offsetWidth、offsetHeight、clientTop、clientLeft、clientWidth、clientHeightscrollTop、scrollLeft、scrollWidth、scrollHeight、getComputedStyle、currentStyle....会刷新渲染队列
// box.style.width = '100px';
// box.style.height = '100px';
// box.style.background = 'red';
// box.style.margin = '20px auto';
// box.style.width = '100px';
// box.style.height = '100px';
// box.style.background = 'red';
// box.style.margin = '20px auto';
// console.log(box.offsetWidth);
// console.log(box.offsetHeight);
</script>
</body>
</html>
八、断开TCP连接（四次挥手）
九、前端性能优化汇总
1.减少HTTP请求次数和请求的大小 （三大类）
- 文件的合并和压缩：（1）（6）
- 延迟加载：（3）（4）
- 用新的文件格式代替传统文件格式：（2）（5）（8）
//=>栈溢出：死递归
function func(){
func();
}
func();
//=>解决方案
function func(){
setTimeout(func,0);
}
func();
//=>相互引用：引用类型之间的相互调用，形成嵌套式内存 （高程三）
let obj1={
name:'OBJ1'
};
let obj2={
name:'OBJ2',
x:obj1
};
obj1.x=obj2;
2.建立缓存机制
网络缓存：（1）（2）（3）（6）（7）
本地缓存：（4）
加服务器：（5）
3.代码上的优化
重点记住：（1）~（8）