4-1 渲染机制：
-1-，什么是DOCTYPE及其作用？
DTD(document type definition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML的文件类型，浏览器会使用DTD来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
DOCTYPE就是用来声明文档类型和DTD规范的，一个主要的用途是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。html5的DOCTYPE:<!DOCTYPE html>。HTML 4.01 Strict：该DTD包含所有HTML元素和属性，但不包含展示性的和弃用的元素，HTML 4.01 Transitional：该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素。

-2-，浏览器的渲染过程？

-3-，什么是浏览器的重拍Reflow?
重拍Reflow的定义：DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为Reflow；每个dom节点并不是固定的，当浏览器拿到dom时，比如：一个有内容的div，CSS是可以修改dom的，那重新修改后，浏览器应该怎么做呢？这是就需要重拍Reflow，那么什么时候会触发Reflow呢？每个dom都有Reflow方法，什么情况下回触发呢：1，当你增加，删除，修改dom结点时，会导致Reflow或Repaint,比如给一个div增加了一个子元素，这个子元素要显示在屏幕上，就要改变原来的dom tree和rule tree，那就需要Reflow和Repaint;2，当你移动dom的位置，或是做个动画的时候；3，当你修改CSS样式的时候；4，当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候；5，当你修改网页的默认字体时。

-4-，什么是浏览器重绘Repaint？
重绘Repaint的定义：当各种盒子的位置，大小以及其他属性，例如颜色，字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为Repaint重绘。对dom的改动和对css的改动都将触发Repaint重绘，只要页面上的显示发生了改变都将重绘。

-5-，什么是浏览器的布局Layout?

4-2 JS的运行机制
javascript是单线程的，即javascript在同一时间只能做一件事。任务队列：我们大家都知道有事件，有异步编程的概念，既然是单线程，也就是同步的，为什么还会有异步呢？比如说事件，我点击一个东西，然后就能通过回调函数，也可以调事件响应，去拿这个东西。这就是一个异步的过程。ajax通信也就是用事件绑定，我把它扔出去，我就不用管了，我可以去干别的了，当服务端响应以后，浏览器会自动调取我们最后绑定的那个事件（处理函数），这看上去和单线程本身是冲突的，那它是怎么做的的呢？就是通过任务队列做到的。在任务队列中，还有个概念叫同步任务和异步任务，setTimeout函数就是一个异步任务，在javascript同步运行过程中的语句，叫同步任务，遇到setTimeout，setInterval叫异步任务。javascript是从上到下执行的，先执行第一句：Console.log(1);第二句：setTimeout（function(){console.log(2);}, 0）；这是一个异步任务，异步任务要挂起，setTimeout不先执行；javascript往后继续执行，第三句：Console.log(3);执行同步任务第三句；第三句执行完后，同步任务执行完毕，这时才会去处理异步任务。单线程和任务队列是有顺序的，在任务里会有同步任务和异步任务，在javascript运行机制的执行过程中，是优先于同步任务，同步任务处理完之后，才会去响应异步任务，即使setTimeout设置了0延迟。

javascript 运行机制 事件循环 浏览器缓存 （慕课网 前段跳槽面试必备 4-1,4-2,4-3）的更多相关文章

  1. JavaScript 运行机制以及Event Loop（事件循环）

    一.JavaScript单线程 众所周知JavaScript是一门单线程语言,也就是说,在同一时间内JS只能做一件事.为什么JavaScript不能有多个线程呢?这样不是能够提高效率吗? JavaSc ...

  2. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  3. 深入理解JavaScript运行机制

    深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...

  4. JavaScript 运行机制详解：再谈Event Loop

    原文地址:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 一年前,我写了一篇<什么是 Event Loop?>,谈了我对Eve ...

  5. JavaScript 运行机制详解：深入理解Event Loop

    Philip Roberts的演讲<Help, I'm stuck in an event-loop>,详细.完整.正确地描述JavaScript引擎的内部运行机制. 一.为什么JavaS ...

  6. javascript运行机制详解: 再谈Event Loop(转)

    作者: 阮一峰 日期: 2014年10月 8日 一年前,我写了一篇<什么是 Event Loop?>,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts ...

  7. 深入理解javascript中的事件循环event-loop

    前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...

  8. JavaScript 运行机制详解

    一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...

  9. 【repost】JavaScript 运行机制详解：再谈Event Loop

    一年前,我写了一篇<什么是 Event Loop?>,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts的演讲<Help, I'm stuck i ...

随机推荐

  1. idea创建Javaweb项目

    1.Javaweb项目结构 1.1修改生成.class文件的位置为WEB-INF下的classes: 生成的.class文件位置: 1.2 设置第三方jar包添加位置:

  2. 在vs2010使用EF出现CS0012: 类型“System.Data.Objects.DataClasses.EntityObject”在未被引用的程序集中定义

    网上查了一通都是在web.config中配置 System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c56 ...

  3. jeecg3.8popup弹出窗口触发失去焦点事件，引发验证弹窗，影响体验问题的解决办法

    在初始化表单的代码中添加以下加粗部分,有几个popup就定义几个标志位,主要是防止第一次失去焦点时候的弹窗(此时还未来得及选择),提交表单的时候还是会正常校验的. //popup触发失去焦点事件,设置 ...

  4. 你真的了解 advice， joinpoint，pointcut，aspect吗？

    假设我们有一个很普通的Employee类,在某些方法被调用时,这个类里的方法也被调用. class Employee{ public String getName(int id){....} priv ...

  5. Java基于jdbc链接mysql数据库步骤示列

    用JDBC来链接MYSQL数据库,基本步骤都大同小异,只不过不同的数据库之间的URL地址有些不同.其基本步骤可分为以下几点: 1.加载相应的数据库的JDBC驱动程序. 2.利用驱动管理器DriverM ...

  6. Axis Java调C# Webservice

    这是一个痛苦的过程,如果java对java的webservice可以说很方便,很简单,Axis,CXF等一系列框架生成客户端直接传参调用即可,但是异构语言就有点麻烦了,生成的客户端不好使......无 ...

  7. css颜色 hsla 和line-gradient

    h 表示色调 从0-360 s 饱和度  0 - 100% l 亮度    0 -100% a 透明度  0-1

  8. 【干货】Html与CSS入门学习笔记9-11

    九.盒模型 与元素亲密接触 1.盒模型 css将每个元素都看做一个盒子,包括以下属性: 内容区content area:包含内容,内容可以决定大小,也可以自行设定宽度和高度.元素的width属性指定的 ...

  9. VS 打开时默认使用管理员权限

    1. 打开VS的安装目录,找到devenv.exe,右键,选择“兼容性疑难解答”. 2. 选择“疑难解答程序” 3. 选择“该程序需要附加权限” 4. 确认用户帐户控制后,点击测试程序,不然这个对话框 ...

  10. artTemplate教程

    artTemplate教程 官方文档 一个简单的例子 <!DOCTYPE html> <html lang="zh"> <head> <m ...