头顶压缩技巧介绍,入门教程

日期:2019-10-04编辑作者:美高梅老虎机平台

HTML5中与页面展现相关的API

2015/05/15 · HTML5 · HTML5

最先的小讲出处: 涂根华的博客   

在HTML5中,扩大了2个与页面展现相关的API,分别是Page Visibility API与Fullscreen API; 功用分别如下:

Page Visibility API  是指当页面变为最小化状态大概客户将浏览器标签切换成其余标签时会触发。

Fullscreen API 是将页面全体或页面中有些局地区域设为全屏。

Page Visibility API的行使场面如下:

  1. 四个应用程序中享有多幅图片的幻灯片式的连年播放效果,当页面变为不可知状态(最小化状态或许将客户浏览器标签切换成另外标签时),图片停播,当页面变为可知状态时,图片继续播放。
  2. 在三个实时呈现服务器端新闻的应用程序中,当页面处于不可见状态(最小化状态恐怕将客户浏览器标签切换来别的标签时),甘休定时向劳动器端需要数据的管理,当页面变为可知状态,继续实行定期向劳动器端央求数据的拍卖。
  3. 在三个颇有播放摄像效果的应用程序中,当页面处于不可知状态(最小化状态恐怕将客商浏览器标签切换成任何标签时),暂停止播放放录制,当页面变为可知状态时,继续播放摄像。

浏览器辅助程度:Firefox10+,chrome14+,IE10+;

实现Page Visibility API

在选择Page Visibility API时,大家先是须要剖断当前顾客所选择的浏览器以及该浏览器是或不是匡助。代码如下推断:

JavaScript

if(typeof document.hidden !== 'undefined') { hidden = 'hidden'; visibilityChange = 'visibilitychange'; }else if(typeof document.mozHidden !== 'undefined') { hidden = 'mozHidden'; visibilityChange = 'mozvisibilitychange'; }else if(typeof document.msHidden !== 'undefined') { hidden = 'msHidden'; visibilityChange = 'msvisibilitychange'; }else if(typeof document.webkitHidden !== 'undefined') { hidden = 'webkitHidden'; visibilityChange = 'webkitvisibilitychange'; }

1
2
3
4
5
6
7
8
9
10
11
12
13
if(typeof document.hidden !== 'undefined') {
    hidden = 'hidden';
    visibilityChange = 'visibilitychange';
}else if(typeof document.mozHidden !== 'undefined') {
    hidden = 'mozHidden';
    visibilityChange = 'mozvisibilitychange';
}else if(typeof document.msHidden !== 'undefined') {
    hidden = 'msHidden';
    visibilityChange = 'msvisibilitychange';
}else if(typeof document.webkitHidden !== 'undefined') {        
    hidden = 'webkitHidden';
    visibilityChange = 'webkitvisibilitychange';
}

如上,在Page Visibility  API中,能够透过document对象的hidden属性值来剖断页面是或不是处在可知状态,当页面处于可知状态时属性值为false,当页面处于不可知状态时属性值为true。

在Page Visibility中,能够通过document对象的visibilityState属性值来判定页面包车型客车可知状态。该属性值为贰个字符串,其意思如下所示:

    visible: 页面内容部分可见,当前页面位于客户正在查阅的浏览器标签窗口中,且浏览器窗口未被最小化。

    hidden: 页面内容对客户不可知。当前页面不在客商正在查看的浏览器标签窗口中,或浏览器窗口已被最小化。

    prerender: 页面内容已被预渲染,但是对客户不可知。

后天大家来看一个demo,页面中有一个video成分与一个”播放”开关,客商单击”播放”开关时 按键文字变为 ’暂停”,同期开播video元素的摄像,当页面变为最小化状态或客商浏览器标签切换来任何标签时候,摄像被中断播放,当页面苏醒寻常状态或客商将浏览器标签切回页面所在标签时,录制持续播放。

HTML代码如下:

JavaScript

<video id="videoElement" controls width=640 height=360 autoplay> <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/> <source src="Wildlife/Wildlife.webm" type='video/webm' > <source src="Wildlife/Wildlife.mp4" type='video/mp4'> </video> <button id="btnPlay" onclick="PlayOrPause()">播放</button> <div style="height:1500px;"></div>

1
2
3
4
5
6
7
<video id="videoElement" controls width=640 height=360 autoplay>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    <source src="Wildlife/Wildlife.webm" type='video/webm' >
    <source src="Wildlife/Wildlife.mp4" type='video/mp4'>
</video>
<button id="btnPlay" onclick="PlayOrPause()">播放</button>
<div style="height:1500px;"></div>

JS代码如下:

JavaScript

