Web前端面试宝典（最新）

时间 2019-11-07

标签 web 前端面试宝典最新栏目 HTML 繁體版

原文原文链接

第一部分：HTML问答题

1.简述一下你对HTML语义化的理解？

用正确的标签作正确的事情。javascript

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;即便在没有样式CSS状况下也以一种文档格式显示，而且是容易阅读的;php

搜索引擎的爬虫也依赖于HTML标记来肯定上下文和各个关键字的权重，利于SEO;css

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。html

2.Label的做用是什么？是怎么用的？

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。前端

<label for="Name">Number:</label>html5

<input type=“text“name="Name" id="Name"/>java

<label>Date:<input type="text" name="B"/></label>node

3.iframe有那些缺点？

*iframe会阻塞主页面的Onload事件；react

*搜索引擎的检索程序没法解读这种页面，不利于SEO;jquery

*iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载。

使用iframe以前须要考虑这两个缺点。若是须要使用iframe，最好是经过javascript。动态给iframe添加src属性值，这样能够绕开以上两个问题。

4.HTML与XHTML —— 两者有什么区别，你以为应该使用哪个并说出理由。

1.XHTML 元素必须被正确地嵌套。

错误：<p><span>this is example.</p></span>

正确：<p><span>this is example.</span></p>

2.XHTML 元素必须被关闭。

错误：<p>this is example.

正确：<p>this is example.</p>

3.标签名必须用小写字母。

错误：<P>this is example.<P>

正确：<p>this is example.</p>

3.1空标签也必须被关闭

错误：<br>

正确：<br/>

4.XHTML 文档必须拥有根元素。

全部的 XHTML 元素必须被嵌套于 <html> 根元素中。

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是标明重点内容，有语气增强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展现强调内容。

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”,新网页在新窗口打开；

答： <a href=”http://www.baidu.com” alt=”webfoss” target=”_blank”><img src=”./img/logo.png”></a>

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，知道这是干什么的么？

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签以前。

做用：

1.告知浏览器文档使用哪一种 HTML 或 XHTML 规范。

2.告诉浏览器按照何种规范解析页（若是你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,浏览器按照本身的方式解析渲染页面）

15.DIV+CSS布局较table有什么优点？

一、速率更快，页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来讲是最大的优点了；

二、更好地被搜索引擎收录，大部分html页面的样式写入了CSS文件中，便于被搜索引擎采集收录；

三、对浏览者和浏览器更具优点，因为CSS富含丰富的样式，使页面更加灵活性，它能够根据不一样的浏览器，而达到显示效果的统一和不变形；

四、修改更有效率，因为使用了DIV+CSS制做方法，在修改页面的时候更加容易省时，提升工做效率；

16.为何用多个域名存储网站资源更有效？

一、CDN缓存更方便

二、突破浏览器并发限制

三、节约cookie带宽

四、节约主域名的链接数，优化页面响应速度

五、防止没必要要的安全问题

17.简要说明一下作好SEO须要考虑哪些方面？

1.TDK

2.图片+alt

3.友情连接

4.站点地图

第二部分：HTML单选题

1.如下描述错误的是（A）

html须要先编译以后才能执行
html须要存放在应用服务器端，客户端请求后才会将html程序返回给客户端
html是须要浏览器解析的
html语言就是把咱们须要的内容显示在浏览器，可是html语言自己不显示

2.如下描述错误的是(C)

A.html分为<html><head><body>三个基本标记结构

B.head头标签，能够添加关键字描述网站优化网站

C.一般咱们显示的内容都会放在<body>标签，一般html只能使用一次

D.<!DOCTYPE>属于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分为 <html> <head> <body>三个基本标记结构。
head头标签能够加关键字、描述网站、优化网站
一般咱们显示的内容都会放在<body>标签，一般html只能使用一次。
<!DOCTYPE> : 属于html标签，它是一种标准通用标记语言的文档类型声明。

6.如下说法错误的是（D）

A.<p> 标签：标签订义段落

B.<br> : 简单的换行

C.<dl>标签：自定义列表

D.<dd>: 自定义标题

7.如下对标签描述正确的（多选）（A,C,D）

A.h1,h2,h3,h4,h5,h6 标签是显示标题从h1到h6,从大到小的过程

B.tt标签对表格的限定标签

C.b 标签呈现粗体文本

D.i 标签呈现斜体文字

8.在HTML语言中，设置表格单元格之间距离的标签是（ B ）和单元格内文字与边框的距离的标签是（C）

A.<table border=””>

B.<table cellspacing=””>

C.<table cellpadding=””>

D.<table width=””>

第三部分：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.一个满屏品字布局如何设计?

</div>

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问答题

一、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<dataarray.length;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的区别是什么？

一、 property是DOM中的属性，是JavaScript里的对象；而attribute是HTML标签上的特性，它的值只可以是字符串；

二、DOM对象初始化时会在建立默认的基本property；只有在HTML标签中定义的attribute才会被保存在property的attributes属性中；

三、attribute会初始化property中的同名属性，但自定义的attribute不会出如今property中；

四、propety是对象，而attribute的值都是字符串；

