云顶娱乐棋牌-云顶娱乐每天送6元
做最好的网站

离线网页应用,底部压缩技艺介绍

HTTP/2 尾部压缩技艺介绍

2016/04/13 · 基本功本事 · HTTP/2

本文作者: 伯乐在线 - JerryQu 。未经小编许可,幸免转发!
应接参预伯乐在线 离线网页应用,底部压缩技艺介绍。专辑小编。

小编们知晓,HTTP/2 合同由八个 EvoqueFC 组成:三个是 RFC 7540,描述了 HTTP/2 协议本身;一个是 RFC 7541,描述了 HTTP/2 合同中央银行使的尾部压缩技艺。本文将透超过实际际案例指引大家详细地认识 HTTP/2 底部压缩那门技能。

利用Service worker达成加速/离线访问静态blog网址

2017/02/19 · JavaScript · Service Worker

原稿出处: Yang Bo   

今昔相当的红基于Github page和markdown的静态blog,极度切合本领的牵记和习贯,针对分裂的语言都有点能够的静态blog系统出现,如Jekyll/Ruby,Pelican/Python,Hexo/NodeJs,由于静态内容的风味非常符合做缓存来增长速度页面的拜望,就选择Service worker来落成加速,结果是除了PageSpeed,CDN那几个大规模的服务器和互联网加速之外,通过顾客端完成了越来越好的拜见体验。

行使 Service Worker 做一个 PWA 离线网页应用

2017/10/09 · JavaScript · PWA, Service Worker

原稿出处: 人人网FED博客   

在上一篇《本身是怎么着让网址用上HTML5 Manifest》介绍了怎么用Manifest做贰个离线网页应用,结果被布满网民作弄说那几个东西已经被deprecated,移出web规范了,现在被ServiceWorker取代了,不管什么,Manifest的片段心想依旧得以借用的。作者又将网址晋级到了瑟维斯Worker,借使是用Chrome等浏览器就用ServiceWorker做离线缓存,要是是Safari浏览器就依然用Manifest,读者可以展开那几个网站感受一下,断网也是能通常张开。

用手提式无线电话机访谈本地情况的利器ngrok

2015/08/11 · HTML5 · 4 评论 · ngrok

初稿出处: 吕大豹   

咱俩在调节和测量检验移动端页面,尤其是调养微信页面包车型大巴时候,会遇见这么的意况,手机连着公司的wifi,开荒景况(台式机)插着厂家的网线,我们要用手提式有线话机来访谈开采条件下的页面。今年,要是网线和wifi是在同叁个网段,那么直接在大哥伦比亚大学访谈计算机的ip就足以访问到我们搭在地面包车型客车web服务。可是,相当多时候,公司的互联网并非那般架设的,wifi和网线不在三个网段,那么,通过上述方法就不只怕访谈到了。

不时候调节和测量试验必需在手提式有线电话机上举办,在chrome下的里丑捧心不可能知足。那时候如何做呢?在此之前自个儿使用的是那样的措施,Computer上插四个360wifi(插USB孔的这种),然后分享出销路广,手提式有线电话机连接到那么些热门上网,就足以访问到支付情况了。假若供给查阅http乞请,在Computer上展开fiddler,设置一个代理,然后在手提式无线电话机上安装wifi的代办为fiddler,(端口默许是8888)。那样来自手机的乞请就能被fiddler捕获到,你就会选择fiddler的精锐作用来调度代码了。

上边那几个主意挺实惠的,然而急需几个微细硬件,360wifi。你能够买二个,特别便利,百度也可以有平等的制品。那假若我们手下未有这一个硬件可咋办呢?接下去该主演出场了,那正是ngrok。

ngrok是个怎么样东西呢?其实它正是三个反向代理,我们机器上运营起这一个服务后,它能够把地点的贰个端口代理到公网。代理到公网是哪些概念?公网啊,这就是大家都足以访谈到了,未有别的互联网范围。当然,大家的测量试验机,连接受另外网络下的手提式有线电话机也是能够的了。

可是不幸的时,ngrok架设在美利坚合众国,已经被大家巨大的祖国给墙掉了。然则!一个人良心网上亲密的朋友在本国架设了一台服务器,我们得以大肆使用,击手!

废话说了那般多,大家来会见ngrok到底怎么使用呢?其实是一定轻松的。

