好程序员分享Web前端知识之HTML

　　今天好程序员分享Web前端知识之HTML。Web前端技术由HTML、CSS和Javascript三大部分构成，而咱们在学习它的时候每每是先从某一个点切入，而后不断地接触和学习新的知识点，所以对于初学者很难理清楚整个体系的脉络结构。
　　一、BOM

　　BOM是BrowserObjectModel

　　的缩写，即浏览器对象模型，当一个浏览器页面初始化时，会在内存建立一个全局的对象，用以描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型，即BOM。BOM的核心对象就是window，window

　　对象也是BOM的顶级对象，其中包含了浏览器的6个核心模块：

　　document-

　　即文档对象，渲染引擎在解析HTML代码时，会为每个元素生成对应的DOM对象，因为元素之间有层级关系，所以整个HTML代码解析完之后，会生成一个由不一样节点组成的树形结构，俗称DOM树，document

　　用于描述DOM树的状态和属性，并提供了不少操做DOM的API。

　　frames-HTML子框架，即在浏览器里嵌入另外一个窗口，父框架和子框架拥有独立的做用域和上下文。

　　history-以栈(FIFO)的形式保存着页面被访问的历史记录，页面前进即入栈，页面返回即出栈。

　　location-提供了当前窗口中加载的文档相关信息以及一些导航功能。

　　navigator-用来描述浏览器自己，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。

　　screen-提供了浏览器显示屏幕的相关属性，好比显示屏幕的宽度和高度，可用宽度和高度。

　　二、DOM系统

　　DOM是DocumentObjectModel的缩写，即文档对象模型，是全部浏览器公共遵照的标准，DOM

　　将HTML和XML文档映射成一个由不一样节点组成的树型结构，俗称DOM树。其核心对象是document，用于描述DOM树的状态和属性，并提供对应的DOM操做API。随着历史的发展，DOM

　　被划分为1级、2级、3级，共3个级别：

　　1级DOM-在1998年10月份成为W3C的提议，由DOM核心与DOM

　　HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，容许获取和操做文档的任意部分。DOM

　　HTML经过添加HTML专用的对象与函数对DOM核心进行了扩展。

　　2级DOM-鉴于1级DOM仅以映射文档结构为目标，DOM

　　2级面向更为宽广。经过对原有DOM的扩展，2级DOM经过对象接口增长了对鼠标和用户界面事件(DHTML长期支持鼠标与用户界面事件)、范围、遍历(重复执行DOM文档)和层叠样式表(CSS)的支持。同时也对DOM

　　1的核心进行了扩展，从而可支持XML命名空间。

　　3级DOM-

　　经过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的全部内容，包括XML

　　Infoset、XPath、和XMLBase。

　　浏览器对不一样级别DOM的支持状况以下所示：

　　从图中能够看出，移动端经常使用的Webkit内核浏览器目前只支持DOM2，而不支持DOM3。

　　三、事件系统

　　事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的鼠标事件(mouse)发展到了移动端的触摸事件(touch)和

　　手势事件(guesture)，touch事件描述了手指在屏幕操做的每个细节，guesture则是描述多手指操做时更为复杂的状况，总结以下：

　　第一根手指放下，触发touchstart，除此以外什么都不会发生

　　手指滑动时，触发touchmove

　　第二根手指放下，触发gesturestart

　　触发第二根手指的touchstart

　　当即触发gesturechange

　　任意手指移动，持续触发gesturechange

　　第二根手指弹起时，触发gestureend，之后将不会再触发gesturechange

　　触发第二根手指的touchend

　　触发touchstart(多根手指在屏幕上，提起一根，会刷新一次全局touch)____

　　弹起第一根手指，触发touchend

　　更多关于手势事件的介绍请参考：

　　gesture事件处理复杂手势

　　DOM2.0模型将事件处理流程分为三个阶段，即事件捕获阶段、事件处理阶段、事件冒泡阶段，如图所示：

　　事件捕获：当用户触发点击事件后，顶层对象document就会发出一个事件流，从最外层的DOM节点向目标元素节点传递，最终到达目标元素。

　　事件处理：当到达目标元素以后，执行目标元素绑定的处理函数。若是没有绑定监听函数，则不作任何处理。

　　事件冒泡：事件流从目标元素开始，向最外层DOM节点传递，途中若是有节点绑定了事件处理函数，这些函数就会被执行。

　　利用事件冒泡原理能够实现事件委托