五、最关键的两句话：

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<arguments.length;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)实现对该数组的降序排列，输出[六、五、四、三、二、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();

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单选题

一、 下列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++)

二、 下列的哪个表达式将会返回假（B）

A、 !(3<1)

B、 (4>=4)&&(5<=2)

C、 (“a”==”a”)&&(“C”!=”d”)

D、 (2<3)||(3<2)

三、 下列选项中，（D）不是网页事件

A、 onclick

B、 onmouseover

C、 onsubmit

D、 Onp

四、 有语句“var x = 0;while( )x+=2;”，要使while循环体执行10次，空白的循环判断式应该为（D ）

A、 x < 10;

B、 x <= 10;

C、 x < 20;

D、 x <= 20;

五、 如下说法中错误的是（D ）

A、 var a = 111;

B、 var a = “张三”;

C、 var _name = “小明”;

D、 var &_id = “1”;

六、 下列JS的判断语句中（A）是正确的

A、 if( i == 0)

B、 if( i = 0)

七、下列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

八、下列的哪个表达式将会返回假（）

!(3 <= 1)
(4 >= 4) && (5 <= 2)
( “a” == “a”) && (“C” != “d”)
(2<3) || (3<2)

答案：B

九、下列选项中，（）不是网页中的事件

onclick
onmouseover
onsubmit
onp

答案：D

十、有语句“var x = 0; while( )x+2;”,要是while循环体执行10次，空白的循环断定式应该为（）

x < 10
x <= 10
x < 20
x <= 20;

答案：C

十一、如下说法错误的是（）

var a = 111;
VAR a = ‘张三’;
var _name = “小明”;
var &_id=1;

答案：BD

十二、如下JS的判断语句中（）是正确的

if (i == 0)
if (i =0)

答案：A

1三、如下不是引入js的方式选项的是（D）

A．使用script标签

B引入外部的js文件

C在事件中编写js

D使用<link></link>引入

1四、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
使用<link></link>引入

第六部分：HTML5+CSS3

1.HTML五、CSS3里面都新增了那些新特性？

新的语义标签

本地存储

离线存储

Websocket

2d，3d变换

Transition,animation

媒体查询

新的单位（rem,vw，vh等）

2.HTML5 为何只须要写 <!DOCTYPE HTML>？

HTML5 不基于 SGML（标准通用标记语言），所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

而HTML4.01基于SGML,因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

3.如何处理HTML5新标签的浏览器兼容问题？

IE8/IE7/IE6支持经过document.createElement方法产生的标签，

能够利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还须要添加标签默认的样式。

<!--[if lt IE 9]>

<![endif]-->

将上代码复制到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结构： <div class=”box”>文本</div>

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是阿里的字体库，能够定制本身要的字体图标。

优点：

一、轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会立刻渲染出来，不须要下载一个图像。能够减小HTTP请求，还能够配合HTML5离线存储作性能优化。

二、灵活性：图标字体能够用过font-size属性设置其任何大小，还能够加各类文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。能够在任何背景下显示。使用位图的话，必须得为每一个不一样大小和不一样效果的图像输出一个不一样文件。

三、兼容性：网页字体支持全部现代浏览器，包括IE低版本。详细兼容性能够点击这里。

弊端：

只能单色

跨域问题

字体图标库彷佛体积显得有些过大

19.什么是响应式设计？

它是关于网站的制做或网页制做的工做。不一样的设备有不一样的尺寸和不一样的功能。响应式设计是让全部的人能在这些设备上让网站运行正常。一部分是媒体查询和不一样的视觉效果。一部分是不一样的资源（如不一样的Javascript来处理触摸与点击自动适应屏幕的对比）。

20.解释下这个CSS选择器什么发生什么？

[role=navigation] > ul a:not([href^=mailto]) {}

定义了role属性，而且值为navigation的任何元素，其子元素列表下的除邮箱连接以外的全部连接元素。

可以用语言表达清楚这个选择器，证实你理解他们和可使用他们作一些技术交流。

第七部分：必考题

HTML+CSS篇：

1.如何处理HTML5新标签的浏览器兼容问题？（本身须要试试）

<!--[if lt IE 9]>

<![endif]-->

将上代码复制到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浏览器显示 <![endif]-->

只在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不行）

instanceof arr Array

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框架

一、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://juejin.im/post/5aae076d6fb9a028cc6100a9

做者：乐乐连接：http://www.cnblogs.com/le220/p/8469918.html 本文属于我的原创，转载请注明出处，辛辛苦苦整理的，多谢配合。若是对你有帮助，动动手指，点个赞，谢谢！

Web前端面试宝典（最新）

第一部分：HTML问答题

1.简述一下你对HTML语义化的理解？

2.Label的做用是什么？是怎么用的？

3.iframe有那些缺点？

4.HTML与XHTML —— 两者有什么区别，你以为应该使用哪个并说出理由。

5.常见的浏览器内核有哪些？

6.简述一下你对HTML语义化的理解？

7.HTML5的form如何关闭自动完成功能？

8.实现不使用 border 画出1px高的线，在不一样浏览器的标准模式与怪异模式下都能保持一致的效果。