一、下载相关文书

率先,从那位老兄架设的网址上(

二、运维服务

下载后的三个公文,大家随意找一个目录放好就行,举个例子,小编放在D盘,这样就行了:
云顶娱乐每天送6元 1

下一场,张开cmd终端,输入如下命令来运维服务: ngrok -config ngrok.cfg -subdomain lvdabao 80

用-config参数来指虞诩顿文件,-subdomain钦命访问的子域名称和本土的端口,现身以下分界面,表达运营成功了:

云顶娱乐每天送6元 2

瞩目一点,那么些子域名称是能够轻巧起的,但无法与人家的重名,因为那些称号是您的代办的独一标志,之后用

三、踏入调节和测验分界面

把服务运维起来还缺乏,大家的末段指标是要调解呀,我们得能捕获到http诉求才行。要贯彻这几个也一定简单,因为ngrok已经为你准备好了。真是优异恩爱啊~

请看上边服务运作起来后的新闻,有一项 Web Interface 127.0.0.1:4040 ,我们直接待上访谈它就足以开展调理了,在您本地浏览器输入那一个地址,试试看吗。

云顶娱乐每天送6元 3

很炫彩有没有,你能够看看http诉求头和返回的内容,你供给的都有了。

与此同期,还会有贰个越来越好用的成效,见到那多少个Replay按键了吧,点击它能够手动再发起三回你选中的伸手,差不离不可能更赞,那样大家调节和测量试验某些数据接口时,也省了老去手提式有线电话机上刷新页面了,特别是调治将养微信页面,不必每趟都去刷该死的二维码了。

其一利器的中坚用法就介绍到此地,能满足大家最早提出的急需了。其实它还也有更加强劲的职能,风乐趣的能够FQ去官方网址查阅文书档案。最后重复为国内的这位仁兄点赞,我们也足以去他搭建的网址上边查占星关材质:

2 赞 5 收藏 4 评论

云顶娱乐每天送6元 4

Vim常用插件——前端开辟工具体系

2015/08/16 · HTML5 · vim, 插件

初稿出处: AlloyTeam   

用作一名开荒者,应该对编辑器之神Vim)与神之编辑器Emacs享有耳闻吧。编辑器之战的具体细节有意思味的童鞋能够google之。

Vim最大的表征是张开速度快,成效庞大,一旦通晓了中间的下令,编制程序进程双臂就无需离开键盘了。

用习贯了Vim的另一个功利是在linux下能够很轻易地用vi来拍卖文件,当然emacs也足以做私下认可编辑器,但是不是每台机器都有安装Emacs。

前几日关键给大家介绍Vim在前端领域的一对常用插件:

为啥要减小

在 HTTP/1 中,HTTP 必要和响应都以由「状态行、央求 / 响应底部、音讯主体」三部分构成。平常来讲,新闻主体都会通过 gzip 压缩,可能自个儿传输的便是压缩过后的二进制文件(比如图片、音频),但气象行和底部却绝非经过任何压缩,直接以纯文本传输。

随着 Web 作用尤为复杂,每种页面发生的必要数也愈增加,依照 HTTP Archive 的总计,当前平均各种页面都会爆发众四个诉求。越多的央浼导致消耗在头顶的流量越来越多,越发是每一次都要传输 UserAgent、Cookie 那类不会频仍改动的从头到尾的经过,完全部都是一种浪费。

以下是本身顺手打开的三个页面包车型大巴抓包结果。能够看来,传输尾部的互连网支付超过100kb,比 HTML 还多:

云顶娱乐每天送6元 5

下边是个中贰个呼吁的细致。可以看出,为了赢得 58 字节的数额,在头顶传输上海消防费了好数倍的流量:

云顶娱乐每天送6元 6

HTTP/1 时期,为了减小尾部消耗的流量,有无数优化方案得以品味,譬如合併央浼、启用 库克ie-Free 域名等等,但是那一个方案或多或少会引进一些新的难题,这里不打开钻探。

加紧/离线访谈只需三步

  • 首页加多注册代码

JavaScript

<script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); } </script>

1
2
3
4
5
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
</script>
  • 复制代码

将保留到你的网址根目录下

  • 修改不缓存域名列表及离线状态页面

在你的sw.js中修改

JavaScript

