web前端面试题.docx

web前端面试题.docx

《web前端面试题.docx》由会员分享，可在线阅读，更多相关《web前端面试题.docx（18页珍藏版）》请在冰豆网上搜索。

web前端面试题

Web前端（初级）

 

1.CSS选择符有哪些?

哪个优先级高?

标签选择符类选择符id选择符

2.标签上title与alt属性的区别是什么?

Alt当图片不显示是用文字代表。

Title为该属性提供信息

3.cssreset有什么作用?

eset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

4.csssprites如何使用?

Css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

5.ajax请求的时候get和post方式的区别?

6."=="和"==="的不同?

前者会自动转换类型,后者不会

7.行内元素有哪些?

margin/padding是否起作用?

abbrispaninputselect

8.瀑布流布局或者流式布局是否有了解?

讲讲设计思路

9.正则表达式有系统学习过吗?

如何验证一个邮箱是否输入正确?

10.是否熟悉平面设计软件?

用过哪些?

如果觉得UI设计不合理会如何解决?

11.jQuery库中的$（）是什么?

$（）函数是jQuery（）函数的别称

12.JSwindow.onload事件和jQueryready函数有何不同？

13.如何利用jQuery来向一个元素中添加和移除CSS类?

14.哪种方式更高效：

document.getElementbyId（"myId"）还是$（"#myId"）？

15.用jQuery修改一个元素的样式，如border怎么写？

 

Web前端（高级）

HTML

Doctype作用?

严格模式与混杂模式如何区分？

它们有何意义?

（1）、

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

告知浏览器的解析器，用什么文档类型规范来解析这个文档。

（2）、严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。

模拟老式浏览器的行为以防止站点无法工作。

（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

行内元素有哪些？

块级元素有哪些？

空（void）元素有那些？

（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，

比如div默认display属性值为“block”，成为“块级”元素；

span默认display属性值为“inline”，是“行内”元素。

（2）行内元素有：

abspanimginputselectstrong（强调的语气）

块级元素有：

divulollidldtddh1h2h3h4…p

（3）知名的空元素：

---

鲜为人知的是：

link和@import的区别是？

（1）link属于XHTML标签，而@import是CSS提供的;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;

（4）link方式的样式的权重高于@import的权重.

html5有哪些新特性、移除了那些元素？

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

如何区分HTML和HTML5？

*HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。

*绘画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；

语义化的理解？

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

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

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

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

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

HTML5的离线储存？

localStorage长期存储数据，浏览器关闭后数据不丢失；

sessionStorage数据在浏览器关闭后自动删除。

（写）描述一段语义的html代码吧。

（HTML5中新增加的很多标签（如：

、

iframe有那些缺点？

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

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

使用iframe之前需要考虑这两个缺点。

如果需要使用iframe，最好是通过javascript

动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

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

cookie在浏览器和服务器间来回传递。

sessionStorage和localStorage不会

sessionStorage和localStorage的存储空间更大；

sessionStorage和localStorage有更多丰富易用的接口；

sessionStorage和localStorage各自独立的存储空间；

如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

webSocket如何兼容低浏览器？

AdobeFlashSocket、ActiveXHTMLFile（IE）、基于multipart编码发送XHR、基于长轮询的XHR

CSS

介绍一下CSS的盒子模型？

（1）有两种，IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading;

（2）盒模型：

内容（content）、填充（padding）、边界（margin）、边框（border）.

CSS选择符有哪些？

哪些属性可以继承？

优先级算法如何计算？

CSS3新增伪类有那些？

*1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.相邻选择器（h1+p）

5.子选择器（ul

6.后代选择器（lia）

7.通配符选择器（*）

8.属性选择器（a[rel="external"]）

9.伪类选择器（a:

hover,li:

nth-child）

*可继承的样式：

font-sizefont-familycolor,ULLIDLDDDT;

*不可继承的样式：

borderpaddingmarginwidthheight;

*优先级就近原则，同权重情况下样式定义最近者为准;

*载入样式以最后载入的定位为准;

优先级为:

!

important>id>class>tag

important比内联优先级高

CSS3新增伪类举例：

p:

first-of-type选择属于其父元素的首个

元素的每个

元素。

p:

last-of-type选择属于其父元素的最后

元素的每个

元素。

p:

only-of-type选择属于其父元素唯一的

