javascript 运行机制 事件循环 浏览器缓存 (慕课网 前段跳槽面试必备 4-1,4-2,4-3)
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)的更多相关文章
- JavaScript 运行机制以及Event Loop(事件循环)
一.JavaScript单线程 众所周知JavaScript是一门单线程语言,也就是说,在同一时间内JS只能做一件事.为什么JavaScript不能有多个线程呢?这样不是能够提高效率吗? JavaSc ...
- JavaScript中的事件循环机制跟函数柯里化
一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...
- 深入理解JavaScript运行机制
深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...
- JavaScript 运行机制详解:再谈Event Loop
原文地址:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 一年前,我写了一篇<什么是 Event Loop?>,谈了我对Eve ...
- JavaScript 运行机制详解:深入理解Event Loop
Philip Roberts的演讲<Help, I'm stuck in an event-loop>,详细.完整.正确地描述JavaScript引擎的内部运行机制. 一.为什么JavaS ...
- javascript运行机制详解: 再谈Event Loop(转)
作者: 阮一峰 日期: 2014年10月 8日 一年前,我写了一篇<什么是 Event Loop?>,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts ...
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
- JavaScript 运行机制详解
一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...
- 【repost】JavaScript 运行机制详解:再谈Event Loop
一年前,我写了一篇<什么是 Event Loop?>,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts的演讲<Help, I'm stuck i ...
随机推荐
- 粗看ES6之字符串
标签: javascript es6 字符串新增特性 新增二个方法 - startsWith/endsWith 字符串模板 - 反单引号的应用 startsWith 判断字符串以是否以某某开头,返回一 ...
- TX Text Control X10新特性之图像占位符合并
文档处理控件TX Text Control即将发布的X10版本,将升级重点还是放到了其比较优势的流式布局报表设计和生成上.慧都获得了来自其开发商Text Control GmbH公司的一手资料,迫不及 ...
- (C# 基础) 静态字段,静态类,静态方法。
静态字段被类的所有实例所共享,即此类的所有实例都访问同一内存地址. 所以该内存位置的值变更的话,这种变更对所有的实例都可见. class MyClass { ; ; public void SetVa ...
- 某地理位置模拟APP从壳流程分析到破解
工具与环境 Xposed IDA 6.8 JEB 2.2.5 Fiddler2 010Editor NEXUS 5 Android 4.4 好久不玩逆向怕调试器生锈,拿出来磨磨! 高手莫要见笑,仅供 ...
- [原创] Debian9上配置Samba
Samba概述 Samba是一套使用SMB(Server Message Block)协议的应用程序,通过支持这个协议,Samba允许Linux服务器与Windows系统之间进行通信,使跨平台的互访成 ...
- Windows server R2 2008上部署gogs git
所需的环境 1. 安装mysql 安装路径:F:\MySQL Server 5.7 2. 安装gogs ...
- SQL:数据库批量插入数据
测试中有些功能要求有足够的数据进行测试,当输入字段较多时通过页面添加很慢.业务只关联单个数据库表可以通过数据库批量插入数据 批量插入数据示例: declare @i int--声明变量 --变量初始化 ...
- 2019.03.14 ZJOI2019模拟赛 解题报告
得分: \(100+100+0=200\)(\(T1\)在最后\(2\)分钟写了出来,\(T2\)在最后\(10\)分钟写了出来,反而\(T3\)写了\(4\)个小时爆\(0\)) \(T1\):风王 ...
- Gym 100169A 最短路
题意:不久后滑铁卢将会变得非常冷,但是幸运的是,很多建筑都被桥梁和隧道连接着,所以你不需要总是走在外面.但是现在建筑 物之间的连接是错综复杂的,很难知道某两个建筑物之间的最优路线,所以需要你写程序判断 ...
- fast rcnn的实例
http://www.cnblogs.com/louyihang-loves-baiyan/p/4906690.html https://saicoco.github.io/object-detect ...