　　，所谓事件委托，就是在父元素上添加事件监听器，用以监听和处理子元素的事件，避免重复为子元素绑定相同的事件。当目标元素的事件被触发之后，这个事件就从目标元素开始，向最外层元素传递，最终冒泡到父元素上，父元素再经过event.target

　　获取到这个目标元素，这样作的好处是，父元素只需绑定一个事件监听，就能够对全部子元素的事件进行处理了，从而减小了没必要要的事件绑定，对页面性能有必定的提高。

　　四、HTML解析过程

　　浏览器加载html文件之后，渲染引擎会从上往下，一步步来解析HTML标签，大体过程以下：

　　用户输入网址，浏览器向服务器发出请求，服务器返回html文件;

　　渲染引擎开始解析html标签，并将标签转化为DOM节点，生成DOM树;

　　若是head标签中引用了外部css文件，则发出css文件请求，服务器返回该文件，该过程会阻塞后面的解析;

　　若是引用了外部js文件，则发出js文件请求，服务器返回后当即执行该脚本，这个过程也会阻塞html的解析;

　　引擎开始解析body里面的内容，若是标签里引用了css样式，就须要解析刚才下载好的css文件，而后用css来设置标签的样式属性，并生成渲染树;

　　若是body中的img标签引用了图片资源，则当即向服务器发出请求，此时引擎不会等待图片下载完毕，而是继续解析后面的标签;

　　服务器返回图片文件，因为图片须要占用必定的空间，会影响到后面元素的排版，所以引擎须要从新渲染这部份内容;

　　若是此时js脚本中运行了style.display="none"，布局被改变，引擎也须要从新渲染这部分代码;

　　直到html结束标签为止，页面解析完毕。

　　五、重绘和回流

　　当渲染树中的一部分(或所有)由于元素的规模尺寸，布局，隐藏等改变而须要从新构建。这就称为回流。好比上面的img文件加载完成后就会引发回流，每一个页面至少须要一次回流，就是在页面第一次加载的时候。

　　当渲染树中的一些元素须要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，好比background-color。则就叫称为重绘。

　　从上面能够看出，回流必将引发重绘，而重绘不必定会引发回流。会引发重绘和回流的操做以下：

　　添加、删除元素(回流+重绘)

　　隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

　　移动元素，好比改变top,left的值，或者移动元素到另一个父元素中。(重绘+回流)

　　对style的操做(对不一样的属性操做，影响不同)

　　还有一种是用户的操做，好比改变浏览器大小，改变浏览器的字体大小等(回流+重绘)

　　另外，transform

　　操做不会引发重绘和回流，是一种高效率的渲染。这是由于transform属于合成属性，对合成属性进行transition/animation

　　动画时将会建立一个合成层，这使得动画元素在一个独立的层中进行渲染，当元素的内容没有发生改变，就不必进行重绘，浏览器会经过从新复合来建立动画帧。

　　六、本地存储

　　本地存储最原始的方式就是cookie,cookie是存放在本地浏览器的一段文本，数据以键值对的形式保存，能够设置过时时间。可是cookie

　　不适合大量数据的存储，由于每请求一次页面，cookie都会发送给服务器，这使得cookie

　　速度很慢并且效率也不高。所以cookie的大小被限制为4k左右(不一样浏览器可能不一样,分HOST)，以下所示：

　　Firefox和Safari容许cookie多达4097个字节，包括名(name)、值(value)和等号。

　　Opera容许cookie多达4096个字节，包括：名(name)、值(value)和等号。

　　InternetExplorer容许cookie多达4095个字节，包括：名(name)、值(value)和等号。

　　在全部浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。

　　html5提供了两种在客户端存储数据的新方法：localStorage和sessionStorage,它们都是以key/value

　　的形式来存储数据，前者是永久存储，后者的存储期限仅限于浏览器会话(session)，即当浏览器窗口关闭后，sessionStorage中的数据被清除。

　　localStorage的存储空间大约5M左右(不一样浏览器可能不一样，分

　　HOST)，这个至关于一个5M大小的前端数据库，相比于cookie，能够节约带宽，但localStorage在浏览器隐私模式下是不可读取的，当存储数据超过了localStorage

　　的存储空间后会抛出异常。

　　此外，H5还提供了逆天的Websql和

　　indexedDB，容许前端以关系型数据库的方式来存储本地数据，相对来讲，这个功能目前应用的场景比较少，此处不做介绍。

　　七、浏览器缓存机制

