前端页面优化方法 web页面级优化

前端页面优化方法 web页面级优化

沙盘模拟心得-又见作文

前端性能优化之⽹络篇

前端性能优化之⽹络篇

这是学习后的总结和记录

⽤户输⼊url到页⾯呈现经历了哪些过程?

DNS域名解析

TCP链接

HTTP请求

HTTP响应

渲染

但从⽹络层⾯分析,影响性能的点有哪⼏部分呢?

DNS域名解析时间太长?可以通过浏览器DNS缓存和DNS预加载解决,TCP每次都要建⽴三次握⼿,属实没有必要怎么办呢?可以通过TCP长

链接,预链接等。HTTP层⾯的优化可以分为减少HTTP请求提及和减少HTTP请求次数等⽅⾯优化

⽹络层⾯优化分类

#请求过程的优化

-构建⼯具Webpack调优

-⽣产环境:主要提升构建速度

-开发环境:主要优化打包体积

-Gzip压缩原理

-前端图⽚的选型

#减少HTTP请求次数

-本地存储技术

-浏览器缓存

-离线存储技术

-CDN缓存和回源机制

Webpack构建⼯具调优

Webpack优化可以从开发和⽣产作为切⼊点,在开发环境下注重构建速度的提升,否则你修改⼀⾏代码command+s保存,重新编译等待⼀分

钟,阁谁谁都受不了。⽣产环境也就是直接⾯向⽤户的,主要注重打包的提及。你⼀个js包20多兆,能给⽤户卡死还费⽤户的流量。

缩⼩构建范围

解析loader单进程转换为多进程,使⽤happypack插件

提前打包第三⽅库,通过webpack模块的DllPlugin和DllReferencePlugin创建动态链接库

中间件缓存步骤,通过配置HardsourceWebpackPlugin插件

分包,Webpack4.x提供hunks提取公⽤代码

Tree-Shaking,删除沉淤代码

按需加载

以上的调优⽅案主要是构建⼯具的压缩与合并

Gzip压缩原理

开始Gzip压缩,只需要在请求头添加⼀句accept-encoding:gzip。

HTTP压缩是⼀种内置到⽹页服务器和⽹页客户端中以改进传输速度和带宽利⽤率的⽅式,在使⽤HTTP压缩的情况下

HTTP数据在服务器发送前就已压缩,兼容的浏览器将在下载所需的格式前宣告⽀持何种⽅法给服务器。

不⽀持压缩⽅法的浏览器将下载未经压缩的数据。最常见的压缩⽅案包括Gzip和Deflate。

HTTP压缩就以缩⼩提及为⽬的,对HTTP内容进⾏重新编码的过程。

Gzip压缩的原理是在⼀个⽂本⽂件中找出⼀些重复出现的字符串,进⽽替换他们,从⽽使⽂件体积变⼩。

图⽚选型

不同的业务场景下使⽤合适的图⽚类型，从⽽达到在压缩图⽚体积实现优化的同时尽量保证质量

时下应⽤较为⼴泛的Web图⽚格式有JPEG/JPG、PNG、SVG、Webp以及Base64、精灵图等。

JPEG/JPG

特点:有损压缩,体积⼩,加载快,不⽀持透明

应⽤场景:⼀些⽹站的⼤图,如背景图,轮播图和banner图等

缺点:不⽀持透明,如需使⽤透明图则⽤PNG

PNG

PNG分为PNG-8和PNG-24。8位的PNG⽀持256种颜⾊,⽽24位的PNG⽀持1600万种颜⾊。

特点:⽆损压缩,质量⾼,体积⼤,⽀持透明

应⽤场景:适⽤与更强的⾊彩表现⼒图⽚,如⽹站logo,⽹站上的⼀些⼩图标等。

SVG

特点:⽂本⽂件,体积⼩,不失真,兼容性好

SVG和上⾯的JPG和PNG⽐较,具有更⼩的体积,可压缩性更强。

SVG使⽤:

