前端调优23大规则(Part 4)

前端调优23大规则(Part 4)

Reduce cookie size减少cookie大小

HTTP Cookie(也叫Web Cookie或浏览器Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。HTTP协议是无状态的,即所有发送过的请求都不会被记录下来,为了实现记录一些稳定的状态信息,在这些过程中添加了Cookie。

Cookie主要用于以下三个方面:

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

个性化设置(如用户自定义设置、主题等)

浏览器行为跟踪(如跟踪分析用户行为等)

cookie工作原理如下:

之所以希望cookie的值越小越好,是因为cookie会随HTTP一块发给服务器,如果cookie越小,那么说明我们浏览器发送给服务器的字节数越少。

不同的浏览器所支持的最多的cookie数和cookie大小都会有所有不同。

不同的编码格式会影响到cookie的大小,ASCII每个字符占一个字节,BG2312是中文字符,一个中文字符2个字节,UTF8一个字符占3个字节。

cookie的语法:

Set-Cookie: =

cookie分为两类:一是会话cookie;二是持久cookie;如果是持久cookie那可以通过expire或max-age来设定:

Set-Cookie: id=a3fWa; Expires=Wed, 20 Oct 2019 08:27:00 GMT;

关于cookie的优化,一般有以下一些方法:

1.删除不必要的Cookie,将一些不需要的Cookie可以禁用或直接删除。

2.减小Cookie的大小,尽量将Cookie的大小减小到最小化,这样可以减少HTTP请求报文的大小。

3.为Cookie设置一个合适的过期时间。

4.通过使用不同的domain来减少cookie的使用,Cookie有时候在访问一些资源时,如JS、CSS等,会出现很多一些多余的Cookie,这样可以使用domain来存储这些静态的资源,这样不需要每次发送多余的Cookie到服务器端

0Use cookie-free domains使用空闲Cookie域

cookie在工作过程中,只要我们提交了HTTP请求,cookie就会和请求一块发送到服务器,但是有一种特殊情况是,如果这个组件使用的是cache的内容,这个时候浏览器还是会向服务器发送cookie,但是服务器不会处理 这个cookie的信息。所以这种情况下说白就是cookie白发送,没任何意义。

为了更好的解决这些问题我们会使用一个单独的子域来存储这些静态的组件。让cookie放在一个单独的子域中。这样来减少cookie发送的次数,因为cookie会让请求头的变大。

使用cookie子域带的优点:

1.减少网络流量;

2.减少静态内容的加载时间;

如果需要实现空闲子域来管理cookie,那么需要在web服务器中对它进行详细的配置,以nginx为例,通常配置的方法如下:

server {listen ip:80;server_name test.com;root /srv/http/nginx/ test.com;access_log logs/ test.com.access.log;location / {index index.html;charset utf-8;}}}server {listen 192.168.13.33:80;server_name static.test.com;root /srv/http/nginx/test.com;location / {if ($request_filename ~ “.(jpg|css|gif|png|swf|ico|mp3)#34;) {break;}return 404;}}

Avoid AlphaImageLoader fifilter避免过滤器

AlphalmageLoader过滤器是IE浏览器专有的一个关于图片的属性,主要是为了解决半透明真彩色的PNG显示问题。

AlphalmageLoader的语法如下:

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled ,sizingMethod=sSize , src=”/a2020/img/data-img.jpg” data-src=sURL )

使用AlphalmageLoader过滤器会导致以后问题出现:

—>会增加内在的消耗,因为在加载过程不是按图像应用来加载的,而是按每个元素应用来加载的。

如果使用抓包工具或页面分析工具会发现,使用AlphalmageLoader过滤器请求的时候明显会更长,并且所消耗的内存也会明显增多。

—>这个过滤器在下载图片时会阻止浏览器进行渲染并且冻结浏览器。

not scale images in HTML不要缩放图片

对图片进行缩放的语法如下:

在我们进行性能测试时,发现即使对图片进行了缩放,在发送请求,其实还是对原文件进行请求,所以是否使用缩放,对性能没有任何影响,所以站在性能的角度我们不建议对图片进行缩放,因为缩放可能带来图片显示不全的情况。

那么要解决这个问题就必须要求开发人员根据自己的需要做好一张符合我们尺寸要求的图片。

Make favicon small and cacheable使用ico格式并可缓存

将一些不经常修改的力图片做成ico图标,做成ico图标的目的是为了减小图片大的小,建议做成ico的图标小于10K。

做成ico图标并将其做成可缓存。可使用expires和max-age来设置过期的时间,使用可缓存。

如果将ico图标再优化的话可以将ico图标放置在CDN服务器上。

郑重声明:本文内容及图片均整理自互联网,不代表本站立场,版权归原作者所有,如有侵权请联系管理员(admin#wlmqw.com)删除。
用户投稿
上一篇 2022年6月25日 15:41
下一篇 2022年6月25日 15:42

相关推荐

  • 华为手机怎么扫一扫连接wifi(手机扫一扫在哪里)

    手机浏览器可以用来浏览网页、看新闻、看视频,还能搜索问题,在我们的工作生活中浏览器占据着非常重要的位置。手机浏览器除了这些作用,其实它隐藏着其他功能,比如:扫一扫。扫一扫可不只是用…

    2022年11月24日
  • 白衬衫搭配什么裤子好看,女生衬衫穿法图片

    说起白衬衫和长裤的搭配组合,不知道大家有没有发现,虽然是很常见的造型,可不同年龄段惯用的穿搭方式却不相同,从而也穿出了不同的味道。简直是现在这个季节,时髦精们的必备造型之一~ 70…

    2022年11月24日
  • QQ发布6.8.8.6517测试版 新增GIF表情Tab

    腾讯 QQ 现已面向 macOS 用户发布了 6.8.8.6517 测试版更新,带来了新功能、体验优化和 Bug 修复。 新功能方面,测试版中,QQ 支持记忆消息输入区大小和群成员…

    2022年11月22日
  • 鬼的图片(鬼的图片 头像)

    今天小编给各位分享鬼的图片的知识,其中也会对鬼的图片 头像进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧! 鬼长什么样子呀?(发图片来) 鬼很可怕的,要裁图片…

    2022年11月22日
  • 微博怎么改名字和昵称 微博改名字昵称在哪里改

    微博是一个很火的社交软件,有各种各样内容,有的用户在使用的时候可以关注喜欢的博主等功能,那么微博怎么修改昵称呢?那就让小编带大家来看一下吧! 1.首先打开微博软件进入到微博页面之后…

    2022年11月21日
  • 2022淘宝双12满减是多少规则一览(2022淘宝双12活动什么时候开始)

    还有不到一个月的时间今年的淘宝双12活动就要开始了,还没有在双11期间买到心仪商品的用户,就可以在双12再进行购买了。对于买家来说最关心的就是淘宝双12的优惠力度了,那么,2022…

    2022年11月21日
  • 拼多多免费领商品有什么规则(拼多多免费领商品金币后面是什么)

    拼多多免费领商品活动相信不少小伙伴都参加过,吸引力还是很大的,只要砍价成功就可以免费领到商品,一些小伙伴第一次参加不知道拼多多免费领商品有什么规则?下面小编为大家带来拼多多免费领商…

    2022年11月21日
  • Win11缺点不受欢迎原因曝光:说出不少人心声

    Windows 11发布一年多了,你升级了呢? 从三方统计数据来看,在Windows用户中,Win11目前的占比大约是15%左右,仍远远落后于Win10的71%。 关于Window…

    2022年11月21日
  • 手机浏览器哪个好用(手机浏览器哪个好用?)

    本文主要讲的是手机浏览器哪个好用,以及和手机浏览器哪个好用?相关的知识,如果觉得本文对您有所帮助,不要忘了将本文分享给朋友。 手机浏览器哪个好? 1、百度浏览器 百度浏览器是众多浏…

    2022年11月21日
  • ftp端口号(ftp端口号可以自定义吗)

    FTP端口号是21在FTP服务器中,我们往往会给不同的部门或者某个特定的用户设置一个帐户但是,这个账户有个特点,就是其只能够访问自己的主目录服务器通过这种方式来保障FTP服务上其他…

    2022年11月21日

联系我们

联系邮箱:admin#wlmqw.com
工作时间:周一至周五,10:30-18:30,节假日休息