9.title与h1的区别、b与strong的区别、i与em的区别？

10.请描述下SEO中的TDK？

11.简单书写HTML代码：请写出一个html网站代码，内容为一个图片，连接到“http://www.baidu.com”，图片路径为“./img/logo.png”,为图片设置替换文本”webfoss”,新网页在新窗口打开；

12.标签上title与alt属性的区别是什么？

13.前端页面有哪三层构成，分别是什么？做用是什么？

14.每一个HTML文件头里都有个很重要的东西，Doctype，知道这是干什么的么？

15.DIV+CSS布局较table有什么优点？

16.为何用多个域名存储网站资源更有效？

17.简要说明一下作好SEO须要考虑哪些方面？

第二部分：HTML单选题

1.如下描述错误的是（A）

2.如下描述错误的是(C)

3.在HTML语言中，设置表格单元格之间距离的是（B）和单元格和文字之间距离的是（C）

4.如下对标签描述正确的(多选)（ABC）

5.如下描述错误的是（D）

6.如下说法错误的是（D）

7.如下对标签描述正确的（多选）（A,C,D）

8.在HTML语言中，设置表格单元格之间距离的标签是（ B ）和单元格内文字与边框的距离 的标签是（C）

第三部分：CSS问答题

1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不一样的？

2.CSS选择符有哪些？哪些属性能够继承？

3.css定义的权重

4.若是须要手动写动画，你认为最小时间间隔是多久，为何？

5.简单介绍下CSS的盒子模型，他都包含哪些属性？

6.宽高都200px的div在浏览器窗口居中（水平垂直都居中）

7.一个满屏 品 字布局 如何设计?

8.超连接访问事后hover样式就不出现了 被点击访问过的超连接样式不在具备hover和active了解决方法是改变CSS属性的排列顺序:

9.display:none;跟visibility:hidden;的区别是啥？

10.低版本浏览器不支持display:inline-block属性，请问怎么兼容

11.在使用display:inline-block时，inline-block元素会有4px左右的空隙，这是什么缘由致使的以及解决方法

12.写出下面三个的区别？

13.Inline-block默认的对其方式是什么？在使用inline-block时在内容不一样的时候想要保持内容水平对齐，说一下你采用的方法？

14.简明说一下CSS link于@import的区别和用法

第四部分：JS问答题

一、JS的数据类型有哪些？typeof运算符的执行结果都有哪些数据类型？

2.null，undefined 的区别?

3.怎么判断一个变量没有被定义

4.怎么判断一个变量arr的话是否为数组（此题用typeof不行）

5.事件委托是什么

6.描述下JSON对象的两个很重要的方法

7.写一个函数getRandomNumber(startNum,endNum),去除startNum到endNum之间的任意随机数

8.写一个通用的去除字符串左右空格的函数？

9.a = [1,2,3,4];b=a;a.push(2);b.push(3);请问，最终a,b的结果分别是多少？

10.检测浏览器的两种方式

11.“ ===”、“ ==”的区别？

12.原型、原型链？

13.eval是作什么的？

14.["1", "2", "3"].map(parseInt) 答案是多少？

15.简单语言测试：有数组dataarray，值为-100到100的整数，求出数组中大于0的数的和；

16.简单jQuery：请写出代码，ul标签下面有1000个li，写一个性能最高的方式实现，在点击li后，输出li的内容

17.用fetch方法构造一个Get请求，要求把当前页面cookie传过去，请写出代码；

18.简述下为什么经过ajax发送的请求会出现乱码问题，如何解决？

19.简述DOM，HTMLDOM的区别和联系

20.什么是事件流

21.JavaScript原型继承是如何运做的？

22.CORS是什么？对于跨域请求，如何将附带凭证（HTTP Cookie 及 HTTP认证信息）的请求发送至服务器端?

23.DOM元素Attribute与Property的区别是什么？

24.Long-Polling、WebSocket、SSE(Server-Sent Events)之间有什么差别？请写出WebSocket在浏览器端如何发送及接收消息的相关代码实现（须要考虑传输一场并根据返回数据的格式作不一样处理）

25.实现如下函数：

26.实现如下代码：

27.指出下面代码的区别

29.函数call和apply的区别：

30.语句（window.foo||(window.foo=”bar”)）;执行后，window.foo的值是多少？

32．如下语句结果a，m的值

34.$(document).ready()是个什么函数？为何要用它。

36.请写一个正则，匹配输入的字符：第一个必须是字母或下划线开头，后面就是字母和数字或下划线构成，长度5-20.

40.添加、删除、更改、插入节点的方法

41.在javascript编程中，请至少说出三种异步操做的使用场景？

42.请用闭包的方式写一个方法，第一次执行返回999，第二次返回1000.

43.如今有一个数组[1,4,5,8,100],请写一个方法，每秒输出数组的第一个元素，知道整个数组输出完毕

8.在HTML语言中，设置表格单元格之间距离的标签是（ B ）和单元格内文字与边框的距离的标签是（C）

7.一个满屏品字布局如何设计?

8.超连接访问事后hover样式就不出现了被点击访问过的超连接样式不在具备hover和active了解决方法是改变CSS属性的排列顺序: