前端面试题

html相关

html相关的面试题目

1:html5有哪些新特性?

HTML5 中的一些有趣的新特性:
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search 新的技术webworker websockt

2:不同浏览器的html差异

1)自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.

2)event.x与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
3)event.srcElement问题
说明:IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解 决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 请同时注意event的兼容性问题。
4).innerText在IE中能正常工作,但是innerText在FireFox中却不行. 需用textContent。

5)margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如: <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/IE下理解为10px/ display:inline;/IE下再理解为5px/}

6)!important

.colortest {
border:20px solid #60A179 !important;
border:20px solid #00F;
padding: 30px;
width : 300px;
}
在Mozilla中浏览时候,能够理解!important的优先级,因此显示#60A179的颜色:
在IE中浏览时候,不能够理解!important的优先级,因此显示#00F的颜色:
7)png的透明问题,ie需要滤镜通道
8)ie css能识别* 标准浏览器不识别
3:结构与表现相分离带来的好处主要有:

1.数据的多样显示。通过不同的样式表适应不同的设备,做到内容与设备无关
2.保持整个站点的视觉一致性变得非常简单,修改样式表就可以轻松改版;
3.由于结构清晰,数据的集成、更新和处理更加方便灵活;
4.更有意义的搜索。
css相关

CSS相关的面试题目

1:css3有哪些新的特性?

有@font-face 圆角 阴影 多背景 rgba等

2:css清除浮动的集中方式

1)添加额外标签

这是在学校老师就告诉我们的 一种方法,通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>,其他标签br等亦可。

优点:通俗易懂,容易掌握

缺点:可以想象通过此方法,会添加多少无意义的空标签,有违结构与表现的分离,在后期维护中将是噩梦,这是坚决不能忍受的,所以你看了这篇文章之后还是建议不要用了吧。

2)父元素设置 overflow:hidden

通过设置父元素overflow值设置为hidden;在IE6中还需要触发 hasLayout ,例如 zoom:1;

优点:不存在结构和语义化问题,代码量极少

缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素;04年POPO就发现overflow:hidden会导致中键失效,这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了

3)使用:after 伪元素

需要注意的是 :after是伪元素(Pseudo-Element),不是伪类(某些CSS手册里面称之为“伪对象”),很多清除浮动大全之类的文章都称之为伪类,不过csser要严谨一点,这是一种态度。

由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。

该方法源自于: How To Clear Floats Without Structural Markup

原文全部代码如下:

<style type=”text/css”>
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} / for IE/Mac /
</style>
<!–[if IE]> <style type=”text/css”>
.clearfix {zoom: 1;/ triggers hasLayout /
display: block;/ resets display for IE/Win /}
</style>
<![endif]–> 鉴于 IE/Mac的市场占有率极低,我们直接忽略掉,最后精简的代码如下:
.clearfix:after {content:”.”; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

3)经典布局之左侧固定200px,右侧自适应

<div style="width:200px;height: 500px;position:absolute;left:0;top:0;background:#999999;"></div>
<div style="margin-left:200px;height:100%;background:#CCCCCC;height:100px;font-size:14px;color:#000;">实现左侧规定宽200,右侧自适应宽度的布局</div>

4)英文换行问题

使用<wbr>标签 例如 <p> To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>Request Object. </p>

5)css选择器的优先级
Javascript

Javascript相关的面试题目

1:javascript有几种数据类型

在Javascript中只有五种简单类型,分别为null,undefined,boolean,String和Number。一种复杂类型:object。代码类型只有一种形式就是function。

2:如何判断javascript的类型

可以使用typeof函数

例如

var name = ‘mdemo’;
console.log(typeof name); // ‘string’
还可以用instanceof
3:javascript的作用域

javascript和其他语言不同,不存在花括号之间的块级作用域,而是用函数来进行作用域的划分。
4:javascript中数组的常用方法

concat–将两个数组连接起来
splice–可以用来删除、添加、替换
5:javascript中数组删除某一元素如何实现

找到要删除的元素的索引,然后使用splice(index,1)删除
6:函数中的arguments是数组吗

不是数组,typeof 可以看到是 object类型,而且arguments还有callee方法,所以不会是数组的。
7:说一下函数执行结果

window.name = ‘gdemo’;
var me = { name = ‘mdemo’};
function sayName(){
console.log(this.name);
}
sayName();//gdemo
me.sayName = sayName;
me.sayName();//mdemo
8:javascript中如果体现面向对象的三大特性的

封装:javascript中没有类的概念,一般用functions去模拟
较好的封装代码事例
function Person (name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
}
Person.prototype = {
sayName : function(){
console.log(this.name)
}
}
这样封装的好处,所有的属性都是在构造函数中进行,每个对象单独一份,在函数中调用通过this获取当前对象的属性,函数只实例化一次。
继承:javascript的继承主要利用prototype
较好的继承方式
function SuperType(name){
this.name = name;
this.colors = [‘red’,’blue’,’yellow’];
}
function SubType(name ,age){
SuperType.call(this,name);//继承属性
this.age = age;
}
SubType.prototype = new SuperType();继承方法
SubType.prototype.sayAge = function(){
console.log(this.age);
}
多态:主要体现着函数的参数上面
9:什么叫做闭包