将SVG写⼊HTML

将SVG写⼊独⽴⽂件后引⼊HTML(使⽤居多)

Base64和精灵图

图像精灵（sprite，意为精灵），被运⽤于众多使⽤⼤量⼩图标的⽹页应⽤之上。它可取图像的⼀部分来使⽤，使得使⽤⼀个图像⽂件替代

多个⼩⽂件成为可能。相较于⼀个⼩图标⼀个图像⽂件，单独⼀张图⽚所需的HTTP请求更少，对内存和带宽更加友好。

Base64对出现也是为了减少HTTP的请求数量,从⽽提升⽹页性能。Base64是作为精灵图的补充⽽存在的。

特点:⽂本⽂件、依赖编码、⼩图标解决⽅案

Base64是⼀种⽤于传输8Bit字节码的编码⽅式,对⼩图标进⾏Base64进⾏编码,我们可以直接将编码的结果插⼊到HTML⽂件和Css中,从

⽽减少HTTP请求数

Base64编码⼯具,可以借助于构建⼯具Webpack,使⽤url-loader和file-loader进⾏编码

s={

//...

module:{

rules:[

{

test:/.(png|jpe?g|gif|svg)(?.*)?$/,

loader:\'url-loader\',

options:{

limit:10000//⼩于10000

}

}

]

}

}

以上代码配置⼩于10000字节的图⽚都将为Base64编码。

Webp

WebP是Google开发的⼀种⽆损压缩图像格式。它⽀持有损压缩和⽆损压缩,可以说它集成了JPG、PNG等优点。唯⼀缺点就是兼容性不

好。

浏览器缓存技术

缓存可以减少⽹络IO消耗，提⾼访问速度。浏览器缓存是⼀种操作简单、效果显著的前端性能优化⼿段。

通过⽹络获取内容既速度缓慢⼜开销巨⼤。较⼤的响应需要在客户端与服务器之间进⾏多次往返通信，这会延迟浏览器获得和处理内容的时

间，还会增加访问者的流量费⽤。因此，缓存并重复利⽤之前获取的资源的能⼒成为性能优化的⼀个关键⽅⾯。

按照获取资源时请求的优先级排序:

MemoryCache(内存缓存)

ServiceWorkerCache(服务⼯作缓存)

HTTPCache(HTTP缓存)

PushCache(推⾼速缓存)

HTTPCache浏览器缓存

HTTP缓存可以分为强缓存和协商缓存

强缓存

强缓存是利⽤HTTP头部的Expires和Cache-Control两个字段来控制的。当请求再次发送时,浏览器会根据其中的Expires和Cache-

Control来判断是否命中强缓存,如果命中则直接返回缓存中的资源,不会和服务器发⽣通讯。

强缓存的标记:formdistcache

Expires和Cache-Control有什么关系呢?

Cache-Control是Expires的替代品。之前都是使⽤Expires,在响应头中返回Expires强缓存字段值。类型如下:

expires:Wed,11Sep201916:12:18GMT

Expires是⼀个时间戳,当我们再次向服务器发送请求,浏览器会先对⽐expires时间戳和客户端时间，如果⼩于客户端时间,说明缓存没有过

期,直接去缓存中取资源。

但是Expires有⼀个缺陷,对⽐依赖客户端时间。如果服务器和客户端时间不⼀致,我们⼿动修改客户端时间,那么expires是⽆法达到我们的

预期。

HTTP1.1新增了Cache-Control来替代Expires。它和Expires的作⽤相同,Expires能做的事情它都可以做,Expires不能做的事情它还可以

做。

Cache-Control字段如下

cache-control:max-age=31536000

Cache-Control是通过max-age来控制缓存资源的有效期,它并不是时间戳,⽽是⼀个时间长度。表⽰该资源在多少秒内是有效的。

Cache-Control⽐Expires更加准确,它的优先级更⾼。当Cache-Contorl和Expires同时存在时,会优先使⽤Cache-Control。

