码迷,mamicode.com
首页 > Web开发 > 详细

前端性能优化篇—资源合并与压缩减少HTTP请求

时间:2017-09-15 01:52:37      阅读:686      评论:0      收藏:0      [点我收藏+]

标签:输入   缓存   分享   es2017   java   mod   png   链路   red   

资源合并与压缩减少HTTP请求的概要

资源合并与压缩减少HTTP请求主要的两个优化点是减少HTTP请求的数量和减少请求资源的大小

http协议是无状态的应用层协议,意味着每次http请求都需要建立通信链路、进行数据传输,而在服务器端,每个http都需要启动独立的线程去处理。

这些通信和服务的开销都很昂贵,减少http请求的数量和减少请求资源的大小可有效提高访问性能

减少http的主要手段是合并CSS、合并JavaScript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件,这样浏览器就只需要一次请求。

图片也可以合并,多张图片合并成一张,如果每张图片都有不同的超链接,可通过CSS偏移响应鼠标点击操作,构造不同的URL。将图片base64,这样也可以减少请求

 

 

首先来了解一下web前端的本质

web前端的本质是一种GUI软件,是可以直接借鉴其他GUI系统架构设计的方法,但是web前端有点特别

下面是CS架构的GUI软件的开发和部署过程,CS架构的GUI软件在用户从商店下载下来后,是一个APK包,通过解压安装到手机的操作系统上,实际上当打开这个APP的时候需要访问的资源都已经在手机本地有一份了,访问的是本地的资源

技术分享

而web前端的开发和部署过程跟APP是不一样的,如下:

技术分享

发布的过程跟cs架构不一样,不是发布一个安装包,而是将前端代码发布到远程服务器(webServer)和远程的CDN上,那么运行的过程是用户使用浏览器输入相应网址,这时候浏览器才会向远程的浏览器发出请求,动态的增量式加载静态资源,所以web前端去访问的过程是动态的增量的加载静态资源的过程,通过浏览器发出HTTP请求到远程的服务端,有服务端返回,最终浏览器拿到资源,那么这个过程中能够更快的拿到资源对web前端来说体验就会更好

 

 

 

浏览器的一个请求从发送到返回都经历了什么

下面是一个请求的一个流程图

技术分享

用户首先在浏览器输入请求的url地址,浏览器内部的核心代码会将这个url进行拆分解析,最终将domain发送到DNS服务器上,DNS服务器会根据domain去查询相关对于的ip地址,从而将IP地址返回给浏览器,浏览器持有ip地址后就会知道这个请求是要发送到哪个地方(哪个服务器上),然后跟随协议,将ip地址打在协议中,并且请求的相关的参数都会在协议中携带,最终发送到网络中去

然后经过我们自己的局域网——交换机——路由器——主干网络——最终到达服务端

服务端是有个MVC架构的请求会首先进入到Controller中进行相关的逻辑处理和请求的分发——调用Model层(负责和数据进行交互)数据交互的过程中Model会去读取redis和数据库里面的数据——获取到数据之后叫渲染好的页面通过View层返回给网络

这时候一个HTTP请求的Response又从服务端返回到浏览器,浏览器做一个render的过程(就是根据请求回来的html以及这个html所关联的css,js去进行渲染的过程,那么渲染的过程中浏览器会根据html去形成相关的dom树以及对应的css树,然后对dom树和css树进行整合,最终知道某个dom节点知道需要什么样的样式,从而进行样式的渲染)样式渲染完成之后,浏览器会进一步去执行下面的js脚本,执行动态的页面的能力,从而最终的页面就在浏览器中展现出来了

 

 

那么从上面浏览器的一个请求从发送到返回都经历过程中的优化点有哪些呢

dns服务器中进行优化,就是在浏览器层面,设置路由层面将dns服务器中相关的资源进行缓存,这样访问dns的时间就会缩短很多

网络请求的过程中的优化涉及到带宽,网络的选择,缓存等,在很多公司在网络请求的时候都会使用cdn,cdn就解决了网络选择以及缓存的问题,但是访问cdn的过程中会涉及到一个问题,就是cdn是请求静态资源用的,静态资源来说实际上 我们请求中携带的cookie是没有用的,所以在请求静态资源的过程中,将cookie从httprequest的header中去掉,但是很多时候,我们cdn的域名会跟网站的域名相同,那么就会将我们主站的cookie通过我们的网络去携带到cdn的服务端,这个是对网络无畏的损耗,所以cdn的域名不要跟主站的域名一样,这样就可以防止访问cdn的时候携带cookie的问题

但是对于接口我们是没办法使用cdn的

 

dns通过缓存减少dns查询时间

网络请求的过程中走最近的网络环境

相同的静态资源使用缓存

减少http请求的大小

减少http请求的数量

服务端渲染

 

前端性能优化篇—资源合并与压缩减少HTTP请求

标签:输入   缓存   分享   es2017   java   mod   png   链路   red   

原文地址:http://www.cnblogs.com/LO-ME/p/7523596.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!