-
客户端和服务器端交互模型详解
[request]请求阶段
1.首先根据客户端输入的域名,到DNS服务器上进行反解析(通过域名找到对应的服务器的外网ip)
2.通过找到的外网ip 找到对应的服务器
3.通过在地址栏中输入的端口号(没输入是因为不同协议有自己默认端口号)找到服务器上发布的对应项目
[response]响应阶段
4.服务器获取到请求资源文件的地址·例如/stu/index.html·,把资源文件中的源代码找到
5.服务器端会把找到的源代码返回给客户端(通过HTTP等传输协议返回)
[浏览器渲染]
6.客户端接收到原地阿妈后,会交给浏览器的内核(渲染引擎)进行渲染,最后由浏览器绘制出对应的页面
-
HTTP等传输协议详解
URL、URI、URN
URI:统一资源标识符
URL:统一资源路径地址
URN:统一资源名称
URI=URL+URN
一个完整的URL包涵很多部分
http://www.baidu.com/stu/index.html?name=baidu&age=9
第一部分:传输协议
传输协议使用来完成客户端和服务器端的数据(内容)传输的,类似于快递员,负责吧客户
和商家的物品来回传送
1.客户端不近可以向服务器发送请求,而且还可以把一些内容传递给服务器
2.服务器也可以吧内容返回给客户端
客户端和服务器端传输的内容总称为HTTP报文,这些报文信息都是基于传输协议完成传输的,
客户端传递给服务器叫做请求(Request),服务器返回给客户端的叫做响应(Response),
request和response两个阶段统称为一个HTTP事务(一件完整的事)
HTTP事务:当客户端向服务器端发送请求,此时客户端和服务器端会建立一个传输通道,传输协议
就是基于这个通道把信息进行传输的
当服务器端接收到请求信息,把内容返回给客户端后,传输通道会自动销毁
传输协议分类
http:长文本传输协议(客户端和服务器端传输的内容除文本以外,还可以传输图片、音视频等文件流【二进制编码/base64】)
以及传输xml格式的数据等,是目前市场上应用最广泛的传输协议
https:http ssl ,它比http更加安全,因为数据内容的传输通道是经过ssl加密的(它
需要在服务器端进行特殊的处理),所以设计资金类的网站一般都是https协议的
ftp:资源文件传输协议,一般用户客户端把资源文件(不是代码内容),上传到服务器,或者从服务器端下载一些文件资源(
ftp传输的内容会比http这类协议传输的内容多)
-
HTTP报文的一些核心知识
HTTP报文
1.起始行
请求起始行
响应起始行
2.首部(头)
请求头:内置请求头、自定义请求头
响应头:内置响应头、自定义响应头
通用头:请求和响应都有的
3.主体
请求体
响应主体
请求xxx都是客户端设置的信息,服务器端获取这些信息
响应XXX都是服务器设置的信息,客户端来接收这些信息
在浏览器控制台network选项中,可以查看当前客户端和服务器端交互的全部信息
总结:
客户端传递给服务端数据
1。URL问号传递参数
2.设置请求头
3.设置请求主体
服务器端返回给客户端内容
1.设置响应头(例如服务器时间)
2.设置响应主体
-
前端开发优化的一些常见的办法
一:减少HTTP请求的次数
页面中没法送一次HTTP请求,都需要完成请求+相应合格完整的HTTP事务,会小号一些时间,也可能会
导致HTTP链接通道的堵塞,为了提高页面加载速度和运行的性能,我们应该减少HTTP的请求次数
1.采用css雪碧图技术(css Sprit/css图片精灵)把一些小图合并在一张大图上
,使用的时候通过背景图片定位,定位到具体的某一张小图上
.pubBg{
background:url(../img/....png) no-repead;
background-size:和原图大小保持一致;
}
.box{
background-position:x y;通过背景定位,定位到具体的位置,展示不同的图片即可
}
2.真实项目中,我们最好把css或者js文件进行合并压缩;尤其是在移动端开发的时候,如果css或者
js内容不是很多,我们可以采取内嵌式,以此减少http请求次数
css合并成一个,js也最好合并成一个
首先通过一些工具(如webpack)把合并后的css或者js压缩成XXX.min.js,减少文件大小
服务器端开启资源文件的GZIP压缩
通过一些自动化工具完成css以及js的合并压缩,或者在完成LESS转css,ES6转ES5等,这种自动化构建模式成为前端工程化开发
3.采用图片懒加载技术,在页面开始加载的时候,不请求真是的图片地址,而是默认图占位,当页面加载完成后,在根据相关的条件依次加载真实图片
(减少页面首次加载的HTTP请求的次数)
-真实项目中,我们开始图片都不加载,页面首次加载完成,先把第一屏幕中可以看到的图片进行加载,随着页面的滚动,再把下面区域中能够呈现的图片进行加载
-根据图片懒加载技术,还可以阔成雏,数据的懒加载,开始加载页面的时候,我们只把首屏或前两屏的数据从服务器端进行请求,有些网站首屏数据是后台渲染好,整体返回给客户端呈现的
-分页展示技术采用的也是数据的懒加载思想实现的:如果我们请求的数据是很多的数据,我们最好分批请求,开始只请求第一次的数据,当用户点击
第二页(微博是下拉到一定距离后,再请求第二页的数据)
4.对于不经常更新的数据,最好采用浏览器的304缓存做处理
例如:第一次请求css和js下来,浏览器会把请求的内容缓存起来,如果做了304处理,用户再次请求css和js,会直接从缓存中读取,如果不需要再去服务器获取(减少HTTP请求次数)
当强制花心页面或者页面缓存的css或js发生变动,都会从服务器获取
对于客户端来讲,我们还可以基于localStirage来做一些本地存储,例如:第一次请求的数据或者不经常更新的css和js,都可以把内容存储在本地,
下一次页面加载,直接从本地获取,设置一定的期限或一些标识,可以控制在某个阶段重新从服务器获取
5.使用字体图标代替一些页面中的位图,这样不仅做适配时方便,而且更加轻量级,而且减少了HTTP请求次数
6.如果页面中哪个出现了AUDIO或者VIDEO标签,最好设置他们的preload=none:页面加载时,音视频资源不进行加载,播放的时候再开始加载
(减少页面首次加载HTTP请求次数)
preload=auto:页面首次加载的时候就把音视频资源加载
preload=metadata:页面首次加载的时候只把音视频资源的头部信息加载
7.在客户端和服务器端进行数据通信的时候,尽量使用JSON格式进行数据传输
【优势】:
JSON格式的数据,能够清晰的展示出数据的结构,也方便自己的获取和操作
相对于XML格式的传输,JSON格式的数据更加轻量级
客户端和服务器端都支持json格式数据的处理,处理起来非常方便
(真实项目中,并不是所有的数据都要基于json,我们尽量这样做,但是对于一些特殊的需求,如文件流
或者文档传输,使用json就不合适了)
8.采用CDN加速
(地域分布式)
关于编写代码时候的一些优化技巧
除了减少HTTP请求次数和大小可以优化性能,在编写代码时,也可以进行一些优化,让页面的性能有所提升,(有些不好的代码辨析习惯,会导致页面性能消耗太大,例如:内存泄漏)
1.在编写js代码的时候,尽量减少对DOM的操作
在JS中操作dom是一个非常消耗心梗的事情,但是又不能避免的操作dom,所以只能减少
【操作dom弊端】
DOM存在映射机制(JS中的dom元素对象和页面中的DOM结构是存在映射机制的,一改则都改),这种映射机制是浏览器按照W3C标准完成
对js语言的构建和dom的构建(其实就是构建了一个监听机制)操作dom是要同事修改两个地方的,相当于一些其他的js编程来说是消耗性能的
页面中的dom结构改变或者样式改变,会触发浏览器的回流(浏览器会把dom结构重新进行计算)和重绘(把元素的样式进行重新渲染)
2.编写代码的时候,更多的使用异步编程
同步编程可能会导致上面的代码执行不完,下面的任务也做不了
尤其是ajax数据请求,我们一般都要使用异步编程,最好是基于promise设计模式进行管理(项目中经常使用fetch、axios等插件来进行请求处理)
3.在真实项目中,尽量避免一次性循环过多数据(因为循环操作是同步的),尤其是要避免while导致的死循环操作
4.CSS选择器优化
尽量减少标签选择器的使用
尽可能少使用id选择器,多使用样式类选择器(通用性强)
减少使用选择器时前面的前缀例如:.headerBox .nav .left a{} 选择器是从右向左查找的
5.避免使用css表达式
6.减少页面中的冗余代码,尽可能提高方法的重复使用率。“低耦合高内聚”
7.css放head中 js放在body底部
8.js中避免使用eval
性能消耗大
代码压缩后,容易出现代码执行错乱问题
9.js中尽量减少闭包的使用
闭包会形成一个不销毁的栈内存,过多的栈内存累积会影响页面的性能
还会容易导致内存的泄漏
10.在做dom绑定事件时,尽量避免一个个的事件绑定,而是采用性能更高的事件委托来实现
事件委托(事件代理)
把事件绑定给外层rong容器,当里面的后代元素相关行为处罚,外层容器绑定的方法也会被触发,(冒泡传播机制)
11.尽量使用css3动画代替js动画,因为css3动画或变形都开启了硬件加速,性能比js动画
12.编写js代码尽可能使用设计模式来构建体系,方便后期维护,提高扩充性
13.css中减少对滤镜的使用,页面中也减少对flash的使用
关于页面的SEO优化技巧
1.页面中杜绝死链接(404页面),而且对于用户输入一个错误页面,我们要引导404页面提示(服务器处理的)
2.避免浏览器中宜昌错误抛出
尽可能避免代码出错
使用try catch 做宜昌信息捕获
3.增加页面关键词优化
-
一个完整的URL各部分内容及其作用
域名:
设置域名其实就是给不好记忆的服务器外网IP设置了一个好记的名字
顶级域名(一级域名):qq.com
二级域名:wwww.qq.com v.qq.com sports.qq.com.....
三级域名:kbs.sports.qq.com
.....
端口号
在服务器发布项目的时候,我们可以通过端口号区分当前服务器上不同的项目
一台服务器的端口号取值范围:0-65535之间,如果电脑上安装了很多程序,有一些端口号是被占用了
HTTP:默认端口号是80
HTTPS:默认端口号是443
FTP:默认端口号是21
对于上述三个端口号其实很重要的,如果被其它程序占用,我们则不能使用
所以服务器上一般是禁止安装其它程序的
请求资源文件的路径名称
/stu/index.html
在服务器发布项目的时候,我们一般都会配置一些默认文档:用户及时不输入请求文件的名称,服务器也会找到默认文档
都是index/default...
通常为了做SEO优化,会把一些动态页面的地址(xxx.php/ xxx.asp/ xxx.jsp)进行伪url重写
(需要服务器处理)
https:item.jd.com/543212345654.html
不可能是有一个商品就单独写一个详情页面,肯定是同一个详情页做的不同处理
方案1:由后台语言根据详情页模板动态生成具体的详情页面
方案2:当前页面就是一个页面,例如:detail.html detai.php.... 我们做详情页面的时候,开发是按照detail.html?id=3221344321来开发的
但是这种页面不方便做SEO优化,此时我们把真是的地址进行重写,重写为我们看到的543443.html
问号传参
1. ?name=smd&age=23
把一些值通过XXX=XXX的方式,放在一个URL的末尾,通过问号传递
【作用】:1.在ajax请求中,可以通过问号传递参数的方式,把一些信息传递给服务器,服务器通过传递信息的不一样,返回不同的数据
$.ajax(url,{})
$.get(url,function(){}),对于ajax请求的特殊写法,原理还是基于ajax方法实现的
$.post $.script....
$.ajax({
url:"getPersonInfo?id=12"
....
})
当前案例,我们传递给服务器的编号是多少,服务器端就会把对应编号人员信息给返回
2.消除ajax请求中GET方式缓存
$ajax({
url:"xxx?_=0.12311",
method:"get"
})
3.通过URL传递参数的方式,可以实现页面之间信息的通信,例如:我们有两个页面A/B,A是列表
页面,B是详情页面
hash值
#xxx
URL末尾传递的井号,就是hash值
【作用】
1.页面中锚点定位
2.前端路由(SPA单页面开发)