--- theme: smartblue --- 这是我参与11月更文挑战的第2天，活动详情查看： [2021最后一次更文挑战](https://juejin.cn/post/7023643374569816095) **** ## 写在前面上一篇文章介绍过 [用css+html实现骨架屏的方案](https://juejin.cn/post/7028590020176904199)，这种方式需要在开发时抽离出一部分代码，形成页面的骨骼，增加了一部分开发量，对于一些可以用循环搞定的页面来说，比如列表页增加的开发量还好，但是对于首页这种元素较多的页面就不是很友好了，所以萌生了写一个自动生成骨架屏代码的想法。因为我之前在一直在使用`css+html`的方案，发现其实只需要保留元素最后一层的位置布局就可以了实现基本的骨架，，它的父级元素基本都只是为它提供一种嵌套关系。比如下图这个页面，我只需要保留它`img和p`元素的相对位置即可搭建出这个页面的骨架。

并且js为我们提供了 `getBoundingClientRect()`方法，可以获取到元素相对于可视窗口的位置以及宽高。所以我实现脚本的思路是简化所有元素，对所有元素都一视同仁，统一用`div`去代替，只需要渲染最后一个层级，以定位的方式设置其相对于视窗的位置，形成骨架屏。 >` Element.getBoundingClientRect() ` 方法返回元素的大小及其相对于视口的位置。如果是标准盒子模型，元素的尺寸等于`width/height` + `padding` + `border-width`的总和。如果`box-sizing: border-box`，元素的的尺寸等于 `width/height`。 **** ## 手操实现这时我第一版的思路已经成型，开始按照这个思路开始开发。

### 1.实现idea ``` let skeletonHtml = "" function getDom() { const dom = document.body const nodes = dom.childNodes deepNode(nodes) return skeletonHtml } function deepNode(nodes) { for (let i = 0; i < nodes.length; i++) { let node = nodes[i] if (node.childNodes.length==0) { console.log(node) createDiv(node) } if (node.childNodes.length) { deepNode(node.childNodes) } } } function createDiv(node) { let { width, height, top, left } = node.getBoundingClientRect() const { innerWidth, innerHeight } = window//可视区域宽高 width = ((width / innerWidth) * 100).toFixed(2) + '%' height = ((height / innerHeight) * 100).toFixed(2) + '%' left = ((left / innerWidth) * 100).toFixed(2) + '%' top = ((top / innerHeight) * 100).toFixed(2) + '%' skeletonHtml += `

` } console.log(getDom()) ``` 因为考虑到了机型适配问题,渲染出的`div`宽高以百分比方式做适配。 ### 2.发现问题解决问题理想是美好的，很快碰到了第一个坎`node.getBoundingClientRect is not a function`,然后通过打印node节点发现`childNodes`返回的节点不只有元素节点，还有其他一大堆类型。所以，只需要取`nodeType==1`的元素节点就行。 >childNodes包含了哪些节点？ >由childNodes属性返回的数组中包含着所有类型的节点，所有的属性节点和文本节点也包含在其中。 ``` if (node.childNodes.length==0 && node.nodeType == 1 ) { createDiv(node) } ``` 再次运行，结果又发现了新的问题： 1. `script`标签也被抓取出来； 2. 只有`img`标签的被渲染出来了。分析后得出结果，问题1：不被显示出来的元素都应该忽略掉,并且只需要渲染首屏能看到的元素即可；问题2：因为`img`是单标签，不会存在子节点，而`p`这种双标签并不是最后一层节点，其还会存在文本等子节点。 ``` function deepNode(nodes) { for (let i = 0; i < nodes.length; i++) { let node = nodes[i] if(isHide(node))continue let flag = false for (let j = 0; j < node.childNodes.length; j++) { let childNode = node.childNodes[j] if (childNode.nodeType == 1) { flag = true } } if ((node.nodeType == 1 && !flag) || (node.nodeType == 1 && node.childNodes.length == 0)) { createDiv(node) } if (node.childNodes.length) { deepNode(node.childNodes) } } } function isHide(node) { if (node.nodeType != 1) return false let style = getComputedStyle(node, null) return node.nodeName == "SCRIPT"|| style.display == 'none' || style.opacity == 0 || style.visibility == 'hidden' } function createDiv(node) { let { width, height, top, left } = node.getBoundingClientRect() const { borderRadius } = getComputedStyle(node, null) const { innerWidth, innerHeight } = window // 必须符合要求的元素才渲染：有大小，并且在视图内 if (width > 5 && height > 5 && top < innerHeight && left < innerWidth) { width = ((width / innerWidth) * 100).toFixed(2) + '%' height = ((height / innerHeight) * 100).toFixed(2) + '%' left = ((left / innerWidth) * 100).toFixed(2) + '%' top = ((top / innerHeight) * 100).toFixed(2) + '%' skeletonHtml += `

` } } ``` 解决问题1：在`deepNode()`刚开始时对节点进行一个过滤，不可见的元素节点及其子结点直接跳过。然后`createDiv`创建骨架屏元素时对节点进行判断：只有拥有一定的宽高（宽高大于5px）并且在可视范围内的元素才进行渲染。解决问题2：循环当前节点的子节点，如果子节点存在任意一个元素节点，就代表当前节点还需要递归一次，如果不存在元素节点，就说明它是最后一层元素节点，可以被渲染。实现到这里，获取页面的骨架屏代码已经实现完成了，使用时只需要引入js文件，或者将方法粘贴到控制台都可以获取到页面骨架屏。执行前：

执行后：

### 3.优化--支持过滤当我在一些复杂的页面（商城首页，个人中心）执行脚本时，发现会多出来许多布局较乱的模块，这些模块大都是一些`fixed`定位的运营活动广告位、回到首页等增强用户的快捷按钮，或者是一些小的`icon`一两个字符。所以，有增加了一层过滤判断，支持传入当前节点的`class或者id`，忽略这个节点。 ```js function getDom(options = { removeElements: [] }) { const { removeElements } = options for (var i = 0; i < removeElements.length; i++) { let el = removeElements[i] let reg = /^./ if (el.match(reg) == ".") { removeClass.push(el.substr(1)) } if (el.match(reg) == "#") { removeId.push(el.substr(1)) } } const dom = document.body const nodes = dom.childNodes dom.style.overflow = "hidden" deepNode(nodes) return skeletonHtml } function isRemove(node) { let { className, id } = node if (className || id) { for (let i = 0; i < removeClass.length; i++) { if (className.indexOf(removeClass[i]) > -1) { return true } } if (removeId.includes(id)) { return true } } return false } function createDiv(node) { //... let nodeClassName = node.className ? `node-class=${node.className}`:"" let nodeId = node.id ? `node-id=${node.id}`:"" //... skeletonHtml += `

- 完整代码 [github](https://github.com/yuwuwu/markdown-code/tree/master/%E8%87%AA%E5%8A%A8%E7%94%9F%E6%88%90%E9%A1%B5%E9%9D%A2%E9%AA%A8%E6%9E%B6) - 项目内运行结果

- 京东商城运行结果