const ignoreFetch = [ /https?://cdn.bootcss.com//, /https?://static.duoshuo.com//, /https?://www.google-analytics.com//, /https?://dn-lbstatics.qbox.me//, ];

1
2
3
4
5
6
const ignoreFetch = [
  /https?://cdn.bootcss.com//,
  /https?://static.duoshuo.com//,
  /https?://www.google-analytics.com//,
  /https?://dn-lbstatics.qbox.me//,
];

打开Chrome Dev Tools->Source,看看自个儿的blog都援用了什么样第三方资源,各个加到忽略列表里。

云顶娱乐每天送6元 7

在根目录下增多offline.html,在平素不网络且缓存中也远非时采纳,效果如下:

云顶娱乐每天送6元 8

在根目录下增添offline.svg,在无网络时图片能源央浼重返该公文。

1. 什么是Service Worker

Service Worker是Google倡导的贯彻PWA(Progressive Web App)的多少个重大剧中人物,PWA是为了消除守旧Web APP的弱项:

(1)未有桌面入口

(2)不恐怕离线使用

(3)没有Push推送

那Service Worker的具体表现是哪些的啊?如下图所示:

云顶娱乐每天送6元 9

ServiceWorker是在后台运转的一条服务Worker线程,上图作者开了八个标签页,所以显得了八个Client,可是不管开多少个页面都独有贰个Worker在担负管理。那些Worker的行事是把部分能源缓存起来,然后拦截页面包车型大巴恳求,先看下缓存Curry有未有,假设有的话就从缓存里取,响应200,反之没有的话就走正规的伸手。具体来讲,ServiceWorker结合Web App Manifest能一挥而就以下职业(那也是PWA的检查评定标准):

云顶娱乐每天送6元 10

满含能够离线使用、断网时重返200、能唤起客户把网址增添八个Logo到桌面上等。

1.mark.vim

mark.vim关键的效能是变量的高亮。

入选要高亮的词,使用 m 来使其高亮,多个词的高亮会展现为不一致的水彩,在没有必要索求的时候以及代码review的时候使用效果还是挺不错的,

使用n能够去除所选的词的高亮。

越多详细情况可以点击插件主页精晓。

ps: 查找单词能够利用 * 那一个命令来开展高效找出

缩小后的功用

接下去本人将选拔采访本博客的抓包记录以来明 HTTP/2 尾部压缩带来的变型。怎么着采纳 Wireshark 对 HTTPS 网址进行抓包并解密,请看自身的那篇文章。

首先直接上海教室。下图选中的 Stream 是首次访谈本站,浏览器发出的乞求头:

云顶娱乐每天送6元 11

从图纸中得以见到那几个 HEADEENCORES 流的尺寸是 206 个字节,而解码后的头顶长度有 451 个字节。同理可得,压缩后的头部大小收缩了贰分之一多。

只是那正是一体呢?再上一张图。下图选中的 Stream 是点击本站链接后,浏览器发出的呼吁头:

云顶娱乐每天送6元 12

可以观望那叁回,HEADELacrosseS 流的长短唯有 49 个字节,但是解码后的头顶长度却有 470 个字节。那三回,压缩后的底部大小差非常的少唯有原本大小的 1/10。

为何前后两遍差别这么大呢?大家把五遍的底部音信进行,查看同多个字段三遍传输所占用的字节数:

云顶娱乐每天送6元 13

云顶娱乐每天送6元 14

对照后得以窥见,第叁遍的央求尾部之所以一点都相当小,是因为非常多键值对只占用了二个字节。极其是 UserAgent、Cookie 那样的底部,第一遍呼吁中须要占用比非常多字节,后续诉求中都只供给二个字节。

加快效果

首页加快后,网络央求从16降为1,加载时间从2.296s降为0.654s,得到了一晃加载的结果。

云顶娱乐每天送6元 15

基于webpagetest

查看测量检验结果

2. Service Worker的支持境况

Service Worker前段时间独有Chrome/Firfox/Opera协助:

云顶娱乐每天送6元 16

Safari和Edge也在预备扶助Service Worker,由于瑟维斯Worker是Google为主的一项专门的学业,对于生态相比密封的Safari来说也是迫于时势伊始打算协助了,在Safari TP版本,能够看来:

云顶娱乐每天送6元 17

在实验功用(Experimental Features)里曾经有ServiceWorker的菜单项了,只是即便展开也是不可能用,会提醒您还一直不兑现:

云顶娱乐每天送6元 18

但无论是怎么样,起码表明Safari已经策动援救ServiceWorker了。别的还是能看出在当年前年8月公布的Safari 11.0.1本子已经帮助WebRTC了,所以Safari依然三个更进一竿的男女。

Edge也希图支持,所以Service Worker的前景十一分美好。

2.zencoding.vim

zencoding.vim 新生更名字为Emmet.vim,首要功用是贯彻代码的急速编写。

切切实实科目能够参见官方的网址

私家感受是做页面重构的时候用得很多,通过命令能够异常快生成html的组织,提升了前端开荒的生产力。

本领原理

上边那张截图,取自 谷歌(Google) 的习性专家 Ilya Grigorik 在 Velocity 二零一五 • SC 会议中享用的「云顶娱乐每天送6元,HTTP/2 is here, let’s optimize!」,特别直观地陈说了 HTTP/2 中尾部压缩的法规:

云顶娱乐每天送6元 19

自己再用通俗的言语表明下,尾部压缩须求在协理 HTTP/2 的浏览器和服务端之间:

  • 保险一份一样的静态字典(Static Table),包涵常见的尾部名称,以及特地常见的头顶名称与值的咬合;
  • 保证一份同样的动态字典(Dynamic Table),能够动态地加上内容;
  • 补助基于静态哈夫曼码表的哈夫曼编码(Huffman Coding);

静态字典的职能有多个:1)对于截然相配的底部键值对,举例 :method: GET,能够一向行使二个字符表示;2)对于底部名称能够包容的键值对,举例 cookie: xxxxxxx,可以将名称使用多少个字符表示。HTTP/第22中学的静态字典如下(以下只截取了一些,完整表格在这里):

