关于前端:记一个笔试题

12次阅读

共计 1614 个字符，预计需要花费 5 分钟才能阅读完成。

DOM 的体积过大会影响页面性能，如果你想在用户敞开页面时统计（计算并反馈给服务器）以后页面元素节点的数量总和、元素节点的最大嵌套深度以及最大子元素个数，请用 JS 配合原生 DOM API 实现需求（不必思考古老浏览器以及在古代浏览器中的兼容性，能够应用任意浏览器的最新个性；不必思考 shadow DOM）。比方在如下页面中运行后：

<html>
    <head></head>
    <body>
        <div>
            <span>f</span>
            <span>o</span>
            <span>o</span>
        </div>
    </body>
</html>

会输入：

{
    totalElementsCount: 7,
    maxDOMTreeDepth: 4,
    maxChildrenCount: 3
}

编程实现（能够查阅相干 DOM API，然而不能够应用前端框架 or 类库）：

export function calculateDOMNodes () {// your implementation code here:}
window.addEventListener('close', calculateDOMNodes);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div>
        <div>
            <div></div>
        </div>
        <div></div>
    </div>
    <div>
        <div></div>
    </div>
<script>


let counts;

window.addEventListener('beforeunload', () => {counts = walk(document.body);
    navigator.sendBeacon('http://127.0.0.1:10000/beacon', JSON.stringify(counts));
});

window.addEventListener('close', calculateDOMNodes);

function calculateDOMNodes () {navigator.sendBeacon('http://127.0.0.1:10000/beacon', JSON.stringify(counts));
}

console.log(walk(document.body));

function walk (root) {let start = Date.now();

    let stack = [root];
    let nextLevel = [];
    
    let totalElementsCount = -1;
    let maxDOMTreeDepth = 0;
    let maxChildrenCount = 0;

    while (stack.length || nextLevel.length) {if (!stack.length) {
            stack = nextLevel;
            nextLevel = [];
            maxDOMTreeDepth++;
            continue;
        }
        let ele = stack.pop();
        totalElementsCount++;
        if (maxChildrenCount < ele.children.length) maxChildrenCount = ele.children.length;
        nextLevel.push(...ele.children);
    }

    return {
        totalElementsCount,
        maxDOMTreeDepth,
        maxChildrenCount,
        time: Date.now() - start};
}
</script>
</body>
</html>

正文完