WEBAPP开发之Web前端面试宝典（最新）-职坐标

WEBAPP开发之Web前端面试宝典（最新）

白羽 2019-01-08 来源：网络阅读 853 评论 0

摘要：本文将带你了解WEBAPP开发Web前端面试宝典（最新），希望本文对大家学WEBAPP有所帮助。

本文将带你了解WEBAPP开发Web前端面试宝典（最新），希望本文对大家学WEBAPP有所帮助。

第一部分：HTML问答题

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

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

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

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

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

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

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

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

3.iframe有那些缺点？

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

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

*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网站代码，内容为一个图片，链接到“//www.baidu.com”，图片路径为“./img/logo.png”,为图片设置替换文本”webfoss”,新网页在新窗口打开；

答： <a href=”//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有什么优势？

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

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<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的区别是什么？

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<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为//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:“//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();

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）是正确的

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！

移动应用解决方案平台移动支付安全解决方案手机应用开发教程

本文由 @白羽发布于职坐标。未经许可，禁止转载。

喜欢 | 0

不喜欢 | 0

看完这篇文章有何感觉？已经有0人表态，0%的人喜欢快给朋友分享吧~

后参与评论

加入IT交流圈

JAVA工程师交流群 +加入

大数据架构师交流群 +加入

人工智能Python交流群 +加入

WEB/H5前端交流群 +加入

移动开发 直通车

索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈

海同师资推荐更多>>

黄骈联系TA

认证System Analyst，System Architect

程光淼联系TA

精通C、C++等语言、智能芯片开发

热门就业培训班更多>>

【零基础】人工智能+Python全栈开发课程

Webapp30天热搜词更多>>