Web前端面试宝典（最新）

最新推荐文章于 2024-05-28 12:09:11 发布

lelara

最新推荐文章于 2024-05-28 12:09:11 发布

阅读量939

点赞数 1

分类专栏：经验总结

本文链接：https://blog.csdn.net/lelara/article/details/84577582

版权

经验总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一部分：HTML问题题

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

用正确的标签做正确的事情。

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

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

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

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

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

<label for =“Name”> Number：</ label>

3. iframe有那些缺点？

* IFRAME会阻塞主页面的的Onload事件;

*搜索引擎的检索程序无法解读这种页面，不利于搜索引擎优化;

* IFRAME和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用的iframe之前需要考虑这两个缺点。如果需要使用的iframe，最好是通过Java脚本。动态给iframe中添加的src属性值，这样可以绕开以上两个问题。

4. HTML与XHTML - 二者有什么区别，你觉得应该使用哪一个并说出理由。

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

错误：<p> <span>这是一个例子。</ p> </ span>

正确：<p> <span>这是一个例子。</ span> </ p>

2.XHTML元素必须被关闭。

错误：<p>这是一个例子。

正确：<p>这是一个例子。</ p>

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

错误：<P>这是一个例子。<P>

正确：<p>这是一个例子。</ p>

3.1空标签也必须被关闭

错误：点击

正确：<BR/>

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

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

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

Trident内核：IE，MaxThon，TT，The World，360，搜狗浏览器等。[又称MSHTML]

壁虎内核：NETSCAPE6及以上版本，FF，MozillaSuite / SeaMonkey的等

Presto内核：Opera7及以上。[Opera内核原作：Presto，现为：Blink;]

Webkit内核：Safari，Chrome等。[Chrome的：Blink（WebKit的分支）]

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

用正确的标签做正确的事情。

HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析;

即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

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

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

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

给不想要提示的形式或某个输入设置为autocomplete = off。

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

9.title与H1的区别，B与强劲的区别，我与EM的区别？

标题属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响;

强是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<强>会重读，而<B>是展示强调内容。

我内容展示为斜体，EM表示强调的文本;

物理风格元素 - 自然样式标签

b，我，你，先生

语义样式元素 - 语义样式标签

强，em，ins，del，代码

应该准确使用语义样式标签，但不能滥用，如果不能确定时首选使用自然样式标签。

10.请描述下SEO中的TDK？

在SEO中，所谓的TDK其实就是标题，描述，关键词这三个标签，这三个标签在网站的优化过程中

标题标题标签，描述描述标签，关键字，关键词标签

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. 标签上的标题与ALT属性的区别是什么？

ALT是给搜索引擎识别，在图像无法显示时的替代文本;标题是关于元素的注释信息，主要是给用户解读当鼠标放到文字或是图片上时有标题文字显示（因为IE不标准）在IE浏览器中ALT起到了标题的作用，变成文字提示。在定义IMG对象时，将ALT和标题属性写全，可以保证在各种浏览器中都能正常使用。

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

分成：结构层，表示层，行为层。

结构层（结构层）

由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

表示层（表示层）

由CSS负责创建.CSS对“如何显示有关内容”的问题做出了回答。

行为层（behaviorlayer）

负责回答“内容应该如何对事件做出反应”这一问题。这是Javascript语言和DOM主宰的领域。

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

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

作用：

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

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

15. DIV + CSS布局较表有什么优势？

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

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

3，对浏览者和浏览器更具优势，由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形;

4，修改更有效率，由于使用了DIV + CSS制作方法，在修改页面的时候更加容易省时，提高工作效率;

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

1，CDN缓存更方便

2，突破浏览器并发限制

3，节约饼干带宽

4，节约主域名的连接数，优化页面响应速度

5，防止不必要的安全问题

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）

边框

B.cellspacing

C.cellpadding

为d.width

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

A.h1，H2，H3，H4，H5，H6标签是显示标题从H1到H6从大到小的过程

BB标签呈现粗体文本

CI标签呈现斜体文字

5. 以下描述错误的是（d）

html分为<html> <head> <body>三个基本标记结构。
头头标签可以加关键字，描述网站，优化网站
通常我们显示的内容都会放在<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标签对表格的限定标签

Cb标签呈现粗体文本

Di标签呈现斜体文字

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

A. <table border =“”>

B. <table cellspacing =“”>

C. <table cellpadding =“”>

D. <table width =“”>

第三部分：CSS问答题

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

（1）有两种，IE盒子模型，W3C盒子模型;

