浏览器引擎 js原生事件绑定

浏览器引擎
浏览器解析渲染页面原理

浏览器 最重要 最核心的部分是“解释引擎”，也就是“浏览器内核”： 负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。
网页的工作过程需要使用到两个引擎：渲染引擎和javascript引擎
什么是JavaScript引擎？简单来讲，就是能够提供执行JavaScript代码的运行环境
所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，排版引擎(Rendering Engine，也有称渲染引擎)，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
浏览器内核很多，如果加上所有的几乎没有什么人在用的非商业的免费内核，那么可能大约有10款以上甚至更多，不过通常我们比较常见的大约只有以下四种：

• Trident ：[ˈtraɪdnt]
  IE浏览器(遨游、世界之窗、腾讯TT…都是IE)Trident内核最慢
  IE 以Trident 作为内核引擎 ,前缀为–ms。

• Gecko：[ˈgekəʊ]

• 开放源代码、以C++编写的网页排版引擎，是跨平台的
  FireFox是基于 Gecko 开发;

• presto：[ˈprestəʊ]
  目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。由Opera Software开发的浏览器排版引擎，Opera（欧朋浏览器），但由于市场选择问题，主要应用在手机平台–Opera mini

• Webkit：
  苹果公司自己的内核，google的chrome也使用webkit作为内核。
  是一个开源的浏览器引擎，同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称，它拥有清晰的源码结构、极快的渲染速度，包含的 WebCore 排版引擎和 JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来。
  许多网站都是按照IE来架设的，很多网站不兼容Webkit内核，比如登录界面、网银等网页均不可使用Webkit内核的浏览器。
  Safari([səˈfɑri]), Google Chrome, 傲游3, 猎豹浏览器, 百度浏览器 opera浏览器 基于 Webkit 开发。

注：2013年2月Opera宣布转向WebKit引擎
注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎

4.js原生事件如何绑定
一.html事件 现在早已不用了，就是在html各种标签上直接添加事件，类似于css的行内式，缺点是不好维护，因为散落在标签中，耦合度太高
二.DOM0级事件，目前在pc端用的比较多，兼容性也好，主要是先获取DOM元素，然后直接给DOM元素添加事件
var btn=document.getElementById(‘id元素’)
btn.οnclick=function(){
//时间逻辑
}
移除：btn.οnclick=null//置空就行
优点：兼容性好
缺点：只支持冒泡，不支持捕获
三.DOM2级事件，移动端用的比较多，有很多优点，提供了专门的绑定和移除方法
var btn=document.getElementById(‘id元素’)
//绑定事件
btn.addEventListener(‘click’,绑定的事件处理函数名，false)
//移除事件
btn.removeEventListener(‘click’,要移除的事件处理函数名，false)
优点：支持给多个元素绑定多个相同事件，支持冒泡和捕获事件机制
5.js原生操作DOM方法
查找：getElementById,getElementsByTagName,querySelector斯莱克特er,querySelectorAll
插入：appendChild,insertBefore
删除：removeChild
克隆：cloneNode
设置和获取属性：setAttribute(“属性名”,“值”)
getAttibute(“属性名”）
6.ES6新增特性
let/const,箭头函数，模板字符串，解构赋值，模板的导入和导出，Promise
7.设计模式有哪些
单例模式：就是保证一个类只有一个实例
观察者模式：当一个对象的改变需要同时改变其他对象，并且他不知道具体有多少对象需要改变的时候，就应该考虑使用观察者模式
8.js面向对象
js面向对象主要基于function来实现的，通过function来模拟类，通过prototype来实现类方法的共享，跟其它语言有着本质的不同，自从有了ES6后，把面向对象类的实现更像后端语言的实现了，通过class来定义类，通过extends来继承父类，其实ES6类的实现本质就是一个语法糖，不过对于开发简单多了
9.js数组常用方法
push,pop,unshift,shift,splice,join,concat,forEach,filter,map,sort
10.js内置遍历方法有哪些
forEach:这个方法是为了取代for循环遍历数组的，返回值为undefined
filter:是一个过滤遍历的方法，如果返回条件为true,则返回满足条件为true的新数组
map:这个方法主要对数组的复杂逻辑处理时用的多，特别是react中遍历数组，写法和forEach类似
some:只要有一个满足条件的结果，返回值就为true,否则返回false，写法和forEach类似
every:每一项都满足条件时，才返回true,否则返回false,写法和forEach类似