浏览器引擎

typora-copy-images-to: media 第01阶段.前端基础.认识WEB 基础班学习目标 目标： 能根据psd文件，用HTML+CSS 布局出符合W3C规范的网页。 网站首页 列表页、详情页、登录页、 注册页等等。。。。 课程安排 就业班详情 参看： http://www.itcast.cn/course/web.shtml HTML 第一天目标 能够写出基本的html页面（里面包含图片、链接、文字等网页元素标签） 认识WEB 1. 认识网页 网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。 思考： 网页是如何形成的呢? 总结 网页有图片、链接、文字等元素组成，我们后面的任务就是要把这部分网页元素用代码写出来。。。 2. 浏览器（显示代码） 浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。 可能你最熟悉的是 IE浏览器，但是。。。 2.1 查看浏览器占有的市场份额 查看网站： http://tongji.baidu.com/data/browser 2008年，大名鼎鼎的互联网巨头Google公司发布了它的首款浏览器Chrome浏览器。 跟王思聪一样，没办法，生下来人家就是富二代官二代啊，后台太强

常见浏览器内核介绍 浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。 浏览器内核（理解） 浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。 渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。 JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。 （1）Trident(IE内核) 国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”。代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。Window10

谷歌的Chrome浏览器功能尤其强大：它隐藏了不少快捷方式、扩展功能和可能性。让我们花点时间学习这些技巧，看看自己的工作效率会如何提高。 （注意：这里的大多数技巧都针对Windows PC和Mac OS的浏览器版本，可能不适用于手机端的移动版本。） 一些非常有用的隐藏捷径 想要在后台打开一个新的标签页而不离开现有的页面，这样就不会打断目前的工作了？按住Ctrl键或Cmd并点击它。如果你要在一个全新的窗口中打开一个链接，那就按Shift。（这一操作将在你使用Chrome的大部分情况下发挥作用，包括历史页面和后退按钮下拉历史列表，我们将对此进行详细介绍。） 也许你知道你可以通过按下空格键向下滚动一个完整的页面长度，但是这个快捷键还有另一功能：如果你按住Shift键和空格键，Chrome就会做相反的事情——向上滚动一个完整的页面长度。 如果您不小心关闭了一个标签，按下Ctrl键或Cmd+Shift+T，Chrome将重新打开你最近关闭的标签，仿佛无事发生过。（如果你想要恢复的标签不止一个，你也可以重复操作。) 当你打开一堆选项卡并想把这些页面都保存起来以供之后使用，按Ctrl+Shift+D。这样就可以将所有打开的选项卡保存到一个文件夹中，方便以后访问。要恢复它们，你只需右键单击书签内的文件夹，选择“打开所有新窗口”。 通过选中词语，然后右键单击并选择“Search谷歌”选项

　　 浏览器的渲染进程（是Browser进程，浏览器插件进程，GPU进程，渲染进程中的一种进程）包含的一些主要常驻线程： GUI渲染线程 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行 注意， GUI渲染线程与JS引擎线程是互斥的 ，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中 等到JS引擎空闲时 立即被执行。 JS引擎线程 也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎） JS引擎线程负责解析Javascript脚本，运行代码。 JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序 同样注意， GUI渲染线程与JS引擎线程是互斥的 ，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。 事件触发线程 归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助） 当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中

