一、客户端和服务端信息交互模型
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)