Web前端面试宝典
第一部分：HTML问答题
1.简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
2.Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
3.iframe有那些缺点？
*iframe会阻塞主页面的Onload事件；
*搜索引擎的检索程序无法解读这种页面，不利于SEO;
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript。动态给iframe添加src属性值，这样可以绕开以上两个问题。
4.HTML与XHTML —— 二者有什么区别，你觉得应该使用哪一个并说出理由。
1.XHTML 元素必须被正确地嵌套。
错误：
this is example.
正确：
this is example.
2.XHTML 元素必须被关闭。
错误：
this is example.
正确：
this is example.
3.标签名必须用小写字母。
错误：
this is example.
正确：
this is example.
3.1空标签也必须被关闭
错误：
正确：
4.XHTML 文档必须拥有根元素。
所有的 XHTML 元素必须被嵌套于 根元素中。
5.常见的浏览器内核有哪些？
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
6.简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
7.HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或某个 input 设置为 autocomplete=off。
8.实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
9.title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容。
i内容展示为斜体，em表示强调的文本；
Physical Style Elements -- 自然样式标签
b, i, u, s, pre
Semantic Style Elements -- 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。
10.请描述下SEO中的TDK？
在SEO中，所谓的TDK其实就是title、description、keywords这三个标签，这三个标签在网站的优化过程中
title标题标签，description描述标签，keywords关键词标签
11.简单书写HTML代码：请写出一个html网站代码，内容为一个图片，链接到“http://www.baidu.com”，图片路径为“./img/logo.png”,为图片设置替换文本”webfoss”,新网页在新窗口打开；
答： 
12.标签上title与alt属性的区别是什么？
alt是给搜索引擎识别，在图像无法显示时的替代文本；title是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。（因为IE不标准）在IE浏览器中alt起到了title的作用，变成文字提示。在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都能正常使用。
13.前端页面有哪三层构成，分别是什么？作用是什么？
分成：结构层、表示层、行为层。
结构层（structural layer）
由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
表示层（presentation layer）
由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
行为层（behaviorlayer）
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。
14.每个HTML文件头里都有个很重要的东西，Doctype，知道这是干什么的么？
声明位于文档中的最前面的位置，处于 标签之前。
作用：
1.告知浏览器文档使用哪种 HTML 或 XHTML 规范。
2.告诉浏览器按照何种规范解析页（如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,浏览器按照自己的方式解析渲染页面）
15.DIV+CSS布局较table有什么优势？
1、速率更快，页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了；
2、更好地被搜索引擎收录，大部分html页面的样式写入了CSS文件中，便于被搜索引擎采集收录；
3、对浏览者和浏览器更具优势，由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形；
4、修改更有效率，由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时，提高工作效率；
16.为什么用多个域名存储网站资源更有效？
1、CDN缓存更方便
2、突破浏览器并发限制
3、节约cookie带宽
4、节约主域名的连接数，优化页面响应速度
5、防止不必要的安全问题
17.简要说明一下做好SEO需要考虑哪些方面？
1.TDK
2.图片+alt
3.友情链接
4.站点地图
第二部分：HTML单选题
1.以下描述错误的是（A）
- html需要先编译之后才能执行
- html需要存放在应用服务器端，客户端请求后才会将html程序返回给客户端
- html是需要浏览器解析的
- html语言就是把我们需要的内容显示在浏览器，但是html语言本身不显示
2.以下描述错误的是(C)
A.html分为
三个基本标记结构B.head头标签，可以添加关键字描述网站优化网站
C.通常我们显示的内容都会放在
标签，通常html只能使用一次D.属于HTML标签，它是一种标准通用标记语言的文档类型声明
3.在HTML语言中，设置表格单元格之间距离的是（B）和单元格和文字之间距离的是（C）
A.border
B.cellspacing
C.cellpadding
D.width
4.以下对标签描述正确的(多选)（ABC）
A.h1,h2,h3,h4,h5,h6标签是显示标题从h1到h6从大到小的过程
B.b标签呈现粗体文本
C.I标签呈现斜体文字
5.以下描述错误的是（D）
- html分为 三个基本标记结构。
- head头标签可以加关键字、描述网站、优化网站
- 通常我们显示的内容都会放在标签，通常html只能使用一次。
- : 属于html标签，它是一种标准通用标记语言的文档类型声明。
6.以下说法错误的是（D）
A.
标签 ： 标签定义段落
B.
: 简单的换行
C.
- 标签： 自定义列表
- : 自定义标题
7.以下对标签描述正确的（多选）（A,C,D）
A.h1,h2,h3,h4,h5,h6 标签是显示标题从h1到h6,从大到小的过程
B.tt标签对表格的限定标签
C.b 标签呈现粗体文本
D.i 标签呈现斜体文字
8.在HTML语言中，设置表格单元格之间距离的标签是（ B ）和单元格内文字与边框的距离 的标签是（C）
A.
B.
C.
D.
第三部分：CSS问答题
1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 border 和 padding计算了进去;
2.CSS选择符有哪些？哪些属性可以继承？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height
3.css定义的权重
标签的权重为1，class的权重为10，id的权重为100
4.如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
5.简单介绍下CSS的盒子模型，他都包含哪些属性？
width,height,margin,padding,border
6.宽高都200px的div在浏览器窗口居中（水平垂直都居中）
position:fixed;width:200px;height:200px;left:50%;top:50%;
margin-left:-100px;margin-top:-100px;
7.一个满屏 品 字布局 如何设计?
8.超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
9.display:none;跟visibility:hidden;的区别是啥？
display:none;不占位，visibility:hidden;占位
10.低版本浏览器不支持display:inline-block属性，请问怎么兼容
*display:inline;*zoom:1;
11.在使用display:inline-block时，inline-block元素会有4px左右的空隙，这是什么原因导致的以及解决方法
（1） 取消换行和空格
（2） 设置父元素的font-size为0，在给子元素设置自身的字体大小
12.写出下面三个的区别？
*height{}
_height{}
+height{}
* IE7及以下
_IE6
+IE7
13.Inline-block默认的对其方式是什么？在使用inline-block时在内容不同的时候想要保持内容水平对齐，说一下你采用的方法？
默认对齐方式：base-line
水平对齐：vertical-align:top;
14.简明说一下CSS link于@import的区别和用法
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。
第四部分：JS问答题
1、JS的数据类型有哪些？typeof运算符的执行结果都有哪些数据类型？
数据类型主要包括两部分：
基本数据类型： Undefined、Null、Boolean、Number和String
引用数据类型： Array 、Object
typeof运算符的结果类型：
number,string，boolean,object,function,undefined
2.null，undefined 的区别?
null 表示一个对象被定义了，值为“空值”；
undefined 表示不存在这个值。
3.怎么判断一个变量没有被定义
typeof bianliang ==”undefined”
4.怎么判断一个变量arr的话是否为数组（此题用typeof不行）
Arr instanceof Array
5.事件委托是什么
事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。
6.描述下JSON对象的两个很重要的方法
JSON.parse() //JSON字符串转换为JSON对象
JSON.stringify() //JSON对象转化为字符串
7.写一个函数getRandomNumber(startNum,endNum),去除startNum到endNum之间的任意随机数
function getRandomNumber(startNum,endNum){
var endRand = endNum - startNum + 1;
//0~1中间的16位数字
var randNum = Math.random();
//随机取出来0~9之间的任意一个数字
randNum = Math.floor(randNum * endRand);
return randNum+startNum;
}
8.写一个通用的去除字符串左右空格的函数？
String.prototype.strim = function(){
return this.replace(/(^\s|\s$)/g,””);
}
9.a = [1,2,3,4];b=a;a.push(2);b.push(3);请问，最终a,b的结果分别是多少？
a为[1,2,3,4,2,3],b为[1,2,3,4,2,3]
10.检测浏览器的两种方式
功能检测 “touchstart” in document
特征检测 navigator.userAgent
11.“ ===”、“ ==”的区别？
==，当且仅当两个运算数相等时，它返回 true，即不检查数据类型
===，只有在无需类型转换运算数就相等的情况下，才返回 true，需要检查数据类型
12.原型、原型链？
每个由构造函数new出来的实例化对象都自带一个_proto_属性，该属性指向创建它的构造函数的prototype对象。而prototype对象因为是实例，也有自己的_proto_属性，指向它的原型对象。当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，
于是就这样一直找下去，也就是我们平时所说的原型链的概念。
关系：instance.constructor.prototype = instance.__proto__
13.eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')');
14.["1", "2", "3"].map(parseInt) 答案是多少？
[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix)，
其中 radix 表示解析时用的基数。
map 传了 3 个 (element, index, array)，对应的 radix 不合法导致解析失败。
15.简单语言测试：有数组dataarray，值为-100到100的整数，求出数组中大于0的数的和；
var x=0;
for(var i=0;i
if(dataarray>0){
x+=dataarray[i];
}
}
16.简单jQuery：请写出代码，ul标签下面有1000个li，写一个性能最高的方式实现，在点击li后，输出li的内容
$(“ul”).on(“click”,”li”,function(){
$(this).html(“hit”);
})
17.用fetch方法构造一个Get请求，要求把当前页面cookie传过去，请写出代码；
fetch(url,{
method:"GET",
credentials:"include",
body:document.cookie
})
18.简述下为何通过ajax发送的请求会出现乱码问题，如何解决？
乱码的问题就是编码格式冲突，我们需要传输中文数据前面加一个encodeURI()编码，例如：encodeURI(j$("#fk_info").val())；在接受参数的页面对传过来的编码过后的内容用后端语言进行解码
19.简述DOM，HTMLDOM的区别和联系
DOM分为三部分：
（1）核心DOM：遍历DOM树、添加新节点、删除节点、修改节点
（2）HTML DOM：以一种简便的方法访问DOM树
（3）XML DOM：准用于操作XML文档
核心DOM与HTML DOM的区别：
核心DOM ：
对象：Document,Node, ElementNode,TextNode,AttributeNode，CommentNode,NodeList
核心DOM提供了统一的操作接口，如：createElement、appendChild、setAttribute等
核心DOM创建新元素：var newNode=document.createElement("img")
给元素添加属性：e.setAttribure()、e.setAttribureNode()
适用场合：核心DOM适合操作节点，如创建，删除，查找等
HTML DOM：
对象：image,Table,Form,Input,Select等等HTML标签对象化
HTML DOM提供了封装好的各种对象，如：Select、Option等等
适用场合：HTML DOM适合操作属性，如读取或修改属性的值
20.什么是事件流
DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM同时支持两种事件模型：捕获型事件和冒泡型事件
**************************************
21.JavaScript原型继承是如何运作的？
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去(知道找到null为止)，也就是我们平时所说的原型链的概念。
22.CORS是什么？对于跨域请求，如何将附带凭证（HTTP Cookie 及 HTTP认证信息）的请求发送至服务器端?
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。只需要服务器端的Response header 设置下Access-Control-Allow-Origin即可。
只需把相应的cookie信息和认证信息作为post请求发送给服务器端即可。
23.DOM元素Attribute与Property的区别是什么？
1、 property是DOM中的属性，是JavaScript里的对象；而attribute是HTML标签上的特性，它的值只能够是字符串；
2、DOM对象初始化时会在创建默认的基本property；只有在HTML标签中定义的attribute才会被保存在property的attributes属性中；
3、attribute会初始化property中的同名属性，但自定义的attribute不会出现在property中；
4、propety是对象，而attribute的值都是字符串；
5、最关键的两句话：
attribute（特性），是我们赋予某个事物的特质或对象。
property（属性），是早已存在的不需要外界赋予的特质。
24.Long-Polling、WebSocket、SSE(Server-Sent Events)之间有什么差异？请写出WebSocket在浏览器端如何发送及接收消息的相关代码实现（需要考虑传输一场并根据返回数据的格式做不同处理）
Long-Polling 自己主动请求数据来获知文件知否发生变化 缺点：会有很多无效请求
SSE 服务器端通知客户端数据变化 服务器端客户端保持一个长连接 缺点：保持长连接需要占用大量的服务器端只要
WebSocket 实时通信 缺点：浏览器支持情况没有上面两种方法好
25.实现以下函数：
add(10,10);==>20
add(10)(10);==>20
function add(num){
if(arguments.length==1){
return function(num1){
return num+num1;
}
}else{
var sum = 0;
for(var i=0;i
sum += arguments[i];
}
return sum;
}
}
26.实现以下代码：
[a,b,3,4,5].copy();==>[a,b,3,4,5, a,b,3,4,5]
var array = ['a','b',3,4,5];
Array.prototype.copy = function(){
return this.concat(this);
}
console.log(array.copy());
27.指出下面代码的区别
function Order(){
}
var order = Order(); （1）
var order = new Order();（2）
代码（1）是将函数Order()作为一个普通函数去调用的，代码（2）是将Order()作为一个构造函数去调用的；当函数Order的方法体中有this关键之的时候，作为普通函数this指的是window对象，作为构造函数存在的时候this指代的是本对象
28.var foo = "Hello";
(function (){
var bar = "World";
alert(foo+bar);
})();
alert(foo+bar);
以上语句会产生什么样的结果？
（1）HelloWorld
（2）undefined
29.函数call和apply的区别：
相同点:两个方法产生的作用是完全一样的
不同点:方法传递的参数不同,call是参数往后累加，apply是把所有参数合并为一个数组传给函数的第二个参数
30.语句（window.foo||(window.foo=”bar”)）;执行后，window.foo的值是多少？
Bar
31.使用jquery做一次ajax请求，请求类型为post，传入参数是json格式，url为http://xxx.com,传入参数是{username：“abc”}，请求成功返回一个数组例如[1,2,3,4,5]然后对这个数组进行处理后得到一个新的数组，[1,2,3,4,5, 1,2,3,4,5]并输出到日志
Array.prototype.copy = function(){
return this.concat(this);
}
$.ajax({
url:“http://xxx.com”,
type:'post',
dataType:“json”,
data: {username：“abc”},
success:function(data){
console.log(data.copy());
}
});
32．以下语句结果a，m的值
var a = "15.56";
var b = 20.23;
var a = parseInt(a)+parseInt(b);
var m = parseFloat(a);
a:35 m:35
33.var numberArray = [ 3,6,2,4,1,5 ]，
(1)实现对该数组的倒排 ，输出[5,1,4,2,6,3]
var result = numberArray.reverse( );
alert(result);
(2)实现对该数组的降序排列，输出[6、5、4、3、2、1]
var result = numberArray.sort(function(a,b){return b-a});
alert(result);
34.$(document).ready()是个什么函数？为什么要用它。
问题一： $(document).ready()这个函数是用来取代页面中的window.onload; 不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。
问题二：Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作，jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。
35.读下面代码：
window.color = 'red';
var o= {color:'blue'};
function sayColor(){
alert(this.color);
}
请在每行末尾写出该行的输出：
sayColor();
sayColor.call(this);
sayColor.call(window)
sayColor.call(o)
答案： red 、red、red、blue
36.请写一个正则，匹配输入的字符：第一个必须是字母或下划线开头，后面就是字母和数字或下划线构成，长度5-20.
答案： /^[A-Za-z_]\w{4,19}$/
37.JS中原型链最上层的对象是 object 的原型对象，该对象的_proto_指针指向 null 的原型对象。
38.JS中使用 Object 对象的 defineProperty 函数定义对象属性的访问器。
39.如何对一篇文章进行敏感词替换？假如有几千个敏感词。（写一下思路即可）
将这篇文章以字符串的形式赋给一个变量。定义一个正则表达式，以全局匹配的方式查找所有敏感词，并用replace方法替换掉
40.添加、删除、更改、插入节点的方法
appendChild
removeChild
replaceChild
insertBefore
41.在javascript编程中，请至少说出三种异步操作的使用场景？
回调函数
事件监听
Promise对象
Nodejs的异步方法
42.请用闭包的方式写一个方法，第一次执行返回999，第二次返回1000.
function bb(){
var num = 999;
return function(){
return num++;
}
}
var fun = bb();
fun();
fun();
43.现在有一个数组[1,4,5,8,100],请写一个方法，每秒输出数组的第一个元素，直到整个数组输出完毕
var arr = [1,4,5,8,100];
function output(){
setTimeout(function(){
console.log(arr.splice(0,1)[0]);
if(arr.length>0){
output();
}
},1000);
}
output();
44.请给Array本地对象的prototype添加一个原型方法，它的作用是剔除重复的条目，并将新数组返回
Array.prototype.unique = function(){//数组去除重复
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
第五部分：JS单选题
1、 下列JavaScript的循环语句中（D）是正确的
A、 if(var i < 10;i++)
B、 for(var i = 0;i < 10)
C、 for var i = 1 to 10
D、 for(var i = 0;i <= 10;i++)
2、 下列的哪一个表达式将会返回假（B）
A、 !(3<1)
B、 (4>=4)&&(5<=2)
C、 (“a”==”a”)&&(“C”!=”d”)
D、 (2<3)||(3<2)
3、 下列选项中，（D）不是网页事件
A、 onclick
B、 onmouseover
C、 onsubmit
D、 Onp
4、 有语句“var x = 0;while( )x+=2;”，要使while循环体执行10次，空白的循环判断式应该为（D ）
A、 x < 10;
B、 x <= 10;
C、 x < 20;
D、 x <= 20;
5、 以下说法中错误的是（D ）
A、 var a = 111;
B、 var a = “张三”;
C、 var _name = “小明”;
D、 var &_id = “1”;
6、 下列JS的判断语句中（A）是正确的
A、 if( i == 0)
B、 if( i = 0)
7、下列JavaScript的循环语句中（）是正确的
A.if(var i < 10; i++)
B.for(var i = 0;i < 10)
C.for var i = 1 to 10
D.for(var i=0; i<10; i++)
答案：D
8、下列的哪一个表达式将会返回假（）
- !(3 <= 1)
- (4 >= 4) && (5 <= 2)
- ( “a” == “a”) && (“C” != “d”)
- (2<3) || (3<2)
答案：B
9、下列选项中，（）不是网页中的事件
- onclick
- onmouseover
- onsubmit
- onp
答案：D
10、有语句“var x = 0; while( )x+2;”,要是while循环体执行10次，空白的循环判定式应该为（）
- x < 10
- x <= 10
- x < 20
- x <= 20;
答案：C
11、以下说法错误的是（）
- var a = 111;
- VAR a = ‘张三’;
- var _name = “小明”;
- var &_id=1;
答案：BD
12、以下JS的判断语句中（）是正确的
- if (i == 0)
- if (i =0)
答案：A
13、以下不是引入js的方式选项的是（D）
A．使用script标签
B . 引入外部的js文件
C . 在事件中编写js
D . 使用引入
14、Js语句
var a1 = 10;
var a2 = 20;
alert("a1+a2="+a1+a2)将显示的结果是(B)
A.a1+a2=30
B.a1+a2=1020
C.a1+a2=a1+a2
D.a1+a2=30+a1+a2
15.var a=document.getElementById(“id”);
a.onclick = fun1;
a.onclick = fun2;
对象a被绑定的点击事件执行函数是什么？（B）
- fun1
- fun2
- 执行错误
- 两个函数都被绑定
16.以下那条会产生运行错误(A)
- var obj = ()
- var obj = []
- var obj = 11
- var obj
17.以下说法正确的是（C）
A．数字+字符=数字 （字符）
B．数字+boolean = true；(数字)
C. 数字+null = 数字
D．数字+undefined = isNaN （NaN）
18.以下不是引入javascript的方式 的选项是？ (D)
- 使用script标签
- 引入外部的javascript文件
- 在事件中编写javascript
- 使用引入
第六部分：HTML5+CSS3
1.HTML5、CSS3里面都新增了那些新特性？
新的语义标签
本地存储
离线存储
Websocket
2d，3d变换
Transition,animation
媒体查询
新的单位（rem,vw，vh等）
2.HTML5 为什么只需要写 ？
HTML5 不基于 SGML（标准通用标记语言），因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
3.如何处理HTML5新标签的浏览器兼容问题？
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
将上代码复制到head部分，记住一定要是head部分（因为IE必须在元素解析前知道这个元素，所以这个js文件不能在其他位置调用，否则失效）
最后在css里面加上这段：
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
主要是让这些html5标签成块状，像div那样。
4.cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
生命周期：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
5.什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。
如：border-shadow
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
如：默认使用flash上传，但如果浏览器支持 HTML5 的文件上传功能，则使用HTML5实现更好的体验；
6.transition和animation的区别
transition是过渡，animation是动画。transition只能从一种状态过渡到另外一种状态，animation可以定制复杂动画，可以定义动画的区间等。
transition必须通过一些行为才能触发（js或者伪类来触发），animation的话直接就可以触发。
7.HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或某个 input 设置为 autocomplete=off。
8.margin-left:calc(-100%-100px) 代码中用到了一个calc（），这个函数的作用是什么？
答：通过计算来确定CSS属性值。
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算
9.简述HTML5新增的canvas、audio、svg标签的作用
canvas被称作画布，canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,可以控制其每一像素。
audio标签可以引用音频资源，在页面上播放音乐
svg用XML格式定义图形，可以用来制作矢量图形。
10.简述如何通过CSS进行响应式布局的方式
响应式布局使用媒体查询@media 定义多个分辨率下的样式，使页面在不同的分辨率下显示不同的样式
11.CSS的单位中，设定元素的长度或宽度与父元素字体大小相关的单位是什么？与html文档元素大小相关的单位是什么？
em 、rem
13.在CSS中使用 media 关键字判断不同的屏幕使用不同CSS文件，使用 @media 个关键字判断不同屏幕使用不同的CSS样式类。
14.CSS3实现一段阴影文本持续淡入淡出？
HTML结构 ：
文本CSS样式：
.box {
text-shadow : 1px 1px 2px #F00;
-moz-animation:fade 1s infinite;
-webkit-animation:fade 1s infinite;
-o-animation:fade 1s infinite;
animation:fade 1s infinite;
}
@keyframes fade {
0% { opacity: 0;}
50% { opacity: 100;}
100% { opacity: 0;}
}
@-webkit-keyframes fade {
0% { opacity: 0;}
50% { opacity: 100;}
100% { opacity: 0;}
}
@-moz-keyframes fade {
0% { opacity: 0;}
50% { opacity: 100;}
100% { opacity: 0;}
}
@-o-keyframes fade {
0% { opacity: 0;}
50% { opacity: 100;}
100% { opacity: 0;}
}
15.简述如何通过CSS进行响应式布局的方式。
meta标签定义: 使网页适配设备宽度。
使用Media Queries适配对应样式
16.如何使用Canvas来画一条简单的线？
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext('2d');
cxt.beginPath();
cxt.lineWidth=10;
cxt.strokeStyle="#00ff00";
cxt.moveTo(20,20);
cxt.lineTo(100,20);
cxt.stroke();
cxt.closePath();
17.rgba和opacity的透明效果有什么不同？
opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。比如rgba的话,内部的文字透明度不会发生变化，而opacity的话，会影响到内部的文字
18.FontAwesome和iconfont是什么？他们有什么异同，问什么要使用它，有什么弊端？
两个都是图标字体。Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用
Iconfont是阿里的字体库，可以定制自己要的字体图标。
优势：
1、轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。
2、灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。
3、兼容性：网页字体支持所有现代浏览器，包括IE低版本。详细兼容性可以点击这里。
弊端：
只能单色
跨域问题
字体图标库似乎体积显得有些过大
19.什么是响应式设计？
它是关于网站的制作或网页制作的工作。不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常。一部分是媒体查询和不同的视觉效果。一部分是不同的资源（如不同的Javascript来处理触摸与点击自动适应屏幕的对比）。
20.解释下这个CSS选择器什么发生什么？
[role=navigation] > ul a:not([href^=mailto]) {}
定义了role属性，并且值为navigation的任何元素，其子元素列表下的除邮箱链接之外的所有链接元素。
能够用语言表达清楚这个选择器，证明你理解他们和可以使用他们做一些技术交流。
第七部分：必考题
HTML+CSS篇：
1.如何处理HTML5新标签的浏览器兼容问题？（自己需要试试）
将上代码复制到head部分，记住一定要是head部分（因为IE必须在元素解析前知道这个元素，所以这个js文件不能在其他位置调用，否则失效）
最后在css里面加上这段：
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
主要是让这些html5标签成块状，像div那样。
2.简单介绍下CSS的盒子模型，他都包含哪些属性？
width,height,margin,padding,border
3.宽高都200px的div在浏览器窗口居中（水平垂直都居中）?
position:fixed;width:200px;height:200px;left:50%;top:50%;margin-left:-100px;margin-top:-100px;
4.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
不同浏览器都会带有自己的浏览器默认样式，一般我们需要把这些浏览器默认自带的样式给清楚，一般我们借助reset.css（我们公司里开发前端页面都用这个来清楚浏览器默认样式）
display:inline-block（IE7及以下不支持）
需要对低版本IE特殊处理：{display:inline-block;*display:inline;*zoom:1;}
display:inline-block 什么时候会显示间隙？怎样消除间隙？
父元素font-size设置成0，子元素重新设置font-size
display:inline-block滥用容易出现布局方面的问题，尤其在左中右、左右等布局方面的问题尤为突出。因此如果是左右布局的话，尽量都用浮动来代替
z-index在IE7及以下版本的话，有时会发现不是谁z-index设置的越高谁就显示在最上面。碰到这种问题需要设置父元素有相对定位属性元素的z-index。先比较父元素的z-index再比较子元素的
IE6双边距
IE6中，元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理，元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的浮动元素则不会。只需要给浮动元素加上display:inline;这样的CSS属性就可以了。
margin-top，margin-bottom的bug
父元素的第一个子元素设置了margin-top,会作用于父元素（值为父元素的margin-top与该margin-top两者中的最大值)，而子元素和父元素的边距则没有发生变化。
5.IE8-(IE8及以下)rgba模式不兼容的解决方案
IE8以及以下用滤镜， filter:Alpha(opacity=20);
6.CSS Hack什么是CSS hack
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
CSS hack的原理
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
CSS hack分类
科普
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识.
.all IE{property:value\9;} .gte IE 8{property:value\0;} .lte IE 7{*property:value;} .IE 8/9{property:value\0;} .IE 9{property:value\9\0;} .IE 7{+property:value;} .IE 6{_property:value;} .not IE{property//:value;}
选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
只在IE下生效
只在IE6下生效
只在IE6以上版本生效 <--[if gte IE 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示
只在IE8上不生效
非IE浏览器生效
7.让学生写一个CSS3动画？并让描述transition和animation的区别
transition是过渡，animation是动画。transition只能从一种状态过渡到另外一种状态，animation可以定制复杂动画，可以定义动画的区间等。
transition必须通过一些行为才能触发（js或者伪类来触发），animation的话不需要直接就可以触发。
JS篇:
- 知道不知道事件冒泡？知不知道阻止浏览器的默认行为？对应的原生兼容性写法该怎么写
知道事件冒泡，一般我们需要阻止事件冒泡。
事件冒泡
父元素和子元素上面的话都添加的有click（不仅仅是click事件，只要保证是同一个事件即可）。子元素的click事件触发的时候，会导致该click事件冒泡到它的父元素上面，为了阻止父元素的事件触发，我们一般需要给子元素的事件里写上阻止事件冒泡的方法
场景：（下拉菜单）点击空白区域关闭下拉菜单
兼容性写法：
if(event.stopPropagation){
event.stopPropagation();
}else if(event.cancelBubble){
event.cancelBubble = true;
}
阻止浏览器默认行为
当我们不希望一些浏览器默认行为触发的时候，就需要给对应的事件添加上阻止浏览器默认行为。
场景：
禁止a链接的点击后发生跳转
禁止UC等手机浏览器左右滑动切换到前一页或者下一页(我们可以通过给document的touchmove事件加上阻止浏览器默认行为的方法)
- 知不知道用没用过事件委托？它的好处是啥？
1， 提高性能。
2， 新添加的元素还会有之前的事件。
详见：http://www.jb51.net/article/88425.htm
1>提高性能 2>新添加的元素还会有之前的事件
- 什么是闭包（closure），为什么要用它？
闭包就是能够读取其他函数内部变量的函数，如果一个函数内部又定义了一个内部函数，并将该内部函数作为返回值返回或者存储在某个对象的属性里，这时就会形成一个闭包。
使用场景：1.匿名自执行函数2缓存 3实现封装（封装的方式有很多，闭包只是其中一种，不是说到封装就一定会用闭包）
闭包的优缺点
闭包的优点：
1.缓存
2.面向对象中的对象
3.实现封装，防止变量跑到外层作用域中，发生命名冲突
4.匿名自执行函数，匿名自执行函数可以减小内存消耗
闭包的缺点：
1.闭包有一个非常严重的问题，那就是内存浪费问题，这个内存浪费不仅仅因为它常驻内存，更重要的是，对闭包的使用不当的话会造成无效内存的产生
2.性能问题 使用闭包时，会涉及到跨作用域访问，每次访问都会导致性能损失。
因此在脚本中，最好小心使用闭包，它同时会涉及到内存和速度问题。不过我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响。
- 知道原型和原型链么，一般什么时候需要用？
原型：
主要作用是用于继承
原型的作用是为函数对象声明通用的变量或者函数，构造函数的实例都会从原型上继承属性和方法。
每个对象中都有__proto__属性，这个属性指向的就是它基于的原型对象。
原型链：
var person = function(name){
this.name = name
};
person.prototype.getName = function(){
return this.name;
}
var zjh = new person(‘zhangjiahao’);
zjh.getName(); //zhangjiahao
JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype。以上面的例子为例：
console.log(zjh.__proto__ === person.prototype) //true
同样，person.prototype对象也有__proto__属性，它指向创建它的函数对象（Object）的prototype
console.log(person.prototype.__proto__ === Object.prototype) //true
继续，Object.prototype对象也有__proto__属性，但它比较特殊，为null
console.log(Object.prototype.__proto__) //null
我们把这个有__proto__串起来的直到Object.prototype.__proto__为null的链叫做原型链
我们调用一个对象的属性或者方法的时候，会存在一个优先级的问题。优先级为：
构造函数内定义的属性>构造函数的原型上定义的属性>沿着__proto__指定的原型（原型链）一直往上找，直到找到null为止。任何一步一旦找到就立马停止，不会继续往下找。
- 有没有封装过插件，你一般怎么封装呢
逼格低点的话这样说：
封装过，以前我主要是把一些公共的功能封装成函数来实现简单封装，比如tab切换封装的时候我会定义一个叫tab的函数，选项卡节点和内容节点作为函数tab的参数。假如我一个页面有多个tab切换，我只需要执行函数的时候给函数传入不同的参数即可。
逼格高点的这样说：
封装过，我们主要用面向对象中的混合模式来封装插件，把可变的属性或者方法（通常都是属性）在构造函数内定义，把一些不变的属性或者方法（通常是方法）定义在函数的原型上面。我们封装好的插件通常会放在一个匿名自执行函数里面，这样做的目的是为了避免变量冲突。
- 怎么判断一个变量str是否被赋值？
typeof str == “undefined”
- 怎么判断一个变量arr的话是否为数组（此题用typeof不行）
arr instanceofArray
Ajax和jsonp的原理？
Ajax的原理（最次最次也得把XMLHttpRequest对象说出来）
Ajax基于XMLHttpRequest对象与Web服务器端进行异步数据通信。
首先基于这个对象的open方法创建一个浏览器跟服务器端连接，通过send方法从浏览器向服务器端发送请求。我们可以通过这个对象的onreadystatechange事件来监听请求的状态，当请求成功之后的话，我可以获取到这个对象responseText等方法获取到请求过来的数据，然后通过js对这些数据进行解析
Jsonp原理
Ajax不能跨域，但是script标签和img标签都可以跨域。jsonp的话就是动态创建一个script标签，把jsonp数据格式(callback(json))的接口的地址赋值给我们的script标签的src属性。每一次发送jsonp请求的时候都会创建一个全局的回调函数，全局回调函数名称跟我们jsonp接口里面的函数名称是一致的。全局函数里面写的就是对请求过来数据的操作。
Ajax不能跨域，JSONP可以跨域。
移动篇：
1.你们移动端怎么开发的？用的什么单位、js框架呢、怎么真机调试你们程序、怎么解决前缀问题呢
首先我们移动端用的是rem这个单位，移动端实际上还新增了vw,vh等一些单位，但是相对于rem来说，他们的兼容性都不好。rem是一个相对单位，是相对于根节点的font-size的比例。我们还会引用一个外部的js，这个js可以通过屏幕宽度动态计算根节点的font-size值。
我们移动端用的JS框架是zepto.js，因为相应来说它的的体积的话要小很多。而且我们项目中有时会需要使用一些触屏事件，比如滑动事件，那么我们还会调用它里面的touch模块
我们webapp的话都是基于gulp搭建的前端工程来开发，因为利用gulp起一个webserver特别简单，并且我还可以实现livereload功能（当我监控的文件发生变化的时候，可以触发浏览器的自动刷新功能），而且在css3里面加前缀的话是一个很头疼的问题，我们现在只需要用autoprefixer模块就可以很容易实现自动加css3前缀这个功能了。
2. 移动端兼容性？
1>ios移动端click事件300ms的延迟响应. 用fastclick来解决
2>zepto的touch模块的tap事件有点透的问题，也是用fastclick来解决
3>一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发，css增加cursor:pointer就搞定了
4>ios下取消input在输入的时候英文首字母的默认大写
5>fixed定位缺陷
ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
解决方案： 可用iScroll插件解决这个问题
6>Input 的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal
7>calc的兼容性处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：
div {
width: 95%;
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}
8>在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：
* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
9>阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
3.谈谈你对bootstrap的认识，用它做过项目么？
用Bootstrap主要用来做一些响应式的网站，它里面栅格化这块比较强大，我可以针对不同的屏幕尺寸定制不同页面结构。
我还用它做过后台管理系统，因为它里面集成的有风格标准统一的组件、插件、全局样式等，是我们做后台管理系统的话，不用再花大精力去布局页面了。而且甚至产品给我们一个原型图我们就可以开始开发，大大提高了开发效率。
综合：
- 网页前端性能优化的方式有哪些？
1.压缩css,js,图片
2.减少http请求次数， 合并css,js 合并图片（雪碧图）
3.使用CDN
4.减少dom元素数量
5.图片懒加载
6.静态资源另外用无cookie的域名
7.减少dom的访问（缓存dom）
8.巧用事件委托
9.样式表置顶、脚本置低
- 简单描述一下你做过的项目研发流程？
1>约定规范(目录结构、命名规范、代码书写规范)
2>由我们组长（公司有的叫组长有的叫leader）给我们搭建前端工程gulp(最起码把browsersync模块能说出来，用它创建一个局域网server并实现监控文件有变化就自动刷新功能)（另外搭建前端工程的时候就会把我们会用到的库或者插件放进去）、拆分不同的前端模块给我们开发
3>正式开发（我们通过git工具来进行）
4>代码review（由我们组长来帮我们做）
5>交付给后端开发工程师，需要帮他们联调的话到时再帮他们联调
- 看你简历上面写的你会nodejs还有gulp，能给我描述下你都用这俩东西做过什么东西么？
nodejs可以做一些服务器端的应用，比如我们可以用它搭建一个webserver（基于express框架可以实现）。我本人呢nodejs搭建webserver这块主要也是从网上看到一些文档自学的，谈不上精通。
我们公司的话主要用gulp来实现我们前端自动化。比如以前我们公司做webapp的项目有这样的需求，我们会用sass这个预编译器，我们写css3属性的时候我们经常还会用autoprefixer这个插件，我们发布上线的时候还需要把css文件进行压缩，如果没有一个很好的工具能帮我们管理并自动实现上面的操作的话，还是挺麻烦的。现在我们就可以用gulp来实现这些操作的自动化
- 你有跟后端合作的经验是吧，你们都怎么协作的呀？
第一种回答：（smarty啥都描述不出来，ajax交互这块特别特别差的学生，但这限定了你能就业的公司，因为大部分公司还是希望他招的人是很全面的人才，所以这个不推荐）
我们公司前端代码做完之后，直接就把前端代码的话交给后端了，页面绑定数据和ajax这块基本上都是后端开发工程师来完成的。除非他们碰到一些复杂点的js特别难写或者有些js的话需要处理样式这块的话会来让我们弄。
第二种回答：（适合大部分同学，前提你得理清楚）
我们公司的话，后端用的php语言，平时的话我们也会套一些smarty模板，只要我们前后端约定一下数据格式，然后我按照smarty模板的一些语法把数据解析成最终的HTML。
另外我们公司ajax这块的话一般都由我们前端来做，而且后端做的ajax这块我们通常也会去看下，尤其是ajax调用成功还需要js操作css样式这块的情况。Ajax接口这块的话，我们会事先约定下数据格式，我们公司的接口一般都是json格式的，而且我们有个文档是专门描述这个接口（里面通常会描述下返回结果是对象还是数组，对应里面的每一项又都是啥），我们前端只需要把json格式的数据结合上html渲染到我们也没对应的位置即可。我们拿到数据的话，现在一般很少直接用js拼接html了，一般会借助js模板引擎（handlerbars）来做这方面工作。
其他：
1.平常碰到问题一般都是怎么解决的呢？
百度、看一些博客（csdn、博客园cnblogs）、去论坛提问（比如知乎）、开发者问答社区（segmentfault）、会加一些qq技术交流群
看前端大牛的博客
玉伯 kissy框架（PC端淘宝、天猫）,sea.js（前端模块加载器）
司徒正美 avalon（前端MVC框架）
阮一峰（翻译了很多国外文档）
张鑫旭（写了大量的博客，用生活化的例子来解释难点）
大漠穷秋（angular1，angular2慕课网视频教程）
徐飞（技术栈）
朴灵
寸志
2.专业宽度方面：最近在学习哪些新技术呀，以后准备往哪方面发展？
我最近在学习react。。。
我最近在学习sea.js。。。
我最近在学require.js。。。
我最近正在恶补node.js。。。
技术方向：高级前端开发工程师、全栈工程师（前端+后端nodejs）、前端架构师
管理方向：前端leader(前端主管、前端经理)、项目经理、CTO
*********************************************************************************************************
3.你都做过什么项目呢？让他具体聊某一个项目中运用的技术
注意：用心找自己做的项目中自己感觉最拿出来手的（复杂度最高，用的技术最多的项目），描述的时候尽可能往里面添加一些技术名词
布局我们用html5+css3
我们会用reset.css重置浏览器的默认样式
JS框架的话我们选用的是jQuery(也可能是Zepto)
我们用版本控制工具git来协同开发
我们会基于gulp搭建的前端自动化工程来开发（里面包含有我们的项目结构、我们需要引用的第三方库等一些信息，我们还实现了sass编译、CSS3加前缀等的自动化）
我们的项目中还用到了表单验证validate插件、图片懒加载Lazyload插件
4.为啥要离开上家单位呀（或者从前从事的不是计算机相关，为啥改行了）？
1.千万别说这行工资高之类的
2.要说，自己对这个很感兴趣，大学的时候加入的有这个社团，跟着学长学了这个东西，越学越感兴趣，于是利用大学课余时间自学了前端的知识（也可以把这个东西说成自己亲戚）
5.我们这边的话会有加班的情况，不知道你能接受不？
可以，个人愿意与公司一块成长的，而且也有了解这行会有加班，会配合公司把项目用心完成的。
6.有没有什么问题要问我？
1.别问加班和啥时候调工资之类的
2.社保、公积金交么（千万别说基数是多少）
3.问公司做的项目主要是哪方面呢，我擅长的技术****（具体技术）不知道公司需不需要
注意：如果去的是国企，国企很强调奉献，尽量往这方面靠
面试公司前最好搜索下公司是干什么的，能把他们产品说上来点就更好了（上市公司、国企尤其得这样）
第八部分：前端MVC框架
1、Angular的数据绑定采用什么机制？详述原理。
脏检查机制。
双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这需要一个监控。
原理就是，Angular 在 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS就会往 $watch 队列里插入一条$watch ，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时， $digest 循环就会触发，遍历所有的 $watch ，最后更新 dom。
第九部分：优化
1.sprites是什么，它的作用是什么？
雪碧图
减少http请求
2.前端优化常用技巧？
1.压缩css,js,图片
2.减少http请求次数， 合并css,js 合并图片（雪碧图）
3.使用CDN
4.减少dom元素数量
5.图片懒加载
6.静态资源另外用无cookie的域名
7.减少dom的访问（缓存dom）
8.巧用事件委托
9.样式表置顶、脚本置底
3.如果已经开发完一个web应用用于手机端访问，请问需要在哪方面优化页面？
按需加载
静态资源压缩
巧用图标字体
保证首屏相应速度
动画能用css3实现的尽量用css3实现
移动端事件优化（fastclick）
原文链接：https://www.cnblogs.com/le220/p/8469918.html
你可能感兴趣的:(JavaScript)
D.