文档章节

前端面试宝典(4)——必掌握

小木fan
 小木fan
发布于 2017/09/04 14:29
字数 1120
阅读 7
收藏 1
  1. DOM结构及操作                                                                                                                      DOM-(document object model)文档对象模型                                                                        文档-html页面                                                                                                                        文档对象-页面中元素                                                                                                                文档对象模型-为了能够让程序(js)操作页面中的元素
  2. DOM的作用及理解                                                                                                                   (1)可理解为操作html的API接口。(2)html结构模型。(3)html模型中的对象。
  3. DOM和BOM的区别                                                                                                                 BOM(browser object model)浏览器对象模型。DOM操作的是html中的元素,BOM是浏览器的API,操作的是浏览器。
  4. 面试DOM的长问点        
    <!DOCTYPE html>
    <html lang="zh">
    <title>往空的ul中插入值为1,2,3的li</title>
    <head>
    </head>
    <body>
        <ul id = "js-list">
        </ul>
        <script>
        (() => {
        var ndcontainer = document.getElementById("js-list");
        if(!ndcontainer) {
            return;
        }
        for (var i = 0; i < 3; i++) {
            var nditem = document.createElement("li");
            nditem.innerText = i + 1;
            ndcontainer.appendChild(nditem);
        }
        })();
        </script>
    </body>
    </html>
    
    /*
     1.id、class的命名区分是css用,还是js用。'js-list'.
     2.节点的变量命名最好前加nd.
     3.获取了节点,判断其是否存在.
     4.声明即运行的函数表达式(() => {})();
    */
         
  5. 如何绑定事件?  点击每一个li,则弹出li中的内容。
    <!DOCTYPE html>
    <html lang="zh">
    <title>往空的ul中插入值为1,2,3的li</title>
    <head>
       
    </head>
    <body>
        <ul id = "js-list">
        </ul>
        <script>
        (() => {
        var ndcontainer = document.getElementById("js-list");
        if(!ndcontainer) {
            return;
        }
        for (var i = 0; i < 3; i++) {
            var nditem = document.createElement("li");
            nditem.innerText = i + 1;
            //绑定事件
            nditem.addEventListener('click',function(){
                alert(i);
            })
            ndcontainer.appendChild(nditem);
        }
        })();
        </script>
    </body>
    </html>

    由于闭包和作用域的问题,i和nditem的作用域范围相同,则弹出来的都是3.可用ES6的块级作用域解决

    <!DOCTYPE html>
    <html lang="zh">
    <title>往空的ul中插入值为1,2,3的li</title>
    <head>
       
    </head>
    <body>
        <ul id = "js-list">
        </ul>
        <script>
        (() => {
        var ndcontainer = document.getElementById("js-list");
        if(!ndcontainer) {
            return;
        }
        for (let i = 0; i < 3; i++) {
            const nditem = document.createElement("li");
            nditem.innerText = i + 1;
            nditem.addEventListener('click',function(){
                alert(nditem.innerText);
            })
            ndcontainer.appendChild(nditem);
        }
        })();
        </script>
    </body>
    </html>

    element.click()不支持动态元素或样式绑定事件。支持给动态元素绑定事件的是.live()和.on()。

  6. 数据量很大怎么办,事件委托。若要插入的li是300个,则DOM中注册的事件监听函数增加了100倍。
    <!DOCTYPE html>
    <html lang="zh">
    <title>往空的ul中插入值为1,2,3的li</title>
    <head>
    
    </head>
    <body>
        <ul id = "js-list">
        </ul>
        <script>
            (() => {
                var ndcontainer = document.getElementById("js-list");
                if(!ndcontainer) {
                    return;
                }
                for (let i = 0; i < 300; i++) {
                    const nditem = document.createElement("li");
                    nditem.innerText = i + 1;
                    ndcontainer.appendChild(nditem);
                }
                //事件代理
                ndcontainer.addEventListener('click',function(e){
                    const target = e.target;
                    if(target.tagName === 'LI') {
                        alert(target.innerHTML);
                    }
                });
            })();
    </script>
    </body>
    </html>

    具体事件代理看:                                                                                                                      1.http://www.jianshu.com/p/2c68c8ceef1c                                                                           2.http://blog.csdn.net/majian_1987/article/details/8591385

  7. 如果是插入300000个的li呢?会有什么问题,该怎样改进,会出现明显的卡顿感,怎么解决?出现卡顿感的渲染帧率(FPS)过低。而实际上,包含300000个li,用户不会立即看到全部,大部分也不会看,那部分都没有渲染的必要,好在现代浏览器提供了requestAnimationFrameAPI来解决非常耗时的代码段对渲染的阻塞问题,不知道requestAnimationFrame用法和原理的请研究下这篇文章。                                                                                                                           所以,可以从减少DOM操作次数、缩短循环时间两个方面减少主线程阻塞的时间。减少DOM操作次数的良方是DocumentFragment;缩短循环时间则考虑用分治的思想把300000个li分批插入到页面中,每次插入的时机是在页面重新渲染之前。由于requestAniamtionFrame并不是所有的浏览器都支持,Paul lrish给出了对应的polyfill

    <!DOCTYPE html>
    <html lang="zh">
    <title>往空的ul中插入值为1,2,3的li</title>
    <head>
    
    </head>
    <body>
        <ul id = "js-list">
        </ul>
        <script>
            (() => {
                const ndContainer = document.getElementById('js-list');
                if(!ndContainer) {
                    return;
                }
                const total = 300000;
                const batchSize = 4; //每批插入的节点次数,越大越卡
                const batchCount = total / batchSize; //需要批量处理多少次
                let batchDone = 0;//已经完成的批处理个数
    
                function appendItems() {
                    const fragment = document.createDocumentFragment();
                    for(let i = 0;i < batchSize;i++) {
                        const ndItem = document.createElement('li');
                        ndItem.innerText = (batchDone * batchSize) + i + 1;
                        fragment.appendChild(ndItem);
                    }
    
                    //每次批处理只修改1次DOM
                    ndContainer.appendChild(fragment);
    
                    batchDone += 1;
                    doBatchAppend();
                }
    
                function doBatchAppend() {
                    if(batchDone < batchCount) {
                        window.requestAnimationFrame(appendItems);
                    }
                }
    
                //kickoff
                doBatchAppend();
                ndContainer.addEventListener('click',function(e){
                    const target = e.target;
                    if(target.tagName === 'LI') {
                        alert(target.innerHTML);
                    }
                });
    
            })();
    </script>
    </body>
    </html>

     

  8. DOM树的遍历                                                                                                                          使用广度优先遍历BFS,

    <!DOCTYPE html>
    <html lang="zh">
    <title>往空的ul中插入值为1,2,3的li</title>
    <head>
    
    </head>
    <body>
       <div class="root">
        <div class="container">
            <section class="sidebar">
                <ul class="menu"></ul>
            </section>
            <section class="main">
                <article class="post"></article>
                <p class="copyright"></p>
            </section>
        </div>
    </div>
    <script>
       const traverse = (ndRoot) => {
        const stack = [ndRoot];
        while (stack.length) {
            const node = stack.shift();
            printInfo(node);
            if (!node.children.length) {
                continue;
            }
            Array.from(node.children).forEach(x => stack.push(x));
        }
    };
    
    const printInfo = (node) => {
        console.log(node.tagName, `.${node.className}`);
    };
    
    // kickoff
    traverse(document.querySelector('.root'));
    
    </script>
    </body>
    </html>

     

  9. DOM操作的函数或属性       

  10. 事件-如何使用事件及IE和标准DOM事件模型之间存在的差别                                                       

  11.                                            

