文档章节

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

小木fan
 小木fan
发布于 2017/09/04 14:29
字数 1120
阅读 5
收藏 1
点赞 0
评论 0
  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
博文 51
码字总数 13186
作品 0
绵阳
2018 前端面试准备

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

掘金官方 ⋅ 2017/12/14 ⋅ 0

有奖征文004期|从小白到大牛,进阶路上有话说?

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

慕课网官方_运营中心 ⋅ 05/29 ⋅ 0

就决定是你了,心仪的公司!——《程序员面试金典》

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

灰仓鼠 ⋅ 2017/11/28 ⋅ 0

「mysql优化专题」本专题总结终章(13)

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

java进阶架构师 ⋅ 01/04 ⋅ 0

程序员必读书单 1.0

程序员必读书单 1.0 作者:Lucida 微博:@peng_gong 豆瓣:@figure9 原文链接:http://lucida.me/blog/developer-reading-list/ 本文把程序员所需掌握的关键知识总结为三大类19个关键概念,然...

imzdx ⋅ 2016/03/02 ⋅ 0

前端相关整理

整理一下最近在网上收集的前端面试相关资料,包括预备知识、书籍、面试考点、面经等。前端方面资料其实太多太多,就光从知乎、前端乱炖、w3cplus 等网站就能找到很多,所以针对细节不发散,仅...

Seas0n_ ⋅ 2016/03/01 ⋅ 0

最受读者欢迎的图灵系列书

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

图灵教育 ⋅ 2016/10/25 ⋅ 0

阿里巴巴C++程序员面试的10个问题,你会几个?

此前,w3cschool app开发者头条上分享了诸多名企程序员面经。 比如阿里巴巴java程序员面经,阿里巴巴前端开发程序员面经。这些面经吸引了大多数的程序员们的围观。 今天要给程序员们分享的是...

W3Cschool ⋅ 2017/12/23 ⋅ 0

一个大二女生的Web开发成长之路:从软妹子到女汉子的进阶过程

原文出处:floraLam 的博客 学习和实践前端一年时间,几乎天天在工作室和一群屌丝男程序员一起学习、开发。这种潜移默化的环境下,编码提高了,节操也细碎了。 一年前,娇滴滴的还是工作室里...

floraLam 的博客 ⋅ 2014/08/07 ⋅ 0

前端笔试、面试

让 BAT 的 Offer 不再难拿 随着各大公司春招的开始,很多小伙伴都行动起来了,我有幸能够加入百度并和大家分享自己的经验心得。由于我面试的都是比较大的公司,所以自然也是做了这方面的准备...

掘金官方 ⋅ 01/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

2018上海云栖大会workshop-日志数据采集与分析对接

摘要: 日志数据采集与分析对接 课程描述 通过日志服务采集用户、数据库、业务等访问数据。演示对于业务日志分析与处理,程序日志查询与监控,打通日志与数据仓库对接案例。 日志种类 网站访...

猫耳m ⋅ 23分钟前 ⋅ 0

SpringMVC中的ContentNegotiatingViewResolver配置

pom.xml <properties><commons-lang.version>2.6</commons-lang.version><slf4j.version>1.7.6</slf4j.version><spring.version>4.1.3.RELEASE</spring.version> <jack......

颖伙虫 ⋅ 25分钟前 ⋅ 0

Spring Boot 2.0正式发布,升还是不升呢?

Spring几乎是每一位Java开发人员都耳熟能详的开发框架,不论您是一名初出茅庐的程序员还是经验丰富的老司机,都会对其有一定的了解或使用经验。在现代企业级应用架构中,Spring技术栈几乎成为...

java高级架构牛人 ⋅ 26分钟前 ⋅ 0

打包时隐藏打印日志

1.打包时不允许项目中有打印的日志,可以在pch中加入下面这段代码即可 #ifdef DEBUG# define Log(fmt, ...) NSLog((@"%s [Line %d] " fmt), __PRETTY_FUNCTION__, __LINE__, ##__VA...

小黑202 ⋅ 27分钟前 ⋅ 0

SSL双向认证的实现

环境 系统:archlinux/centOS nginx:nginx/1.12.2 浏览器:火狐firefox 前提:1.安装nginx。    2.安装openssl。 生成证书 新建工作目录  首先建立一个工作目录,这里以我的工作目录为例...

颖辉小居 ⋅ 33分钟前 ⋅ 0

vscode 代码格式化,语法检查插件ESLint+Prettier

ESLint+Prettier prettier只关注格式化 ,插件prettier-vscode,编辑器的配置setting.json会出现prettier插件的相关配置节点,同时也能看到一些默认的配置信息。 安装成功后,编辑器默认的格式...

momo1987 ⋅ 35分钟前 ⋅ 0

使用TinyProxy搭建代理服务器

什么是TinyProxy 它是一个代理服务器,用来实现http或https代理,windows系统一直在用ccproxy, 非windows系统,怎么开放个http代理呢?那就是TinyProxy。 安装 直接执行命令即可 sudo apt-g...

bengozhong ⋅ 36分钟前 ⋅ 0

掌握需求过程

1,需求必须可度量、可测试 2,需求是什么? 功能需求 非功能需求 限制条件 3,Volere需求过程 采用Volere需求过程,最好采用RUP,增量,迭代,螺旋,Scrum或其他类似的迭代式开发过程 (注意...

霜叶情 ⋅ 40分钟前 ⋅ 0

分布式微服务云架构开发Web应用

举一个简单的例子,在快速入门工程的基础上,举一个简单的示例来通过Thymeleaf渲染一个页面。 @Controller public class HelloController { @RequestMapping("/") pub...

明理萝 ⋅ 41分钟前 ⋅ 0

图应用之关键路径(Critical Path)

之前我们介绍过,在一个工程中我们关心两个问题: (1)工程是否顺利进行 (2)整个工程最短时间。 之前我们优先关心的是顶点(AOV),同样我们也可以优先关心边(同理有AOE)。(Activity ...

临江仙卜算子 ⋅ 43分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部