undefined

发表于 | 分类于 ，
字数统计: 787 | 阅读时长 ≈ 3

Web 性能优化是一个老生常谈的话题，也是前端页面开发十分重要的部分。当页面加载速度越慢，用户流失的概率就越大，性能和交互直接影响用户体验。
下面推荐几款 Web 性能优化辅助工具推荐，希望能对大家有所帮助

Lighthouse

Lighthouse 是 Google 开源的一个自动化工具，用于改进网络应用的质量。你可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。

阅读全文 »

发表于 | 分类于 ，
字数统计: 34 | 阅读时长 ≈ 1

安装hexo-generator-seo-friendly-sitemap 

1
$ npm install hexo-generator-seo-friendly-sitemap --save

在站点配置文件_config.yml中添加 

1
2
sitemap:
    path: sitemap.xml

发表于 | 分类于 ， ，
字数统计: 571 | 阅读时长 ≈ 3

offsetLeft

offsetLeft[Top]:只读，属性，当前元素到定位父级的距离（偏移值），就是到当前元素的offsetParent的距离。

当前元素没有定位，但是有定位父级

css部分：

阅读全文 »

发表于 | 分类于 ，
字数统计: 562 | 阅读时长 ≈ 3

元素.parentNode

元素.parentNode:只读，属性，当前节点的父级节点，一个元素的父节点只有一个。在标准下和非标准下都可以，没有什么兼容问题。
js部分： 

1
2
3
4
window.onload = function() {
var oDiv3 = document.getElementById('div3');
alert( oDiv3.parentNode.id );
}
阅读全文 »

发表于 | 分类于 ，
字数统计: 358 | 阅读时长 ≈ 2

元素.firstChild

元素.firstChild:只读，属性，第一个子节点 

1
2
3
4
5
6
7
8
<body>
	<ul id="ul1">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</body>

添加下列代码来显示第一个子节点

阅读全文 »

发表于 | 分类于 ，
字数统计: 1,053 | 阅读时长 ≈ 4

写在前面的话：工作当中不太推荐使用childNodes，兼容性问题比较多。推荐使用children
DOM是javascript操作网页的接口，全称为文档对象模型（Document Object Model）。它的作用是将网页转为一个JavaScript对象，从而可以使用JavaScript对网页进行各种操作（比如增删内容）。浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点（node），文档的树形结构由12种类型的节点组成。

阅读全文 »