1、浏览器的内核和JS引擎
1.1、浏览器内核
网页浏览器的内核就是渲染引擎(renderingEngine),也被称为排版引擎(Layout Engine)或模板引擎。它负责取得网页的内容和结构(HTML、XML、图像等)、样式信息(CSS等)以及计算网页的显示方式,然后会输出至显示器。也就是说,渲染引擎决定了浏览器如何显示网页的内容以及格式,因为不同的浏览器内核对网页编写语法的解析有所不同,所以同一网页在不同的内核浏览器里的展示效果就可能不同。
因为每一种渲染引擎都有其代表的浏览器,所以常常会把渲染引擎的名称和浏览器的名称混用,比如常说的IE内核、Chrome内核,其实这样子是不太合理的,因为一个完整的浏览器不仅仅只有渲染引擎,还有自己的界面框架和其它的功能支撑,比如JS引擎,而且一个浏览器也可以支持多个内核。下面罗列一下几款主流的排版引擎和浏览器。
内核 | 是否开源 | 插件支持 | 应用浏览器 | 支持操作系统 | 备注 |
Trident | 否 | ActiveX | IE | Windows | 国产浏览器使用的多是W ebkit 内核 |
Gecko | 是 | NPAPI/PPAPI | Firefox | Win\Mac\Lin | |
Webkit | 是 | NPAPI/PPAPI | Chrome、Safari | Win\Mac\Lin |
1.2、JS引擎
说完了渲染引擎,接下来说说 JS 引擎。顾名思义,JS引擎就是用来解释JavaScript代码或者JScript代码的虚拟机,内置在浏览器中。譬如说,一个算圆周率的网页,渲染引擎把页面的结构和样式给显示出来了,但最终的数据需要用Javascript 程序或者或者JScript程序来计算,而Javascript 程序或者或者JScript程序是需要JS引擎解释执行的,所以JS引擎的执行效率对整个网页的速度有着很大影响。浏览器支持不同JS引擎:
JS引擎 | 应用浏览器 | 备注 |
Chakra引擎 | 9之后的IE、edge浏览器 | 译名为查克拉(专门解释JScript) |
Monkey系列引擎 | Firefox | 采用C/C++编写 |
V8引擎 | Chrome | node.js其实就是封装了V8引擎 |
SquirrelFish系列引擎 | Safari | 执行效率超越所有引擎 |
2、JavaScript介绍
2.1、是什么
JavaScript由网景公司推出,是运行在客户端浏览器中的解释性脚本语言,依赖浏览器中的JS引擎解释执行,代码不需要编译;具有跨平台特性,在绝大多数浏览器和操作系统下都能运行。
备注:JScript是由微软开发的语言,抄袭JavaScipt,使用方法和功能都一样。1997年,Ecma国际制定ECMAScript标准,网景的JavaScript和微软的JScript都遵循此标准各自发布新版本,但基本是兼容互用的。
2.2、做什么
在前端技术中,Html负责结构,CSS负责样式,Javascript通过在HTML页面中嵌入动态文本读写HTML元素添加交互行为,具体用途有以下几点:
1、对客户端浏览器的事件(加载、点击、移动鼠标等)做出响应,修改HTML标签属性、增加、删除HTML标签等。
2、在数据被提交到服务器之前验证数据
3、检测访客的浏览器信息
4、控制cookies,包括创建和修改等
5、基于node.js技术进行服务器端编程。
2.3、组成部分
该语言的提下架构有三部分组成:
2.4、在Html文档中如何使用
3、组成部分一:ECMAScript
3.1、变量及数据类型
JavaScript是一种弱类型的程序设计语言,使用关键字var(也可以不用)声明变量也可以,根据赋值自动识别该变量的数据类型。安全的编程是:使用var声明同时初始化。
3.1.1、基本数据类型
b、常量
就是字面变量,只要赋值在其生命周期内就不允许改变值,值可以是除undefined类型的基本数据类型和对象类型,语法格式为const 变量名:数据类型 = 值;。JavaScript中有个内置的数字常量NaN,表示“非数值”,程序由于某种原因发生计算错误后将会产生一个没有意义的数值,此时JS引擎就会返回NaN。
b、Number类型
主要是整数(varnum1 = 36;)和浮点数(var num2 = 36.00;)。
c、Boolean类型
布尔类型表示一个逻辑数值,只有两个取值true和false,当把数值类型转为Boolean类型时,只有0及0.0是false,其他数值都是true。var bool = true;
d、undefined类型
指仅声明未赋值的变量。如varperson;当在浏览器中使用documen t.write(person + '<br\>');打印出来时会输出undefined。
e、null类型
指该变量被赋予了空值,null不同于空的字符串、0或undefined。如var car =null; 在浏览器中使用documen t.write(car + '<br\>');打印出来时会输出null。
3.1.2、对象Object类型
就是3.5中使用var声明但是使用自定义对象或者内置对象赋值的变量,这种变量内部既包含属性也包含方法。
3.1.3、JS变量的作用范围
是指可以访问该变量的代码区域。
a、全局变量
这种变量通常定义在函数体外,所以可以在整个HTML文档中使用。
b、局部变量
这种变量通常定义在函数体内,所以只能在在函数体内使用
3.2、运算符和表达式
3.2.1、算术运算符
普通运算符: +加 -减 *剩 /除 %取余 ++自加 --自减
位运算符:&与运算 |或运算 ^异或运算 ~取补运算 <<左移位 >>右移位
3.2.2、赋值运算符
基本赋值运算符:=
与算术运算符组合型:+= -= *= /= &= |= ^=
3.2.3、关系运算符
== 、 != 、> 、>=、<、 <=
3.2.4、逻辑运算符
&&逻辑与 、 ||逻辑或 、 !逻辑非
3.2.5、条件运算符
条件表达式?表达式1:表达式2
3.2.5、表达式
表达式,是由字面数据、变量、运算符和分组符号(括号)等以能求得数值为目所进行的组合。可以分为两种:算术表达式是是通过算术运算符来进行运算的数学公式,逻辑表达式是通过四种运算符判断真假的表达式,比如赋值运算的结果永远是True。
一个表达式中,四种运算符和分组符号的优先级别大致为:分组符号→乘/除/余→加/减→关系运算符→逻辑运算符→赋值运算符;同级的运算是按从左到右次序进行;多层括号由里向外。
3.3、程序控制语句
3.3.1、条件判断语句
if语句 / if-else语句 / if...elseif语句
3.3.2、循环控制语句
while(){}语句 / do{}while()语句 / for(语句1;语句2;语句3){语句4}语句
3.3.3、跳转语句
跳转语句其实仅仅是属于控制循环的,但实际应用中通常是放在循环语句内部的条件判断语句中。
break: 退出该语句所处的最内层的循环
continue:终止本次循环,直接执行语句3开始下一次循环
3.4、函数
JavaScript虽然也支持对象编程,但实际工作中仍然采用函数式编程,一段js程序中大约95%的代码都包含在函数中。JavaScript是事件模型的程序语言,网页中的页面加载、用户单机、移动光标等都会产生事件,当Html就通过事件属性产生这些事件时,就会调用js中的对应函数响应这个事件。
3.5.1、自定义函数
第一步、定义函数
第二步、调用函数
3.4.2、JS引擎内置函数
JS引擎中自带一部分函数,这些函数不用引入也不用自定义就可以直接调用,使用这些函数可提高编程效率,以下是常用的5个......
a、eval函数
接受一个字符串类型的参数,将这个字符串作为代码在上下文环境中执行,并return执行结果。
b、isFinite函数
如果参数是数值类型且是有限型就返回true;如果是数值类型但非有限型或者是非数值类型就返回false。如isFinite(-3)就返回ture;isFinite(12/01)就返回false。
c、isNaN函数
如果参数为为保留值NaN,就返回true;如果不是保留值就返回false。如isNaN(123)就返回false,isNaN(2009/1/1)就返回true。
d、parseInt和parseFloat函数
parseInt函数可以把整数型字符串转换为整数,parseFloat函数可以把浮点型字符串转换为浮点数。
e、Number和String函数
Number函数可以把参数对象转换为数值,String函数可以把参数对象转换字符串。
f、JS引擎内置类和DOM对象/BOM对象提供的函数
3.5、JavaScript面向对象编程
3.5.1、自定义类和对象
JavaScript虽然也支持对象编程,但实际工作中仍然采用函数式编程,一段js程序中大约95%的代码都包含在函数中。所以这里就不介绍JavaScript中类和对象的使用方法了,仅仅介绍JS引擎中内置的几个对象。
3.5.2、JS引擎内置类
a、字符串类String
定义对象 | var myString = "This is a <b>sample</b>" ; | 两种声明定义形式,效果及使用方式都是一样的 | |
var myString = new String("This is a sample") ; | |||
常用属性 | length | myString.length就是该字符串的长度 | |
常用方法 | charAt() | 根据指定位置返回对应的字符 | |
indexOf() | 返回指定的字符(串)在原字符串中第一次出现的位置 | ||
substr() | 根据开始位置和长度截取字符串并返回 | ||
substring() | 根据开始位置和结束位置截取字符串并返回 | ||
split() | 根据指定字符分割原字符串并返回一个数组对象 | ||
replace() | 根据指定字符串替换指定字符串并返回修改后的字符串 | ||
toLowerCase() | 无参数,返回原始字符串的全小写后的字符串 | ||
toUpperCase() | 无参数,返回原始字符串的全大写后的字符串 |
b、数学类Math
使用逻辑和字符串类是一样的,实际使用的时候可以查阅手册文档。
c、日期类Date
使用逻辑和字符串类是一样的,实际使用的时候可以查阅手册文档。
d、数组类Array
使用逻辑和字符串类是一样的,实际使用的时候可以查阅手册文档。
3.5.3、内置对象:DOM和BOM
4、组成部分二:文档对象模型(DOM)
提供处理html/xml文档的API,实现对元素节点属性、文本和元素节点的动态的增删改查。W3C DOM能处理html和xml文档;有些接口只适用于html文档,这些接口属于HTML DOM;有些接口只适用于xml文档,这些接口属于XML DOM;所以HTML DOM和XML DOM的方式基本不会使用到,使用W3C DOM就足够了。
4.1、DOM主体架构继承图
a、node接口
此对象并不代表某个节点,而是代表文档所有节点的通性,主要有3个子对象
| 名称,类型或返回类型 | 说明 |
属性 | parentNode:Node | 该节点的父节点 |
childNodes:Node[] | 该节点的所有子节点的集合,length属性代表子节点个数 | |
firstChild:Node | 该节点的第一个子节点 | |
lastChild:Node | 该节点的最后一个子节点 | |
previousSibling Node | 该节点的上一个兄弟节点 | |
nextSibling:Node | 该节点的下一个兄弟节点 | |
nodeName:String | 该节点对应对的HTML标签名 | |
nodeType:String | 该节点的类型(共12种类型) | |
nodeValue:String | 该节点的元素值,多是文本内容 | |
方法 | appendChild( ) | 在该节点的最后一个子节点之后追加新节点 |
insertBefore( ) | 在该节点的指定子节点之前插入新节点 | |
removeChild( ) | 该父节点指定删除某个子节点 |
b、Document接口
此接口并不代表某个节点,而是代表整个文档,有1个子对象HTMLDocument
Document | 名称,类型或返回类型 | 说明 |
属性 | documentElement:Element | 就是HTMLHtmlElement元素,对应<html>标签 |
方法 | getElementById( ) :Element | 根据html标签的id名获取该节点 |
createElement( ) :Element | 参数是html标签创建新节点,如img代表<img> | |
createTextNode( ) :Text | 创建文本节点,参数是文本内容 |
子对象 | 名称,类型或返回类型 | 说明 |
属性 | body:Element | 就是HTMLBodyElement元素,对应<body>标签 |
方法 | getElementsByName():Element[] | 根据name属性的值获取一个元素集合,length属性代表元素个数 |
write() | 输出文档到当前打开的浏览器窗口 |
c、Element接口
此接口才是代表文档中某个节点,,有1个子对象、一个孙子对象和一批重孙子对象,继承关系是Node—>Element—>HTMLElement,再往下就是一批重孙子对象了,具体对应html的一批标签。
Element | 名称,类型或返回类型 | 说明 |
属性 | innerText:Text | 通常作为纯文本设置标签文本 |
InnerHTML:Text | 通常作为HTML代码设置标签文本 | |
方法 | getAttribute( ):string | 根据属性获取该属性的值 |
removeAttribute( ):string | 删除该属性 | |
setAttribute( ):string | 为属性设置属性值 |
d、Text接口
此接口代表文档中的文本节点,比如<p>我是段落</p>,“我是段落”并不是直接存在p节点里,而是作为p节点内部的Text子节点的nodeValue存在。
该接口的继承关系是Node—>CharacterData —>Text。
4.2、DOM接口的实际应用
a、hmtl标签属性的增删改查
b、hmtl文本的修改
c、获取对象的第二种方式
d、创建HTML元素节点
e、创建新HTML文本节点
f、删除节点
5、组成部分三:浏览器对象模型(BOM)
BOM即浏览器对象模型,提供了处理浏览器对象的API,顶级对象是window对象,某些属性和方法的返回值也是window,并且html里或者js里使用window对象的属性和方法时不需要window.XXX这种新式,仅用属性名和方法名就可以了,常用属性和方法如下:
window | 名称 | 说明 |
属性 | status | 浏览器状态栏显示的文本 |
document | 就是DOM中的document对象,代表当前整个网页文档 | |
location | 就是在窗口地址栏中显示的URL | |
locationbar | 浏览器的地址栏 | |
toolbar | 浏览器的工具栏 | |
menubar | 浏览器的菜单栏 | |
statusbar | 浏览器的状态栏 | |
方法 | open() | 用于弹出一个窗口,里面是版权信息、警告等之类的话 |
close() | 弹出关闭当前窗口的提示框,有“是”和“否”俩按钮 | |
alert() | 提示对话框,仅“确定”按钮 | |
confirm() | 选择对话框,有“确定”、“取消”俩按钮 | |
prompt() | 输入对话框,有“输入框”、“确定”和“取消”俩按钮 | |
setInterval() | 这四个方法组合用于设置定时器,比如规定必须阅读完用户协议后,才把下一步按钮激活 | |
clearInterval() | ||
setTimeout() | ||
clearTimeout() |
BOM中的windows对象及其子对象虽然有很多属性和方法,但常用只有创建对话框。对话框的作用是用户与浏览器进行交流,有提示、选择和获取信息的功能,JavaScript提供了三个标准的对话框。
5.1、提示对话框alert()
5.2、选择对话框confirm()
5.3、输入对话框prompt()
6、浏览器JS引擎兼容案例及解决
6.1、为何会有兼容问题
浏览器的兼容可以分为两个方面,一是内核兼容:内核负责解析html和css语言,渲染页面,如果不同浏览器使用的内核不一样,在打开同一个HTML网页时就可能出现页面显示不一致的问题,主要体现在CSS样式方面;二是JS引擎兼容:JS引擎负责解释JavaScript程序,提供交互功能,如果不同浏览器使用的JS引擎不一样,在通过HTML页面解释同一个Java Script程序时就可能出现交互效果不一致的问题。
6.2、内核兼容的案例及及解决方案
案例一
以《3.5.1、调用函数》为例,在表单提交中,如果<input>使用submit按钮触发提交操作后,在IE和Firefox浏览器就会维持终端打印界面,但Chrome就一闪即过。解决方按:<input>使用button按钮触发提交操作,IE、Firefox和Chrome浏览器都可以维持终端打印界面。
案例二
W3CDOM里node节点下的insertBefore()函数,只有一个参数时,在IE浏览器里和appendChild()函数的功能是一样的,用以把参数元素对象插入在父节点的最后子节点后;但在Chrome和Firefox浏览器里,当调用此函数时console里就会报错缺少一个参数。解决方案:不要投机取巧,按W3C的标准规范书写,基于两个对象,第一个是被插入对象;第二个是参考对象。
案例三
形如的结构,在IE浏览器里元素节点HTMLDivElement只有两个子节点,节点名是
,但是在Chrome和Firefox浏览器里元素节点HTMLDivElement就有5个子节点,节点的nodeName是。这种差异会导致的两种情况是,根据childNodes数组的下标、firstChild属性、lastChild属性等插入新子节点时,要特别留意那三个看不见的节点;根据childNodes数组的下标、firstChild属性、lastChild属性等删除子节点时,也要特别留意那三个看不见的节点。
...................