一次页面的简单优化

起因

和原先很好的同事聊天,聊着聊着就说到工作了,他说他的一个页面比较卡,让帮忙分析一下,算是一次页面优化吧.

可能因为电脑配置的原因,在我电脑运行页面并不卡,页面展现主要和excel尽可能一样的效果.里面有大量动态操作dom元素和样式.可以去看看 写更好的JavaScript

通过浏览器的开发人员工具,分析主要的瓶颈并不是在JavaScript上面.主要是在渲染(render)耗时. 最终发现是页面上的元素能达到7万多个.如果再大的话,可能还不止这么多.

如何获取页面的元素个数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        var allElements = document.getElementsByTagName('*');   //星号匹配页面所有的标签
        console.log('页面的元素个数:' + allElements.length);       //输出页面上的元素个数

        var arr = [];                                           //存放所有元素名称的集合
        for (var i = 0, len = allElements.length; i < len; i++) {
            arr.push(allElements[i].tagName);
        }
        console.log('页面的元素名成:' + arr);
    </script>
</body>
</html>

效果

输出html页面上所有元素个数和名称
最终将一次性获取所有要展示的数据,改为需要的时候,再去加载数据到页面.
秋风 2017-08-19
文章分类
algorithm windows linux c cpp csharp javascript java dependon mono javascript browser asp.net core go asp.net database python asm rust english TypeScript EntityFramework Core
友情链接