您现在的位置是:首页 > web前端

前端面试题整理

刘锁2018-10-14人围观
简介今天收集了一些前端面试题,希望有需要的同学可以看看,后面我会继续完善补充,另外内容和答案都是来自网络,如有错误或需要补充的,欢迎下面留言,我会及时改正。
HTML/CSS部分
1.HTML5为什么只需要写<!DOCTYPE HTML>?
回答:1.因为HTML5不是SGML的子集,所以不需要DTD引用,但是需要DOCTYPE来规范行为;
      2.而HTML4.01是基于SGML,所以需要DTD引用,来告诉浏览器文档所使用的文档类型。

2.Doctype作用?标准模式与兼容模式各有什么区别? 
回答:1.Doctype用于向浏览器申明使用标准模式来解析文档;
      2.标准模式是以浏览器最高级别来解析文档,而兼容模式是以向后兼容的方式来解析文档。

3.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
回答:1.行内元素:a、b、span、img、input、strong、select、label、em、button、textarea;
      2.块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote;
      3.空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img;
      4.在CSS规范中,每个元素都有display属性。display属性值为block的是块级元素,display属性值为inline的是行内元素。

4.页面导入样式时,使用link和@import有什么区别? 
回答:1.link 在浏览器页面的时候并行加载,而@import需要等页面加载完成后才会加载;
      2.link 是 XHML标签不存在兼容问题,而@import是css2.1提出的,IE5以上才支持;
      3.link 还可以加载RSS和使用rel属性,而@import只能加载CSS;
      4.link 加载的样式可以通过JS更改,而@import加载的样式不可以被JS更改。

5.介绍一下你对浏览器内核的理解? 
回答:1.浏览器内核一般被分为两个部分:渲染引擎和JS引擎:
        1.1 渲染引擎:负责取得网页的内容(HTML,XML,图像等等),整理讯息(引入CSS等),通过计算来显示出网页(这个过程也称为回流),然后输出至显卡,最后渲染为网页(这个过程称为重绘);
        1.2 JS引擎:获取网页的JS部分用来解析和执行以实现网页的动态效果。
      2.最开始渲染引擎和JS引擎没有太大的区别,但是随着JS的发展并独立,内核就只指渲染引擎了。

6.常见的浏览器内核有哪些? 
回答:1.Trident:IE 360浏览器等;
      2.Gecko:Firefox等;
      3.Presto:Opera7及以上,现为blink内核;
      4.Webkit:Chrome,safari(现Chrome使用blink内核);
      5.blink:Chrome , opera(blink内核由谷歌和opera公司共同研发,是Webkit分支)。
  
7.什么是盒子模型?
回答:在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

8.CSS实现垂直水平居中:
回答:一道经典的问题,面试基本必问,实现方法有很多种,可以参考:https://www.otaozi.com/study/12.html

9.简述一下你对HTML语义化的理解? 
回答:1.正确的标签做正确的事情;
      2.爬虫可以根据文档结构来确定上下文,有利于SEO优化;
      3.在无网络情况下不至于排版过于混乱;
      4.结构化代码便于开发人员的开发和维护。

10.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢? 
回答:1.在线的情况下:首先判断是否是第一次访问网页,如果是就缓存。如果不是就比对新的manifest文件看看是不是发生过更改,发生则替换;
      2.离线的情况下读取manifest文件使用离线资源。
      
11.请描述一下 cookies,sessionStorage 和 localStorage 的区别? 
回答:1.Cookie 有大小限制,一般来说是4k。随着http请求一起发送至服务器端,可以设置过期时间,不设置的情况下在浏览器关闭的时候会清空;
      2.SessionStorage可以保存较多数据,在浏览器关闭的时候会被清空,同时浏览主域名下不同子域名内容不会共享;
      3.LocalStorage可可以保存较多数据,可以永久保存数据除非用户主动删除或清除缓存。

12.title与h1的区别、b与strong的区别、i与em的区别? 
回答:1.title表示网页标题,h1表示段落标题;
      2.b表示文本加粗没有强调效果,strong表示文本加粗有强调效果;
      3.i表示文本斜体没有强调效果,em表示文本斜体有强调效果。      
      
13.GET和POST的区别
回答:GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在1024字节,Get是通过地址栏来传值。
      POST:一般用于修改服务器上的资源,对所发送的信息没有限制。(常用于发送表单数据,新建、修改等),Post是通过提交表单来传值。

14.简述一下src与href的区别?
回答:1.href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接;
      2.src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

