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

时间 2021-02-13

标签 javascript css html 前端 java jquery css3 面试 ajax chrome 栏目 JavaScript 繁體版

原文原文链接

1.window.onload和$(document).ready()的区别：javascript

①执行时间：window.onload会在全部元素，包括图片,引用文件加载完成以后执行，而$(document).ready()则会在HTML DOM,CSS DOM加载完成后执行,此时可能其余图片尚未加载完。若要网页上全部内容，包括图片加载完成后,再注册事件，则需$(window).load(function)等价于window.onload.css

②编写个数：window.onload不能同时编写多个，若是编写多个则只会执行最后一个,$(document).ready()则能够编写多个，并且每个均可以获得执行html

③简化写法：window.onload不能够简写,$(window).load(function(){})则能够简写为$(function(){})前端

2.浏览器加载转圈结束是哪一个时间点？
loadEventEnd
参考资料java

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页面必须同域，不然操做非法。jquery

4.setTimeout和setInterval的区别，如何相互实现？css3

-首先解析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和其余定时器是并发执行的。ajax

setInterval是间隔必定时间，将回调函数加入空闲队列，但有个坑是，它是将回调加入到队列中无论函数是否被执行就开始执行下一次计时，那么当下一次时间到的时候，定时器又向队列中加入回调函数，但此时发现以前的加入的函数还未被执行，此时便会将以后的定时函数取消掉，形成缺失间隔，但有时候咱们并不但愿这样的事情发生，那么怎么办呢？此时就须要使用setTimeout来模拟setInterval,以下图：chrome

参考资料

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请求易遭到攻击