值得收藏，Element节点类型详解

来源：http://www.nb-machinery.com 作者：网上十大正规赌博平台时间：2019-10-04 14:40

值得收藏！Web开发的各种性能工具

2015/06/22 · HTML5 · 性能

原文出处： Robin Rendle 译文出处：南北

嗨，各位，又到了周末总结时间！得益于大量的 Grunt 和 Gulp 插件，我们可以轻松实现网站数据的可视化，虽然深入理解这些工具还比较困难，但分门别类的将它们列出来，也是很有帮助的。

DOM Element节点类型详解

2015/09/21 · HTML5 · DOM

本文作者：伯乐在线 - 韩子迟。未经作者许可，禁止转载！
欢迎加入伯乐在线专栏作者。

上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型，本文我们继续深入，谈谈另一个重要的节点类型 Element 。

HTTP Client Hints 介绍

2015/09/14 · HTML5 · 算法

原文出处： imququ（@屈光宇）

最近几年各种 Web 技术一直在爆炸式发展，每天都有大量新东西涌现出来。针对这个现象，业内两位大佬最近先后发文表达了自己的观点：Stop pushing the web forward、Is the web platform getting too big?。其实很早之前我就意识到以我目前的精力，吃透所有 Web 新技术几乎是不可能完成的任务，我关注新技术的侧重点放在了性能优化上。

今天我要向大家介绍的技术是：HTTP Client Hints，也与性能优化有关。利用这项技术，HTTP 客户端（通常可以认为是浏览器）能够主动将一些特性告诉服务端，以便服务端更有针对性地输出内容。这项技术由我们熟知的 Ilya Grigorik 提出，目前还处在较为早期的阶段，较为正式的描述文档可以在这里找到。目前 Chrome 46 (beta) 已支持它，IE 和 Firefox 则还在考虑中。

其实之前浏览器已经将很多自身特性放在 HTTP 请求中，例如下面这些头部字段：

User-Agent：提供浏览器类型及版本、操作系统及版本、浏览器内核等信息；
Accept：表明浏览器支持哪些 MIME type（例如 Chrome 通过 Accept 表明自己支持 image/webp 图片格式）；
Accept-Encoding：表明本浏览器支持哪些内容编码方式（例如：gzip、deflate、sdch）；
Accept-Language：表明本浏览器支持那些语言；

通过以上这些头部字段，我们已经可以针对不同客户端输出不同内容。例如本博客对支持 Webp 格式的浏览器会使用 Webp 来减少图片大小；本博客还会通过 User-Agent 针对 IE 老版本禁用 localStorage 缓存策略。

但是有一些浏览器特性，我们无法直接获取，如屏幕分辨率、设备像素比（devicePixelRatio）、用户带宽等。而在移动 Web 中，为了尽可能节省用户流量，需要输出尺寸最合适的图片资源。为了解决这个问题，常见的方案有：1）使用 JS 获取这些特性，动态拼接图片 URL；2）使用 HTML 中的 sizes 和 srcset 属性、picture 标签或 CSS 中的 image-set 属性来实现响应式图片。方案 1 很简单，这里略过；方案 2 网上有很多相关文章，不熟悉的同学可以自行搜索「响应式图片」了解下。

这里看一个使用方案 2 中提到的 picture、sizes 和 srcset 实现的响应式图片代码（via）：

<source

media="(min-width: 50em)"

sizes="50vw"

srcset="/image/thing-200.webp 200w, /image/thing-400.webp 400w,

/image/thing-800.webp 800w, /image/thing-1200.webp 1200w,

/image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w"

type="image/webp">

<source

sizes="(min-width: 30em) 100vw"

srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w,

/image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w,

/image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w"

type="image/webp">

<source

media="(min-width: 50em)"

sizes="50vw"

srcset="/image/thing-200.jpgxr 200w, /image/thing-400.jpgxr 400w,

/image/thing-800.jpgxr 800w, /image/thing-1200.jpgxr 1200w,

/image/thing-1600.jpgxr 1600w, /image/thing-2000.jpgxr 2000w"

type="image/vnd.ms-photo">

<source

sizes="(min-width: 30em) 100vw"

srcset="/image/thing-crop-200.jpgxr 200w, /image/thing-crop-400.jpgxr 400w,

/image/thing-crop-800.jpgxr 800w, /image/thing-crop-1200.jpgxr 1200w,

/image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr 2000w"

type="image/vnd.ms-photo">

<source

media="(min-width: 50em)"

sizes="50vw"

srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w,

/image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,

/image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w">

<source

sizes="(min-width: 30em) 100vw"

srcset="/image/thing-crop-200.jpg 200w, /image/thing-crop-400.jpg 400w,

