常见的前端面试题（二）

最新推荐文章于 2023-02-15 22:49:58 发布

Abner~o(〃'▽'〃)o

最新推荐文章于 2023-02-15 22:49:58 发布

阅读量5.6k

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/gjq1993/article/details/78265738

版权

学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1、html5为什么只需要写<!doctype html>?

答：html5不是基于sgml（标准通用标记语言），不需要对dtd文件进行引用，但是需要doctype来规范浏览器的行为，

否则浏览器将开启怪异模式，而html4.01基于sgml，需要引入dtd，才能告知浏览器文档使用的文档类型

2、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素有：a b span img input select strong（强调的语气）

块级元素有：div ul ol li dldt dd h1 h2 h3 h4…p

知名的空元素：

鲜为人知的是：

3、页面导入样式时，使用link和@import有什么区别？

两者都是外部引用CSS的方式，但是存在一定的区别：

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

补充：@import最优写法

@import的写法一般有下列几种：

@import'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import"style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别

@importurl(style.css) //Windows NS4, Macintosh NS4不识别

@importurl('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@importurl("style.css") //Windows NS4, Macintosh NS4不识别

由上分析知道，@import url(style.css) 和@importurl("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@importurl(style.css)最值得推荐。

4、常见的浏览器内核有哪些？

使用Trident内核的浏览器：IE、Maxthon、TT、The World等；

使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；

使用Presto内核的浏览器：Opera7及以上版本；

使用Webkit内核的浏览器：Safari、Chrome。

5、html5有哪些新特性？移除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分html和html5？

新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。

内容元素，article、footer、header、nav、section。

表单控件，calendar、date、time、email、url、search。

控件元素，webworker, websockt, Geolocation。

移出的元素有下列这些：

显现层元素：basefont，big，center，font, s，strike，tt，u。

性能较差元素：frame，frameset，noframes。

如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

处理兼容问题有两种方式：

1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

2.使用是html5shim框架

另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

6、iframe有哪些缺点？

优点：

1.用来实现长连接，在websocket不可用的时候作为一种替代，最开始由google发明。Comet：基于 HTTP 长连接的“服务器推”技术

2.跨域通信。JavaScript跨域总结与解决办法，类似的还有浏览器多页面通信，比如音乐播放器，用户如果打开了多个tab页，应该只有一个在播放。

3.历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，在html5的history api不可用时作为一种替代。

4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面与子页面通信的方式实现转换，这样就不用在页面上插入一个非常巨大的编码映射表文件了

缺点：

　1、在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面。当“蜘蛛”程序遇到由数个框架组成的网页时，它们只看到框架而无法找到链接，因此它们会以为该网站是个死站点，并且很快转身离去。对一个网站来说这无异于一场灾难。

　　如果你想销售产品，你需要客户;如想得到客户，你首先要让人们访问你的网站，而要做到这一点，你就非求助于搜索引擎不可。你花费了大量的时间、精力和金钱开设了一家网上商店，却又故意不让搜索引擎检索你，这就好象开家零售商店，却将窗户全部漆成黑色，而且还不挂任何招牌一样。

　　2、框架结构有时会让人感到迷惑，特别是在几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外，还会分散访问者的注意力。访问者遇到这种网站往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么网站的其他部分也许更不值得浏览。

　　3、链接导航问题。使用框架结构时，你必须保证正确设置所有的导航链接，如不然，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地方可去。

7、label的作用是什么？是怎么使用的？

Label中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。

FOR属性

功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。

用法：<LabelFOR="InputBox">姓名</Label><inputID="InputBox" type="text">

ACCESSKEY属性：

功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。

用法：<LabelFOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox"type="text">

局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

8、实现不使用border，画出1px高的线，在不同浏览器下的Quirksmode和CSSCompat模式下都能保持一致的效果？

<divstyle="height:1px;overflow:hidden;background:red"></div>

9、网页验证码是干嘛的？是为了解决什么安全问题？

10、区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、

11、论坛灌水;有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行

12、不断的登陆尝试;

10、介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同？

盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型

W3C盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分

IE盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading

11、如何居中div，如何居中一个浮动元素？如何让绝对定位的div居中？

a.margin:xpxauto;

b.确定容器的宽高，这里宽度是必须的，高度可以不设，设置外层的上外边距和左外边距分别是宽高的一半。实现居中关键在于 margin设置与 position:relative.

.div{

width:500px ; height:300px;

margin: -150px 0 0 -250px;

position:relative;

left:50%;

top:50%;

}

c.position:absolute;

top:50%;

left:50%; 只能把div定位在以红色圈为起点的位置，加上margin:-100px 0px 0px -100

12、display有哪些值？说明他们的作用？

block:块对象的默认值。用该值为对象之后添加新行

none:隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline:内联对象的默认值。用该值将从对象中删除行

compact:分配对象为块对象或基于内容之上的内联对象

marker:指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用

inline-table:将表格显示为无前后换行的内联对象或内联容器

list-item:将块对象指定为列表项目。并可以添加可选项目标志

run-in:分配对象为块对象或基于内容之上的内联对象

table:将对象作为块元素级的表格显示

13、position的值relative和absolute的定位原点是什么？

relative（相对定位）的定位原点是以自己本省原来所在位置做为原点的。

absolute（绝对定位）的定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的，（当然，如果自己的所有父元素都没有设置position，那么就以body为定位原点）

14、display设置为inline-block时，li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格等等）的影响，这些空白也会被应用样式，占据空间，所以会有间隔

解决：设置ul的font-size为0，缺陷是必须重新在li中去设置字体大小

15、请解释下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

a.添加新的元素、应用 clear：both;

b.父级定义 overflow: auto（注意：是父级div也就是这里的 div.outer）一个对seo比较友好，另个hidden对seo不是太友好

在IE6中还需要触发 hasLayout ，例如 zoom：1；

c.据说是最高大上的方法 :after 方法：（注意：作用于浮动元素的父亲）IE6-7不支持:after，使用zoom:1触发 hasLayout

{zoom:1;} /*==for IE6/7 Maxthon2==*/

:after{clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}

d.使用 br标签和其自身的 html属性,<brclear="all" /> clear=“all | left | right | none” 属性

e.父元素也设置浮动

f.父元素设置display:table 盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用

16、在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数字号相对更容易和 web 设计的其他部分构成比例关系

使用奇数号字体不好的地方是，文本段落无法对齐

17、margin和padding分别适合什么场景使用？

何时应当使用margin：

（1）需要在border外侧添加空白时，

（2）空白处不需要有背景（色）时，

（3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白（注意地方见第三点）。

何时应当使用padding

（1）需要在border内侧添加空白时（往往是文字与边框距离的设置），

（2）空白处需要背景（色）时，

（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。

margin使用时应该注意的地方

margin在垂直方向上相邻的值相同时会发生叠加，水平方向上相邻的值会相加。margin取负值时，在垂直方向上，两个元素的边界仍然会重叠。但是，此时一个为正值，一个为负值，并不是取其中较大的值，而是用正边界减去负边界的绝对值，也就是说，把正的边界值和负的边界值相加。

18、元素竖向的百分比设定是相对于容器的高度吗？

相对于父容器的宽度

19、什么是响应式设计？响应式设计的基本原理是什么？如何兼容较低版本的IE？

一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

respond.js和css3-mediaqueries-js

20、设置元素浮动后，该元素的display值是多少？

display:block;

21、怎么让chrome支持小于12px的文字？

chrome私有属性：-webkit-text-size-adjust:none;

-webkit-transform:scale(0.8);

行内元素设置:-webkit-transform:scale(0.8);display:inline-block

22、display:inline-block什么时候会显示间隙？

1.给父元素写font-size:0

2.把标签写到一行，不要在编辑器里敲回车换行，但是这种写法对于标签很多的情况可读性太差，适用与例如<a></a><a></a>这样简单的结构

23、有一个高度自适应的div。里面有2个div，一个高度100px，希望另一个填满剩下的高度？

外层box-sizing: border-box; 同时设置padding: 100px 00；

内层100像素高的元素向上移动100像素，或使用absolute定位防止占据空间；

另一个元素直接height: 100%;

外层position: relative；

百分百自适应元素直接position: absolute; top: 100px; bottom: 0; left: 0

24、什么是window对象？什么是document对象？

window它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。

document对象是window对象的一个对象属性

25、nll和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

null表示"没有对象"，即该处不应该有值

（1）作为函数的参数，表示该函数的参数不是对象。

（2）作为对象原型链的终点。

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

26、什么是闭包（closure）？为什么要用它？

闭包就是能够读取其他函数内部变量的函数

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的用途：

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中

重用变量又不能造成全局污染

27、js代码中“use strict”是什么意思？使用它区别是什么？

进入”严格模式”的标志，老版本的浏览器会把它当作一行普通字符串，加以忽略

将”use strict”放在脚本文件的第一行，则整个脚本都将以”严格模式”运行。如果这行语句不在第一行，则无效，整个脚本以”正常模式”运行。如果不同模式的代码文件合并成一个文件，这一点需要特别注意。

(严格地说，只要前面不是产生实际运行结果的语句，”use strict”可以不在第一行，比如直接跟在一个空的分号后面。)

将”use strict”放在函数体的第一行，则整个函数以”严格模式”运行

因为第一种调用方法不利于文件合并，所以更好的做法是，借用第二种方法，将整个脚本文件放在一个立即执行的匿名函数之中

-消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

–消除代码运行的一些不安全之处，保证代码运行的安全；

–提高编译器效率，增加运行速度；

–为未来新版本的Javascript做好铺垫。

28、js中有一个函数，执行对象查找时，永远不会去查找原型，这个函数是什么？

hasOwnProperty

29、js延迟加在的方式有哪些？

1. <script type=”text/javascript” src=”"id=”my”></script>

setTimeout(“document.getElementById(‘my').src='include/php100.php';“,3000);//延时3秒

</script>

2. <span id=”L4EVER”>LOADING…</span>

<span id=”AD_L4EVER”>你的JS代码在这里!</span >

4. js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

30、同步和异步的区别？

31、document.write和innerHTNML的区别？

1.document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

2.innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

3.两者都可动态包含外部资源如JavaScript文件

通过document.write插入<script>元素会自动执行其中的脚本；

大多数浏览器中，通过innerHTML插入<script>元素并不会执行其中的脚本

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

32、.call()和.apply()的含义和区别？

1、call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用就当然是针对方法的了，这两个方法是容易混淆的，因为它们的作用一样，只是使用方式不同。

2、语法：foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) ==this.foo(arg1, arg2, arg3);

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

4、不同点：方法传递的参数不同，单个单数传入，另一个可以以数组方式传入

33、JQ和JQUI有啥区别？

34、需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器的前进，后退时正确响应。给出你的技术实现方案？

用cookie或者localStorage来记录应用的状态即可，刷新页面时读取一下这个状态，然后发送相应ajax请求来改变页面即可

HTML5里引用了新的API，就是history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的

虽然ajax可以无刷新改变页面内容，但无法改变页面URL

其次为了更好的可访问性，内容发生改变后，改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题

有的浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变

再有，ajax的使用对搜索引擎很不友好，往往蜘蛛爬到的区域是空的

为了解决传统ajax带来的问题，HTML5里引入了新的API，即：history.pushState,history.replaceState

可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。

pushState是将指定的URL添加到浏览器历史里，replaceState是将指定的URL替换当前的URL。

如何调用

varstate = { title: title, url: options.url, otherkey: othervalue};window.history.pushState(state,document.title, url);

state对象除了要title和url之外，也可以添加其他的数据，比如：还想将一些发送ajax的配置给保存起来。

replaceState和pushState是相似的，不需要多做解释。

如何响应浏览器的前进、后退操作

window对象上提供了onpopstate事件，上面传递的state对象会成为event的子对象，这样就可以拿到存储的title和URL了。

window.addEventListener('popstate',function(e){ if (history.state){ varstate = e.state; //do something(state.url, state.title); }}, false);

这样就可以结合ajax和pushState完美的进行无刷新浏览了。

35、js的数据类型都有哪些？

字符串、数字、布尔、数组、对象、Null、Undefined

36、已知ID的input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)

document.getElementById(id).value;

37、希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

document.getElementsByTagName('input');

遍历循环

38、设置一个已知ID的div和html内容为xxx，字体颜色设置为黑色？(不使用第三方框架)

vardiv = document.getElementById(id);

div.innerHTML= '';

div.style.color= '';

39、当一个dom节点被点击时，我们需要能够执行一个函数，应该怎么做？

直接在DOM里绑定事件：<div οnclick=”test()”></div>

在JS里通过onclick绑定：xxx.onclick = test

通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)

　　那么问题来了，Javascript的事件流模型都有什么？

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

40、什么是Ajax和JSON，他们的优缺点？

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。

　　优点：

可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量

避免用户不断刷新或者跳转页面，提高用户体验

缺点：

对搜索引擎不友好（

要实现ajax下的前后退功能成本较大

可能造成请求数的增加

跨域问题限制

JSON是一种轻量级的数据交换格式，ECMA的一个子集

　　优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

41、请看下列代码输出什么？解释原因？

vara;

alert(typeofa); //undefined

alert(b);//报错

解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

ara = null;

alert(typeofa); //object

　　解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”

42、js的typeof返回哪些数据类型？

有如下6种返回值：

1）number；

2）string；

3）boolean；

4）object

5）function；

6）undefined.

43、split() join()的区别？

join()方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。

指定分隔符方法join("#");其中#可以是任意

与之相反的是split()方法：用于把一个字符串分割成字符串数组.

44、数组方法pop()push() unshift() shift()?

push和pop方法，这两个方法只会对数组从尾部进行压入或弹出，而且是在原数组进行操作，任何的改动都是会影响到操作的数组。push(args)可以每次压入多个元素，并返回更新后的数组长度。pop()函数每次只会弹出最后一个结尾的元素，并返回弹出的元素，如果是对空组数调用pop()则返回undefined。如果参数是数组则是将整个数组当做一个元素压入到原来的数组当中。并不会产生类似concat合并数组时产生的“拆分现象”

unshift和shift这两个方法都是通过对数组的头部进行的操作，其他基本跟push和pop类似

shift:从集合中把第一个元素删除，并返回这个元素的值。

unshift:在集合开头添加一个或更多元素，并返回新的长度

push:在集合中添加元素，并返回新的长度

pop:从集合中把最后一个元素删除，并返回这个元素的值

45、ajax请求时，如何解释json数据？

1.$.JSON(url,params,fun);

2.$.ajax({}); dataType:'json'

都可以使用$each();进行遍历

$.each(object,function(index,item){

});

46、js的本地对象，内置对象和宿主对象？

本地对象：

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError官方定义好了的对象

内置对象： Global 和 Math，内置对象是本地对象的一种

宿主对象：所有的BOM和DOM对象都是宿主对象，是那些官方未定义，你自己构建的对象加上DOM和BOM对象组成的

47、列举所了解的前端框架并简述？

48、对web标准以及w3c的理解与认识？

（1）web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套，可提高搜索机器人对网页内容的搜索几率。--- SEO

（2）建议使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容。

（3）样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，从而降低维护成本、改版更方便

（4）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性

遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。

49、xhtml和html有什么区别？

XHTML是HTML 4.01和XML1.0的杂交，XHTML1.0是基于HTML4.01的

HTML是一种基于标准通用标记语言（SGML）的应用，而XHTML则基于可扩展标记语言（XML），HTML和XHTML其实是平行发展的两个标准。本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。建立XHTML的目的就是实现HTML向XML的过渡

1、XHTML要求正确嵌套

2、XHTML所有元素必须关闭

3、XHTML区分大小写

4、XHTML属性值要加引号

5、XHTML用id属性代替name属性

6、属性值不能简写

50、行内元素有哪些？块级元素有哪些？css和盒子模型？

盒子模型：内容、填充（padding）、边框（border）、外边界（margin）

box-sizing:border-box; box-sizing:content-box;

51、css选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和import哪个级别更高？

可继承的：font-size font-family color

不可继承的：border padding margin background-color width height

优先级：!important > [ id > class > tag ] important 比内联优先级高

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

结构层、表示层、行为层

53、你如何对网站的文件和资源进行优化？期待的解决方法包括？

A、文件合并，减少http请求，合并JavaScript和CSS文件、CSS Sprites、图像映射（Image Map）和使用Data URI来编码图片

B、文件最小化/文件压缩，减少文件下载的体积；常用的工具是YUI Compressor

C、使用 CDN 托管，尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定

D、缓存的使用（多个域名来提供缓存）

E、GZIP 压缩你的 JS 和 CSS 文件

54、看下列代码？输出什么？解释原因？

vara = null;

alert(typeofa);

55、看代码给答案？并进行解释？

vara = new Object();

a.value=1;

b= a;

b.value=2;

alert(a.value);

56、varnumberArray = [3,6,2,4,1,5];

1)实现对该数组的倒排，输出[5,1,4,2,6,3]

　　2) 实现对该数组的降序排列，输出[6,5,4,3,2,1]

var numberArray = [3,6,2,4,1,5];

numberArray.reverse(); // 5,1,4,2,6,3

numberArray.sort(function(a,b){ //6,5,4,3,2,1

return b-a;

})

57、你能描述一下渐进增强和优雅降级之间的不同吗?

如果提到了特性检测，可以加分。

检测浏览器，渐进增强就是让牛b的浏览器的效果更好，优雅降级就是让2b的浏览器在功能ok的情况下效果一般。

58、线程与进程的区别？

一个程序至少有一个进程,一个进程至少有一个线程.

线程的划分尺度小于进程，使得多线程程序的并发性高。

另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

59、请解释一下什么是“语义化的 HTML”？

语义化的好处：

1：去掉或样式丢失的时候能让页面呈现清晰的结构：

html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.

3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.

4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.

5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记, 而只注重语义标记.

6.便于团队开发和维护

语义化的HTML就是：标题用h1-h6，文字段落用p，列表用ul li，大致如此

60、为什么利用多个域名来提供网站资源会更有效？

浏览器同一时间可以从一个域名下载多少资源？你的浏览器能同时保持对一个域名的多少连接？

三个最主流的原因:

1. CDN缓存更方便

2. 突破浏览器并发限制 (你随便挑一个 G家的 url:https://lh4.googleusercontent.com/-si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg,把前面的 lh4换成 lh3,lh6 啥的，都照样能够访问，像地图之类的需要大量并发下载图片的站点，这个非常重要。)

3. Cookieless, 节省带宽，尤其是上行带宽一般比下行要慢。。。

还有另外两个非常规原因:

4. 对于UGC的内容和主站隔离，防止不必要的安全问题( 上传js窃取主站cookie之类的) 。

正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。

5.数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事. ^_^ 这个可能被用的不多。

PS:关于Cookie的问题，带宽是次要的，安全隔离才是主要的。

关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做dns解释也是耗时间的，而且太多域名，如果要走 https的话，还有要多买证书和部署的问题，^_^。

61、请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）

1.优化图片

2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

3.优化CSS（压缩合并css，如margin-top,margin-left...)

4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）

5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）

6.减少http请求（合并文件，合并图片）。

62、如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？

1.建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规范

2.为了保持一致性，接受项目原有的风格

3.直接使用VIM 的 retab 命令

63、请写一个简单的幻灯效果页面

如果不使用JS来完成，可以加分。（如：纯CSS实现的幻灯片效果）

64、你都使用哪些工具来测试代码的性能？

Profiler,JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo

65、如果今年你打算熟练掌握一项新技术，那会是什么？

nodejs，html5，css3，less

66、请谈一下你对网页标准和标准制定机构重要性的理解？

(google)w3c存在的意义就是让浏览器兼容性问题尽量小，首先是他们对浏览器开发者的约束，然后是对开发者的约束。

67、什么是FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。

68、doctype（文档类型）的作用是什么？你知道多少种文档类型？

此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional以及 Frameset。

Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks

（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

69、浏览器标准模式和怪异模式之间的区别是什么？

W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。

IE盒子模型和标准W3C盒子模型：ie的width包括：padding\border。标准的width不包括：padding\border

在js中如何判断当前浏览器正在以何种方式解析？

document对象有个属性compatMode ,它有两个值：

BackCompat对应quirks mode

CSS1Compat 对应strictmode

70、使用XHTML 的局限有哪些？

xhtml要求严格，必须有head、body每个dom必须要闭合。

如果页面使用'application/xhtml+xml'会有什么问题吗？

一些老的浏览器并不兼容。

十六、如果网页内容需要支持多语言，你会怎么做？

编码UTF-8，空间域名需要支持多浏览地址。

在设计和开发多语言网站时，有哪些问题你必须要考虑？

1、应用字符集的选择 2、语言书写习惯&导航结构 3、数据库驱动型网站

71、data-属性的作用是什么？

data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取

<divdata-author="david" data-time="2011-06-20"data-comment-num="10">...</div>

div.dataset.commentNum;// 10

需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。

并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome和Opera支持。

72、如果把HTML5 看作做一个开放平台，那它的构建模块有哪些？

73、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

sessionStorage和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的

cookies会发送到服务器端。其余两个不会。

Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。

　　Firefox每个域名cookie限制为50个。

　　Opera每个域名cookie限制为30个。

Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。

　　Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。

　　InternetExplorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。

74、描述下 “reset” CSS 文件的作用和使用它的好处。

因为浏览器的品种很多，每个浏览器的默认样式也是不同的，所以定义一个css reset可以使各浏览器的默认样式统一。

75、解释下浮动和它的工作原理？

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留

76、列举不同的清除浮动的技巧，并指出它们各自适用的使用场景？

1.使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。

2.使用overflow。

给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

3.使用after伪对象清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

*{margin:0;padding:0;}

body{font:36px bold; color:#F00;text-align:center;}

#layout{background:#FF9;}

#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}

#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}

#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}

<divid=”layout”>

<div id=”right”>Right</div>

</div>

77、解释下CSS sprites，以及你要如何在页面或网站中使用它？

CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

78、你最喜欢的图片替换方法是什么，你如何选择使用？

<h2><span 图片丢这里></span>HelloWorld </h2> 把span背景设成文字内容，这样又可以保证seo，也有图片的效果在上面。

一般都是：alt，title，onerror

79、讨论CSShacks，条件引用或者其他？

background-color:blue;各个浏览器都认识，这里给firefox用；

background-color:red\9;\9所有的ie浏览器可识别；

background-color:yellow\0; \0 是留给ie8的

+background-color:pink; + ie7定了；

_background-color:orange; _专门留给神奇的ie6；

:root #test { background-color:purple\9; }:root是给ie9的，

@media all and (min-width:0px){ #test{background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。

@media screen and(-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

80、如何为有功能限制的浏览器提供网页？你会使用哪些技术和处理方法？

百度谷歌 SO SOGOU Bing

81、如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？

1.display:none;的缺陷

搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略

屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。

2. visibility: hidden ;的缺陷

这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间

3.overflow:hidden;一个比较合理的方法

.texthidden{ display:block;/*统一转化为块级元素*/ overflow: hidden;width: 0; height: 0; }

就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。

82、你用过栅格系统吗？如果使用过，你最喜欢哪种？

比如：Bootstrap，流式栅格系统

83、你用过媒体查询，或针对移动端的布局/CSS 吗？

@mediascreen and (min-width: 400px) and (max-width: 700px) { … }

@mediahandheld and (min-width: 20em), screen and (min-width: 20em) {....}

媒体查询，就是响应式布局。

84、你熟悉SVG 样式的书写吗？

<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">

<circlecx="40" cy="40" r="24"style="stroke:#006600; fill:#00cc00"/>

<textx="250" y="150" font-family="Verdana"font-size="10px" fill="blue">Hello, outthere</text>

<usexlink:href="#sample1" class="sample"/>

</svg>

85、如何优化网页的打印样式？

<linkrel="stylesheet" type="text/css" media="screen"href="xxx.css" />

其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。

但打印样式表也应有些注意事项：

1、打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。

2、最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。

3、隐藏掉不必要的内容。（@print div{display:none;}）

4、打印样式表中最好少用浮动属性，因为它们会消失。

如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。

86、在书写高效 CSS 时会有哪些问题需要考虑？

1.样式是：从右向左的解析一个选择器

2.ID最快，Universal最慢有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal

3.不要tag-qualify（永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）

4.后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）

5.想清楚你为什么这样写

6.CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）

7.我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性

87、使用 CSS 预处理器的优缺点有哪些？

(SASS，Compass，Stylus，LESS)

描述下你曾经使用过的 CSS 预处理的优缺点

88、如果设计中使用了非标准的字体，你该如何去实现？

Webfonts (字体服务例如：Google Webfonts，Typekit 等等。)

89、解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？

90、解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

91、解释下事件代理？

JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。

当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。

事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。

function getEventTarget(e) {

e =e || window.event;

returne.target || e.srcElement;

}

92、解释下JavaScript 中 this 是如何工作的？

this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向 window

1.如果是call，apply,with，指定的this是谁，就是谁

2.普通的函数调用，函数被谁调用，this就是谁

93、解释下原型继承的原理？

functiongetProperty(obj, prop) {

if (obj.hasOwnProperty(prop)) {

returnobj[prop];

}else if (obj.__proto__ !== null) {

returngetProperty(obj.__proto__, prop);

}else{

returnundefined;

}

Abner~o(〃'▽'〃)o

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录