今天，优秀程序员分享Web前端知识的HTML。Web前端技术由三部分组成：HTML、CSS和Javascript。我们在学习它的时候，往往是从某个点开始，然后不断地接触和学习新的知识点。因此，初学者很难理解整个过程。系统的上下文结构。 1。BOM BOM是BrowserObjectModel 的缩写，即浏览器对象模型。当浏览器页面初始化时，会在内存中创建一个全局对象来描述当前窗口的属性和状态，这个全局对象称为浏览器对象模型，即BOM。BOM的核心对象是window，window 对象也是BOM的顶层对象，包含了浏览器的六个核心模块： 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 分为Level1、Level2、Level3，共3层： Level1DOM——1998年10月成为W3C提案，由DOMCore和DOM组成 HTML由两个模块组成。DOM核心可以映射基于XML的文档结构，允许检索和操作文档的任意部分。DOM HTML通过添加特定于HTML的对象和函数来扩展DOM核心。 Level2DOM-DOMLevel1仅旨在映射文档结构，DOM Level2面向更广泛。2级DOM通过对原有DOM的扩展，增加了对鼠标和用户界面事件（DHTML早就支持鼠标和用户界面事件）、作用域、遍历（重复执行DOM文档）、级联样式表（CSS）的支持通过对象接口。支持。它还扩展了DOM 1核心以支持XML命名空间。 Level3DOM- 通过引入统一的文档加载和保存方式以及文档验证方法进一步扩展了DOM，DOM3包含一个名为“DOM加载和保存”的新模块，DOM核心可以扩展到支持所有XML1.0的内容，包括XML Infoset、XPath、XMLBase。 浏览器对不同层次DOM的支持情况如下： 从图中可以看出，目前移动端常用的Webkit内核浏览器只支持DOM2，不支持DOM3。 3。事件系统 事件是用户与页面交互的基础。到目前为止，DOM事件已经从PC端的鼠标事件发展到触摸事件（touch）和 手势事件（guesture），触摸事件描述了手指在屏幕上操作的每一个细节，而guesture则描述了更多多指操作的复杂情况。没有 手指滑动，第二根手指放下时触发touchmove ，gesturestart 触发第二根手指的touchstart 立即触发gesturechange 任意手指移动，gesturechange持续触发食指抬起时触发gestureend，不会再触发gesturechange 触发食指的touchend 触发touchstart（多指同屏，抬起一个，会刷新onceGlobaltouch)____ 轻弹第一根手指，触发touchend 关于手势事件的详细介绍，请参考： 手势事件处理复杂的手势 DOM2.0模型将事件处理过程分为分为三个阶段，分别是事件捕获阶段、事件处理阶段、事件冒泡阶段，如图： 事件捕获：当用户触发点击事件时，顶层对象文档会发送一个事件流，事件流会从最外层的DOM节点传递到目标元素节点，最终到达目标元素。 事件处理：当到达目标元素时，执行目标元素绑定的处理函数。如果没有绑定监听函数，则什么也不会做。 事件冒泡：事件流从目标元素开始，传递到最外层的DOM节点。如果任何节点在途中绑定到事件处理程序，这些函数将被执行。 利用事件冒泡的原理，可以实现事件委托 。所谓事件委托就是在父元素上添加一个事件监听器来监听和处理子元素的事件，避免为子元素重复绑定同一个事件。.当触发目标元素的事件时，事件从目标元素开始，传递到最外层元素，最后冒泡到父元素，父元素通过event.target 获得目标元素，这样做好处是父元素只需要绑定一个事件监听器就可以处理所有子元素的事件，从而减少了不必要的事件绑定，一定程度上提高了页面性能。 4。HTML解析过程 浏览器加载完html文件后，渲染引擎会从上到下一步步解析HTML标签。大致流程如下： 用户输入网址，浏览器向服务器发送请求，服务器返回html文件； 渲染引擎开始解析html标签，将标签转化为DOM节点，生成DOM树； 如果head标签中引用了外部css文件，发送css文件请求，服务器返回文件，此过程会阻塞后续解析； 如果引用了外部js文件，会发送一个js文件请求，服务器返回后立即执行脚本，这个过程也会阻塞html的解析； 引擎开始解析body里面的内容，如果标签引用了css样式，需要解析下载的css文件，然后使用css设置标签的style属性，生成渲染树； 如果body中的img标签引用了图片资源，则立即向服务器发送请求。此时引擎不会等待图片下载完毕，而是继续解析后面的标签； 服务器返回图片文件。由于图片需要占用一定的空间，所以会影响后面元素的排版。因此，引擎需要重新渲染这部分内容； 如果此时在js脚本中运行了style.display="none"，布局发生了变化，引擎也需要重新渲染这部分代码； 直到html标签结束，页面才被解析。 5.重绘和回流 当由于元素的大小、布局、隐藏等发生变化，需要重新构建渲染树的一部分（或全部）时。这称为回流。比如上面的img文件加载后，会引起回流，每个页面至少需要一次回流，也就是第一次加载页面的时候。 当渲染树中的某些元素需要更新属性时，而这些属性只影响元素的外观和样式，不会影响布局，比如background-color。这称为重绘。 从上面可以看出回流一定会引起重绘，重绘不一定会引起回流。会引起重绘和重绘的操作如下： 增删元素（重绘+重绘） 隐藏元素，显示：无（重绘+重绘），可见性：隐藏（只重绘，不重绘） 移动元素，比如改变top和left的值，或者将元素移动到另一个父元素。（重绘+重排） 对样式的操作（不同的属性操作有不同的效果） 还有一个用户操作，比如改变浏览器的大小，改变浏览器的字体大小等。(reflow+redraw) 另外，transform 操作不会造成重绘和reflow，是一种高效率的渲染。这是因为transform是一个复合属性，在复合属性上动画transition/animation 时会创建一个复合层，使得动画元素在单独的层中渲染。当元素的内容没有变化时，就没有重绘的必要，浏览器通过重新合成来创建动画帧。 6。本地存储 本地存储最原始的方式就是cookie。Cookie是存储在本地浏览器中的一段文本。数据以键值对的形式保存，可以设置过期时间。但是cookie 不适合存储大量数据，因为每请求一个页面，cookie都会被发送到服务器，这使得cookie 非常慢，效率低下。所以cookie的大小限制在4k左右（不同的浏览器可能不同，分为HOST），如下图： Firefox和Safari允许cookie最大4097字节，包括name（名称），value（值)和等号。 Opera允许cookie最大4096字节，包括：名称（name）、值（value）和等号。 InternetExplorer允许最大4095字节的cookie，包括：名称（name）、值（value）和等号。 在所有浏览器中，任何大于限制的cookie大小都将被忽略并且永远不会设置。 HTML5在客户端提供了两种新的数据存储方式：localStorage和sessionStorage，它们都是以key/value的形式存储数据 ，前者是永久存储，后者的存储期限是有限的浏览器会话（session），即当浏览器窗口关闭时，sessionStorage中的数据被清空。 localStorage的存储空间约为5M（不同浏览器可能不同，分为 HOST），相当于一个5M的前端数据库。与cookies相比，可以节省带宽，但是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可以根据需要同时使用一个或两个。当两者同时使用时，只要满足base中的其中一个条件，就认为该文件不被更新。 还有两种特殊情况： 手动刷新页面（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进行了增强，增加了两个Apis和一个事件，分别是pushState、replaceState和 onpopstate: pushState是history对象添加一条新的历史记录，也就是压栈。 replaceState是替换历史对象中的当前历史。 onpopstate事件会在点击浏览器后退按钮或者js调用history.back时触发。 还有一个与之类似的事件：onhashchange，onhashchange是一个旧的API，浏览器支持度很高。本来是用来监听hash变化的，但是可以用来监听客户端的前进后退事件，而onpopstate是专门用来监听浏览器的前进后退的。不仅支持hash，还支持非hash同源 url。 9.HTML5离线缓存 HTML5离线缓存又叫Application Cache，是与浏览器缓存分离的缓存区。如果你想在这个缓存中保存数据，你可以使用一个描述文件（manifestfile），列出要下载和缓存的资源。 manifest文件是简单的文本文件，告诉浏览器缓存什么（以及不缓存什么）。清单文件可以分为三个部分： -CACHEMANIFEST-该标题下列出的文件将在第一次下载后缓存 -NETWORK-该标题下列出的文件需要连接到服务器并执行not会被缓存 -FALLBACK-这个标题下列出的文件指定当页面无法访问时的回退页面（比如404页面） 离线缓存给应用带来三个好处： 离线浏览-用户可以在离线时使用应用 速度-缓存资源加载速度更快 减少服务器负载-浏览器只会从服务器下载更新或更改的资源。 10。网页语义与SEO 网页语义是指使用语义上合适的标签，使页面结构良好，页面元素有意义，易于被人和搜索引擎理解。 SEO是指在了解搜索引擎自然排名机制的基础上，对网站进行内外调整和优化，提高关键词在搜索引擎中的自然排名，获得更多的展示量，吸引更多的目标客户点击访问网站，从而达到网络营销和品牌建设的目的。 搜索引擎通过爬虫技术获取的页面是由一堆html标签组成的代码。人可以直观地判断页面中哪些内容是重点，但机器不能。 但搜索引擎会根据标签的含义来判断内容的权重。因此，在合适的位置使用合适的标签，可以使整个页面的语义和结构清晰，从而使搜索引擎能够正确识别页面中的重要内容，并给予较高的权重。比如标签h1~h6在SEO中的权重非常高，将它们作为页面的标题就是一个简单的SEO优化。