var hidden, visibilityChange, videoElement; if(typeof document.hidden !== 'undefined') { hidden = 'hidden'; visibilityChange = 'visibilitychange'; }else if(typeof document.mozHidden !== 'undefined') { hidden = 'mozHidden'; visibilityChange = 'mozvisibilitychange'; }else if(typeof document.msHidden !== 'undefined') { hidden = 'msHidden'; visibilityChange = 'msvisibilitychange'; }else if(typeof document.webkitHidden !== 'undefined') { hidden = 'webkitHidden'; visibilityChange = 'webkitvisibilitychange'; } document.addEventListener(visibilityChange,handle,false); videoElement = document.getElementById("videoElement"); videoElement.add伊夫ntListener('ended',videoEnded,false); videoElement.add伊芙ntListener('play',videoPlay,false); videoElement.addEventListener('pause',videoPause,false); // 借使页面变为不可知状态 则暂停录制播放 // 若是页面变为可知状态,则持续摄像播放 function handle() { // 通过visibilityState属性值推断页面包车型地铁可知状态 console.log(document.visibilityState); if(document[hidden]) { videoElement.pause(); }else { videoElement.play(); } } // 播放录制function play() { videoElement.play(); } // 暂停止播放放 function pause() { videoElement.pause(); } function PlayOrPause() { if(videoElement.paused) { videoElement.play(); }else { videoElement.pause(); } } function videoEnded(e) { videoElement.currentTime = 0; this.pause(); } function videoPlay(e) { var btnPlay = document.getElementById("btnPlay"); btnPlay.innerHTML = "暂停"; } function videoPause(e) { var btnPlay = document.getElementById("btnPlay"); btnPlay.innerHTML = "播放"; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var hidden,
visibilityChange,
videoElement;
if(typeof document.hidden !== 'undefined') {
    hidden = 'hidden';
    visibilityChange = 'visibilitychange';
}else if(typeof document.mozHidden !== 'undefined') {
    hidden = 'mozHidden';
    visibilityChange = 'mozvisibilitychange';
}else if(typeof document.msHidden !== 'undefined') {
    hidden = 'msHidden';
    visibilityChange = 'msvisibilitychange';
}else if(typeof document.webkitHidden !== 'undefined') {
    hidden = 'webkitHidden';
    visibilityChange = 'webkitvisibilitychange';
}
document.addEventListener(visibilityChange,handle,false);
videoElement = document.getElementById("videoElement");
videoElement.addEventListener('ended',videoEnded,false);
videoElement.addEventListener('play',videoPlay,false);
videoElement.addEventListener('pause',videoPause,false);
// 如果页面变为不可见状态 则暂停视频播放
// 如果页面变为可见状态,则继续视频播放
function handle() {
    // 通过visibilityState属性值判断页面的可见状态
    console.log(document.visibilityState);
    if(document[hidden]) {
        videoElement.pause();    
    }else {
        videoElement.play();
    }
}
// 播放视频
function play() {
    videoElement.play();
}
// 暂停播放
function pause() {
    videoElement.pause();
}
function PlayOrPause() {
    if(videoElement.paused) {
        videoElement.play();
    }else {
        videoElement.pause();
    }
}
function videoEnded(e) {
    videoElement.currentTime = 0;
    this.pause();
}
function videoPlay(e) {
    var btnPlay = document.getElementById("btnPlay");
    btnPlay.innerHTML = "暂停";
}
function videoPause(e) {
    var btnPlay = document.getElementById("btnPlay");
    btnPlay.innerHTML = "播放";
}

实现Fullscreen API

在HTML5中,新扩张了一个Fullscreen API,其意义是将页面全部或页面中有些局地区域设为全屏呈现状态。

浏览器支持程度:Firefox10+,chrome16+,Safari5.1+

在Fullscreen API中,能够由此DOM对象的根节点目的或某些成分的requestFullscreen属性值和施行相对应的措施来推断浏览器是或不是帮助Fullscreen API。代码如下:

JavaScript

var docElm = document.documentElement; if(docElm.requestFullscreen) { docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); }

1
2
3
4
5
6
7
8
var docElm = document.documentElement;
if(docElm.requestFullscreen) {
        docElm.requestFullscreen();
}else if(docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
}else if(docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
}

在Fullscreen API中,也能够透过DOM对象或有些成分的exitFullscreen与CanvelFullScreen属性和办法将眼下页面或某些成分设定为非全屏显示状态。

日常来讲代码:

JavaScript

if(document.exitFullscreen) { document.exitFullscreen(); }else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }

1
2
3
4
5
6
7
if(document.exitFullscreen) {
    document.exitFullscreen();
}else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