15.什么是CSS Hack?
回答:1.一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack;
      2.IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档)。例如:
        2.1 条件Hack <!--[if IE]><style>.test{color:red;}</style><![endif]-->
        2.2 属性Hack .test{color:#090\9; /* For IE8+ */ *color:#f00;  /* For IE7 and earlier */ _color:#ff0;  /* For IE6 and earlier */ } 
        2.3 选择符Hack * html .test{color:#090;}       /* For IE6 and earlier */ * + html .test{color:#ff0;}     /* For IE7 */
 
16.简述同步和异步的区别?
回答:1.同步是阻塞模式,异步是非阻塞模式;
      2.同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;
      3.异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。
      
17什么叫优雅降级和渐进增强?
回答:1.渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
      2.优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
     区别:
        a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给
        b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要
        c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带
18.px和em的区别?
回答:1.px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易;
      2.em得值不是固定的,并且em会继承父级元素的字体大小;
      3.浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

JavaScript部分
1.实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。
回答:
/**
 * 对象克隆
 * 支持基本数据类型及对象
 * 递归方法
 */ function clone(obj) { var o; switch (typeof obj) { case "undefined": break; case "string":
            o = obj + ""; break; case "number":
            o = obj - 0; break; case "boolean":
            o = obj; break; case "object": // object 分为两种情况 对象(Object)或数组(Array) if (obj === null) {
                o = null;
            } else { if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
                    o = []; for (var i = 0; i < obj.length; i++) {
                        o.push(clone(obj[i]));
                    }
                } else {
                    o = {}; for (var k in obj) {
                        o[k] = clone(obj[k]);
                    }
                }
            } break; default:
            o = obj; break;
    } return o;
}
 
2.如何消除一个数组里面重复的元素?
回答:
    var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = []; 
    for(var i = 0,len = arr1.length; i< len; i++){
        if(arr2.indexOf(arr1[i]) < 0){
            arr2.push(arr1[i]);
        }
    } 
    document.write(arr2); // 1,2,3,4,5,6
     
3.Javascript中callee和caller的作用?
回答:1.caller是返回一个对函数的引用,该函数调用了当前函数;
      2.callee是返回正在被执行的function函数,也就是所指定的function对象的正文。

4.请描述一下cookies,sessionStorage和localStorage的区别。
回答:1.相同点:都存储在客户端;
      2.不同点:
        2.1 存储大小不同
            2.1.1 cookie数据大小不能超过4k;
            2.1.2 sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
        2.2 有效时间不同
            2.2.1 localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
            2.2.2 sessionStorage 数据在当前浏览器窗口关闭后自动删除。
            2.2.3 cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
        2.3 数据与服务器之间的交互方式不同
            2.3.1 cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端;
            2.3.1 sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

5.统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。
回答:
    var str = "aaaabbbccccddfgh"; 
    var obj  = {}; 
    for(var i=0;i<str.length;i++){
        var v = str.charAt(i); 
        if(obj[v] && obj[v].value == v){
            obj[v].count = ++ obj[v].count;
        }else{
            obj[v] = {};
            obj[v].count = 1;
            obj[v].value = v;
        }
    } 
    for(key in obj){
        document.write(obj[key].value +'='+obj[key].count+' '); // a=4  b=3  c=4  d=2  f=1  g=1  h=1  
    }

6.写一个function,清除字符串前后的空格。(兼容所有浏览器)
回答:
function trim(str) { 
    if (str && typeof str === "string") { return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符 }
}
 
vue部分:
1.请详细说下你对vue生命周期的理解?
回答:1.总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后;
      2.创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有;
      3.载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染;
      4.更新前/后:当data变化时,会触发beforeUpdate和updated方法;
      5.销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在

2.请说下封装 vue 组件的过程?
回答:1.首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题;
      2.然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。
      
3.说出至少4种vue当中的指令和它的用法?
回答:v-if:判断是否隐藏;v-for:数据循环出来;v-bind:class:绑定一个属性;v-model:实现双向绑定;

4.v-model是什么?怎么使用? vue中标签怎么绑定事件?
回答:可以实现双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件:<input @click=doLog() />    

5.mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?
回答:一个model+view+viewModel框架,数据模型model,viewModel连接两个;
      区别:vue数据驱动,通过数据来显示视图层而不是节点操作。
      场景:数据操作比较多的场景,更加便捷。

6.Vue的双向数据绑定原理是什么?(或vue data是怎么实现的?)
回答:vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体步骤:
     第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter,这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化;
     第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图;
     第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
        1.在自身实例化时往属性订阅器(dep)里面添加自己
        2.自身必须有一个update()方法
        3.待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
     第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

暂时先整理这么多,后面我会继续在本文补充,另外欢迎大家大家补充。(上述回复都来自网络,不能保证回答都正确,如果有问题,麻烦大家在下面评论留言指正,谢谢大家)

打赏本站,你说多少就多少

上一篇:怎么学习前端知识?

下一篇:返回列表

文章评论

    共有条评论

    用户名:

    验证码:

点击排行

  • 怎么学习前端知识?

    怎么学习前端知识?Web前端开发工程师主要进行网站开发,优化,完善的工作。其工作实质是从网页制作演变而来的,名称...

  • 前端面试题整理

    前端面试题整理今天收集了一些前端面试题,希望有需要的同学可以看看,后面我会继续完善补充,另外内容和答案都是...

关注微信

    微信关注