web前端开发面试题，都是整理出的精华

正在发愁如何成为一名开发工程师的同学，你们现在最需要做的就是除了看一些相关的面试题，还需要知道面试的一些技巧，在面试之前就了解好你即将要面试的企业，了解他们的文化，这样都可以让你的面试成功率大大的提高，今天针对一些web前端面试题，小编做出了一些整理，希望可以帮助到大家。

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

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

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

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

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

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

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

2、前端性能优化

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

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

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

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

跨域的4种方式：

①通过动态添加script标签，然后指定callback函数，可以获取到传过来的json数据，这时候要自己写一个callback函数来处理数据;

②使用jquery封装好的getJson方法，传入不同域的url?callback=?,好处是不需要手动的插入script标签以及定义回掉函数。jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法;跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

③通过设置window.domain来处理跨域，但是只适用于不同子域的框架间的交互。所以使用的时候可以用一个隐藏的iframe来做一个代理，让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面。

④window.name是可以跨域的。window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。所以可以转化成字符串的数据都可以使用window.name来传递，比如json数据。

4、浏览器兼容问题

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获取目标元素;

5、闭包问题

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

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

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

一个简单的闭包例子：

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

以上就是“web前端开发面试题，都是整理出的精华”，你能回答上来吗?如果想要了解更多的相关内容，可以关注极悦Java官网。