0
点赞
收藏
分享

微信扫一扫

Part6:客户端和服务端信息交互模型

愚鱼看书说故事 2022-02-15 阅读 62

一、客户端和服务端信息交互模型

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)

举报

相关推荐

0 条评论