文档章节

前端面试宝典(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
绵阳
私信 提问
加载中
请先登录后再评论。
程序员面试书籍集合

面试是一个永远不过时的话题,是很多程序员作为涨薪的捷径之一。面试也越来复杂,难度越来越大,能有几本好的面试资料,就犹如利剑在手。因此在这里给大家推荐几本评分比较高的程序员面试书籍...

谢特boy
05/25
2
0
大厂5年前端开发经验,想给初学者们几点建议,关于你是否能找到工作!

现在的前端技术的发展日新月异,各种新技术层出不穷。 前后端分离的开发模式也让前端开发者的地位日益提升,待遇日渐水涨船高,自然有很多小伙伴慕名入了前端开发的坑,希望能在前端领域大展...

智云编程
2019/07/09
2
0
精选进阶架构文集,你需要一份以备不时之需

点击上方“框架师”,选择“置顶公众号” 我们一起学习进步! 结语以上就是本文的全部内容了。能看到这里的都是最优秀的程序员,升职加薪就是你了👍。如果觉得不过瘾,还想看到更多,我再给...

框架师
2019/12/25
0
0
2012年技术图书大盘点

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

生气的散人
2012/12/13
726
7

没有更多内容

加载失败,请刷新页面

加载更多

插入,在PostgreSQL中重复更新吗? - Insert, on duplicate update in PostgreSQL?

问题: Several months ago I learned from an answer on Stack Overflow how to perform multiple updates at once in MySQL using the following syntax: 几个月前,我从关于堆栈溢出的答案......

技术盛宴
45分钟前
28
0
互联网的寒冬下各大一线互联网公司还在用SpringBoot这是为什么?

引言 现在各大技术社区 Spring Boot 的文章越来越多,Spring Boot 相关的图文、视频教程越来越多,使用 Spring Boot 的互联网公司也越来越多; Java 程序员现在出去面试, Spring Boot 已经成...

北柠Java
48分钟前
8
0
vue+elementui实现简易的列筛选功能实现。

一、简易效果图: 二、需求背景 大家都知道,后管类系统当中,有时一个列表可能有很多列需要展示,如下图所示,但是用户在使用系统的时候,往往会需要针对其中某几列进行数据提取,在展示列比...

一生懸命吧
51分钟前
60
0
批处理问题记录——数字实验bat

记录学习批处理时的问题 批处理为输入一个数字,如果大于等于一百,直接输出输入数字,如果小于一百会重复+1,直到100后输出。 问题是,如果不输入数字,直接空格的话,批处理会出错。 寻求一...

愤怒的乌老大
58分钟前
6
0
算法题汇总

计算两个字符串中的最大的相同字符串

佳幂小煜
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部