1.window.onload和$(document).ready()的区别:
①执行时间:window.onload会在所有元素,包括图片,引用文件加载完成之后执行,而$(document).ready()则会在HTML DOM,CSS DOM加载完成后执行,此时可能其他图片还没有加载完。若要网页上所有内容,包括图片加载完成后,再注册事件,则需$(window).load(function)等价于window.onload.
②编写个数:window.onload不能同时编写多个,如果编写多个则只会执行最后一个,$(document).ready()则可以编写多个,而且每一个都可以得到执行
③简化写法:window.onload不可以简写,$(window).load(function(){})则可以简写为$(function(){})
2.浏览器加载转圈结束是哪个时间点?
loadEventEnd
参考资料
3.form表单当前页面无刷新提交?
参考资料
起因:
表单提交原理是浏览器通过js事件将表单数据提交至服务器,服务器处理后将返回结果(xml,json,html或html片段)返回到原提交页面,此处页面指一个带有html
框架的页面,此时便会出现一次页面刷新。
后Ajax
出现后,克服了这个问题,通过浏览器对象提交数据,服务器返回数据到该浏览器对象,实现了局部刷新,但Ajax
有个问题,就是不能异步提交文件(老版本浏览器,新式浏览器通过二进制转换实现了文件的异步提交)
那么在老式浏览器如何克服文件提交的问题呢?即如下通过iframe的方式
具体步骤:
①在当前页面建一个iframe并隐藏(display:none)
②给新建的iframe起个name如id_iframe
③form表单的target属性的值一定得设置为刚起的这个名字id_iframe
④即可无刷新提交表单
iframe实现异步无刷新提交的原理:因为设置了target=id_iframe,故即使数据是从A页面提交出去的,但是服务器却会将返回数据送到name为id_iframe的B页面,然后通过在B页面调用js程序来刷新A页面,因为B页面一直不显示,故对于用户来时这就是一次无刷新提交,但此方法有一点需注意,因为在B页面需要调用A页面的方法或者函数,因此AB页面必须同域,否则操作非法。
4.setTimeout
和setInterval
的区别,如何相互实现?
-首先解析setTimeout
众所周知js是单线程的,在js引擎的内部有一个函数队列,所有函数按顺序执行,setTimeout
和setInterval
则是通过间隔指定时间将定时函数中的函数加入执行队列来实现一些特定效果,如上图,执行hello函数后,会先执行console(1)
处的代码,接着执行console.log(3)
处的代码,当console.log(3)
处的代码执行时间大于2000时,setTimeout
仍会在2000到了后将console.log(2)
加入队列,但不会立即执行,只会等console.log(3)
处的代码执行完成后再执行,反之,当console.log(3)
处的代码执行时间小于2000时,console.log(2)
一加入队列即会执行。因为在页面加载完成后,js引擎维护着两个队列,一个是按页面顺序加载的执行队列,还有一个空闲队列,使用定时函数就是将回调函数加入到空闲队列中,故js和其他定时器是并发执行的。
setInterval
是间隔一定时间,将回调函数加入空闲队列,但有个坑是,它是将回调加入到队列中不管函数是否被执行就开始执行下一次计时,那么当下一次时间到的时候,定时器又向队列中加入回调函数,但此时发现之前的加入的函数还未被执行,此时便会将之后的定时函数取消掉,造成缺失间隔,但有时候我们并不希望这样的事情发生,那么怎么办呢?此时就需要使用setTimeout
来模拟setInterval
,如下图:
5.谈谈对浏览器兼容性的理解?
(IE8以下的可以不用考虑了,此问题参考知乎前端面试中如何回答“谈谈浏览器兼容性”的问题?)
①浏览器兼容性问题的成因:
各大浏览器厂商对W3C标准执行的不一样,他们有各自的技术标准和实现
②如何处理?
根据用户浏览器分布份额占比判断,需要兼容到何种程度,然后通过各种判断和hack和降级之类的方法(如css样式初始化)
③常见解决方案5
1.<!DOCTYPE html>声明文档的解析类型,可使文档按照W3C标准渲染页面,避免浏览器的怪异模式
2.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">,告诉IE使用最新的引擎渲染网页,是chrome做的外挂,让用户在浏览网页时,保持IE浏览器不变,但实际使用的是Google Chrome浏览器内核渲染的
3.早期的IE浏览器,事件对象是存储在全局对象event中的,而w3c标准中则可以直接获取event对象
4.H5和css3的新特性,要根据兼容性,合理使用
6.对页面性能优化的理解?
①减少http请求次数
1.合并压缩文件2.使用雪碧图3.减少dns查询次数4.减少dom和iframe的数量
②服务器
1.使用cdn(内容分发网络)2.避免空的图片src.2.减少cookie的大小
③css
1.将样式表置顶(利用用户错觉)2.避免css表达式(性能损耗)3.使用link
代替@import
因为其相当于将css放于页面底部
④javascript
1.将脚本文件置底(不影响页面绘制)2.使用defer
属性指定脚本在文档加载后执行3.async
关键字,让脚本异步执行.减少dom访问
⑤图片
1.优化图片2.使用小且可以缓存的favicon.ico
⑥移动端
1.保持单个文件小于25KB 2.打包组件成符合文档
7.JSONP的实现
①原生js
var url = "http://localhost:8080/xxx?jsonp=callbackfunction";
var script = document.createElement('script');
script.setAttribute('src',url);
document.getElementsByTagName('body')[0].appendChild(script);
function callbackfunction(data){
var html = JSON.stringify(data);
alert(html);
}
②jquery中的使用
$(function(){
jQuery.getJSON('http://localhost:8080/xxx?jsop=?',function(data){
var html = JSON.stringify(data);
$("#textjsonp").html(html);
});
});
jquery中的源码实现
$.ajax({
type:'GET',
async:false,
url:'http://localhost:8080/xxx',
dataType:'jsonp',
jsonp:'jsoncallback',
success:function(data){
var html = JSON.stringify(data);
$('#testjsonp').html(html);
}
error:function(){
alert("error");
}
});
(JSONP缺点:只支持get,不支持post)
ps补充一下ajax请求中get和post方法的区别:
①位置:
GET请求:请求数据会附加在URL之后,以?分割URL和参数,多个参数使用&连接,因为URL是以ASCII码传输的,故所有非ASCII码都需要经过编码后才能传输。
POST请求:会将请求数据放在HTTP包体中
②使用GET请求,会受到URL长度限制
使用POST请求,理论上不会有限制,但实际中各服务器有自己的配置
③使用POST较GET方法来说更为安全,GET请求易遭到攻击
8.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。