正在发愁如何成为一名开发工程师的同学,你们现在最需要做的就是除了看一些相关的面试题,还需要知道面试的一些技巧,在面试之前就了解好你即将要面试的企业,了解他们的文化,这样都可以让你的面试成功率大大的提高,今天针对一些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面试题。