/image/thing-crop-800.jpg 800w, /image/thing-crop-1200.jpg 1200w,

/image/thing-crop-1600.jpg 1600w, /image/thing-crop-2000.jpg 2000w">

</picture>

这段冗长的代码只是为了实现一张响应式图片，尽管有一些夸张，实际使用时一般不会写这么全，但从中可以得到一个结论：在客户端实现的策略越多，HTML 体积就越大越冗余，可维护性和可读性就越差。

而使用了 HTTP Client Hints 之后，浏览器在页面发起子资源请求时，会通过新增的一系列头部字段带上分辨率、设备像素比、图片宽度等信息，使得各种复杂的策略可以挪到服务端去实现了。下面来看一看具体细节：

首先，有了支持 HTTP Client Hints 的浏览器之后，页面上还需要显式启用它。这是因为不是所有服务端都实现了响应式输出策略，每次都发送这些新增的头部可能会造成浪费。

与往常一样，这个功能也可以通过 HTTP 响应头和 meta 标签两种方式开启并配置：

Accept-CH: DPR, Width, Viewport-Width

1	Accept-CH: DPR, Width, Viewport-Width

或：

1	<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">

在启用了 HTTP Client Hints 的页面中，所有子资源请求（无论什么类型，无论什么方式创建），都会携带 Accept-CH 属性中所指明的头部，例如：

Accept: image/webp,image/*,*/*;q=0.8 Accept-Encoding: gzip, deflate, sdch Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,en-US;q=0.4,ja;q=0.2,de;q=0.2,zh-TW;q=0.2,cs;q=0.2,pt;q=0.2,ko;q=0.2 Connection: keep-alive DPR: 2 Host: qgy18.imququ.com User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.13 Safari/537.36 Viewport-Width: 1280 Width: 128

Accept: image/webp,image/*,*/*;q=0.8

Accept-Encoding: gzip, deflate, sdch

Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,en-US;q=0.4,ja;q=0.2,de;q=0.2,zh-TW;q=0.2,cs;q=0.2,pt;q=0.2,ko;q=0.2

Connection: keep-alive

DPR: 2

Host: qgy18.imququ.com

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.13 Safari/537.36

Viewport-Width: 1280

Width: 128

有了这些头部，图片服务器可以知道客户端的 devicePixelRatio 是 2、图片宽度是 128px、支持 Webp 格式，所以输出 256px 的双倍 Webp 图最合适。但是浏览器怎么知道这个图片需要作为双倍图来使用呢（也就是说还是显示为 128px）？这就需要在响应头中增加下面这个字段作为 DPR 的回应：

Content-DPR: 2

1	Content-DPR: 2

需要注意的是，请求头中的 Width 字段，是根据 img 标签上的 sizes 属性算出来的。如果图片没有指定 sizes，或者图片请求是通过 JS 创建的，浏览器无法得知 Width，也就不会携带这个头部。

实际上，除了 DPR、Viewport-Width 和 Width 之外，文档还规定了两个字段，但是经过我的测试 Chrome 46 并没有支持它们，这里简单介绍下：

Downlink：用来指示当前网络的下行链路带宽，单位是 Mbps；
Save-Data：用来指示当前浏览器是否工作在省流模式之下，取值为 1 或 0；

可以看出这两个属性，也是为了尽可能给用户节省带宽而设计的。可以预见，后续还会有更多字段加到 HTTP Client Hints 协议中来。随着 HTTP/2 的普及，头部压缩使得增加几个头部字段带来的开销变得很小了。

值得注意的是，使用了 HTTP Client Hints 之后，服务端针对同一个 URL 可能会输出不同的内容，所以无论是中间节点，还是浏览器，在实现响应 Cache 时必须小心，需要针对不同的情况缓存多份内容。这需要用到 HTTP/1 中的 Vary 响应头，例如：

Vary: DPR, Width, Downlink

1	Vary: DPR, Width, Downlink

表明如果需要缓存这个响应，在生成缓存 Key 的时候需要将请求头中的 DPR、Width 和 Downlink 的值计算进去。

好了，HTTP Client Hints 技术就介绍到这里。很欣慰地看到，大部分 Web 新技术都是在给 HTML、CSS 和 JavaScript 增加功能和特性，而这项技术却是把之前复杂的代码和逻辑往后移，让我们的 HTML 代码能够轻装上阵。一些开源图片处理系统已经开始支持这个新特性了，国外的一些 CDN 托管服务肯定也在蠢蠢欲动，我十分期待它的未来。

1 赞收藏评论

内容分发网络（CDN）

CDN 可以帮你把网站的资源分发到世界各地，有助于提高网站的响应速度，当然，这对于那些特殊地区的用户是收效甚微的。

1、概况

