创设高品质WEB之HTTP首部优化,Chrome开拓者工具不

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

前端当半夏件操作与上传

2017/12/07 · JavaScript · 1 评论 · 文件

最先的作品出处: 人人网FED博客   

前端不可能像原生应用软件同样一直操作当麻芋果件,不然的话张开个网页就会把客商Computer上的文书偷光了,所以须要经过顾客触发,客户可透过以下两种艺术操作触发:

  1. 经过input type=”file” 选拔当麻芋果件
  2. 通过拖拽的办法把公文拖过来
  3. 在编辑框里面复制粘贴

第一种是最常用的花招,平常还只怕会自定义二个按键,然后盖在它上面,因为type=”file”的input不佳改造样式。如下代码写一个取舍控件,并放在form里面:

JavaScript

<form> <input type="file" id="file-input" name="fileContent"> </form>

1
2
3
<form>
    <input type="file" id="file-input" name="fileContent">
</form>

下一场就足以用FormData美高梅老虎机平台,获得整个表单的内容:

把input的value和formData打字与印刷出来是这么的:

美高梅老虎机平台 1

能够观察文件的门径是二个假的路子,约等于说在浏览器不可能获得到文件的实际寄存地点。同不平时间FormData打字与印刷出来是叁个空的Objet,但并非说它的原委是空的,只是它对前端开垦人士是透明的,不可能查看、修改、删除里面包车型地铁剧情,只可以append增多字段。

FormData不能获得文件的开始和结果,而使用FileReader能够读取整个文件的源委。客商挑选文件之后,input.files就能够取得客户选中的文书,如下代码:

JavaScript