元素的每个

元素。

p:

only-child选择属于其父元素的唯一子元素的每个

元素。

p:

nth-child

（2）选择属于其父元素的第二个子元素的每个

元素。

:

enabled:

disabled控制表单控件的禁用状态。

:

checked单选框或复选框被选中。

如何居中div？

如何居中一个浮动元素？

给div设置一个宽度，然后添加margin:

0auto属性

div{

width:

200px;

margin:

0auto;

}

居中一个浮动元素？

确定容器的宽高宽500高300的层

设置层的外边距

.div{

Width:

500px;height:

300px;//高度可以不设

Margin:

-150px00-250px;

position:

relative;相对定位

background-color:

pink;//方便看效果

left:

50%;

top:

50%;

}

列出display的值，说明他们的作用。

position的值，relative和absolute定位原点是？

1.

block象块类型元素一样显示。

none缺省值。

象行内元素类型一样显示。

inline-block象行内元素一样显示，但其内容象块类型元素一样显示。

list-item象块类型元素一样显示，并添加样式列表标记。

2.

*absolute

生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位

*fixed（老IE不支持）

生成绝对定位的元素，相对于浏览器窗口进行定位。

*relative

生成相对定位的元素，相对于其正常位置进行定位。

*static默认值。

没有定位，元素出现在正常的流中

*（忽略top,bottom,left,rightz-index声明）。

*inherit规定从父元素继承position属性的值。

CSS3有哪些新特性？

CSS3实现圆角（border-radius:

8px），阴影（box-shadow:

10px），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:

rotate（9deg）scale（0.85,0.90）translate（0px,-30px）skew（-9deg,0deg）;//旋转,缩放,定位,倾斜

增加了更多的CSS选择器多背景rgba

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

经常遇到的CSS的兼容性有哪些？

原因，解决方法是什么？

为什么要初始化CSS样式。

-因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

-当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

*最简单的初始化方法就是：

*{padding:

0;margin:

0;}（不建议）

absolute的containingblock计算方式跟正常流有什么不同？

position跟display、margincollapse、overflow、float这些特性相互叠加后会怎么样？

对BFC规范的理解？

（W3CCSS2.1规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

）

css定义的权重

以下是权重的规则：

标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/*权重为1*/

div{

}

/*权重为10*/

.class1{

}

/*权重为100*/

#id1{

}

/*权重为100+1=101*/

#id1div{

}

/*权重为10+1=11*/

.class1div{

}

/*权重为10+10+1=21*/

.class1.class2div{

}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

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

清除浮动的技巧

用过媒体查询，针对移动端的布局吗？

使用CSS预处理器吗？

喜欢那个？

SASS、LESS

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

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

display:

inline-block什么时候会显示间隙？

移除空格、使用margin负值、使用font-size:

0、letter-spacing、word-spacing

JavaScript

JavaScript原型，原型链?

有什么特点？

eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行；

应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

null，undefined的区别？

Node.js的适用场景？

高并发、聊天、实时消息推送

介绍js的基本数据类型。

number,string,boolean,object,undefined

Javascript如何实现继承？

通过原型和构造器

["1","2","3"].map（parseInt）答案是多少？

[1,NaN,NaN]因为parseInt需要两个参数（val,radix）但map传了3个（element,index,array）

如何创建一个对象?

（画出此对象的内存图）

functionPerson（name,age）{

this.name=name;

this.age=age;

this.sing=function（）{alert（this.name）}

}

谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。

但是有一个总原则，那就是this指的是调用函数的那个对象。

this一般情况下：

是全局对象Global。

作为方法调用，那么this就是指这个对象

事件是？

IE与火狐的事件机制有什么区别？

如何阻止冒泡？

1.我们在网页中的某个操作（有的操作对应多个事件）。

例如：

当我们点击一个按钮就会产生一个事件。

是可以被JavaScript侦测到的行为。

2.事件处理机制：

IE是事件冒泡、火狐是事件捕获；

3.ev.stopPropagation（）;

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

执行say667（）后,say667（）闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667（）所占用的资源，因为say667（）的内部函数的执行需要依赖say667（）中的变量。

这是对闭包作用的非常直白的描述.

functionsay667（）{

//Localvariablethatendsupwithinclosure

varnum=666;

varsayAlert=function（）{alert（num）;}

num++;

returnsayAlert;

}