© 著作权归作者所有

共有 人打赏支持
小木fan
粉丝 1
博文 52
码字总数 13186
作品 0
绵阳
私信 提问
2018 前端面试准备

前端面试常见问题按知识点分类整理 前端面试常考问题整理,按模块知识点分类,持续完善中... Front-end-Developer-Questions by Modules and knowledge 前端面试经典问题:CSS 中居中的几种方...

掘金官方
2017/12/14
0
0
有奖征文004期|从小白到大牛,进阶路上有话说?

从小白到大牛,是用无数代码堆砌出的血泪史,就问你,想不想一吐为快? 想不想让大家了解你和代码那些风花雪月的故事? 或独自一人用青春和热血挥洒代码的经历? 咳咳,其实就是想让你写写程...

慕课网官方_运营中心
2018/05/29
0
0
2012年技术图书大盘点

文:@图灵郭志敏 又将是一年的结束,13年即将到来,大家可以跟随我的图书列表,看一下: 这年里你们一共买了多少书? 读了多少本书? 读完的又有多少本书? 反复读的有几本? 收获最大的是哪...

生气的散人
2012/12/13
703
7
「mysql优化专题」本专题总结终章(13)

一个月过去了,【mysql优化专题】围绕着mysql优化进行了十三篇的优化文章,下面进行一次完整的总结!我尝试用最简短最通俗易懂的话阐述明白每篇文章,让本专题画上完美的句号!坚持到文末,留...

java进阶架构师
2018/01/04
0
0
最受读者欢迎的图灵系列书

下边是小编整理的程序员最喜欢的图灵套装书,都是火爆畅销的技术书。一定会有你需要的~ “计算机程序设计艺术”系列——计算机科学领域的瑰宝 http://item.jd.com/11848569.html(京东:卷1...

图灵教育
2016/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

多表查询

第1章 多表关系实战 1.1 实战1:省和市  方案1:多张表,一对多  方案2:一张表,自关联一对多 1.2 实战2:用户和角色 (比如演员和扮演人物)  多对多关系 1.3 实战3:角色和权限 (比如...

stars永恒
今天
7
0
求推广,德邦快递坑人!!!!

完全没想好怎么来吐槽自己这次苦逼的德邦物流过程了,只好来记一个流水账。 从寄快递开始: 2019年1月15日从 德邦物流 微信小app上下单,截图如下: 可笑的是什么,我预约的是17号上门收件,...

o0无忧亦无怖
昨天
7
0
Mac Vim配置

1.升级 vim   我自己 MacBook Pro 的系统还是 10.11 ,其自带的 vim 版本为 7.3 ,我们将其升至最新版: 使用 homebrew : brew install vim --with-lua --with-override-system-vim 这将下...

Pasenger
昨天
8
0
vmware安装Ubuntu上不了网?上网了安装不了net-tools,无法执行ifconfig?

1.重新设置网络适配器还是不行,如下指定nat 2.还需要指定共享网络,我是在无线环境下 3.无法执行ifconfig https://packages.ubuntu.com/bionic/net-tools到这个网站下载net-tools的deb文件...

noob_chr
昨天
6
0
解决SVN:E210007无法协商认证机制

svn:E210007 svn: Cannot negotiate authentication mechanism 执行下面代码即可 sudo yum install cyrus-sasl cyrus-sasl-plain cyrus-sasl-ldap...

临江仙卜算子
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部