$("#file-input").on("change", function() { let fileReader = new FileReader(), fileType = this.files[0].type; fileReader.onload = function() { if (/^image/.test(fileType)) { // 读取结果在fileReader.result里面 $(`<img src="${this.result}">`).appendTo("body"); } } // 打字与印刷原始File对象 console.log(this.files[0]); // base64方式读取 fileReader.readAsDataU福睿斯L(this.files[0]); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("#file-input").on("change", function() {
    let fileReader = new FileReader(),
        fileType = this.files[0].type;
    fileReader.onload = function() {
        if (/^image/.test(fileType)) {
            // 读取结果在fileReader.result里面
            $(`<img src="${this.result}">`).appendTo("body");
        }
    }
    // 打印原始File对象
    console.log(this.files[0]);
    // base64方式读取
    fileReader.readAsDataURL(this.files[0]);    
});

把原本的File对象打字与印刷出来是如此的:

美高梅老虎机平台 2

它是一个window.File的实例,包蕴了文本的退换时间、文件名、文件的分寸、文件的mime类型等。假诺急需限制上传文件的尺寸就足以透过判别size属性有未有超,单位是字节,而要判别是不是为图片文件就足以因而type类型是或不是以image早先。通过判定文件名的后缀大概会禁绝,而经过这种论断会相比准。上边的代码应用了七个正则剖断,假如是一张图纸的话就把它赋值给img的src,并增添到dom里面,但其实这段代码有一点难点,便是web不是全部的图样都能透过img标签展现出来,平时是jpg/png/gif那三种,所以您应有须要再决断一下图片格式,如可以把推断改成:

JavaScript

/^image/[jpeg|png|gif]/.test(this.type)

1
/^image/[jpeg|png|gif]/.test(this.type)

下一场实例化三个FileReader,调它的readAsDataUCRUISERL并把File对象传给它,监听它的onload事件,load完读取的结果就在它的result属性里了。它是叁个base64格式的,可直接赋值给贰个img的src.

应用FileReader除了可读取为base64之外,还能读取为以下格式:

JavaScript

fileReader.readAsDataURL(this.files[0]); // 以二进制字符串格局读取,结果是二进制内容的utf-8方式,已被放任了 fileReader.readAsBinaryString(this.files[0]); // 以原始二进制情势读取,读取结果可径直转成整数数组 fileReader.readAsArrayBuffer(this.files[0]);

1
2
3
4
5
6
7
fileReader.readAsDataURL(this.files[0]);
// 以二进制字符串方式读取,结果是二进制内容的utf-8形式,已被废弃了
fileReader.readAsBinaryString(this.files[0]);
// 以原始二进制方式读取,读取结果可直接转成整数数组
fileReader.readAsArrayBuffer(this.files[0]);

别的的重大是能读取为ArrayBuffer,它是二个原本二进制格式的结果。把ArrayBuffer打字与印刷出来是那般的:

美高梅老虎机平台 3

能够看来,它对前端开拓职员也是晶莹的,不能直接读取里面包车型地铁从头到尾的经过,但足以经过ArrayBuffer.length获得长度,还是能转成整型数组,就会驾驭文书的原始二进制内容了:

JavaScript

let buffer = this.result; // 依次每字节8位读取,放到一个平头数组 let view = new Uint8Array(buffer); console.log(view);

1
2
3
4
let buffer = this.result;
// 依次每字节8位读取,放到一个整数数组
let view = new Uint8Array(buffer);
console.log(view);

假定是透过第三种拖拽的措施,应该怎么读取文件呢?如下html(样式略):

JavaScript

<div class="img-container"> drop your image here </div>

1
2
3
<div class="img-container">
    drop your image here
</div>

那就要页面展现三个框:

美高梅老虎机平台 4

下一场监听它的拖拽事件:

JavaScript

$(".img-container").on("dragover", function (event) { event.preventDefault(); }) .on("drop", function(event) { event.preventDefault(); // 数据在event的dataTransfer对象里 let file = event.originalEvent.dataTransfer.files[0]; // 然后就可以选用FileReader实行操作 fileReader.readAsDataU凯雷德L(file); // 只怕是增加到叁个FormData let formData = new FormData(); formData.append("fileContent", file); })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(".img-container").on("dragover", function (event) {
    event.preventDefault();
})
 
.on("drop", function(event) {
    event.preventDefault();
    // 数据在event的dataTransfer对象里
    let file = event.originalEvent.dataTransfer.files[0];
 
    // 然后就可以使用FileReader进行操作
    fileReader.readAsDataURL(file);
 
    // 或者是添加到一个FormData
    let formData = new FormData();
    formData.append("fileContent", file);
})

数码在drop事件的event.dataTransfer.files里面,获得这些File对象之后就足以和输入框举办同样的操作了,即选用File里德r读取,也许是新建二个空的formData,然后把它append到formData里面。

第三种粘贴的情势,平日是在三个编纂框里操作,如把div的contenteditable设置为true:

JavaScript

<div contenteditable="true"> hello, paste your image here </div>

1
2
3
<div contenteditable="true">
      hello, paste your image here
</div>

粘贴的多少是在event.clipboardData.files里面:

JavaScript

$("#editor").on("paste", function(event) { let file = event.originalEvent.clipboardData.files[0]; });

1
2
3
$("#editor").on("paste", function(event) {
    let file = event.originalEvent.clipboardData.files[0];
});

但是Safari的粘合不是经过event传递的,它是一贯在输入框里面增添一张图片,如下图所示:

美高梅老虎机平台 5

它新建了三个img标签,并把img的src指向二个blob的地头数据。什么是blob呢,怎样读取blob的内容吗?

blob是一连串公事的仓库储存格式,它能够积存大致任何格式的剧情,如json:

JavaScript

let data = {hello: "world"}; let blob = new Blob([JSON.stringify(data)], {type : 'application/json'});

1
2
3
let data = {hello: "world"};
let blob = new Blob([JSON.stringify(data)],
  {type : 'application/json'});

为了获得当地的blob数据,我们能够用ajax发个地点的央求:

JavaScript

$("#editor").on("paste", function(event) { // 必要setTimeout 0等图片出来了再管理 setTimeout(() => { let img = $(this).find("img[src^='blob']")[0]; console.log(img.src); // 用叁个xhr获取blob数据 let xhr = new XMLHttpRequest(); xhr.open("GET", img.src); // 退换mime类型 xhr.responseType = "blob"; xhr.onload = function () { // response正是四个Blob对象 console.log(this.response); }; xhr.send(); }, 0); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#editor").on("paste", function(event) {
    // 需要setTimeout 0等图片出来了再处理
    setTimeout(() => {
        let img = $(this).find("img[src^='blob']")[0];
        console.log(img.src);
        // 用一个xhr获取blob数据
        let xhr = new XMLHttpRequest();
        xhr.open("GET", img.src);
        // 改变mime类型
        xhr.responseType = "blob";
        xhr.onload = function () {
            // response就是一个Blob对象
            console.log(this.response);
        };
        xhr.send();
    }, 0);
});

下面代码把blob打字与印刷出来是那般的:

美高梅老虎机平台 6

能博取它的大大小小和品种,然而具体内容也是不可知的,它有叁个slice的点子,可用以切割大文件。和File同样,能够应用FileReader读取它的内容:

JavaScript

function readBlob(blobImg) { let fileReader = new FileReader(); fileReader.onload = function() { console.log(this.result); } fileReader.onerror = function(err) { console.log(err); } fileReader.readAsDataURL(blobImg); } readBlob(this.response);

1
2
3
4
5
6
7
8
9
10
11
12
function readBlob(blobImg) {
    let fileReader = new FileReader();
    fileReader.onload = function() {
        console.log(this.result);
    }
    fileReader.onerror = function(err) {
        console.log(err);
    }
    fileReader.readAsDataURL(blobImg);
}
 
readBlob(this.response);

除此,仍是能够运用window.U奥迪Q3L读取,那是一个新的API,常常和ServiceWorker配套使用,因为SW里面日常要解析url。如下代码:

JavaScript

function readBlob(blobImg) { let urlCreator = window.URL || window.webkitURL; // 得到base64结果 let imageUrl = urlCreator.createObjectURL(this.response); return imageUrl; } readBlob(this.response);

1
2
3
4
5
6
7
8
function readBlob(blobImg) {
    let urlCreator = window.URL || window.webkitURL;
    // 得到base64结果
    let imageUrl = urlCreator.createObjectURL(this.response);
    return imageUrl;
}
 
readBlob(this.response);

有关src使用的是blob链接的,除了上边提到的img之外,别的二个很广阔的是video标签,如youtobe的录制就是运用的blob:

美高梅老虎机平台 7

这种多少不是平素在本地的,而是通过持续央浼摄像数据,然后再经过blob这几个容器媒介增添到video里面,它也是通过UEnclaveL的API成立的:

JavaScript

let mediaSource = new MediaSource(); video.src = URL.createObjectURL(mediaSource); let sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); sourceBuffer.appendBuffer(buf);

1
2
3
4
let mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
let sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
sourceBuffer.appendBuffer(buf);

切实小编也没实施过,不再张开商量。

上边,大家运用了二种格局获得文件内容,最终收获:

  1. FormData格式
  2. FileReader读取获得的base64也许ArrayBuffer二进制格式

一旦直白正是三个FormData了,那么直接用ajax发出去就行了,不用做其余管理:

JavaScript

let form = document.querySelector("form"), formData = new FormData(form), formData.append("fileName", "photo.png"); let xhr = new XMLHttpRequest(); // 假诺上传文件的接口叫upload xhr.open("POST", "/upload"); xhr.send(formData);

1
2
3
4
5
6
7
8
let form = document.querySelector("form"),
    formData = new FormData(form),
formData.append("fileName", "photo.png");
 
let xhr = new XMLHttpRequest();
// 假设上传文件的接口叫upload
xhr.open("POST", "/upload");
xhr.send(formData);

倘诺用jQuery的话,要设置两特特性为false:

JavaScript

$.ajax({ url: "/upload", type: "POST", data: formData, processData: false, // 不管理数据 contentType: false // 不设置剧情类型 });

1
2
3
4
5
6
7
$.ajax({
    url: "/upload",
    type: "POST",
    data: formData,
    processData: false,  // 不处理数据
    contentType: false   // 不设置内容类型
});

因为jQuery会自动把内容做一些转义,而且依据data自动安装需要mime类型,这里告诉jQuery直接用xhr.send发出去就行了。

入眼调控台发须求的数码:

美高梅老虎机平台 8

可以看看这是一种有别于于用&连接参数的法子,它的编码格式是multipart/form-data,正是上传文件form表单写的enctype:

JavaScript

<form enctype="multipart/form-data" method="post"> <input type="file" name="fileContent"> </form>

1
2
3
<form enctype="multipart/form-data" method="post">
    <input type="file" name="fileContent">
</form>

只要xhr.send的是FormData类型话,它会自动设置enctype,要是您用暗许表单提交上传文件的话就得在form上面安装这些天性,因为上传文件只可以采用POST的这种编码。常用的POST编码是application/x-www-form-urlencoded,它和GET同样,发送的数码里面,参数和参数之间采取&连接,如:

key1=value1&key2=value2

特殊字符做转义,那几个数量POST是身处诉求body里的,而GET是拼在url上面包车型客车,假如用jq的话,jq会帮您拼并做转义。

而上传文件用的这种multipart/form-data,参数和参数之间是且三个同样的字符串隔绝的,上边包车型客车是应用:

——WebKitFormBoundary72yvM25iSPYZ4a3F

以此字符常常会获得相比长、比较轻巧,因为要力保护健康康的剧情之中不会油然则生那几个字符串,那样内容的特殊字符就毫无做转义了。

央浼的contentType被浏览器设置成:

Content-Type:

multipart/form-data; boundary=—-WebKitFormBoundary72yvM25iSPYZ4a3F

后端服务通过那些就理解怎么深入分析那样一段数据了。(经常是应用的框架管理了,而现实的接口无需关爱应该怎么分析)

设若读取结果是ArrayBuffer的话,也是足以一贯用xhr.send发送出去的,然则经常大家不会直接把三个文本的内容发出去,而是用有个别字段名等于文件内容的秘籍。假如你读取为ArrayBuffer的话再上传的话实效不是比不小,还不及间接用formData增添二个File对象的源委,因为地方三种方式都能够获得File对象。如若一初步正是三个ArrayBuffer了,那么能够转成blob然后再append到FormData里面。

采纳相当多的应该是base64,因为前端平常要管理图片,读取为base64之后就足以把它画到八个canvas里面,然后就能够做一些拍卖,如压缩、裁剪、旋转等。最终再用canvas导出二个base64格式的图形,那怎么上传base64格式的呢?

首先种是拼多少个表单上传的multipart/form-data的格式,再用xhr.sendAsBinary发出去,如下代码:

JavaScript

let boundary = "----------boundaryasoifvlkasldvavoadv"; xhr.sendAsBinary([ // name=data boundary, 'Content-Disposition: form-data; name="data"; filename="' + fileName + '"', 'Content-Type: ' + "image/" + fileType, '', atob(base64Data), boundary, //name=imageType boundary, 'Content-Disposition: form-data; name="imageType"', '', fileType, boundary + '--' ].join('rn'));

1
2
3
4
5
6
7
8
9
10
11
12
13
let boundary = "----------boundaryasoifvlkasldvavoadv";
xhr.sendAsBinary([
    // name=data
    boundary,
        'Content-Disposition: form-data; name="data"; filename="' + fileName + '"',
        'Content-Type: ' + "image/" + fileType, '',
        atob(base64Data), boundary,
    //name=imageType
    boundary,
        'Content-Disposition: form-data; name="imageType"', '',
        fileType,
    boundary + '--'
].join('rn'));

上边代码应用了window.atob的api,它能够把base64还原成原始内容的字符串表示,如下图所示:

美高梅老虎机平台 9

btoa是把内容转化成base64编码,而atob是把base64还原。在调atob在此之前,供给把代表内容格式的不属于base64内容的字符串去掉,即上面代码第一行的replace管理。

那样就和平运动用formData类似了,但是出于sendAsBinary已经被deprecated了,所以新代码不建议再接纳这种形式。那如何做吧?

能够把base64转化成blob,然后再append到贰个formData里面,下边的函数(来自b64-to-blob)可以把base64转成blob:

JavaScript

contentType = contentType || ''; sliceSize = sliceSize || 512; var byteCharacters = atob(b64Data); var byteArrays = []; for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { var slice = byteCharacters.slice(offset, offset + sliceSize); var byteNumbers = new Array(slice.length); for (var i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } var byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } var blob = new Blob(byteArrays, {type: contentType}); return blob; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
    var byteCharacters = atob(b64Data);
    var byteArrays = [];
    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      var slice = byteCharacters.slice(offset, offset + sliceSize);
      var byteNumbers = new Array(slice.length);
      for (var i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }
      var byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }
    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

下一场就足以append到formData里面:

JavaScript

let blob = b64toBlob(b64Data, "image/png"), formData = new FormData(); formData.append("fileContent", blob);

1
2
3
let blob = b64toBlob(b64Data, "image/png"),
    formData = new FormData();
formData.append("fileContent", blob);

那样就不要本身去拼几个multipart/form-data的格式数据了。

地点管理和上传文件的API能够合营到IE10+,借使要相称老的浏览器应该咋做呢?

可以依赖三个iframe,原理是暗许的form表单提交会刷新页面,也许跳到target内定的不胜url,然则只要把ifrmae的target指向三个iframe,那么刷新的正是iframe,重回结果也会显得在ifame,然后拿走那么些ifrmae的内容就可获得上传接口重回的结果。

如下代码:

JavaScript

iframe.display = "none"; iframe.name = "form-iframe"; document.body.appendChild(iframe); // 改造form的target form.target = "form-iframe"; iframe.onload = function() { //获取iframe的剧情,即服务重回的多少 let responseText = this.contentDocument.body.textContent || this.contentWindow.document.body.textContent; }; form.submit();

1
2
3
4
5
6
7
8
9
10
11
12
13
iframe.display = "none";
iframe.name = "form-iframe";
document.body.appendChild(iframe);
// 改变form的target
form.target = "form-iframe";
iframe.onload = function() {
    //获取iframe的内容,即服务返回的数据
    let responseText = this.contentDocument.body.textContent
            || this.contentWindow.document.body.textContent;
};
form.submit();

form.submit会触发布单提交,当呼吁实现(成功恐怕退步)之后就能够触发iframe的onload事件,然后在onload事件获得再次来到的多寡,如若伏乞战败了的话,iframe里的剧情就为空,能够用那么些论断诉求有未能如愿。

使用iframe未有主意获得上传进程,使用xhr能够获取当前上传的速度,这几个是在XMLHttpRequest 2.0引进的:

JavaScript

xhr.upload.onprogress = function (event) { if (event.lengthComputable) { // 当前上传进程的百分比 duringCallback ((event.loaded / event.total)*100); } };

1
2
3
4
5
6
xhr.upload.onprogress = function (event) {
    if (event.lengthComputable) {
        // 当前上传进度的百分比
        duringCallback ((event.loaded / event.total)*100);
    }
};

诸如此类就足以做三个忠实的loading进程条。

正文商量了3种交互情势的读取格局,通过input控件在input.files能够收获File文件对象,通过拖拽的是在drop事件的event.dataTransfer.files里面,而由此粘贴的paste事件在event.clipboardData.files里面,Safari那几个怪胎是在编辑器里面插入多个src指向本地的img标签,能够透过发送二个央求加载本地的blob数据,然后再经过File里德r读取,恐怕直接append到formData里面。得到的File对象就能够直接助长到FormData里面,要是急需先读取base64格式做管理的,那么能够把拍卖后的base64转化为blob数据再append到formData里面。对于老浏览器,能够接纳贰个iframe化解表单提交刷新页面或然跳页的主题素材。

总的说来,前端管理和上传当麻芋果件应当大约就是这几个内容了,可是相应还会有比非常多细节尚未聊起到,读者可透过本文列的趋向自行推行。假诺有任何的上传方式还请报告。

1 赞 收藏 1 评论

美高梅老虎机平台 10

Chrome开辟者工具不完全指南(二、进级篇)

2015/06/23 · HTML5 · 3 评论 · Chrome

原来的小讲出处: 卖BBQ夫斯基   

上篇向大家介绍完了根基功能篇,本次分享的是Chrome开拓工具中最有效的面板Sources。  Sources面板大致是本身最常用到的Chrome功效面板,也是在笔者眼里决解日常问题的首要意义面板。平时假使是开辟碰着了js报错也许别的代码难点,在审视贰遍本身的代码而一穷二白之后,小编第一就能展开Sources张开js断点调节和测量试验,而它也差不离能消除本人五分四的代码难点。Js断点那些作用令人欢腾不已,在未有js断点功效,只可以在IE(万恶的IE)中靠alert弹出窗口调节和测验js代码的一世(非常alert一个object根本不会理你),那样的支付意况对于前端工程师来讲简直是一场惊恐不已的梦。本篇小说讲会介绍Sources的现实性用法,协理各位在付出进度中够欢娱地调节和测量试验js代码,实际不是因它而发狂。首先展开F12开辟工具切换来Sources面板中:

美高梅老虎机平台 11

Sources成效面板是能源面板,他注重分为多少个部分,八个部分实际不是单独的,他们竞相关联,互动共同落到实处三个关键的效应:监察和控制js在实行期的移动。简单的说正是断点啊。

先是大家来看区域1,它的效能某些近乎于Resources面板,主假使显得网页加载的剧本文件:例如css, js等资源文件(它不带有cookie,img等静态财富文件)。

 

美高梅老虎机平台 12

 

 

 

区域1的导航条上有八个tab切换选项,他们都存有例外域名和处境下的js和css文件,大家先是来阐明Sources(能源)选项的法力:

Sources: 包罗该项目标静态能源文件。双击选中文件,该公文内容会在区域第22中学展现,如若你选中的是js文件,那么您能够在区域2种单击行号进行断点调节和测量试验,只要js试行到了您所标志的这一行,它会告一段落向下试行而且等待你的通令:

美高梅老虎机平台 13

从上海体育场所能够观察js推行到断点处时各个地方的变通,首先是区域3中的Breakpoints笔录音信会变高亮,然后是区域4中Scope 慎选中列出了断点处私有和国有的变量音讯,那样,小编能够很直观地知道,此时此刻js的实市场价格况。同样的,你可以把鼠标放到区域2种的有些变量上,浏览器会弹出一个小框框,框框里面则是您悬浮其上的变量全部音讯:

 

美高梅老虎机平台 14

接下来,你能够按F10进而js试行的门路一步一步地走下来,假设您超越了叁个函数满含着另外三个函数,那么你可以按F11跻身到个函数中去侦查它的代码试行活动。你也能够通过点击区域1底层的次第Logo对js代码实行追踪。然则本身提议你选取快捷键,故名思义,因为它相比高效便利。然则怎么用完全根据个人习贯来吗。下图是各样开关的意义功能。

 

美高梅老虎机平台 15

 

 在上海体育地方樱草黄圆圈中数字,它们各自代表:

  1、甘休断点调节和测量检验

  2、不跳入函数中去,继续实践下一行代码(F10)

  3、跳入函数中去(F11)

  4、从实践的函数中跳出

  5、禁止使用全部的断点,不做另向外调拨运输试

  6、程序运维时遇到特别时是还是不是中断的按钮

接下去在区域4种切换来Watch Expressions 选项,它的效劳是为近些日子断点增多表明式,使得每一回断点往下走一步都会实施你写下的js代码。供给小心的是其一意义亟须稳重运用,因为那说不定会形成你写下的监督代码段会不断地被实施。

美高梅老虎机平台 16

 

为了防止你的调治代码重复实施,大家得以在调节和测量试验时平素在console调控台上三遍性地出口当前断点处的音信(推荐那样做)。为了印证大家在console面板中具有的是现阶段断点情形,作者门能够对照断点试行前后的this值变化。

美高梅老虎机平台 17      美高梅老虎机平台 18

只要你以为在断点的时候为了看叁个变量必得借用console面板输出的艺术来查看会相比麻烦,那么你可以立异最新版的Chrome,它曾经为大家消除了那些郁闷。为了有帮衬开拓者调节和测验,在那或多或少上Google现已到位了非常,就在前几日更新过Chrome今后,卤煮意各省开采了断点时监察和控制意况变量的其他一种艺术,这种措施极为清晰,在断点调节和测验的时候,区域第22中学会自动展现每一种变量的值,每一次代码往下走的时候那个值都回时时更新。那让开采者对当下情况变量差非常少能够说是吃透。(此功能有一个小弱点,那正是无可奈何查看数组或许指标的现实性索引和值,不过自身信赖google会创新它的。)

美高梅老虎机平台 19

 

当您的类别曾经线上,出现了叁个bug,你修复了现在不可能看到它真的在线上的机能,那么您能够在开发线上的门类,直接在浏览器中期维修改代码然后见到效用。那样的功效往往是最直接的,这种办法也能帮您省去频繁验证发表的辛勤,毕竟身为前端码农的你也一定会听到过后台(经常状态下是后台发表)二弟的埋怨:“XXX,测量检验通过了没,不要出现了哈,发表一遍很费力的!”。而在Chrome里面,只供给在区域2种直接改变,你就足以表明你的代码在线上是或不是可行。卤煮在此处只是指出该意义的用法之一。其余的就凭诸位的才智去想了。

美高梅老虎机平台 20        美高梅老虎机平台 21

固然在断点时,你也足以编写制定代码,按ctrl+S保存之后,你探问到区域2的背景由蓝绿变为浅色,而断点会重新早先实施。

回来区域1,Content script 选项开里面包括着有些第三方插件恐怕浏览器本身的js代码,常常它是被忽视的,实际上它的效果与利益很少。大家得以更加多关怀一下Snippets挑选。还记得基础篇里面介绍的style啊?在里边大家可以编写分界面包车型客车css代码何况即时见到它们的绚烂效果,一样地,在Sinppets中,大家也 可以编写(重写)js代码片段。这么些部分其实就一定于您的js文件一律,差异的是本地的js文件在编辑器里面编辑的,而那边,你是在浏览器中编辑的。那几个代码片段在浏览器刷新的时候既不会收敛,也不会实行,除非是您手动实行它。它能够存在你的当地浏览器中,固然关闭浏览器,再一次张开时它仍旧还在这里。它的重中之重功用能够使得大家编辑一些档期的顺序的测量检验代码时提供便利,你领悟,如果你在编辑器上编写制定这几个代码,在颁发时您无法不为它们增进注释符号也许手动删除它们,而在浏览器上编写制定就无需那样麻烦了。

Snippets创设高品质WEB之HTTP首部优化,Chrome开拓者工具不完全指南。分选的空白点右键后采取弹出的new选项,创立三个你和谐的新的文本,然后在区域2种编辑它。

美高梅老虎机平台 22

 

Snippets 的不胜作用强大,它的重重藏匿成效还应该有待发现。近些日子卤煮使用它是在挥之不去调节和测量检验片段、单元测量检验、一些些的效果代码编写作用上。

最后大家看看js中时间累加的监督检查效能,同上篇小说介绍的一模一样,Sources面板和Elements面板同样有监督事件的功效,何况Sources中效能进一步助长,也尤为有力。它的那部分意义集中在区域3中。笔者以下图为例,观望其效劳。

美高梅老虎机平台 23

 

从上到下,青黄圈内的数字的含义:

1、断点处的债货仓,正是从该函数起,逐级追寻调用到她的函数名。比方:

JavaScript

function a () { b(); } function b() { c(); } function c() { //在该处断点,查看call stack } a->b->c. call stack 从上到下的相继正是 c b a

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function a () {
   b();
}
function b() {
   c();  
}
function c() {
  //在该处断点,查看call stack  
}
a->b->c.
call stack 从上到下的顺序就是
c
b
a

2、在区域2中您的断点调试新闻。当有个别断点在实行的时候对应的信息会高亮,双击该处消息能够在区域第22中学异常的快牢固。

3、增添的Dom监控新闻。

4、击+ 并输入 U陆风X8L 包括的字符串就能够监听该 UEvoqueL 的 Ajax 乞求,输入内容就一定于 URubiconL 的过滤器。若是什么都不填,那么就监听全体 XHPRADO央求。一旦 XH奥迪Q3 调用触发时就能在 request.send() 的地方暂停。

5、为网页增多各连串型的断点音信。如选中了Mouse中的某一项(click),当你在网页上出发这些动作(单击网页任性地方),你浏览器正是随即断点监控该事件。

 

值得再度重新一回,Sources是相似的功能开辟中最常用到也是最得力的功力面板,它个中的成都百货上千功效对于大家付出前端工程以来是极度有扶持的。在web2.0时日的明天,作者不推荐照旧在友好的代码里面写调节和测量试验音讯的一坐一起,因为那会然你的支付变得繁琐。Chrome开采工具给大家提供的强硬成效,大家应该能够利用之。那篇小说就到此截至,即使有一点麻烦,但百川归海基本发挥了卤煮使用经验和主见,希望对你有协理。假诺您感觉不错,请推荐一下本文并继续关怀卤煮在的博客。在下一篇中本人将向大家介绍Chrome开辟工具中的品质方面包车型客车调节和测验。

1 赞 15 收藏 3 评论

美高梅老虎机平台 24

干什么 HTTP 一时候比 HTTPS 好?

2015/05/15 · HTML5 · 3 评论 · HTTP, HTTPS

初稿出处: stormpath   译文出处:开源中夏族民共和国社区   

做为一家安全集团,大家在站点Stormpath上时时被开垦者问到的是有关安全方面最优做法的主题材料。当中二个被日常问到的题目是:

自己是否应该在站点上运维HTTPS?

很黯然,查遍整个因特网,你大好些个动静下会获取同样的提议:加密所有事物!对富有站点进行SSL加密等等!可是,现实况况注解这平常不是一个好的提议。

众多场所下利用HTTP比采取HTTPS要好广大。事实上,HTTP是一个在性质上和可用性上比HTTPS越来越好的一种合同,这也正是大家日常推荐顾客接纳HTTP的缘故。上面大家说一说大家的说辞……

运用 HTTPS 会产出的标题

HTTPS 是三个错漏百出的合同. 此协议及其于今风行的兑现中许相当多多家谕户晓的难题驱动它不适用于广大美妙绝伦的web服务。

HTTPS 十三分款款

美高梅老虎机平台 25

选取 HTTPS 的重大阻碍之一就是 HTTPS 合同十三分慢性的这一实际。

就其本性来讲,HTTPS 正是在两个之间打开安全的加密通讯。这要求双方都不断花费宝贵的CPU时间周期:

●一齐来讲“hello”就决定选用哪一种档案的次序的加密方法 (暗号方案套件)

●验证SSL证书

●为每一个伸手的认证以及对央求/回应的认证核算,运营加密代码

而那听上去不是专程形象,其实便是加密代码运转的是CPU密集型的操作。它会重度使用浮点运算的CPU贮存器,会征用你的CPU进而使得央浼的拍卖变慢。

这里有贰个内容十三分丰硕的 ServerFault 线程,突显了在选用代用 Apache2 的三个 Ubuntu 服务器时,比较之下的管理速度你所能预计会有多大的下滑:

常常来讲是结果:

美高梅老虎机平台 26

固然是像下面所出示的多少个特别简单的演示,HTTPS也能将你的Web服务器的速度拖慢抢先40倍! 那可拖了web质量相当大的后腿.

在今天的碰着中, 将你的应用程序作为 REST API 的一个组成都部队分来创设是很常见的 — 使用 HTTPS 确实是会拖慢你的网站、影响您的应用程序质量并给您的服务器CPU带来不供给的磕碰的一种方法,并且日常会负气你的客户。

对于广大对进程敏感的应用程序来说,使用原有的 HTTP 常常要好广大。

HTTPS 不是三个放之四海而皆准的安全保险

美高梅老虎机平台 27

多多人都会抱有 HTTPS 会让她们的站点更安全,那样一种影像。这其实不是真的。

HTTPS 只是对你和服务器之间的流量进行了加密 — 一旦HTTPS消息的传输中断了,一切就又都是一场公平的游艺。

那表示假如你的微机已经感染的了恶心软件,大概你早就被惨被棍骗运转了一些恶意软件 — 那么些世界上具备的HTTPS对于你来讲也都不能够了。

除此以外,假使 HTTPS 服务器上设有任何的纰漏,有个别攻击者就可见轻便的等到 HTTPS 已经管理完毕,然后再在其他的层(举例 web 服务这一层)抓取到不管怎么数据。

SSL 证书自个儿也是有时被滥用。比如,其在浏览器上的管理方式就很轻便生出错误:

●每一个浏览器(Mozilla,google 等)都是单独审计并查证根证书提供商来有限支撑他们安全地拍卖SSL证书

●一旦核算通过,那几个根 SSL 证书就能被加多到浏览器的可信证书列表,那代表任何由根证书提供商具名的注解都以私下认可同信赖的。

●这么些提供商由此可任性乱搞,导致各个安全难点频发,比方2013年产生的 DigiNostar 事件。

以上各类,知名证书授权机构错误地签定了汪洋的仿制假冒和欺骗的证件,直接伤害数不尽的Mozilla客户的安全。

而 HTTP 并未提供任何款式的加密服务,最少你领悟你正在处理什么事物。

HTTPS流量很轻便被监听

比方你正在营造二个急需被不安全的配备(比方移动 app)使用的 web 服务,你恐怕以为因为您的劳务运作于 HTTPS 上,通信就不会被监听了。

假若真这样想的话,你就错了。

其余人能够轻便地在计算机上设置代理来收获并查看HTTPS流量,也就超出了SSL证书检查,那就一向泄漏了您的腹心音讯。

那篇博文就演示了移动设备上的 https 音信监听。

你认为没多大事?别做梦了!就连Uber这种大厂家的位移使用都被逆向了,它们也用了 HTTPS。如若您灰心了,作者劝你依旧别看这篇作品了。

好了,接受现实吧,不管您怎么办,攻击者都能用这样或那样的点子来监听你的互联网流量。与其把时间浪费在修补 SSL 的主题材料上,还不比花点时间思索怎么明智地利用 HTTP 吧。

HTTPS 有漏洞

世家都精通 HTTPS 并不是铁板一块。多年来 HTTPS 被记者暴露出了不少漏洞:

●POODLE (pdf)

●BEAST

●CRIME

●Heartbleed

●…

从此未来的口诛笔伐会愈发多。再增添 NSA 为通晓密,正全力地访问着 SSL 流量——使用 HTTPS 就好像一点用途都未有,因为不定哪天你的 HTTPS 流量就能够被显而易见。

HTTPS 太贵

终极要说的某个是 HTTPS 太贵了。你必要从根证书颁发机构购买浏览器和顾客端可以辨识的 SSL 证书。

那可不平价啊。

SSL证书年费从几美刀到几千不等——如若您正在营造基于五个微服务(multiple microservices)的布满式应用,你供给买的注脚可不光二个。

对于小品种或预算紧张的人来讲开支一下子就抬高了成都百货上千。

为什么 HTTP 是贰个不错的挑三拣四

在一方面,让大家稍稍不那么难熬片刻,而是静心于积极的东西 : 是怎么着使得HTTP很棒的。大大多开垦者并不欣赏它的益处。

精确标准下的安全

自然HTTP本人并未有提供其余安全性,通过准确的装置你的根基设备和网络,你能够幸免差不离具备的安全主题材料。

率先,对于有着的您可能会用到的里边HTTP服务, 要确认保障您的网络是私家的,无法从集体的外界境遇嗅探到数码包. 那表示你将恐怕徐昂要将你的HTTP服务配置在多个像AmazonEC2那样的可怜安全的网络里面.

透过在 EC2 陈设公共的云服务器,就能够保险你具有五星级的网络安全, 幸免任何其余的AWS顾客嗅探到你的网络流量.

采纳 HTTP 的不安全性来扩张

人人过多的钟情于 HTTP 缺少安全和加密特点的时候,许多少人未有想到的是,这种契约得以提供很好的扩充性。

大多数当代的Web应用程序通过队列来扩展。

您有一个Web服务器接受乞请,然后用处在同一网络上的服务器集群运行单独的jobs来管理更加多的CPU和内部存储器密集型职务。

为了管理职务的排队,大家平常使用一个诸如 RabbitMQ or Redis 那样的系统。两个都以理当如此的选料,可是否足以除了您的互连网外不使用其他基础设备零件而获得职分队列的裨益呢?

使用HTTP,你可以!

它是如此职业的:

●建构Web服务器和具备拍卖服务器分享子网的三个互连网。

●让你的拍卖服务器侦听互联网上的富有数据包,和被动嗅探互联网流量。

●当Web服务器收到HTTP流量,那个管理服务器能够简单地读取进来的伏乞(纯文本,因为HTTP不加密),并当即起首拍卖专门的工作!

上述系统的办事原理就如叁个遍及式队列,快速,高效,轻易。

选取 HTTPS,上述情状是不容许的,但是,通过使用 HTTP,能够大大加快您的应用程序同一时候去除(不供给的)基础设备–那是二个大的征服。

不安全和自负

末尾三个自个儿提议使用HTTP而不是HTTPS的案由:不安全。

不错,HTTP 未有给你的顾客提供安全,可是,安全的确有不可缺少吗?

不独大多数 ISP 监控互联网通讯,过去数年的非常长一段时间里,很刚毅的是政党一度积存并解密了汪洋网络通信。

动用 HTTPS 的忧虑正好比将叁个挂锁来放在一尺高的绿篱上,差不离来说,你不容许保障应用的安全。所以,何须这么艰巨呢?

付出仅依据 HTTP 的劳务,那并未给您的顾客一种安全的错觉,只怕诱骗客商以为本人很安全。事实上,他们很有希望感觉是不安全的,

支出基于 HTTP 的顺序,你的生存将获取简化,并加强和您客商的晶莹。

思考一下吧。

在逗你玩呢 !! >:)

愚人节喜欢哦 !

自己喜欢你不会真的职责作者会提议您不去行使HTTPs ! 小编想要非常肯定的报告您 : 若是您要创设任何什么类型的web应用, 要使用 HTTPS 哦!

您要创设什么项指标应用程序或许服务并不主要,而只要它从不应用HTTPS,你就做错了.

明日,让大家来聊聊HTTPS为何很棒.

HTTPS 是平安的

美高梅老虎机平台 28

HTTPS 是一个业绩不错的很棒的左券. 即使最近几年来有过几回针对其漏洞的采纳事件产生, 但它们一向都以相对比较轻微的难点,並且也急迅被修复了.

而真的,NSA确实在某些阴暗的角落搜集着SSL流量, 但他们力所能致解密就算是很微量SSL流量的或然性都以异常的小的 — 那会要求急速的,功效齐全的量子Computer,并费用数量惊人的钞票. 那东西存在的只怕性貌似空中楼阁,因而你能够安枕而卧了,因为你精通你的站点上的SSL确实在为您的客商数据传输保驾护航.

HTTPS 速度是快的

地方笔者曾涉嫌HTTPS“遭罪似的慢” , 但事实则大概统统相反.

HTTPS 确实必要越来越多的CPU来制动踏板 SSL 连接 — 这亟需的管理技术对于今世管理器来说是小菜一碟了. 你会遇见SSL质量瓶颈的大概完全为0.

方今你更有十分的大或许在您的应用程序或然web服务器品质上碰着瓶颈.

HTTPS 是三个重视的保持

固然 HTTPS 并不放之四海而皆准的web安全方案,可是未有它你就无法以策万全.

享有的web安全都依附你富有了 HTTPS. 假令你从未它, 那么不论是您对您的密码做了多强的哈希加密,只怕做了多少数量加密,攻击者都足以大致的效仿叁个客户端的互联网连接,读取它们的安全凭证——然后轰的一声——你的平安小把戏截至了.

故而 — 就算你不能够有赖于HTTPS化解全体的安全主题素材,你绝对百分之百索要将其应用于你创设的全数服务上 — 不然完全未有别的方法保障你的应用程序的安全.

除此以外,尽管证书签字很断定不是三个完美的实践,但每一种浏览器厂商针对认证部门都有一定严俊和不追求虚名的法则. 要改成一个遭逢信赖的申明单位是非常难的,并且要维持团结优质的声誉也一直以来是勤奋的.

Mozilla (以及其任何商家) 在将不良根认证部门踢出局那项专门的职业方面显示极美丽,并且常常也真的是互连网安全的好管家.

HTTPS 流量拦截是可防止止的

发轫自己提到过,能够很轻易的通过创办属于您本人的SSL证书、信赖它们,进而在SSL通讯的中途拦截到流量.

虽说那纯属有相当大可能率,但也很轻松能够透过 SSL 证书钢钉 来制止 .

真相上讲,根据下边链接的稿子中付出的清规戒律, 你能够是的你的顾客只去相信真正可用的SSL证书,有效的掣肘全体品类的SSL MITM攻击,乃至在它们起首从前 =)

假定你是要把SSL服务配置到八个不受信赖的职分(疑似四个平移照旧桌面应用), 你最应该思虑使用SSL证书钢钉.

HTTPS(再也)不贵了

就算历史上HTTPS曾经昂贵过,而那是实况 — 但再亦非那样了. 这两天你能够从多量的web主机这里买到极度平价的SSL证书.

别的, EFF (电子前沿基金会) 正要推出贰个完全无需付费的 SSL 证书提供单位:

它会在 贰零壹肆 推出, 并必然将转移全数web开拓者的玩乐法规. 一旦让加密的方案上线,你就可见对您的网址和劳务进行百分之百的加密,完全未有其余花费.

请必须要拜访他们的网址,并订阅更新哦!

HTTP 在个人互联网上实际不是平安的

早些时候,作者谈到HTTP的安全性怎么是不首要的,非常是一旦你的网络被锁上(这里的情趣是隔绝了同国有网络的联系) — 笔者是在骗你。

而互连网安全部是关键的,传输的加密也是!

若果二个攻击者获得了对你的其余内部服务的拜候权限,全数的HTTP流量都将会被挡住和平解决读, 不管你的互联网或然会有多“安全”. 这非常不妙哦。

那正是怎么 HTTPS 不管是在公私互连网只怕个体互联网都极度主要的缘故。

额外的信息: 要是您是吗服务配置在AWS下边,就不用想令你的互联网流量是私房的了! AWS 网络正是公家的,这意味着任何的AWS客户都神秘的能够嗅探到您的互连网流量 — 要丰裕小心了。

本身早些时候有提到,HTTP能够用来替代队列,是的,小编没说错,但那是八个很吓人的呼声!

出于安全原因,放大服务的范畴,是多个很吓人的,不佳的瞩目。请不要那样做。

(除非那是五个定义证据,只为了造叁个很酷的示范产品而已)

总结

要是您正在做网页服务,不容置疑,你应当使用HTTPS。

它很轻松、廉价,且能获取客户信赖,未有理由并不是它。作为码农,我们不能不要肩负起保险顾客的沉重,要做到那一点,方法之一正是强制行使HTTPS、

仰望您欣赏这篇作品,供君一乐。

赞 1 收藏 3 评论

美高梅老虎机平台 29

跨域访谈和防盗链基本原理(一)

2015/10/18 · HTML5 · 跨域, 防盗链

原稿出处: 童燕群 (@童燕群)   

从始至终连接:Keep-Alive

HTTP连接设计之初是伸手-响应-关闭,也正是每建构二回HTTP连接,只好进展二遍能源央浼,当要求在平等目的服务器上获取三个财富的时候,就须求反复身无寸铁HTTP连接,而那些多次组建连接的进度,便裁减了网址的习性。

于是,出现了Connection:Keep-Alive,人称长久连接。Keep-Alive制止了创立或许说重新创建连接的经过,收缩了HTTP连接。

而与此配套的有Keep-Alive:timeout=120,max=5

其中,timeout=120 是指这些TCP通道保持120S,max=5 指这么些TCP通道最多接到5个HTTP要求,之后便自行关闭该连接。

一、什么是防盗链

网址能源都有域的定义,浏览器加载一个站点时,首先加载那个站点的首页,平时是index.html或然index.php等。页面加载,如若只是是加载三个index.html页面,那么该页面里面独有文本,最终浏览器只好彰显五个文本页面。丰硕的多媒体音信不能够在站点下边表现。

那正是说我们来看的每一种要素丰硕的网页是什么在浏览器端生成并呈现的?其实,index.html在被解析时,浏览器会识别页面源码中的img,script等标签,标签内部日常会有src属性,src属性常常是多个纯属的U中华VL地址大概相对本域的地方。浏览器会识别种种景况,并最后赢得该资源的独步一时地址,加载该能源。具体的加载进度就是对该财富的UCRUISERL发起三个获取数据的伏乞,相当于GET央求。各个足够的财富结合总体页面,浏览器依照html语法钦定的格式排列获取到每一类财富,最后展现三个完完全全的页面。由此一个网页是由很频仍呼吁,获取众多财富产生的,整个浏览器在一回网页显示中会有看不完次GET须求获取各样标签下的src能源。

美高梅老虎机平台 30

上航海用教室是一篇本站的博客网页显示进度中的抓包截图。能够看来,多量的加载css、js和图表类财富的get央求。

旁观个中的央浼指标地址,能够窥见有两类,四个是本站的43.242段的IP地址,那是本站的长空地址,即向本站自己呼吁财富,经常的话这些是必须的,访谈能源由自身托管。别的一类是探望182的网段拉取数据。那类数据不是托管站内的,是在其他站点的。浏览器在页面显示的历程,拉取非本站的财富,那就称“盗链”。

标准的说,独有少数时候,这种跨站访谈财富,才被称作盗链。纵然B站点作为贰个商业网址,有为数不菲独立自己作主版权的图形,本人浮现用于生意指标。而A站点,希望在投机的网址上边也体现这么些图片,直接利用:

<img src=";

1
<img src="http://b.com/photo.jpg"/>

那样,大批量的顾客端在访谈A站点时,实际上海消防耗了B站点的流量,而A站点却从当中完毕商业目标。从而不劳而获。那样的A站点着实令B站点极慢的。怎么样禁止此类主题素材吗?

HTTP公约和标准的浏览器对于化解这一个主题素材提供方便,浏览器在加载非本站的财富时,会追加多少个头域,头域名字固定为:

Referer:

1
Referer:

而在直接粘贴地址到浏览器地址栏访谈时,乞请的是本站的该url的页面,是不会有这么些referer那么些http头域的。使用Chrome浏览器的调节和测量检验台,张开network标签能够看看每二个能源的加载进度,下边七个图分别是主页面和四个页面国内资本源的加载央浼截图:

美高梅老虎机平台 31

美高梅老虎机平台 32

本条referer标签正是为了告诉央求响应者(被拉取能源的服务端),此次央浼的援用页是何人,能源提供端能够剖析这几个引用者是不是“友好”,是或不是同意其“援引”,对于不容许访谈的引用者,能够不提供图片,那样访员在页面上就只能见到一个图形无法加载的浏览器暗许占位的告诫图片,乃至服务端能够回去三个暗许的唤醒勿盗链的唤醒图片。

相似的站点照旧静态财富托管站点都提供防盗链的设置,相当于让服务端识别钦命的Referer,在服务端接收到必要时,通过匹配referer头域与布署,对于钦赐放行,对于任何referer视为盗链。

1 赞 1 收藏 评论

美高梅老虎机平台 33

客商端渲染

顾客端接受到服务端传输过来的网络财富,然后进行渲染,绘制等,最后体现给顾客。

服务端管理并响应

当服务端接收到顾客端发送来的乞求之后,若是央求内容是静态财富,服务端会从硬盘中抽取静态能源,然后将静态财富位居响应中央中,发送给客商端。倘若是动态财富,服务端首先收取能源,并经过作业逻辑操作,动态变化最终的响应中央,然后发送给客商端。

本文由澳门美高梅老虎机平台发布于美高梅老虎机平台,转载请注明出处:创设高品质WEB之HTTP首部优化,Chrome开拓者工具不

关键词:

HTML5达成显示屏手势解锁【美高梅老虎机平台】,

Service Worker初体验 2016/01/06 · JavaScript· Service Worker 原来的书文出处: AlloyTeam    在2016年,W3C宣布了service worker的草案...

详细>>

浓厚之成立对象的多样格局以及优缺点,晋级指

连不上网?英国卫报的天性离线页面是这么做的 2015/11/20 · HTML5 · ServiceWorker,离线页面 本文由 伯乐在线 -Erucy翻译,...

详细>>

复杂单页应用的数据层设计,应用的特出身份验

特大型单页面应用的进级挑衅 2015/09/30 · HTML5,JavaScript ·单页应用 原版的书文出处: 林子杰(@Zack__lin)    读书须知...

详细>>

至于启用,自定义标签在IE6

自定义标签在IE6-8的窘况 2015/07/20 · HTML5 ·IE,自定义标签 至于启用,自定义标签在IE6。初稿出处:司徒正美    唯恐...

详细>>