Web常见前端面试题及答案

2016-12-31 10:39:17来源:open-open作者:网络转载人点击

第七城市
Web前端常见面试题及答案

1、盒子模型


盒子模型包括四部分:内容(content)、填充(padding)、边框(border)、边界(margin)


盒子模型可以分为两种:IE盒子模型和W3C标准盒子模型


区别:两者对于width的计算方式不同,前者width=border+padding+内容宽度,后者width=内容宽度。


2、position包含几种属性?absolute和relative的区别?


static:默认状态、没有定位、正常流


inherit:从父元素集成position属性的值


fixed:生成绝对定位的元素(相对于浏览器窗口进行定位)


absolute:生成绝对定位的元素(相位与static定位以外的第一个父元素定位)


relative:生成相对定位的元素(相对于其正常位置定位)


absolute和relative区别:父元素的padding对relative的子元素布局有影响,absolute的子元素不受影响


3、前端性能优化


减少HTTP请求、使用内容发布网络、压缩组件、使用Expire头、JS放底部、CSS放顶部、避免CSS表达式等。


4、JSONP是什么?它是如何实现跨域的?为什么它可以实现跨域?


JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。


由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求(因为同源策略不阻止动态脚本插入,并且将脚本看作是从提供 Web 页面的域上加载的),然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。


5、浏览器兼容问题


css兼容性问题:①不同浏览器的标签默认的外补丁和内补丁不同,解决方案:用通配符*来设置各个标签的内外补丁是0(即设置margin和padding为0);②div的垂直居中问题 vertical-align:middle;文字居中:将行距增加到和整个div一样,高line-height=行高;③margin加倍问题:设置为float的div在ie下的margin会加倍。解决方案:为这个div设置样式:display:inline;


js兼容性问题:①在标准的事件绑定中绑定事件的方法函数为addEventListener,而IE使用的是attachEvent;②事件处理中event属性的获取不同。标准浏览器是作为参数带入,然后通过e.target获取目标元素;而IE是通过window.event方式获得,通过e.srcElement获取目标元素;


6、JS和JAVA的作用域有什么区别


java是块级作用域,js是函数作用域,没有块级作用域。

var name="global";
if(true){
var name="local";
console.log(name)
}
console.log(name);

这段都输出是“local",如果有块级作用域,明显if语句将创建局部变量name,并不会修改全局name,可是没有这样,所以Js没有块级作用域。


7、闭包问题


闭包:函数能被外部调用到,则该作用连上的所有变量都会被保存下来。


作用:①可以读取函数内部的变量;②相当于划出了一块私有作用域,避免数据污染;③让变量始终保存在内存中


使用全局变量被认为是不好的习惯,而且容易造成错误并且维护成本较高,所以js可以采用闭包的方式读取函数的内部变量。但是如果大量使用闭包就会造成过多的变量始终保存在内存中,会造成内存泄漏。


一个简单的闭包例子:

function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999

8、js中this的工作原理


①全局范围内:指向全局对象;

this;

②函数调用:指向全局对象

foo();

③方法调用:this指向test对象

test.foo();

④调用构造函数:this指向新创建的对象

new foo();

⑤显示的设置this:使用call或者apply方法时,this指向第一个参数

function foo(a, b, c) {}
var bar = {};
foo.apply(bar, [1, 2, 3]); // 数组将会被扩展,如下所示
foo.call(bar, 1, 2, 3); // 传递到foo的参数是:a = 1, b = 2, c = 3

9、模块化编程


①AMD(异步模块定义) requirejs

defined(id,deps,factory)
require([dependency],function(){})

异步加载,浏览器不会失去响应


它指定的回调函数,只有前面的模块都加载完成后,才会运行,解决了依赖性问题


②CMD(通用模块定义) seajs


模块定义方式和模块加载时机处理不同

defined(id,deps,factory)
function(require,exports,module)
module.exports = ______;

③区别:AMD依赖前置,在定义模块的时候就要声明其依赖的模块;CMD就近依赖,只有在用到哪个模块的时候再去require;


10、JS继承与原型问题


Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型。每一个对象都有原型,在浏览器中它体现在一个隐藏的 proto 属性上。