no-cache绕开了浏览器:当我们为资源设置了no-cache时,每⼀次发送的请求都不会去询问浏览器的缓存情况,⽽是直接去服务端确认该资

源是否过期。

no-store表⽰不使⽤任何缓存,也不会去服务端确认资源是否过期,只允许你向服务端发送请求,并下载完整的响应

协商缓存

协商缓存依赖于客户端与服务端的通讯。

客户端会向服务端询问缓存的相关信息,进⽽判断是重新发送请求,下载完整的资源。还是从本地获取缓存的资源。

如果服务端资源未曾改动(last-Modified),资源会被重定向到浏览器缓存,这种情况下⽹络请求的状态码为304

协商缓存的字段:Last-Modified和Etag

Last-Modified是⼀个时间戳,第⼀次请求时会随着响应头返回。

Last-Modified:Fri,27Oct201706:35:57GMT

当我们再次请求时,请求头会携带⼀个If-Modified-Since资源,其对应的时间戳就是Last-Modified返回的时间戳。

If-Modified-Since:Fri,27Oct201706:35:57GMT

当服务端拿到请求中的If-Modified-Since,会对⽐该时间戳和资源在服务器上最后修改的时间是否⼀只,从⽽判断资源是否改动。如果发⽣

了变化就返回⼀个完整的响应内容,并且更新响应头(responesheaders)中的Last-Modified为最新值。否则就返回304响应,且响应头不

会携带Last-Modified字段。

Last-Modified字段存在⼀些缺点,有时服务器⽆法感知⽂件是否发⽣变化。为了解决这以问题,Etag来弥补Last-Modified的不⾜。

Etag是服务器为每个资源⽣成的唯⼀的标⽰字符串,⽣成的⽅式是根据⽂件的内容进⾏编码的,当⽂件内容改变时,Etag的值也会发⽣变化,反

之依然。所以Etag可以精确的感知⽂件的变动。

Etag和Last-Modified⼀样,⾸次请求时,响应头⾥获取⼀个最初的标⽰字符串。如下:

ETag:W/\"2a3b-1602480f459\"

当下⼀次的请求时,请求头中会携带相同的、名为if-None-Match的字符串和服务器的标⽰对⽐。更精确的判断⽂件是否改动。

If-None-Match:W/\"2a3b-1602480f459\"

Etag在感知⽂件的变动⽐Last-Modified更精确,所以Etag的优先级更⾼。Etag和Last-Modified同时存在,以Etag为准。

MemoryCache(内存缓存)

MemoryCache，是指存在内存中的缓存。从优先级上来说，它是浏览器最先尝试去命中的⼀种缓存。从效率上来说，它是响应速度最快的

⼀种缓存。

内存缓存是快的,也是短命的。它和渲染进程⽣死相依。当进程结束后,内存缓存的数据也将不复存在。

内存缓存资源存放的位置具有⼀定的随机性。

ServiceWorkerCache(服务⼯作缓存)

ServiceWorker是⼀种独⽴于主线程之外的Javascript线程。它脱离于浏览器窗体，因此⽆法直接访问DOM。这样独⽴的个性使得

ServiceWorker的“个⼈⾏为”⽆法⼲扰页⾯的性能，这个“幕后⼯作者”可以帮我们实现离线缓存、消息推送和⽹络代理等功能。我们

借助Serviceworker实现的离线缓存就称为ServiceWorkerCache。

ServiceWorker的⽣命周期包括install、active、working三个阶段。⼀旦ServiceWorker被install，它将始终存在，只会在active

与working之间切换，除⾮我们主动终⽌它。这是它可以⽤来实现离线存储的重要先决条件。

PushCache

PushCache是指HTTP2在serverpush阶段存在的缓存。这块的知识⽐较新，应⽤也还处于萌芽阶段。

存储技术

HTTPCookie（也叫WebCookie或浏览器Cookie）是服务器发送到⽤户浏览器并保存在本地的⼀⼩块数据，它会在浏览器下次向同⼀服

