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.yangguangdream.com/?id=2030
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变更的双向绑定效果。
暂时先整理这么多，后面我会继续在本文补充，另外欢迎大家大家补充。(上述回复都来自网络，不能保证回答都正确，如果有问题，麻烦大家在下面评论留言指正，谢谢大家)
微信扫码查看本文
发表评论