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

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

创新互联公司于2013年创立,先为通城等服务建站,通城等地企业,进行企业商务咨询服务。为通城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

  1 、 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- 提供了浏览器显示屏幕的相关属性,比如显示屏幕的宽度和高度,可用宽度和高度。

 

  2 、 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 。

 

  3 、事件系统

 

  事件是用户与页面交互的基础,到目前为止, 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

 

  获取到这个目标元素,这样做的好处是,父元素只需绑定一个事件监听,就可以对所有子元素的事件进行处理了,从而减少了不必要的事件绑定,对页面性能有一定的提升。

 

  4 、 HTML 解析过程

 

  浏览器加载 html 文件以后,渲染引擎会从上往下,一步步来解析 HTML 标签,大致过程如下:

 

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

 

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

 

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

 

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

 

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

 

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

 

  服务器返回图片文件,由于图片需要占用一定的空间,会影响到后面元素的排版,因此引擎需要重新渲染这部分内容 ;

 

  如果此时 js 脚本中运行了 style.display="none" ,布局被改变,引擎也需要重新渲染这部分代码 ;

 

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

 

  5 、重绘和回流

 

  当渲染树中的一部分 ( 或全部 ) 因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流。比如上面的 img 文件加载完成后就会引起回流,每个页面至少需要一次回流,就是在页面第一次加载的时候。

 

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

 

  从上面可以看出,回流必将引起重绘,而重绘不一定会引起回流。会引起重绘和回流的操作如下:

 

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

 

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

 

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

 

  对 style 的操作 ( 对不同的属性操作,影响不一样 )

 

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

 

  另外, transform

 

  操作不会引起重绘和回流,是一种高效率的渲染。这是因为 transform 属于合成属性,对合成属性进行 transition/animation

 

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

 

  6 、本地存储

 

  本地存储最原始的方式就是 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 ,允许前端以关系型数据库的方式来存储本地数据,相对来说,这个功能目前应用的场景比较少,此处不作介绍。

 

  7 、浏览器缓存机制

 

  浏览器缓存机制是指通过 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) ,发包向服务重新拉取文件。

 

  8 、 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 也支持。

 

  9 、 HTML5 离线缓存

 

  HTML5 离线缓存又叫 Application

 

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

 

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

 

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

 

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

 

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

 

  离线缓存为应用带来三个优势:

 

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

 

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

 

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

 

  10 、 Web 语义化和 SEO

 

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

 

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

 

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

 

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


网页名称:好程序员分享Web前端知识之HTML
转载来源:http://myzitong.com/article/pdegip.html