会造成内存泄漏的闭包
function alertID(){
var element = document.getElementId(“mdemo”);
element.onclick = function(){
consol.log(element.id);


这个就形成了闭包,因为oncolick事件调用的时候,需要调用element变量,这样element永远都不会被回收,导致内存泄漏
修改后的版本
function alertID(){
var element = doucment.getElementId(‘mdemo);
var id = element.id;
element.onclick = function(){
console.log(id);
}
element = null;
}
10:javascript类型转换

  1. Boolean(value):把值转换成Boolean类型;
  2. Nnumber(value):把值转换成数字(整型或浮点数);
  3. String(value):把值转换成字符串。

4.parseXXX
11:domReady和onload的区别

onload是指整个网页所有内容都加载完毕

domready是指网页的dom元素加载完毕即可不用等待元素内容的加载

12:离线存储

manifest:相当于一个缓存的配置文件,配置的内容将会默认加载缓存

如果想更新的话,通过修改manifest文件。主要用于文件的缓存。

localstorage:可以通过cookie 来设置版本号,通过服务器去获得版本号,以此来更新内容。主要用于游戏存档和js css代码存储

13:动态加载如何实习

其实主要考的是

window.onscroll = function(){console.log(document.body.scrollTop);}

滚动条的滚动事件和滚动距离

14:事件冒泡

例如列表中元素的触发事件是一样的,那么多列表不可能一一设置事件,这时可以设置其父元素的事件。

<script type=”text/javascript”>
function showMsg(obj,e)
{
alert(obj.id);
stopBubble(e)
}

//阻止事件冒泡函数
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
</script>

15:一道 JavaScript 字符串去重的题目

var str = ‘aagbdfced’;

假设现在有一个字符串变量 str,要求实现一个函数,传入 str,返回字符串中去重相同字符的结果(本例为 agbdfce)。

要求

占用内存尽可能的少
效率尽可能的高
字符串字符的范围为 ASCII 字符
网络方面也会问

计算机网络相关的面试题目

1:何为三次握手

2:http状态码

200 :OK
301:永久重定向
302:临时重定向
404:不存在
500:服务器出错

3:ajax状态码

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪

4:跨域问题

1:jsonp
使用的原理,因为html中img、script等标签,是不受跨域的影响 json 收到js的原生支持 所以可以直接使用封装成js的json 来进行
跨域支持
2:子域名与主域名之间
document.domain
3:flash silverlight
crossdomain.xml
4:服务端的支持

5:get与post的区别

GET请求的数据会附在URL之后,POST把提交的数据则放置在是HTTP包的包体中。

GET方式提交的数据最多只能是1024字节,理论上POST没有限制,可传较大量的数据

POST的安全性要比GET的安全性高

6:tcp/ip体系结构
应用层如ftp 运输层 tcp/udp 互联网层ip 网络接口层
少不了数据结构算法

数据结构算法相关的面试题目

1:javascript中数组的栈方法、队列方法

可以使用push将元素推入数组,栈方法使用pop(),后进先出,队列方法使用shift(),先进先出

2:用javascript写一个快速排序

复杂度O(nlog2n) 最差O(n^2)

function quickSort(arr){

    //如果数组只有一个数,就直接返回;
    if(arr.length<1){
        return arr;   
    }

    //找到中间的那个数的索引值;如果是浮点数,就向下取整
    var centerIndex = Math.floor(arr.length/2);

    //根据这个中间的数的索引值,找到这个数的值;
    var centerNum = arr.splice(centerIndex,1);

    //存放左边的数
    var arrLeft = [];
    //存放右边的数
    var arrRight = [];

    for(i=0;i<arr.length;i++){
        if(arr[i]<centerNum){
            arrLeft.push(arr[i])
        }else if(arr[i]>centerNum){
            arrRight.push(arr[i])
        }
    }
    return quickSort(arrLeft).concat(centerNum,quickSort(arrRight));

};
var arrSort = [33,18,2,40,16,63,27];
var arr1 = quickSort(arrSort);
console.log(arr1);

其他

其他的面试题目

1:对于用户体验有什么想法或见解

1.取得一致性:
类似的情况应该有让使用者有一致性的操作。在提示、选单与说明文件中,应该采用同样的名词。并且保持命令的一贯性。

2.让重度用户使用快捷方式:
当使用频率增加时,使用者会希望减少互动的次数、让每次的互动能够一次做更多的动作。缩写、功能键、隐藏功能与综观全局的功能,对专家来说非常有用。

3.提供有意义的回馈:
当使用者做出一些动作时,系统应该提供回馈。越频繁的动作,其回馈的强度可以低一些。越重要或不寻常的动作,其回馈强度应该要显著一些。

4.设计对话产生结束:
一连串的动作应该被组织成开始、中间、结束三部份。当动作结束的时候,要提供回馈让使用者知道动作已经完成。在做下个一连串的动作之前,先告知使用者整个流程,能够减轻使用者的压力、提高满意度。

5.提供简单的错误处理:
最好不要让系统有严重错误的可能性。如果还是造成错误,系统应该能够侦测出出来,并提供一个简单、使用者可以理解的错误处理方式。

6.允许回到上一步:
这个功能可以减低使用者的焦虑,因为使用者只到做错了可以重来。这个功能鼓励使用者探索不熟西的选项。回到上一步的功能,可以包含一个、或是一连串的动作。

7.满足使用者控制的需求:
有经验的使用者强烈的感觉到他们在控制系统,做出动作之后,系统提供回馈。系统设计上要让使用者作为动作的处发者,而不是响应者。

8.减少短期记忆需求:
人类的短期记忆有限,因此显示上要保持简单、能同时显示多页数据以减少窗口切换频率,减少记忆指令和动作顺序的时间。

2:设计模式

js单例模式

obj.single = function(){
return{

};

}();
感谢名单

@chaoren1641 https://github.com/chaoren1641/Front-end-Developer-Interview-Questions/blob/master/zh-cn/README-zh-cn.md

@javascript高级编程

» 本文来自:前端开发者 » 《前端面试题》
» 本文链接地址:https://www.rokub.com/5297.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!