在Fullscreen API中,能够透过监听DOM对象或有个别成分的fullscreenchange事件(当页面或因素从非全屏呈现状态成为全屏显示状态,或从全屏展现状态形成非全屏显示状态时触发)。代码如下:

JavaScript

document.addEventListener('fullscreenchange',function(){},false); document.addEventListener('mozfullscreenchange',function(){},false); document.addEventListener('webkitfullscreenchange',function(){},false);

1
2
3
document.addEventListener('fullscreenchange',function(){},false);
document.addEventListener('mozfullscreenchange',function(){},false);
document.addEventListener('webkitfullscreenchange',function(){},false);

在css样式代码中,大家得以行使伪类选拔器来单独钦定处于全屏呈现状态的页面或因素样式:

JavaScript

html:-moz-full-screen { background:red; } html:-webkit-full-screen { background:red; } html:fullscreen { background:red; }

1
2
3
4
5
6
7
8
9
html:-moz-full-screen {
    background:red;
}
html:-webkit-full-screen {
    background:red;
}
html:fullscreen {
    background:red;
}

末尾大家来看四个demo,在页面中有一个按键,点击后,页面会产生全屏状态,再点击后,页面会退出全屏;

HTML代码如下:

JavaScript

<input type="button" id="btnFullScreen" value="页面全屏显示" onclick="toggleFullScreen();"/> <div style="width:百分百;" id="fullscreentState">非全屏显示</div>

1
2
<input type="button" id="btnFullScreen" value="页面全屏显示" onclick="toggleFullScreen();"/>
<div style="width:100%;" id="fullscreentState">非全屏显示</div>

Javascript如下:

JavaScript