varsayAlert=say667（）;

sayAlert（）//执行结果应该弹出的667

new操作符具体干了什么呢?

1、创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。

2、属性和方法被加入到this引用的对象中。

3、新创建的对象由this所引用，并且最后隐式的返回this。

varobj={};

obj.__proto__=Base.prototype;

Base.call（obj）;

JSON的了解？

JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式。

它是基于JavaScript的一个子集。

数据格式简单,易于读写,占用带宽小

{'age':

'12','name':

'back'}

js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（用得最多）、按需异步载入js

ajax是什么?

同步和异步的区别?

如何解决跨域问题?

jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面

模块化怎么做？

立即执行函数,不暴露私有成员

varmodule1=（function（）{

　　　　var_count=0;

　　　　varm1=function（）{

　　　　　　//...

　　　　};

　　　　varm2=function（）{

　　　　　　//...

　　　　};

　　　　return{

　　　　　　m1:

m1,

　　　　　　m2:

m2

　　　　};

　　}）（）;

AMD（Modules/Asynchronous-Definition）、CMD（CommonModuleDefinition）规范区别？

异步加载的方式有哪些？

（1）defer，只支持IE

（2）async：

（3）创建script，插入到DOM中，加载完毕后callBack

documen.write和innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

.call（）和.apply（）的区别？

例子中用add来替换sub，add.call（sub,3,1）==add（3,1），所以运行结果为：

alert（4）;

注意：

js中的函数其实是对象，函数名是对Function对象的引用。

functionadd（a,b）

{

alert（a+b）;

}

functionsub（a,b）

{

alert（a-b）;

}

add.call（sub,3,1）;

Jquery与jQueryUI有啥区别？

*jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

*jQueryUI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。

提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

JQuery的源码看过吗？

能不能简单说一下它的实现原理？

jquery中如何将数组转化为json字符串，然后再转化回来？

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：

$.fn.stringifyArray=function（array）{

returnJSON.stringify（array）

}

$.fn.parseArray=function（array）{

returnJSON.parse（array）

}

然后调用：

$（""）.stringifyArray（array）

针对jQuery的优化方法？

*基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。

*频繁操作的DOM，先缓存起来再操作。

用Jquery的链式调用更好。

比如：

varstr=$（"a"）.attr（"href"）;

*for（vari=size;i

for循环每一次循环都查找了数组（arr）的.length属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：

for（vari=size,length=arr.length;i

JavaScript中的作用域与变量声明提升？

如何编写高性能的Javascript？

那些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。

如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

JQuery一个对象可以同时绑定多个事件，这是如何实现的？

如何判断当前脚本运行在浏览器还是node环境中？

（阿里）

通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中

其他问题

你遇到过比较难的技术问题是？

你是如何解决的？

常使用的库有哪些？

常用的前端开发工具？

开发过什么应用或组件？

页面重构怎么操作？

列举IE与其他浏览器不一样的特性？

99%的网站都需要被重构是那本书上写的？

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

WEB应用从服务器主动推送Data到客户端有那些方式？

对Node的优点和缺点提出了自己的看法？

你有哪些性能优化的方法？

http状态码有那些？

分别代表是什么意思？

100-199用于指定客户端应相应的某些动作。

200-299用于表示请求成功。

300-399用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

400-499用于指出客户端的错误。

4001、语义有误，当前请求无法被服务器理解。

401当前请求需要用户验证403服务器已经理解请求，但是拒绝执行它。

500-599用于支持服务器错误。

503–服务不可用

一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么？

（流程说的越详细越好）

除了前端以外还了解什么其它技术么？

你最最厉害的技能是什么？

你常用的开发工具是什么，为什么？

对前端界面工程师这个职位是怎么样理解的？

它的前景会怎么样？

前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。

1、实现界面交互

2、提升用户体验

3、有了Node.js，前端可以实现服务端的一些事情

前端是最贴近用户的程序员，前端的能力就是能让产品从90分进化到100分，甚至更好，

参与项目，快速高质量完成实现效果图，精确到1px；

与团队成员，UI设计，产品经理的沟通；

做好的页面结构，页面重构和用户体验；

处理hack，兼容、写出优美的代码格式；

针对服务器的优化、拥抱最新前端技术。

加班的看法？

加