Element 类型用于表现 HTML 或 XML 元素，提供了对元素标签名、子节点及特性的访问。 Element 节点具有以下特征：

nodeType 的值为 1
nodeName 的值为元素的标签名
nodeValue 的值为null
parentNode 可能是 Document 或者 Element
其子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或者 EntityReference

要访问元素的标签名，可以用 nodeName 属性，也可以用 tagName 属性；这两个属性会返回相同的值。在 HTML 中，标签名始终都以全部大写表示，而在 XML(有时候也包括 XHTML）中，标签名始终和源代码中保持一致。假如你不确定自己的脚本将会在 HTML 还是 XML 文档中执行，最好还是在比较之前将标签名转换成相同的大小写形式：

JavaScript

var myDiv = document.querySelector('div'); console.log(myDiv.tagName); // DIV console.log(myDiv.nodeName); // DIV if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好，适用于任何文档 // ... }

var myDiv = document.querySelector('div');

console.log(myDiv.tagName); // DIV

console.log(myDiv.nodeName); // DIV

if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好，适用于任何文档

// ...

}

CloudFlare

CloudFlare 的强大之处在于它可以成为你的 DNS 服务器（CDN 只是它所有服务的一个组成部分），这样对你的网站发起的所有请求都会经过它。

CloudFlare 的 CDN 在过去十五年的设计和发展中，并没有一味的守旧和固步自封。我们的专利技术中充分利用了最新的技术进步，包括并不限于硬件、web 服务器和网络路由。换言之，我们创新的建设了下一代的 CDN。新的 CDN 配置简单、价格低廉，其性能也一定比你使用过的任何传统 CDN 都要优秀。

2、HTML 元素

所有 HTML 元素都由 HTMLElement 类型表示，不是直接通过这个类型，也是通过它的子类型来表示。 HTMLElement 类型直接继承自 Element 并添加了一些属性。每个 HTML 元素中都存在下列标准属性：

id 元素在文档中的唯一标识符
title 有关元素的附加说明信息，一般通过工具提示条显示出来
lang 元素内容的语言代码，很少使用
dir 语言的方向，值为 ltr 或者 rtl，也很少使用
className 与元素的 class 特性对应

MaxCDN

CSS-Tricks 当前就在使用 MaxCDN 托管所有的静态资源。它可以无缝地融合 WordPres 和 W3 的所有缓存资源，所以我们无需做什么特别处理，即可将资源移入 CDN，并能保证链接的准确性。

对于一个博客来说，考虑到其中的大文件主要是 JavaScript、CSS 和图片，而不是视频等类型，这贷款占用的可真多。

我们的 CDN 服务同样是一个网站加速器和实时控制中心。创建它，就是为了让网站的用户和运维都能从下一代 CDN 中获得最大收益。

3、特性的获取和设置

每个元素都有一个或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的 DOM 方法主要有三个,分别是getAttribute() setAttribute() removeAttribute()。

注意，传递给 getAttribute() 的特性名与实际的特性名相同，因此要想得到 class 特性值，应该传入 class 而不是 className，后者只有在通过对象属性（property）访问特性时才用。如果给定名称的特性不存在，getAttribute() 返回 null。

<div id='myDiv' title='hanzichi'> </div> <script> var myDiv = document.querySelector('div'); // attribute console.log(myDiv.getAttribute('id')); // myDiv console.log(myDiv.getAttribute('class')); // null console.log(myDiv.getAttribute('title')); // hanzichi console.log(myDiv.getAttribute('lang')); // null console.log(myDiv.getAttribute('dir')); // null // property console.log(myDiv.id); // myDiv console.log(myDiv.className); // '' console.log(myDiv.title); // hanzichi console.log(myDiv.lang); // '' console.log(myDiv.dir); // '' </script>

var myDiv = document.querySelector('div');

// attribute

console.log(myDiv.getAttribute('id')); // myDiv

console.log(myDiv.getAttribute('class')); // null

console.log(myDiv.getAttribute('title')); // hanzichi

console.log(myDiv.getAttribute('lang')); // null

console.log(myDiv.getAttribute('dir')); // null

// property

console.log(myDiv.id); // myDiv

console.log(myDiv.className); // ''

console.log(myDiv.title); // hanzichi

console.log(myDiv.lang); // ''

console.log(myDiv.dir); // ''

</script>

通过 getAttribute() 方法也可以取得自定义特性。

在实际开发中，开发人员不常用 getAttribute()，而是只使用对象的属性（property）。只有在取得自定义特性值的情况下，才使用getAttribute() 方法。为什么呢？比如说 style，在通过 getAttribute() 访问时，返回的 style 特性值包含的是 css 文本，而通过属性来访问会返回一个对象。再比如 onclick 这样的事件处理程序，当在元素上使用时，onclick 特性包含的是 Javascript 代码，如果通过 getAttribute() 访问，将会返回相应代码的字符串，而在访问 onclick 属性时，则会返回 Javascript 函数。