务器再发起请求时被携带并发送到服务器上。通常，它⽤于告知服务端两个请求是否来⾃同⼀浏览器，如保持⽤户的登录状态。Cookie使

基于⽆状态的HTTP协议记录稳定的状态信息成为了可能。

由于Cookie的⼤⼩有限,根据不同的浏览器⼤⼩各不相同。最⼤能存储5kb。⼀般多应⽤于:

会话状态管理（如⽤户登录状态、购物车、游戏分数或其它需要记录的信息）

个性化设置（如⽤户⾃定义设置、主题等）

浏览器⾏为跟踪（如跟踪分析⽤户⾏为等）

如果让Cookie存储⼀些⼤量的数据显然是不合理的,因为Cookie每次都会携带在请求头部发送给服务器,所以也会造成HTTP请求头过⼤。

HTML5WebStorage

WebStorage是HTML5为了解决客户端存储⽽诞⽣的。允许你在⼀个特定的域中设置、检索和删除数据和存储类型。

WebStorage分为:

sessionStorage:给每⼀个给定的源,维持⼀个独⽴的存储区域,该存储区域在页⾯回话期间可⽤,也就是当浏览器关闭了,这个保存的数据也随

之销毁。

constdata=[1,2,3]

m(\'arr\',data)//存储arr为键名,data是要存储的数据

letgetData=m(\'arr\')//根据键名去对应的数据

(typeofgetData)//string//取出的是字符串类型

当关闭浏览器再重新开启这个页⾯,存储的数据会不复存在,因为它是会话存储。

localStorage:和sessionStorage⼀样,只不过它是持久化存储,除⾮你⼿动删除存储的数据,否则关闭浏览器后数据仍然存在。

constdata=[1,2,3]

m(\'arr\',data)//存储arr为键名,data是要存储的数据

letgetData=m(\'arr\')//根据键名去对应的数据

(typeofgetData)//string//取出的是字符串类型

Item(\'arr\')//根据指定的键名清楚缓存

当你存储完数据之后,关闭浏览器再打开数据还是存在的。因为它是持久存储

localStorage和sessionStorage存储的数据都不会被请求头所携带,⽽Cookie是每次都会被请求头携带

CDN的缓存和回源机制

CDN(内容分发⽹络)是将源站内容分发⾄最接近⽤户的节点,使⽤户可就近取得所需的内容,提⾼⽤户访问的响应的速度和成功率。解决因分

布、带宽、服务器性能带来的访问延迟问题。

CND是如何⼯作的:

假设我的根服务器在杭州,同时北京、上海、成都、⼭东都有我的机房。此时⾝在⼭东的你向我请求资源,在⽹络带宽⼩、⽤户访问量⼤的情

况下,杭州的根服务器不能给⽤户⾮常快的响应速度。那么我可以把这些资源复制⼀份放到距离⽤户最近的机房呀。当你请求资源时,⼭东这

台服务器低头⼀看,这个资源我存了,况且离得这么近响应速度那是杠杠的。如果⼭东这台服务器没有存你要的资源,它就会向杭州的根服务器

要资源。此刻,⼭东的这台服务器就扮演着CND的⾓⾊。

CDN的两个核⼼点就是缓存和回源。缓存就相当于把根服务器的资源复制⼀份放到⼭东的机房中。⽽回源就是⼭东机房发现没有你要的资

源,它就向根服务器或者上级服务器去要资源。

根服务器也就是业务服务器,需要对业务进⾏⼤量的计算。⽽CDN服务器可以理解为⼀个仓库,只负责存放和转运⼀些东西,特别是静态的资

源。如js、css、image等。

总结

前端性能优化⽹络篇我们分别从HTTP请求优化和减少HTTP请求次数⼊⼿。实践了webpack调优、Gzip压缩、前端图⽚选型、浏览器缓

存、本地存储、CDN的缓存等⼏⽅⾯⼊⼿。