Index Header Name Header Value
1 :authority
2 :method GET
3 :method POST
4 :path /
5 :path /index.html
6 :scheme http
7 :scheme https
8 :status 200
32 cookie
60 via
61 www-authenticate

而且,浏览器能够告诉服务端,将 cookie: xxxxxxx 增多到动态字典中,那样持续一切键值对就足以行使贰个字符表示了。类似的,服务端也可以创新对方的动态字典。要求静心的是,动态字典上下文有关,要求为各样HTTP/2 连接维护差异的字典。

行使字典能够大幅地提高压缩效果,在那之中静态字典在第一回呼吁中就足以采纳。对于静态、动态字典中不真实的剧情,还能使用哈夫曼编码来减小体量。HTTP/2 使用了一份静态哈夫曼码表(详见),也必要内置在顾客端和服务端之中。

此地顺便说一下,HTTP/1 的动静行消息(Method、Path、Status 等),在 HTTP/第22中学被拆成键值对放入尾部(冒号开头的那一个),同样能够享受到字典和哈夫曼压缩。别的,HTTP/2中兼有尾部名称必得小写。

加快/离线原理查究

3. 使用Service Worker

ServiceWorker的行使套路是先挂号三个Worker,然后后台就能够运转一条线程,能够在那条线程运转的时候去加载一些资源缓存起来,然后监听fetch事件,在那个事件里拦截页面包车型地铁伸手,先看下缓存里有未有,倘若有平昔回到,否则符合规律加载。或然是一开头不缓存,每种能源伏乞后再拷贝一份缓存起来,然后下壹遍呼吁的时候缓存里就有了。

3.ctrlp.vim

ctrlp.vim注重意义是对文件以及buffer进行模糊查询,快速展开文件。

操作实举个例子下图所示:

云顶娱乐每天送6元 20

云顶娱乐每天送6元 21

在了然文书名的景观下,使用ctrl + p展开此插件,输入文件名,实则是文件名开端多少个字母就可以高速张开文件。

ps:假诺当前的公文已经保存好,那么会一向替换到搜索到的文件,若无保存的,会进展窗口的相间类似与sp的下令。

就此在对照文件的气象下自身常常会用vsp来划分窗口恐怕tabnew一个新的tab,再张开新的公文。

一经须要查其他目录可能忘记了文本名的话,就足以选取下边包车型地铁插件NEHavalD_tree了。

本文由云顶娱乐棋牌发布于云顶娱乐棋牌,转载请注明出处:离线网页应用,底部压缩技艺介绍

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。