前端面试题及答案（2）

来源：互联网发布：美工全职编辑：程序博客网时间：2024/06/05 19:09

（1）SGML和HTML,XML和HTML之间有什么关系

SGML是一种早在web发明之前就已经存在的使用标记来描述文档资料的通用语言，它是一种定义标记语言的元语言，HTML和XML都是由SGML发展过来的。

HTML是SGML定义下的一个描述语言，是SGML的一个应用，它不能用来定义新的应用，HTML文档格式非常松散，导致解析的复杂性增加，也导致不同的浏览器浏览的不同。

XML是SGML的一个简化版本，是SGML的一个子集，严格意义上讲，XML就是SGML，如果一些数据要长期使用，并且要更多的一些结构，XML将更好。XML比HTML严格，如果出现语法错误，浏览器将不解析显示。

（2）什么叫优雅降级和渐进增强

优雅降级就是先构建完整的功能，再针对低版本浏览器进行兼容；

渐进增强就是先针对低版本浏览器进行构建页面，保证其最基本的功能，再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

（3）简述一下src和href的区别以及简述同步和异步的区别

href的内容是引用（页面必不可少的一部分），src的内容是引入（与该页面有关联）；

当浏览器解析到src引用的文件时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，src是同步执行的；

同步就是当一个进程在执行某个请求时，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步就是进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态，当有消息返回时系统会通知进程进行处理，这样可以提高效率；

js中，最基础的异步是setTimeout和setInterval函数，因为他们可控制js的执行顺序，因为即使setTImeout的调用延迟为0，还是放置在一个队列和调度运行到下一个机会；

ajax异步：XMLHttpRequest对象发起请求，设置回调函数用来处理xhr的readyStateChange事件，然后执行xhr的send方法，在xhr运行中，当其readyState改变时readyStateChange事件就会被触发，只有xhr从远端服务器接收响应结束时回调函数才触发执行。

js是单线程，因为js作为浏览器脚本语言，主要用途就是与用户互动以及操作DOM，单线程就意味着索引任务需要排队，前一个任务结束，才会执行后一个任务，如果前一个任务耗时很长，后一个任务就不得不一直等着，于是就有了任务队列的概念；

js的设计者意识到主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务，等到IO设备返回了结果，再回头把挂起的任务执行下去；

所有任务可分为两种，一种是同步任务，另一种是异步任务；

js任务执行机制如下：

（1）所有同步任务都在主线程上执行，形成一个执行线

（2）主线程之外，还存在一个“任务队列“。只要异步任务有了运行结果，就在“任务队列”中放置一个事件

（3）一旦“执行线”中所有同步任务执行完毕，系统就会读取“任务队列”，看看里面有哪些事件。哪些对应的异步任务，结束等待状态，进入执行线开始执行

（4）主线程不断重读上面的第三步。

“任务队列”是一个事件的队列，IO设备完成一项任务，就在“任务队列”中添加一个事件，表示相关的异步任务可以进入“执行线了”。主线程读取“任务队列”，就是读取里面有哪些事件。

“任务队列”中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些时间发生时就会进入“任务队列”，等待主线程读取。

所谓“回调函数”，就是那些被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

（4）jQuery库里的$()是什么

$(expersion) css选择器，$('a')构造的这个对象，使用css选择器构建了一个jQuery对象，它选择了所有的<a/>这个标签；

$(element)一个特定的DOM元素，常用的DOM对象有document、location、form等。$(document).find("div>p").html()在全文中寻找带<p>的<div>元素，并显示<p>中的内容；

$(function)一个函数，它是$(document).ready()的一个速记方式，常见方式：$(document).ready(function(){alert("hello world!")})可变形为$(function(){alert("hello world!")})

（5）jQuery里的id选择器和class选择器有何不同

在元素存在的情况下，id返回一个元素，class返回一个或多个元素；

id选择要比class选择更有效率

（6）js实现二分查找

function binSearch(arr,key){
varlow=0,
high=arr.length-1;
while(low<=high){
varmid=parseInt(low+high)/2;
if(key==arr[mid]){
returnmid;
}elseif(key>arr[mid]){
low=mid+1;
}elseif(key<arr[mid]){
high=mid-1;
}else{
return-1;
}
}
}

（7）什么是html5

html5就是可以在网页上直接调试和修改的超文本标记语言，设计的目的就是为了在移动设备上支持多媒体

新的解析规则增强了灵活性

新属性

淘汰过时的或冗余的属性

一个html5文档到另一个文档间的拖放功能

离线编辑

信息传递的增强

详细的解析规则

多用途互联网邮件扩展（MIME）和协议处理程序注册

在SQL数据库中存储数据的通用标准（Web SQL）

（8）事件绑定和普通事件有什么区别

普通事件：

<body>
<divid='basic'>
<inputtype='submit'value="点我">
</div>
<scripttype="text/javascript">
varbtn=document.getElementById("basic")
btn.click=function(){
alert(1);
}
btn.onclick=function(){
alert(2);
}
//执行完代码后，只执行alert（2），将alert（1）覆盖
</script>
</body>

事件绑定：

<body>
<divid='bind'>
<inputtype='submit'value="点我">
</div>
<scripttype="text/javascript">
varbtn=document.getElementById("basic")
btn.addEventListener("click",function(){
alert(1)
},false)
btn.addEventListener("click",function(){
alert(2)
},false)
//执行上面的代码，先执行alert（1），再执行alert（2）
</script>
</body>

（9）IE和标准下有哪些兼容性的写法(待研究)

（10）添加删除替换插入到某个节点的方法

appendChild() removeChild() replaceChild()

阅读全文

0 0