文档章节

前端面试宝典(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
绵阳
私信 提问
「mysql优化专题」本专题总结终章(13)

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

java进阶架构师
01/04
0
0
有奖征文004期|从小白到大牛,进阶路上有话说?

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

慕课网官方_运营中心
05/29
0
0
最受读者欢迎的图灵系列书

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

图灵教育
2016/10/25
0
0
2018 前端面试准备

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

掘金官方
2017/12/14
0
0
就决定是你了,心仪的公司!——《程序员面试金典》

很多接近毕业或者刚毕业没多久的程序员们都在做一件事:找工作。很多人对找IT相关的工作一头雾水,像是考官会问些什么,面试题是什么样的,该做些什么准备等等。其实我也是个没有经验的小白,...

灰仓鼠
2017/11/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java 动态代理的实现

在Java中可以实现动态代理的方式有很多种:JDK方式、ASM字节码操控框架、开源的分析、编辑和创建Java字节码的类库Javassist、基于ASM框架实现的CGLIB JDK方式:通过Java反射的方式生成动态代...

我爱春天的毛毛雨
27分钟前
1
0
css 总结2

1、背景有关 (1)background-origin:border-box、padding-box、content-box //默认是padding-box(2)background-image: url(img_flwr.gif), url(paper.gif);(3)background-posi......

tianyawhl
28分钟前
1
0
java 每秒钟只允许十个线程同时并发

package com.qimh.thread.concurrent;import java.util.Date;import java.util.concurrent.ExecutorService;import java.util.concurrent.Executors;import java.util.concurren......

qimh
43分钟前
4
0
学习Hadoop大数据基础框架

什么是大数据?进入本世纪以来,尤其是2010年之后,随着互联网特别是移动互联网的发展,数据的增长呈爆炸趋势,已经很难估计全世界的电子设备中存储的数据到底有多少,描述数据系统的数据量的...

本宫没空2
45分钟前
2
0
redis

1,安装 sudo apt-get install redis-server 2,登录本地的 redis-cli 3,修改 .bashrc文件,连接其他线下数据库 vi .bashrc在最后增加alias redisa="redis-cli -h 10.15.100.134 -p 666...

鹏灬
50分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部