（2）盒模型：内容（内容），填充（padding），边界（margin），边框（border）;

（3）区别：IE的内容部分把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，等级的权重为10，ID的权重为100

4.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60 * 1000ms = 16.7ms

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

宽度，高度，保证金，填充边界

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

位置是：固定;宽度：200像素;高度：200像素;左：50％;顶部：50％;

保证金左：-100px;的margin-top：-100px;

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

</ DIV>

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

LVHA：a：link {} a：visited {} a：hover {} a：active {}

9. display：none;跟可见性：隐藏;的区别是啥？

显示：无;不占位，能见度：隐藏;占位

10. 低版本浏览器不支持显示：内联块属性，请问怎么兼容

*显示：内联; *缩放：1;

11. 在使用显示：内联块时，内联块元素会有4像素左右的空隙，这是什么原因导致的以及解决方法

（1）取消换行和空格

（2）设置父元素的font-size为0，在给子元素设置自身的字体大小

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

*高度{}

_高度{}

+高度{}

* IE7及以下

_IE6

+ IE7

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

默认对齐方式：基线

水平对齐：垂直对齐：顶部;

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

链接是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务; @import属于CSS范畴，只能加载CSS。

链接引用CSS时，在页面载入时同时加载; @import需要页面网页完全载入以后加载。

链路是XHTML标签，无兼容问题; @import是在CSS2.1提出的，低版本的浏览器不支持。

链接支持使用Java脚本控制DOM去改变样式;而@import不支持。

第四部分：JS问答题

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

数据类型主要包括两部分：

基本数据类型：Undefined，Null，Boolean，Number和String

引用数据类型：Array，Object

的typeof运算符的结果类型：

数字，字符串，布尔值，对象，功能，未定义

2. null，undefined的区别？

null表示一个对象被定义了，值为“空值”;

undefined表示不存在这个值。

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

typeof bianliang ==“undefined”

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

Arr instanceof Array

5. 事件委托是什么