当一个对象需要调用某个方法时,它回去最近的原型上查找该方法,如果没有找到,它会再次往下继续查找。这样逐级查找,一直找到了要找的方法。 这些查找的原型构成了该对象的原型链条。原型最后指向的是null。我们说的原型继承,就是将父对像的方法给子类的原型。子类的构造函数中不拥有这些方法和属性。


11、少用float?


①使用float可能会造成兼容性问题,比如在ie6以下,float元素margin加倍问题;②使用float之后会影响左右元素,有可能造成错位问题(float之后都要clear)


解决:可用display、position转化


①无序链接(ul、li),设定li标签属性:display:inline


②div左右结构,比如在右侧要放一个more(更多)来显示更多信息的时候用到了float:right,可以用定位来做。给包裹more的div设定position:relative,然后more这个标签right:0即可。结构更为清晰一点。


12、一个页面从URL到加载显示完成,都发生了什么?


①通过DNS将该地址解析成IP地址;


②发起网络连接,进行http协议会话:客户端发送报头(请求报头),服务端回馈报头(响应报头)


③返回一个页面(根据页面上的外链的URL重新发送请求获取)


④接收文件完毕,对加载到的资源进行语法解析,以及相应的内部数据结构(网页渲染)


13、队列、堆、栈的区别?


队列是先进先出:就像一条路,有一个入口和一个出口,先进去的就可以先出去。而栈就像一个箱子,后放的在上边,所以后进先出。堆是在程序运行时,而不是在程序编译时,申请某个大小的内存空间。即动态分配内存,对其访问和对一般内存的访问没有区别。


栈(Stack)是操作系统在建立某个进程时或者线程为这个线程建立的存储区域。在编程中,例如C/C++中,所有的局部变量都是从栈中分配内存空间,实际上也不是什么分配,只是从栈顶向上用就行,在退出函数的时候,只是修改栈指针就可以把栈中的内容销毁,所以速度最快。


堆(Heap)是应用程序在运行的时候请求操作系统分配给自己内存,一般是申请/给予的过程。由于从操作系统管理的内存分配所以在分配和销毁时都要占用时间,所以用堆的效率低的多!但是堆的好处是可以做的很大,C/C++对分配的Heap是不初始化的。


在Java中除了简单类型(int,char等)都是在堆中分配内存,这也是程序慢的一个主要原因。但是跟C/C++不同,Java中分配Heap内存是自动初始化的。在Java中所有的对象(包括int的wrapper Integer)都是在堆中分配的,但是这个对象的引用却是在Stack中分配。也就是说在建立一个对象时从两个地方都分配内存,在Heap中分配的内存实际建立这个对象,而在Stack中分配的内存只是一个指向这个堆对象的指针(引用)而已。


14、如何居中div?如何居中一个浮动元素?


给div设置一个宽度,然后添加margin:0 auto;

div{
width:200px;
margin:0 auto;
}

居中一个浮动元素

div{
width:500px;
height:500px;
magin:-150px 0 0 -250px;
position:relative;
left:50%;
top:50%;
}

15、什么是线程?进程和线程的关系是什么?


线程可定义为进程内的一个执行单位,或者定义为进程内的一个可调度实体。 在具有多线程机制的操作系统中,处理机调度的基本单位不是进程而是线程。一个进程可以有多个线程,而且至少有一个可执行线程。


打个比喻:进程好比工厂(计算机)里的车间,一个工厂里有多个车间(进程)在运转,每个车间里有一个或多个工人(线程)在协同工作,这些工人就可以理解为线程。


线程和进程的关系:


1.线程是进程的一个组成部分.


2.进程的多个线程都在进程地址空间活动.


3.系统资源是分配给进程的,线程需要资源时,系统从进程的资源里分配给线程.


4.处理机调度的基本单位是线程.


16、React为什么这么火?


17、CSS3中的transform属性和transition属性?


transform:


功能:使元素变形的属性,其配合rotate(旋转角度)、scale(缩放倍数)、skew(扭曲元素)等参数一起使用


语法:


transform:rotate(旋转角度);//正数为顺时针、负数为逆时针;


transform:rotate(30deg);//顺时针旋转30度


transform:rotate(-20deg);//逆时针旋转20度


transform:scale(缩放倍数);


transform:scale(1.20);//放大1.2倍


transition:


功能:设置元素由样式一变为样式二所需要的一些变化效果


语法:transition: property duration timing-function delay ;


