Web前端面试题（二）

1、同步和异步有什么区别？

同步，我的理解是一种线性执行的方式，执行的流程不能跨越。一般用于流程性比较强的程序，我们做的用户登录功能也是同步处理的，必须用户通过用户名和密码验证后才能进入系统的操作。

异步，是一种并行处理的方式，不必等待一个程序执行完，可以执行其它的任务。在程序中异步处理的结果通常使用回调函数来处理结果。在JavaScript中实现异步的方式主要有Ajax和H5新增的Web Worker。

 

3、js在页面中的加载顺序以及延迟加载的方式有哪些？

当浏览器遇到（内嵌）<script>时，当前浏览器无从获知javascript是否会修改页面内容，这是浏览器会停止处理页面，先执行该javascript代码，然后再继续解析和渲染页面。同样的情况也发生在使用src属性加载外链javascript的过程中，浏览器必须先花时间下载外链文件的代码，然后解析并执行他，在这个过程中，页面渲染和用户交互完全被阻塞了。

 

　script标签存在两个属性，defer和async： 都属于异步加载

　　   <script src="example.js"></script>

　　　没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载；

　　（1）async

　　 <script async src="example.js"></script>

　　   有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；但是不能保证脚本会按顺序执行，所以需要各个脚本之间无依赖性。

　　（2）defer 延迟脚本

　　<script defer src="example.js"></script>

         有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的，js脚本会被延迟到整个页面都解析完毕后再运行，DOMContentLoaded事件触发执行之前。

         在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。包含的脚本将延迟浏览器遇到</html>标签后再执行。

（3）动态创建dom　

//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">  
   function downloadJSAtOnload() {  
       varelement = document.createElement("script");  
       element.src = "defer.js";  
       document.body.appendChild(element);  
   }  
   if (window.addEventListener)  
      window.addEventListener("load",downloadJSAtOnload, false);  
   else if (window.attachEvent)  
      window.attachEvent("onload",downloadJSAtOnload);  
   else
      window.onload =downloadJSAtOnload;  
</script>  

 

4、window.onload与$(document).ready()的区别

（1）执行时间

　　window.onload必须等页面内所有元素包括图片都加载完成之后才执行

　　$(document).ready()在dom结构绘制完毕后就执行

（2）个数

　　只能有一个window.onload方法，而$(document).ready()可以有多个

 

5、你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和js引擎。

　　渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。

　　渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具（就是按照HTML代码在界面上绘制各种控件图形）。

　　JS引擎：解析和执行javascript来实现网页的动态效果。

　　最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

常见的浏览器内核有：Webket（谷歌内核）、Trident（IE内核）、Gecko（Firefox火狐内核）