【综合篇】Web前端性能优化原理问题 (2)

【综合篇】Web前端性能优化原理问题

url分解,协议名称,层级url的标记符号,固定不变,访问资源需要的凭证信息,从哪个服务器获取数据,需要连接的端口号,指向资源的层级文件路径,查询字符串,片段id。

客户端,走HTTP应用层,tcp传输层,ip网络层,数据链路层网络

分层由高到低分别为:应用层、传输层、网络层、数据链路层。发送端从应用层往下走,接收端从数据链路层往上走。

应用层客户端发送HTTP请求,报文首部,空行,报文主体,报文首部含请求行,请求首部字段,实体首部字段,其他。

SYN (Synchronize Sequence Numbers)同步序列编号

ACK  (Acknowledgement)确认字符

过程,用户先在浏览器中输入一个url,浏览器内部中的核心代码会将这个输入的url拆分解析,然后将domain传给dns服务器,dns服务会根据domain查询相关的post对应的ip地址,然后将ip地址传递给浏览器,浏览器有ip地址,就知道浏览器要到哪里去,持有ip地址知道这个请求发送到哪里去。就跟随协议,请求的参数都会在协议中携带,发送到网络中去,然后通过局域网,交换机,路由器,主干网络,到达服务端。

服务端是有一个MVC的架构的,请求首先会进入Controller中,在Controller中进行相关的逻辑处理,以及请求的分发,调用Model层,负责和数据进行交互,model层会读取Redis和db里面的数据。然后通过view层给到网络,由服务端到浏览器端,浏览器主要是做render的过程,render的过程就是通过浏览器请求回来的HTML,css,JavaScript等渲染的过程,会形成相关的dom树,以及对应的css树,在页面上进行相应的样式渲染。

拷问,从浏览器到服务器的过程中,那几个点,哪些过程可以进行我们的前端优化呢?

【综合篇】Web前端性能优化原理问题


client浏览器与server通过http协议通讯,http协议属于应用层协议,http属于tcp协议,所以client与server主要通过socket进行通讯。

tcp属于传输层协议,走https需要会话层tls,ssl等协议。

浏览器,dns服务器,服务器等,dns上我们可以进行缓存,来优化前端性能,路由器层面,url层面进行数据缓存,这样访问的时间就会被缩短了很多。

网络请求的过程,带宽,网络的选择,涉及到缓存,可以使用cdn,cdn是请求静态资源用的,请求静态资源,那么cookie是没有用的,所以希望在请求静态资源中,把这个cookie给去掉,这里注意cdn的域名不要和主站的域名一致,防止携带cookie。

如何减少我们HTTP请求的大小,每一个HTTP请求都要走网络环境才能达到我们的服务器,每一次请求都有网络环境的损耗,把多次HTTP请求减少到一次,减少网络环境中的损耗。也可以从服务器端出发,先把反映到页面中效果进行渲染,然后直出到网页上。

每一次请求都有网络环境的损耗,我们可以把多次HTTP请求合并成一次,从而减少相同的环境损耗。

带宽,一个HTTP的请求大小能够较小的话,访问就比较快一些,浏览器端的渲染过程,使用框架,就要从浏览器中进行渲染,框架中的模板是要在浏览器中进行渲染的,这个在框架中进行渲染,不利于首屏,对首屏有很大的损耗,不利于前端的性能。

服务器的渲染,将HTML渲染后直出到我们浏览器页面,不是在浏览器中进行渲染了。

前端性能优化点,通过HTTP请求的过程,可以了解到,我们可以通过dns进行缓存从而减少dns查询的时间,网络请求的过程走最近的网络环境,相同的静态资源进行缓存,减少HTTP请求的大小,减少HTTP请求,服务器端渲染,从业务中进行前端优化点。

重点,深入了解一下HTTP的请求过程,就可以知道前端性能优化的核心要点

资源的合并与压缩

【综合篇】Web前端性能优化原理问题


减少资源体积,gzip压缩,js混淆,css压缩,图片压缩。

减少HTTP请求的数量即为合并,减少HTTP请求的大小即为压缩。可以对HTML进行压缩,css进行压缩,js进行压缩和混乱,文件合并,开启gzip等。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgfgfw.html