　　浏览器缓存机制是指经过HTTP协议头里的Cache-Control(或Expires)和Last-Modified(或Etag)

　　等字段来控制文件缓存的机制。

　　Cache-Control用于控制文件在本地缓存有效时长。最多见的，好比服务器回包：Cache-Control:max-age=600

　　表示文件在本地应该缓存，且有效时长是600秒(从发出请求算起)。在接下来600秒内，若是有请求这个资源，浏览器不会发出HTTP

　　请求，而是直接使用本地缓存的文件。

　　Last-Modified是标识文件在服务器上的最新更新时间。下次请求时，若是文件缓存过时，浏览器经过If-Modified-Since

　　字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。若是没有修改，服务器返回304告诉浏览器继续使用缓存;若是有修改，则返回200，同时返回最新的文件。

　　Cache-Control一般与Last-Modified一块儿使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。

　　Cache-Control还有一个同功能的字段：Expires。Expires的值一个绝对的时间点，如：Expires:Thu,10Nov

　　201508:45:11GMT，表示在这个时间点以前，缓存都是有效的。

　　Expires是HTTP1.0标准中的字段，Cache-Control是HTTP1.1

　　标准中新加的字段，功能同样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control是高优化级的。

　　Etag也是和Last-Modified同样，对文件进行标识的字段。不一样的是，Etag

　　的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器经过If-None-Match

　　字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包304，有更新回包200。Etag和

　　Last-Modified可根据需求使用一个或两个同时使用。两个同时使用时，只要知足基中一个条件，就认为文件没有更新。

　　另外有两种特殊的状况：

　　手动刷新页面(F5)，浏览器会直接认为缓存已通过期(可能缓存尚未过时)，在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。

　　强制刷新页面(Ctrl+F5)，浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)，在请求中加上字段：Cache-Control:no-cache

　　(或Pragma:no-cache)，发包向服务从新拉取文件。

　　八、History

　　用户访问网页的历史记录一般会被保存在一个相似于栈的对象中，即history对象，点击返回就出栈，跳下一页就入栈。它提供了如下方法来操做页面的前进和后退：

　　window.history.back()返回到上一个页面

　　window.history.forward()进入到下一个页面

　　window.history.go([delta])跳转到指定页面

　　HTML5对HistoryApi进行了加强，新增了两个Api和一个事件，分别是pushState、replaceState和

　　onpopstate：

　　pushState是往history对象里添加一个新的历史记录，即压栈。

　　replaceState是替换history对象中的当前历史记录。

　　当点击浏览器后退按钮或js调用history.back都会触发onpopstate事件。

　　与其相似的还有一个事件：onhashchange，onhashchange是老API，浏览器支持度高，原本是用来监听hash变化的，但能够被利用来作客户端前进和后退事件的监听，而onpopstate是专门用来监听浏览器前进后退的，不只能够支持hash，非hash的同源

　　url也支持。

　　九、HTML5离线缓存

　　HTML5离线缓存又叫Application

　　Cache，是从浏览器的缓存中分出来的一块缓存区，若是要在这个缓存中保存数据，可使用一个描述文件(manifestfile)，列出要下载和缓存的资源。

　　manifest文件是简单的文本文件，它告知浏览器被缓存的内容(以及不缓存的内容)。manifest文件可分为三个部分：

　　-CACHEMANIFEST-在此标题下列出的文件将在首次下载后进行缓存

　　-NETWORK-在此标题下列出的文件须要与服务器的链接，且不会被缓存

　　-FALLBACK-在此标题下列出的文件规定当页面没法访问时的回退页面(好比404页面)

　　离线缓存为应用带来三个优点：

　　离线浏览-用户可在应用离线时使用它们

　　速度-已缓存资源加载得更快

　　减小服务器负载-浏览器将只从服务器下载更新过或更改过的资源。

　　十、Web语义化和SEO

　　Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，可以让人和搜索引擎都容易理解。

　　SEO是指在了解搜索引擎天然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的天然排名，得到更多的展示量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标。

　　搜索引擎经过爬虫技术获取的页面就是由一堆html标签组成的代码，人能够经过可视化的方式来判断页面上哪些内容是重点，而机器作不到。

　　但搜索引擎会根据标签的含义来判断内容的权重，所以，在合适的位置使用恰当的标签，使整个页面的语义明确，结构清晰，搜索引擎才能正确识别页面中的重要内容，并予以较高的权值。好比h1~h6这几个标签在SEO中的权值很是高，用它们做页面的标题就是一个简单的SEO优化。