事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（文件）。

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 ++）{

如果（DataArray中> 0）{

X + = DataArray中[I];

}

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

$（“UL”）。在（“点击”，”礼”，函数（）{

$（本）。html的（“命中”）;

}）

17. 用提取方法构造一个获取请求，要求把当前页面的cookie传过去，请写出代码;

取（URL，{

方法： “GET”，

凭据：“包括”，

身体：document.cookie中

}）

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

乱码的问题就是编码格式冲突，我们需要传输中文数据前面加一个是encodeURI（）编码，例如：（Ĵ$（ “＃fk_info”）VAL（））是encodeURI;在接受参数的页面对传过来的编码过后的内容用后端语言进行解码

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标准，全称是“跨域资源共享”（跨域资源共享）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。只需要服务器端的响应头设置下来Access-Control-Allow-Origin即可。

只需把相应的cookie的信息和认证信息作为发布请求发送给服务器端即可。

23.DOM元素属性与属性的区别是什么？

1，属性是DOM中的属性，是JavaScript里的对象;而属性是HTML标签上的特性，它的值只能够是字符串;

2，DOM对象初始化时会在创建默认的基本属性;只有在HTML标签中定义的属性才会被保存在属性的属性属性中;

3，属性会初始化属性中的同名属性，但自定义的属性不会出现在属性中;

4，欢迎使用属性是对象，而属性的值都是字符串;

5，最关键的两句话：

属性（特性），是我们赋予某个事物的特质或对象。

属性（属性），是早已存在的不需要外界赋予的特质。

24.Long-Polling，WebSocket，SSE（服务器发送事件）之间有什么差异？请写出WebSocket在浏览器端如何发送及接收消息的相关代码实现（需要考虑传输一场并根据返回数据的格式做不同处理）

Long-Polling自己主动请求数据来获知文件知否发生变化缺点：会有很多无效请求

SSE服务器端通知客户端数据变化服务器端客户端保持一个长连接缺点：保持长连接需要占用大量的服务器端只要

WebSocket实时通信缺点：浏览器支持情况没有上面两种方法好

25. 实现以下函数：

添加（10,10）; ==> 20

加（10）（10）; ==> 20

function add（num）{

如果（==的arguments.length 1）{

return函数（num1）{

return num + num1;

}

}其他{

var sum = 0;

for（var i = 0; i <arguments.length; i ++）{

sum + = arguments [i];

}

返还金额;

}

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）是将函数订单（）作为一个普通函数去调用的，代码（2）是将订单（）作为一个构造函数去调用的;当函数订单的方法体中有这个关键之的时候，作为普通函数这指的是窗口对象，作为构造函数存在的时候这种指代的是本对象

28.var foo =“你好”;

（function（）{

var bar =“世界”;

警报（FOO +巴）;

}）（）;

警报（FOO +巴）;

以上语句会产生什么样的结果？

（1）的HelloWorld

（2）未定义

29.函数调用和应用的区别：

相同点：两个方法产生的作用是完全一样的

不同点:方法传递的参数不同,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; 不同的是有载（）的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用的document.ready（）方法的执行速度比的onload（）的方法要快。

问题二：Javascript只有在DOM元素已经定义以后才可以对其执行某种操作，jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。

35.读下面代码：

window.color ='red';

var o = {color：'blue'};

function sayColor（）{

警报（this.color）;

}

请在每行末尾写出该行的输出：

sayColor（）;

sayColor.call（本）;

sayColor.call（窗口）

sayColor.call（O）

答案：红色，红色，红色，蓝色

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

答案：/ ^ [A-Za-z _] \ w {4,19} $ /

37. JS中原型链上层的对象是 对象 的原型对象，该对象的_proto_指针指向 null 的原型对象。

38. JS中使用 Object对象的defineProperty 函数定义对象属性的访问器。

39. 如何对一篇文章进行敏感词替换？假如有几千个敏感词。（写一下思路即可）

将这篇文章以字符串的形式赋给一个变量。定义一个正则表达式，以全局匹配的方式查找所有敏感词，并用替换方法替换掉

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

使用appendChild

removeChild之

的replaceChild

的insertBefore

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

回调函数

事件监听

无极对象

的NodeJS的异步方法

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

function bb（）{

var num = 999;

return function（）{

return num ++;

}

var fun = bb（）;

有趣（）;

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

var arr = [1,4,5,8,100];

function output（）{

的setTimeout（函数（）{

的console.log（arr.splice（0,1）[0]）;

如果（arr.length> 0）{

输出（）;

}

}，1000）;

}

输出（）;

44.请给阵列本地对象的原型添加一个原型方法，它的作用是剔除重复的条目，并将新数组返回

Array.prototype.unique = function（）{//数组去除重复

var res = [];

var json = {};

for（var i = 0; i <this.length; i ++）{

如果（！JSON [这[一]）{

res.push（此[I]）;

json [this [i]] = 1;

}

返回资源;

}

第五部分：JS单选题

1， 下列的JavaScript的循环语句中（d）是正确的

A，if（var i <10; i ++）

B，for（var i = 0; i <10）

C，对于var i = 1到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;”，要使用循环体执行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到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）

答案：A

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

的onclick
的onmouseover
的onsubmit
ONP

答案：d

10，有语句“var x = 0; while（）x + 2;“，要是，而循环体执行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）

答案：

13，以下不是引入JS的方式选项的是（d）

A.使用脚本标签

乙引入外部的JS文件

Ç在事件中编写JS

d使用<链路> </链路>引入

14，Js语句

var a1 = 10;

var a2 = 20;

警报（ “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;

对象一个被绑定的点击事件执行函数是什么？（B）

FUN1
FUN2
执行错误
两个函数都被绑定

16. 以下那条会产生运行错误（A）

var obj =（）
var obj = []
var obj = 11
var obj

17.以下说法正确的是（C）

A.数字+字符=数字（字符）

B.数字+布尔=真;（数字）

C.数字+ null =数字

D.数字+ undefined = isNaN（NaN）

18. 以下不是引入javascript的方式的选项是？（D）

使用脚本标签
引入外部的的JavaScript文件
在事件中编写的JavaScript
使用<链路> </链路>引入

第六部分：HTML5 + CSS3

1. HTML5，CSS3里面都新增了那些新特性？

新的语义标签

本地存储

离线存储

的WebSocket

2D，3D变换

过渡，动画

媒体查询

新的单位（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] - >

将上代码复制到头部部分，记住一定要是头部分（因为IE必须在元素解析前知道这个元素，所以这个JS文件不能在其他位置调用，否则失效）

最后在CSS里面加上这段：

文章中，放在一边，对话框，页脚，页眉，部分，页脚，资产净值，图中，菜单{显示：块}

主要是让这些HTML5标签成块状，像DIV那样。

4.cookies，sessionStorage和localStorage的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

cookie的数据始终在同源的HTTP请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

的sessionStorage和localStorage的不会自动把数据发给服务器，仅在本地保存。

存储大小：

cookie的数据大小不能超过4K。

sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

生命周期：

localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据;

sessionStorage数据在当前浏览器窗口关闭后自动删除。

cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

5.什么叫优雅降级和渐进增强？

优雅降级：网络站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会针对旧版本的IE浏览器进行降级处理了，使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。

如：边框阴影

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能，向页面增加不影响基础浏览器的额外样式和功能的当浏览器支持时，它们会自动地呈现出来并发挥作用。

如：默认使用flash上传，但如果浏览器支持HTML5的文件上传功能，则使用HTML5实现更好的体验;

6. 过渡和动画的区别

过渡是过渡，动画是动画.transition只能从一种状态过渡到另外一种状态，动画可以定制复杂动画，可以定义动画的区间等。

过渡必须通过一些行为才能触发（JS或者伪类来触发），动画的话直接就可以触发。

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

给不想要提示的形式或某个输入设置为autocomplete = off。

8. margin-left：calc（-100％-100px）代码中用到了一个calc（），这个函数的作用是什么？

答：通过计算来确定CSS属性值。

计算值是英文单词计算（计算）的缩写，是CSS3的一个新增的功能，你可以使用计算值（）给元素的边界，边缘，pading，字体大小和宽度等属性设置动态值.calc（）可以使用数学运算中的简单加（+），减（ - ），乘（*）和除（/）来解决问题，而且还可以根据单位如PX，EM，REM和百分比来转化计算

9.简述HTML5新增的画布，音频，SVG标签的作用

canvas被称作画布，canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。

音频标签可以引用音频资源，在页面上播放音乐

SVG用XML格式定义图形，可以用来制作矢量图形。

10.简述如何通过CSS进行响应式布局的方式

响应式布局使用媒体查询@media定义多个分辨率下的样式，使页面在不同的分辨率下显示不同的样式

11.CSS的单位中，设定元素的长度或宽度与父元素字体大小相关的单位是什么？与HTML文档元素大小相关的单位是什么？

em，rem

13. 在CSS中使用 媒体关键字判断不同的屏幕使用不同的CSS文件，使用 @media 个关键字判断不同屏幕使用不同的CSS样式类。

14. CSS3实现一段阴影文本持续淡入淡出？

HTML结构：<div class =“box”>文本</ div>

CSS样式：

.box {

text-shadow：1px 1px 2px＃F00;

-moz-animation：淡化1s无限;

-webkit-animation：淡化1s无限;

-o-animation：淡化1s无限;

动画：淡化1s无限;

}

@keyframes fade {

0％{不透明度：0;}

50％{不透明度：100;}

100％{不透明度：0;}

}

@ -webkit-keyframes fade {

0％{不透明度：0;}

50％{不透明度：100;}

100％{不透明度：0;}

}

@ -moz-keyframes fade {

0％{不透明度：0;}

50％{不透明度：100;}

100％{不透明度：0;}

}

@ -o-keyframes fade {

0％{不透明度：0;}

50％{不透明度：100;}

100％{不透明度：0;}

}

15. 简述如何通过CSS进行响应式布局的方式。

meta标签定义：使网页适配设备宽度。

使用媒体查询适配对应样式

16. 如何使用帆布来画一条简单的线？

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的透明效果有什么不同？

不透明度会继承父元素的不透明性属性，而RGBA设置的元素的后代元素不会继承不透明属性。比如RGBA的话，内部的文字透明度不会发生变化，而混浊的话，会影响到内部的文字

18. FontAwesome和iconfont是什么？他们有什么异同，问什么要使用它，有什么弊端？

两个都是图标字体.Font Awesome是一套完美的图标字体，主要目的是和Bootstrap搭配使用

Iconfont是阿里的字体库，可以定制自己要的字体图标。

优势：

1，轻量性：。一个图标字体比一系列的图像（特别是在视网膜屏中使用双倍图像）要小一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

2，灵活性：。图标字体可以用过字体大小属性设置其任何大小，还可以加各种文字效果，包括颜色，悬停状态，透明度，阴影和翻转等效果可以在任何背景下显示使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

3，兼容性：网页字体支持所有现代浏览器，包括IE低版本详细兼容性可以点击这里。

弊端：

只能单色

跨域问题

字体图标库似乎体积显得有些过大

19.什么是响应式设计？

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

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

[role = navigation] > ul a：not（[href ^ = mailto] ）{}

定义了角色属性，并且值为导航的任何元素，其子元素列表下的除邮箱链接之外的所有链接元素。

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

第七部分：必考题

HTML + CSS篇：

1. 如何处理HTML5新标签的浏览器兼容问题？（自己需要试试）

<！ - [if lt IE 9]>

<！[ENDIF] - >

将上代码复制到头部部分，记住一定要是头部分（因为IE必须在元素解析前知道这个元素，所以这个JS文件不能在其他位置调用，否则失效）

最后在CSS里面加上这段：

文章中，放在一边，对话框，页脚，页眉，部分，页脚，资产净值，图中，菜单{显示：块}

主要是让这些HTML5标签成块状，像DIV那样。

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

宽度，高度，保证金，填充边界

3. 宽高都为200px的格在浏览器窗口居中（水平垂直都居中）？

位置是：固定;宽度：200像素;高度：200像素;左：50％;顶部：50％;保证金左：-100px;边距：-100px;

4. 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

不同浏览器都会带有自己的浏览器默认样式，一般我们需要把这些浏览器默认自带的样式给清楚，一般我们借助reset.css（我们公司里开发前端页面都用这个来清楚浏览器默认样式）

显示：内联块（IE7及以下不支持）

需要对低版本IE特殊处理：{显示：内联块; *显示：内联; *缩放：1;}

display：inline-block什么时候会显示间隙？怎样消除间隙？

父元素字体大小设置成0，子元素重新设置字体大小

显示：内联块滥用容易出现布局方面的问题，尤其在左中右，左右等布局方面的问题尤为突出因此如果是左右布局的话，尽量都用浮动来代替

z索引在IE7及以下版本的话，有时会发现不是谁z索引设置的越高谁就显示在最上面。碰到这种问题需要设置父元素有相对定位属性元素的z索引。先比较父元素的z索引再比较子元素的

IE6双边距

IE6中，元素向左浮动并且设置了左侧的外边距出现了这样的双边距的bug。同理，元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素，。第一个浮动元素会出现这个双边距错误，其它的浮动元素则不会只需要给浮动元素加上显示：内联;这样的CSS属性就可以了。

上边距，下边距的错误

父元素的第一个子元素设置了上边距，会作用于父元素（值为父元素的边距与该边距两者中的最大值），而子元素和父元素的边距则没有发生变化。

5. IE8-（IE8及以下）rgba模式不兼容的解决方案

IE8以及以下用滤镜，过滤器：Alpha（opacity = 20）;

6. CSS Hack

什么是CSS黑客

由于不同厂商的流览器或某浏览器的不同版本（如IE6，IE11，火狐/ Safari浏览器/歌剧/铬等），对CSS的支持，解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS代码的过程，叫做CSS破解！

CSS hack的原理

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

CSS hack分类

科普

lte：就是小于或等于的简写，也就是小于或等于的意思。

LT：就是小于的简写，也就是小于的意思。

gte：就是大于或等于的简写，也就是大于或等于的意思。

gt：就是大于的简写，也就是大于的意思。

！：就是不等于的意思，跟的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 +已经不再支持条注注释）：<！ - [if IE]> IE浏览器显示的内容<！[endif] - > ，针对IE6及以下版本：<！ - [if lt IE 6]>只在IE6-显示的内容<！[endif] - >。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

只在IE下生效<！ - [if IE]>这段文字只在IE浏览器显示<！[endif] - >

只在IE6下生效<！ - [if IE 6]>这段文字只在IE6浏览器显示<！[endif] - >

只在IE6以上版本生效< - [如果gte IE 6]>这段文字只在IE6以上（包括）版本IE浏览器显示<！[endif] - >

只在IE8上不生效<！ - [if！IE 8]>这段文字在非IE8浏览器显示<！[endif] - >

非IE浏览器生效<！ - [if！IE]>这段文字只在非IE浏览器显示<！[endif] - >

7. 让学生写一个CSS3动画？并让描述过渡和动画的区别

过渡是过渡，动画是动画.transition只能从一种状态过渡到另外一种状态，动画可以定制复杂动画，可以定义动画的区间等。

过渡必须通过一些行为才能触发（JS或者伪类来触发），动画的话不需要直接就可以触发。

JS篇：

知道不知道事件冒泡？知不知道阻止浏览器的默认行为？对应的原生兼容性写法该怎么写

知道事件冒泡，一般我们需要阻止事件冒泡。

事件冒泡

父元素和子元素上面的话都添加的有点击（不仅仅是点击事件，只要保证是同一个事件即可）。子元素的单击事件触发的时候，会导致该单击事件冒泡到它的父元素上面，为了阻止父元素的事件触发，我们一般需要给子元素的事件里写上阻止事件冒泡的方法

场景:(下拉菜单）点击空白区域关闭下拉菜单

兼容性写法：

如果（event.stopPropagation）{

event.stopPropagation（）;

} else if（event.cancelBubble）{

event.cancelBubble = true;

}

阻止浏览器默认行为

当我们不希望一些浏览器默认行为触发的时候，就需要给对应的事件添加上阻止浏览器默认行为。

场景：

禁止一个链接的点击后发生跳转

禁止UC等手机浏览器左右滑动切换到前一页或者下一页（我们可以通过给文件的touchmove事件加上阻止浏览器默认行为的方法）

知不知道用没用过事件委托？它的好处是啥？

1， 提高性能。

2， 新添加的元素还会有之前的事件。

详见：http：//www.jb51.net/article/88425.htm

1>提高性能2>新添加的元素还会有之前的事件

什么是闭包（封），为什么要用它？

闭包就是能够读取其他函数内部变量的函数，如果一个函数内部又定义了一个内部函数，并将该内部函数作为返回值返回或者存储在某个对象的属性里，这时就会形成一个闭包。

使用场景：1。匿名自执行函数2缓存3实现封装（封装的方式有很多，闭包只是其中一种，不是说到封装就一定会用闭包）

闭包的优缺点

闭包的优点：

1.缓存

2.面向对象中的对象

3.实现封装，防止变量跑到外层作用域中，发生命名冲突

4.匿名自执行函数，匿名自执行函数可以减小内存消耗

闭包的缺点：

1.闭包有一个非常严重的问题，那就是内存浪费问题，这个内存浪费不仅仅因为它常驻内存，更重要的是，对闭包的使用不当的话会造成无效内存的产生

2.性能问题使用闭包时，会涉及到跨作用域访问，每次访问都会导致性能损失。

因此在脚本中，最好小心使用闭包，它同时会涉及到内存和速度问题。不过我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响。

知道原型和原型链么，一般什么时候需要用？

原型：

主要作用是用于继承

原型的作用是为函数对象声明通用的变量或者函数，构造函数的实例都会从原型上继承属性和方法。

每个对象中都有__proto__属性，这个属性指向的就是它基于的原型对象。

原型链：

var person = function（name）{

this.name =名字

};

person.prototype.getName = function（）{

return this.name;

}

var zjh = new person（'zhangjiahao'）;

zjh.getName（）; // zhangjiahao

JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象原型以上面的例子为例：

console.log（zjh .__ proto__ === person.prototype）// true

同样，Person.prototype的对象也有__proto__属性，它指向创建它的函数对象（对象）的原型

console.log（person.prototype .__ proto__ === Object.prototype）// true

继续，Object.prototype中对象也有__proto__属性，但它比较特殊，为空

console.log（Object.prototype .__ proto__）// null

我们把这个有__proto__串起来的直到Object.prototype中.__ proto__为空的链叫做原型链

。我们调用一个对象的属性或者方法的时候，存在会优先一个级的问题优先级为：

构造函数内定义的属性>构造函数的原型上定义的属性>沿着__proto__指定的原型（原型链）一直往上找，直到找到空为止。任何一步一旦找到就立马停止，不会继续往下找。

有没有封装过插件，你一般怎么封装呢

逼格低点的话这样说：

封装过，以前我主要是把一些公共的功能封装成函数来实现简单封装，比如标签切换封装的时候我会定义一个叫选项卡的函数，选项卡节点和内容节点作为函数标签的参数。假如我一个页面有多个选项卡切换，我只需要执行函数的时候给函数传入不同的参数即可。

逼格高点的这样说：

封装过，我们主要用面向对象中的混合模式来封装插件，把可变的属性或者方法（通常都是属性）在构造函数内定义，把一些不变的属性或者方法（通常是方法）定义在函数的原型上面。我们封装好的插件通常会放在一个匿名自执行函数里面，这样做的目的是为了避免变量冲突。

怎么判断一个变量STR是否被赋值？

typeof str ==“undefined”

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

instanceof arr数组

阿贾克斯和JSONP的原理？

阿贾克斯的原理（最次最次也得把的XMLHttpRequest对象说出来）

阿贾克斯基于XMLHttpRequest的对象与网络服务器端进行异步数据通信。

首先基于这个对象的打开方法创建一个浏览器跟服务器端连接，通过发送方法从浏览器向服务器端发送请求。我们可以通过这个对象的onreadystatechange的事件来监听请求的状态，当请求成功之后的话，我可以获取到这个对象的responseText等方法获取到请求过来的数据，然后通过JS对这些数据进行解析

JSONP原理

阿贾克斯不能跨域，但是脚本标签和IMG标签都可以跨域.jsonp的话就是动态创建一个脚本标签，把JSONP数据格式（回调（JSON））的接口的地址赋值给我们的脚本标签的SRC属性。每一次发送JSONP请求的时候都会创建一个全局的回调函数，全局回调函数名称跟我们JSONP接口里面的函数名称是一致的。全局函数里面写的就是对请求过来数据的操作。

阿贾克斯不能跨域，JSONP可以跨域。

移动篇：

1.你们移动端怎么开发的？用的什么单位，JS框架呢，怎么真机调试你们程序，怎么解决前缀问题呢

首先我们移动端用的是REM这个单位，移动端实际上还新增了VW，VH等一些单位，但是相对于REM来说，他们的兼容性都不好.rem是一个相对单位，是相对于根节点的字体大小的比例。我们还会引用一个外部的JS，JS这个可以通过屏幕宽度动态计算根节点的字体大小值。

我们移动端用的JS框架是zepto.js，因为相应来说它的的体积的话要小很多。而且我们项目中有时会需要使用一些触屏事件，比如滑动事件，那么我们还会调用它里面的触摸模块

我们的web应用的话都是基于吞掉搭建的前端工程来开发，因为利用咽起一个网络服务器特别简单，并且我还可以实现livereload功能（当我监控的文件发生变化的时候，可以触发浏览器的自动刷新功能），而且在CSS3里面加前缀的话是一个很头疼的问题，我们现在只需要用autoprefixer模块就可以很容易实现自动加CSS3前缀这个功能了。

2. 移动端兼容性？

1> IOS移动端单击事件300毫秒的延迟响应。用fastclick来解决

2>仄的触摸模块的抽头事件有点透的问题，也是用fastclick来解决

3>一些情况下对非可点击元素如（标签，跨度）监听点击事件，IOS下不会触发，CSS增加光标：指针就搞定了

4> IOS下取消输入在输入的时候英文首字母的默认大写

5>固定定位缺陷

IOS下固定元素容易定位出错，软键盘弹出时，影响固定元素定位

机器人下固定表现要比iOS的更好，软键盘弹出时，不会影响固定元素定位

iOS4的下不支持位置：固定

解决方案：可用iScroll插件解决这个问题

6>输入的占位符会出现文本位置偏上的情况

input的占位符会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal

7>计算值的兼容性处理

CSS3中的计算变量在iOS6的浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。

的Android浏览器目前仍然不支持计算值，所以要在之前增加一个保守尺寸：

div {

宽度：95％;

width：-webkit-calc（100％ - 50px）;

宽度：计算（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.谈谈你对自举的认识，用它做过项目么？

用引导主要用来做一些响应式的网站，它里面栅格化这块比较强大，我可以针对不同的屏幕尺寸定制不同页面结构。

我还用它做过后台管理系统，因为它里面集成的有风格标准统一的组件，插件，全局样式等，是我们做后台管理系统的话，不用再花大精力去布局页面了。而且甚至产品给我们一个原型图我们就可以开始开发，大大提高了开发效率。

综合：

网页前端性能优化的方式有哪些？

1.压缩CSS，JS，图片

2.减少http请求次数，合并css，js合并图片（雪碧图）

3.使用CDN

4.减少DOM元素数量

5.图片懒加载

6.静态资源另外用无饼干的域名

7.减少DOM的访问（缓存DOM）

8.巧用事件委托

9.样式表置顶，脚本置低

简单描述一下你做过的项目研发流程？

1>约定规范（目录结构，命名规范，代码书写规范）

2>由我们组长（公司有的叫组长有的叫前导）给我们搭建前端工程吞（最起码把browsersync模块能说出来，用它创建一个局域网服务器并实现监控文件有变化就自动刷新功能）（另外搭建前端工程的时候就会把我们会用到的库或者插件放进去），拆分不同的前端模块给我们开发

3>正式开发（我们通过GIT中工具来进行）

4>代码审查（由我们组长来帮我们做）

5>交付给后端开发工程师，需要帮他们联调的话到时再帮他们联调

看你简历上面写的你会的NodeJS还有一饮而尽，能给我描述下你都用这俩东西做过什么东西么？

的NodeJS可以做一些服务器端的应用，比如我们可以用它搭建一个网络服务器（基于表达框架可以实现）。我本人呢的NodeJS搭建网络服务器这块主要也是从网上看到一些文档自学的，谈不上精通。

我们公司的话主要用吞来实现我们前端自动化。比如以前我们公司做的web应用的项目有这样的需求，我们会用SASS这个预编译器，我们写CSS3属性的时候我们经常还会用autoprefixer这个插件，我们发布上线的时候还需要把CSS文件进行压缩，如果没有一个很好的工具能帮我们管理并自动实现上面的操作的话，还是挺麻烦的。现在我们就可以用大口来实现这些操作的自动化

你有跟后端合作的经验是吧，都你们怎么协作的呀？

第一种回答：（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.专业宽度方面：最近在学习哪些新技术呀，以后准备往哪方面发展？

我最近在学习反应...

我最近在学习sea.js ...

我最近在学require.js ...

我最近正在恶补的node.js ...

技术方向：高级前端开发工程师，全栈工程师（前端+后端的NodeJS），前端架构师

管理方向：前端领袖（前端主管，前端经理），项目经理，CTO

3.你都做过什么项目呢？让他具体聊某一个项目中运用的技术

注意：用心找自己做的项目中自己感觉最拿出来手的（复杂度最高，用的技术最多的项目），描述的时候尽可能往里面添加一些技术名词

布局我们用HTML5 + CSS3

我们会用reset.css重置浏览器的默认样式

JS框架的话我们选用的是jQuery的（也可能是的Zepto）

我们用版本控制工具的Git来协同开发

我们会基于吞掉搭建的前端自动化工程来开发（里面包含有我们的项目结构，我们需要引用的第三方库等一些信息，我们还实现了SASS编译，CSS3加前缀等的自动化）

我们的项目中还用到了表单验证验证插件，图片懒加载Lazyload插件

4.为啥要离开上家单位呀（或者从前从事的不是计算机相关，为啥改行了）？

1.千万别说这行工资高之类的

2.要说，自己对这个很感兴趣，大学的时候加入的有这个社团，跟着学长学了这个东西，越学越感兴趣，于是利用大学课余时间自学了前端的知识（也可以把这个东西说成自己亲戚）

5.我们这边的话会有加班的情况，不知道你能接受不？

可以，个人愿意与公司一块成长的，而且也有了解这行会有加班，会配合公司把项目用心完成的。

6.有没有什么问题要问我？

1.别问加班和啥时候调工资之类的

2.社保，公积金交么（千万别说基数是多少）

3.问公司做的项目主要是哪方面呢，我擅长的技术****（具体技术）不知道公司需不需要

注意：如果去的是国企，国企很强调奉献，尽量往这方面靠

面试公司前最好搜索下公司是干什么的，能把他们产品说上来点就更好了（上市公司，国企尤其得这样）

第八部分：前端MVC框架

1，Angular的数据绑定采用什么机制？详述原理。

脏检查机制。

双向数据绑定是AngularJS的核心机制之一。当前查看中有任何数据变化时，会更新到模型，当模型中数据有变化时，查看也会同步更新，显然，这需要一个监控。

原理就是，Angular在范围模型上设置了一个监听队列，用来监听数据变化并更新视图。每次绑定一个东西到查看上时AngularJS就会往$ watch队列里插入一条$ watch，用来检测它监视的模型里是否有变化的东西。当浏览器接收到可以被angular context处理的事件时，$ digest循环就会触发，遍历所有的$ watch，最后更新dom。

第九部分：优化

1. sprites是什么，它的作用是什么？

雪碧图

减少HTTP请求

2.前端优化常用技巧？

1.压缩CSS，JS，图片

2.减少http请求次数，合并css，js合并图片（雪碧图）

3.使用CDN

4.减少DOM元素数量

5.图片懒加载

6.静态资源另外用无饼干的域名

7.减少DOM的访问（缓存DOM）

8.巧用事件委托

9.样式表置顶，脚本置低

3.如果已经开发完一个网页应用用于手机端访问，请问需要在哪方面优化页面？

按需加载

静态资源压缩

巧用图标字体

保证首屏相应速度

动画能用CSS3实现的尽量用CSS3实现

移动端事件优化（fastclick）

更多前端面试资料：HTTPS：//juejin.im/post/5aae076d6fb9a028cc6100a9

作者：乐乐
链接：HTTP：//www.cnblogs.com/le220/p/8469918.html
。本文属于个人原创，转载请注明出处，辛辛苦苦整理的，多谢配合如果对你有帮助，动动手指，点个赞，谢谢！

lelara

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Web前端面试宝典（最新）

第一部分：HTML问题题 1. 简述一下你对HTML语义化的理解？用正确的标签做正确的事情。HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于搜索引擎优化;使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。...
复制链接

扫一扫

专栏目录