该函数用于正确识别浏览器相关内容，代码来自于《javaScript高级程序设计》 var client = function() { //呈现引擎 var engine = { ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, //完整的版本号 ver: null }; //浏览器 var browser = { //主要浏览器 ie: 0, firefox: 0, safari: 0, konq: 0, opera: 0, chrome: 0, //具体的版本号 ver: null }; //平台、设备和操作系统 var system = { win: false, mac: false, x11: false, //移动设备 iphone: false, ipod: false, ipad: false, ios: false, android: false, nokiaN: false, winMobile: false, //游戏系统 wii: false, ps: false }; //检测呈现引擎和浏览器 var ua = navigator.userAgent; if (window.opera) { engine.ver = browser.ver = window.opera.version(); engine

浏览器存储 特点 cookie localStorage sessionStorage indexDb 生命周期 可过期 除非清理，否则一直存在 页面关闭就清理 除非清理，否则一直存在 存储大小 4K 5M 5M ∞ 与服务端通信 请求携带在 header 头部 no no no 浏览器内核 浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。 通常所谓的浏览器内核也就是浏览器所采用的渲染引擎 浏览器内核主要包括三个分支技术： 排版渲染引擎 、 JavaScript引擎 ， 以及其他 。 Trident IE 内核 其中 IE8 的 JavaScript 引擎是 JScript 引擎, IE9 开始使用 Chakra Gecko FF 内核 JavaScript 引擎使用 Spider Monkey 第一款 JavaScript 引擎 Webkit Safari 内核 Chrome 内核原型 Android 默认浏览器使用 Webkit 内核 Blink Chrome 最新的内核(Safari 目前也使用的内核) 而谷歌方面，则使用了自己研发的 V8 引擎 内核 是否开源 插件支持 应用浏览器 支持操作系统 Trident 否，但提供接口调用 ActiveX IE Windows Gecko 是

1. 浏览器内核 即渲染引擎，负责对网页语法的解释并渲染网页，其决定了浏览器如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同，因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。 浏览器内核可以分成两部分：渲染引擎（Layout Engineer 或 Rendering Engine）和 JS 引擎。渲染引擎负责取得网页的内容（ HTML、XML、图像等）、整理讯息（加入 CSS 等），以及计算网页的显示方式，然后输出至显示器或打印机。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，浏览器内核就倾向于只指渲染引擎。 2. 五大内核 (1) Trident IE内核，是微软在 Mosaic（"马赛克"，人类历史上第一个浏览器，从此网页可以在图形界面的窗口浏览）代码的基础之上修改而来，其接口内核设计的相当成熟，国内很多的双核浏览器的其中一核便是 Trident，美其名曰 "兼容模式"。 Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。 (2) Gecko Mozilla FireFox（火狐浏览器）内核，其特点使代码完全公开，因此，其可开发程度很高

　　使用 HTML5，CSS3 和 Javascript 可以帮助面向对象开发者开发拥有各种特性的游戏，比如：3D 动画效果，Canvas，数学，颜色，声音，WebGL 等等。最明显的优势在于使用 HTML5 开发的游戏能在任何现代化流行的设备上运行。 　　某些游戏引擎仅仅是一个抽象的层次，就简单处理一些或者更多的繁杂游戏开发任务；其他只是注重 asset 加载，输入，物理效果，音频，sprite 地图和动画，而且相当多样化。还有一些引擎架构极其简单，只包括一个 2D 水平的编辑器和调试工具。 　　大部分的游戏引擎都能提高游戏开发的效率，即使是创建全功能型的游戏。但是，也有一些开发者为了能更好的理解游戏的每个组件，喜欢从头开始创作。现 在基于 Javascript-HTML5 的游戏引擎也不少，这是好事，同时，也是个坏事，因为事实上大多数开发出来的产品都没人维护，或者即将停止维护。所以，选择某一游戏引擎需要仔细考虑的就 是该引擎在未来几年是否会继续维护，更新，进行功能增强。 　　在这篇文章中，我们经过各种资料探寻，测试，实际应用等方法，收集了专门提供给开发者的20 款免费的 JavaScript 游戏引擎， Enjoy! 　1. Crafty 　　craftyJS 个轻量级的，模块化 JavaScript 游戏引擎，包括了许多组件：动画，事件管理，重新划分区域，碰撞检测

1. 浏览器现在的普及情况 使用上选择最多的是chrome浏览器，第二是safari以及Firfox。谷歌浏览器超过了六成。下边的这个图是来自 https://gs.statcounter.com/ 的统计。 浏览器内核 上边说到的三种使用最多的浏览器中，chrome之前使用的是webkit，后来更换为了Blink。safari使用的是webkit(自家的)，firfox使用的是Gecko，是Mozilla自己开发的内核。IE使用的是Trident内核(微软的). 2. 浏览器的结构 用户界面: 使用浏览器的时候在页面中呈现出来的东西 浏览器引擎：工具人，用来将用户和浏览器的呈现引擎进行关联的部分 呈现引擎 ：最主要干活儿的，用来解析HTML以及CSS 网络: 工具人，用来和服务端进行交互的部分 用户界面后端: 绘制基本的窗口小部件，比如组合框和窗口。 JavaScript 解释器 : 解析和执行 JavaScript 代码。 数据存储: 浏览器需要在硬盘上保存各种数据 3. 浏览器包含的进程 浏览器是多进程的，浏览器的渲染进程是多线程的； 1> browser进程（一个进程）：浏览器的主进程，主要是用来控制界面展示，页面的管理、渲染进程中的内容绘制到用户界面上。 2>浏览器渲染进程（浏览器内核）（Render进程，内部是多线程的）：默认每个Tab页面一个进程，互不影响。主要作用为

浏览器解析JS机制 一、浏览器的运行机制 浏览器是多进程的，其中包含了： 1）GPU进程 2）第三方插件进程 3）浏览器渲染进程 4）Browser进程 这里面的进程很好理解，浏览器本身，第三方插件扩容，浏览器渲染，GPU。其中，浏览器渲染JS就是通过浏览器渲染进程进行的。 浏览器渲染引擎是多线程的，其中包括以下线程： 1）GUI渲染线程 ---> 界面渲染 2）JS引擎线程 ---> JS处理 3）事件触发线程 ---> 事件处理 4）定时器线程 ---> 定时器处理 5）http异步请求线程 ----> 异步请求处理 一般我们前端所学的就是对以上线程的操作和处理，管理好以上线程对我们前端技术能够有很大的提升。 二、JS引擎线程处理 在JS引擎线程中，可以分为同步和异步任务，其中: 1）同步任务全部通过主线程执行，形成 执行栈 2）异步任务通过事件触发线程或者定时器线程处理，形成 任务队列 3）当执行栈中的任务全部处理完成，主线程为空闲的时候，会从任务队列中提取任务到执行栈中执行。 以上就是浏览器中JS的执行机制。 三、浏览器中的任务类型及一些案例 JS引擎线程和GUI渲染是冲突的，因为JS引擎线程可能存在修改dom造成页面 重绘(repatian) / 回流(reflow) 的操作，所以当JS引擎线程busy的时候会将GUI渲染线程放在队列中，等待JS引擎线程空闲。