var docElm = document.documentElement; var fullscreentState = document.getElementById("fullscreentState"); var btnFullScreen = document.getElementById("btnFullScreen"); fullscreentState.style.height = docElm.clientHeight + 'px'; document.addEventListener('fullscreenchange',function(){ fullscreentState.innerHTML = (document.fullscreen) ? "全屏突显" : "非全屏显示"; },false); document.add伊夫ntListener('mozfullscreenchange',function(){ fullscreentState.innerHTML = (document.mozFullscreen) ? "全屏显示" : "非全屏展现"; },false); document.addEventListener('webkitfullscreenchange',function(){ fullscreentState.innerHTML = (document.webkitFullscreen) ? "全屏呈现" : "非全屏彰显"; },false); function toggleFullScreen() { if(btnFullScreen.value == '页面全屏展现') { btnFullScreen.value = '页面非全屏呈现'; if(docElm.requestFullscreen) { docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }else { if(document.exitFullscreen) { document.exitFullscreen(); }else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } btnFullScreen.value = "页面全屏呈现"; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var docElm = document.documentElement;
var fullscreentState = document.getElementById("fullscreentState");
var btnFullScreen = document.getElementById("btnFullScreen");
fullscreentState.style.height = docElm.clientHeight + 'px';
document.addEventListener('fullscreenchange',function(){
    fullscreentState.innerHTML = (document.fullscreen) ? "全屏显示" : "非全屏显示";
},false);
document.addEventListener('mozfullscreenchange',function(){
    fullscreentState.innerHTML = (document.mozFullscreen) ? "全屏显示" : "非全屏显示";
},false);
document.addEventListener('webkitfullscreenchange',function(){
    fullscreentState.innerHTML = (document.webkitFullscreen) ? "全屏显示" : "非全屏显示";
},false);
function toggleFullScreen() {
    if(btnFullScreen.value == '页面全屏显示') {
        btnFullScreen.value = '页面非全屏显示';
        if(docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }else if(docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }else if(docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
    }else {
        if(document.exitFullscreen) {
            document.exitFullscreen();
        }else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }else if(document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        btnFullScreen.value = "页面全屏显示";
    }
}

美高梅老虎机平台 , 赞 收藏 评论

美高梅老虎机平台 1

技能原理

上面那张截图,取自 Google 的性质专家 Ilya Grigorik 在 Velocity 二〇一四 • SC 会议中分享的「HTTP/2 is here, let’s optimize!」,特别直观地描述了 HTTP/2 中尾部压缩的原理:

美高梅老虎机平台 2

自己再用深入浅出的言语表明下,底部压缩须要在辅助 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/第22中学具有底部名称必得小写。

浅谈Web自适应

2016/07/28 · 基本功技艺 · 自适应

初稿出处: 卖BBQ夫斯基   

渐进式Web应用发展的现状

渐进式Web应用才刚刚起头发展,但骨子里在境内,有个别网址已经实际起头PWA的实行了,例如:和讯、豆瓣、Taobao等平台。恐怕那时候聪明的您只怕就能够生出疑问,那那些PWA不就是和微信小程序同样啊,对是那般,二者的目标是一样的,正是在移动端为顾客提供足够轻量且与原生应用使用体验周围的“轻”应用。

但就当下来说,PWA是Google首荐的一项技艺标准,Fire福克斯,Chrome以及一些基于Blink的浏览器已经援救渐进式Web应用了,Edge上对渐进式Web应用的支撑还在付出。Apple集团也意味着会设想在和煦Safari帮助PWA。但是那项作用已经跻身了WebKit内核的四年安插中。短期来看,对浏览器包容性的帮衬方面应当已经不算太大难题了。何况在时下,在不帮忙渐进式Web应用的浏览器中,你的行使也只是不能采用渐进式Web应用的离线功用而已,除了这些之外的功效均能够符合规律使用。

而在微信那边,依靠巨大的顾客基数和容积能不能够与PWA分庭抗礼以至笑到终极最近还一无所知。

援引传递

拷贝即便很好精晓,可是当班值日是叁个头昏眼花的数据结构的时候,拷贝就能够发生质量上的题目。

由此还会有另一种传递方式叫做按援用传递。

所谓按援引传递,正是传递对象的援用,函数内部对参数的别的改换都会潜濡默化该目的的值,因为两岸援引的是同一个对象。

比方:

var obj = { value: 1 }; function foo(o) { o.value = 2; console.log(o.value); //2 } foo(obj); console.log(obj.value) // 2

1
2
3
4
5
6
7
8
9
var obj = {
    value: 1
};
function foo(o) {
    o.value = 2;
    console.log(o.value); //2
}
foo(obj);
console.log(obj.value) // 2

哎,不对啊,连大家的红宝书都说了 ECMAScript 中具有函数的参数都是按值传递的,这怎么能按援用传递成功吗?

而那毕竟是或不是引用传递呢?

HTTP/2 尾部压缩技能介绍

2015/11/03 · HTML5 · HTTP/2

原来的作品出处: imququ(@屈光宇)   

大家领悟,HTTP/2 协议由三个 牧马人FC 组成:一个是 RFC 7540,描述了 HTTP/2 公约自个儿;二个是 RFC 7541,描述了 HTTP/2 合同中使用的头顶压缩工夫。本文将经超过实际际案例指导我们详细地认知 HTTP/2 底部压缩那门手艺。

参考资料

自适应网页设计(Responsive Web Design)
一抬手一动脚前端自适应解决方案和相比较
运动web适配利器-rem

1 赞 13 收藏 评论

美高梅老虎机平台 3

渐进式Web应用(PWA)入门教程(上)

2018/05/23 · 基本功技艺 · PWA

原稿出处: Craig Buckler   译文出处:葡萄干城控件   

前不久有关渐进式Web应用有那一个座谈,有一部分人还在思疑渐进式Web应用是还是不是就是活动端现在。

但在那篇小说中本身并不会将渐进式APP和原生的APP实行相比较,但有一些是能够无可置疑的,那三种APP的对象都以使顾客体验变得越来越好。

一抬手一动脚端Web应用有非常多可观的概念令人接待不暇,但还好编排三个渐进式Web应用不是三个很劳累的作业。在那篇小说里将向您介绍如何把三个平常的网址转变来渐进式Web应用。你能够依据那篇文章一步一步地做,做完之后你的网址将能够完成离线访问,何况能够在桌面上创造该网址的Logo。那么上边将在开端入门教程。

JavaScript 深切之参数按值传递

2017/05/23 · JavaScript · 参数

初稿出处: 冴羽   

本文由澳门美高梅老虎机平台发布于美高梅老虎机平台,转载请注明出处:头顶压缩技巧介绍,入门教程

关键词:

拖拽上传前传,做可信赖交互动画的

HTML5 — 让拖放变的流行起来 2015/12/29 · HTML5 · 4评论 ·拖放 原来的小讲出处: 韩子迟    先上 Demo,尽量用chrome,代...

详细>>

的有的经验分享,浅谈前端工程化

前端优化带来的思辨,浅谈前端工程化 2015/10/26 · 前端职场 · 的有的经验分享,浅谈前端工程化。2评论 ·工程化 原...

详细>>

【美高梅老虎机平台】别人家的面试题,深刻之

别人家的面试题:总结“1”的个数 2016/05/27 · JavaScript· 5 评论 ·Javascript,算法 正文我: 伯乐在线 -十年踪迹。未经我...

详细>>

10个HTML5摄影及水墨画设计工具,从本质认知Jav

十二个HTML5摄影及油画设计工具 2011/03/26 · HTML5 · 来源:smashinghub    · HTML5 Mr. Doob’s Harmony 特别切合随手绘制勾勒...

详细>>