与 getAttribute() 对应的是 setAttribute()，这个方法接受两个参数：要设置的特性名和值。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在，setAttribute() 则创建该属性并设置相应的值。

而 removeAttitude() 方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性。

JavaScript

div.setAttribute('id', 'someOtherId'); div.setAttribute('title', 'some other text'); div.removeAttribute('class')

div.setAttribute('id', 'someOtherId');

div.setAttribute('title', 'some other text');

div.removeAttribute('class')

CloudFront

亚马逊网络服务（AWS）版本的 CDN。

亚马逊 CloudFront 是一个内容分发网络服务。它可以无缝融合入其他的亚马逊网络服务产品，为开发者和企业分发内容到最终用户手中提供了一种简单的方式，整个过程都具有低延迟、高转换速度的特点，也没有最小使用量的强制要求。

4、attributes 属性

Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。 attributes 属性中包含一个 NamedNodeMap，与 NodeList 类似，也是一个“动态”的集合。元素的每一个特性都由一个 Attr 节点表示，每个节点都保存在 NamedNodeMap 对象中。NamedNodeMap 对象拥有下列方法：

getNamedItem(name): 返回 nodeName 属性等于 name 的节点
removeNamedItem(name): 从列表移除 nodeName 属性等于 name 的节点
setNamedItem(node): 向列表中添加节点，以节点的 nodeName 属性为索引
item(pos): 返回位于数字 pos 位置处的节点

attributes 属性中包含一系列的节点，每个节点的 nodeName 就是特性的名称，而节点的 nodeValue 就是特性的值。

JavaScript

// 取得元素的特性值 var id = element.attributes.getNamedItem('id').nodeValue; var id = element.attributes['id'].nodeValue; // getAttribute() 也能实现一样功能 var id = element.getAttribute('id'); // 与removeAttribute() 方法相比，唯一的区别是能返回表示被删除特性的节点 var oldAttr = element.attributes.removeNamedItem('id'); // 添加新特性 // 需要传入一个特性节点 element.attributes.setNamedItem(newAttr);

// 取得元素的特性值

var id = element.attributes.getNamedItem('id').nodeValue;

var id = element.attributes['id'].nodeValue;

// getAttribute() 也能实现一样功能

var id = element.getAttribute('id');

// 与removeAttribute() 方法相比，唯一的区别是能返回表示被删除特性的节点

var oldAttr = element.attributes.removeNamedItem('id');

// 添加新特性

// 需要传入一个特性节点

element.attributes.setNamedItem(newAttr);

一般来说，由于前面介绍的 attributes 方法不够方便，因此开发人员更多的会使用 getAttribute() removeAttribute() 以及setAttribute() 方法。

不过如果想要遍历元素的特性，attributes 属性倒是可以派上用场：

<div id='myDiv' title='hanzichi' class='fish'> </div> <script> var myDiv = document.querySelector('div'); for (var i = 0, len = myDiv.attributes.length; i < len; i ) { var attrName = myDiv.attributes[i].nodeName , attrValue = myDiv.attributes[i].nodeValue; console.log(attrName, attrValue); } // id myDiv // title hanzichi // class fish </script>

var myDiv = document.querySelector('div');

for (var i = 0, len = myDiv.attributes.length; i < len; i ) {

var attrName = myDiv.attributes[i].nodeName

, attrValue = myDiv.attributes[i].nodeValue;

console.log(attrName, attrValue);

}

// id myDiv

// title hanzichi

// class fish

</script>

CDNperf

上述的 CDNs 并不能托管你任意的资源，它们往往只是托管最频繁用到的文件。虽然对于线上产品来说将资源和服务器托管到私有的 CDN 上并不是最好的方式，但这种方式对于分发资源来说仍然是快速和简单的。

CDNperf 可以帮你找出最快和最可信赖的 JavaScript CDNS，让你的网站更快更有朝气。

5、元素的子节点

<ul id='myUl'> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // IE: 3 其他浏览器: 7 </script>

</ul>

var myUl = document.getElementById('myUl');

console.log(myUl.childNodes.length); // IE: 3 其他浏览器: 7

</script>

以上代码，如果是 IE 来解析，那么 <ul> 元素会有 3 个子节点，分别是 3 个 <li> 元素；而如果是其他浏览器解析，则会有 7 个子节点，包括 3 个 <li> 元素和 4 个文本节点。

如果像下面这样将元素之间的空白符删除，那么所有浏览器都会返回相同数目的子节点：

<ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // 所有浏览器： 3 </script>