描述
transition-property
规定设置过渡效果的 CSS 属性的名称。 transition-duration
规定完成过渡效果需要多少秒或毫秒。 transition-timing-function
规定速度效果的速度曲线。 transition-delay
定义过渡效果何时开始。

注:使用这两个属性时应考虑到浏览器的兼容性,所以要针对不同的浏览器都添加一次样式,如下:

-webkit-transform:rotate(0deg) scale(1.20);
-moz-transform:rotate(0deg) scale(1.20);
transform:rotate(0deg) scale(1.20);

18、什么是MVVM框架?


MVVM是Model-View-ViewModel的简写。


MVVM 是 Web 前端一种非常流行的开发模式,利用 MVVM 可以使我们的代码更专注于处理业务逻辑而不是去关心 DOM 操作。目前著名的 MVVM 框架有 vue, avalon, angular 等,这些框架各有千秋,但是实现的思想大致上是相同的:数据绑定 + 视图刷新。跟MVC一样,主要目的是分离视图(View)和模型(Model)。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。


在MVVM中,数据是核心,由于VIewModel与View之间的双向绑定,操作了ViewModel中的数据(当然只能是监控属性),就会同步到DOM,我们透过DOM事件监控用户对DOM的改动,也会同步到ViewModel。






  • Rank: {{item.rank}}


var element = document.querySelector('#mobile-list');
var vm = new MVVM(element, {
'title' : 'Mobile List',
'showRank': true,
'brands' : [
{'name': 'Apple', 'rank': 1},
{'name': 'Galaxy', 'rank': 2},
{'name': 'OPPO', 'rank': 3}
]
});
vm.set('title', 'Top 3 Mobile Rank List'); // =>

Top 3 Mobile Rank List


以上这段如此简洁的代码,就是MVVM框架的一个简单的实现效果。在HTML代码里面,可能会嵌入很多自定义的属性(标记),以此来实现数据的绑定,而且还可以进行一些简单的逻辑处理,比如if和循环等。


react应该也算是MVVM框架,但是与传统的MVVN框架不同的是,react默认数据绑定方式是单向绑定,而vue及angular都是双向绑定;react使用虚拟DOM配合JSX,而vue及angular直接将数据通过属性绑定在真实DOM上的。


MVVM框架的优点:


1、方便测试


在MVC下,Controller基本是无法测试的,里面混杂了个各种逻辑,而且分散在不同的地方。有了MVVM我们就可以测试里面的viewModel,来验证我们的处理结果对不对。


2、便于代码的移植


可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。比如iOS里面有iPhone版本和iPad版本,除了交互展示不一样外,业务逻辑的model是一致的。这样,我们就可以以很小的代价去开发另一个app。


3、独立开发


开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码。


19、利用@media screen实现网页布局的自适应。


判断媒体类型,执行不同的css样式属性


重要属性:min-width:设置最小分辨率大小;max-width:设置最大分辨率大小。


①方式一:通过css

///1280分辨率以上(大于1200px)
@media screen and (min-width:1200px){
#content{ width: 1100px; }
#mian,.div1{width: 730px;}
#secondary{width:310px;}
} //1100分辨率(大于960px,小于1199px)
@media screen and (min-width: 960px) and (max-width: 1199px) {
#content{ width: 960px; }
#main,.div1{width: 650px;}
#secondary{width:250px}
}

②方式二:通过link引入不同的css文件

//意思是当屏幕的宽度大于600小于800时,应用styleB.css

优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值。


20、使用原生js实现ajax


创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下:

var xmlHttpRequest;
function createXmlHttpRequest(){
if(window.XMLHttpRequest)//非IE
xmlHttpRequest = new XMLHttpRequest();
else if(window.ActiveObject)//IE6+
xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
else//IE6-
xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
}

提交请求的方法:

open(method,url);//分别为提交的方法(GET或者POST)和提交的url
send(content);
onreadystatechange(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.state == 200){
//请求成功
}
}else{
//请求失败
}
}

21、前端安全方面有没有了解?XSS和CSRF如何攻防?


XSS(Cross Site Scripting)是跨站脚本攻击,为了区分CSS,所以缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的。


在网页的一些公共区域(例如,建议提交表单或消息公共板的输入表单)输入一些文本,这些文本被其它用户看到,但这些文本不仅仅是他们要输入的文本,同时还包括一些可以在客户端执行的脚本。如:

"/>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台