资讯专栏INFORMATION COLUMN

【面试篇】JS基础知识查漏补缺

myeveryheart / 2909人阅读

摘要:因为在页面加载完成后,引擎维护着两个队列,一个是按页面顺序加载的执行队列,还有一个空闲队列,使用定时函数就是将回调函数加入到空闲队列中,故和其他定时器是并发执行的。

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.setTimeoutsetInterval的区别,如何相互实现?

-首先解析setTimeout

众所周知js是单线程的,在js引擎的内部有一个函数队列,所有函数按顺序执行,setTimeoutsetInterval则是通过间隔指定时间将定时函数中的函数加入执行队列来实现一些特定效果,如上图,执行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.声明文档的解析类型,可使文档按照W3C标准渲染页面,避免浏览器的怪异模式
2.,告诉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.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82672.html

相关文章

  • 查漏补缺 - 收藏集 - 掘金

    摘要:酝酿许久之后,笔者准备接下来撰写前端面试题系列文章,内容涵盖浏览器框架分钟搞定常用基础知识前端掘金基础智商划重点在实际开发中,已经非常普及了。 这道题--致敬各位10年阿里的前端开发 - 掘金很巧合,我在认识了两位同是10年工作经验的阿里前端开发小伙伴,不但要向前辈学习,我有时候还会选择另一种方法逗逗他们,拿了网上一道经典面试题,可能我连去阿里面试的机会都没有,但是我感受到了一次面试1...

    YuboonaZhang 评论0 收藏0
  • 前端面试题-浏览器/服务端/网络

    摘要:同源策略是什么跨域通信同源两个文档同源需满足协议相同域名相同端口相同跨域通信进行操作通信时如果目标与当前窗口不满足同源条件,浏览器为了安全会阻止跨域操作。 同源策略是什么? javascript跨域通信 同源:两个文档同源需满足 协议相同 域名相同 端口相同 跨域通信:js进行DOM操作、通信时如果目标与当前窗口不满足同源条件,浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法 ...

    jsdt 评论0 收藏0
  • 你不能错过的前端面试题合集

    摘要:收集的一些前端面试题从面试题发现不足,进而查漏补缺,比通过面试更难得及各大互联网公司前端笔试面试题篇及各大互联网公司前端笔试面试题篇面试题个和个经典面试题前端开发面试题如何面试前端工程师很重要个变态题解析如何通过饿了么面试轻 收集的一些前端面试题 从面试题发现不足,进而查漏补缺,比通过面试更难得 1 BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 2 BAT...

    ninefive 评论0 收藏0
  • 你不能错过的前端面试题合集

    摘要:收集的一些前端面试题从面试题发现不足,进而查漏补缺,比通过面试更难得及各大互联网公司前端笔试面试题篇及各大互联网公司前端笔试面试题篇面试题个和个经典面试题前端开发面试题如何面试前端工程师很重要个变态题解析如何通过饿了么面试轻 收集的一些前端面试题 从面试题发现不足,进而查漏补缺,比通过面试更难得 1 BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 2 BAT...

    darkbaby123 评论0 收藏0
  • 30 分钟 HTTP 查漏补缺之 Vary

    摘要:所以我们要时刻留意,在使用时,一定要根据缓存命中率作出调整,在不发生缓存错乱的情况之下,尽可能的提高资源的缓存命中率。 写在前面 最近抽空参加了几场大厂的面试,突然发现一个现象,就是不论面试偏服务端的职位还是偏客户端的职位,不论面试的 5 年以上的高级职位,还是 3 年左右的中级职位,面试官开头所问问题必然是关于 HTTP 的。 我记得之前找工作的时候,似乎都是先考察一些职位所需技能领...

    xiangchaobin 评论0 收藏0

发表评论

0条评论

myeveryheart

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<