HTML之基础介绍

阅读量：5977 次

发布时间：2019-06-20

本文共 4362 字，大约阅读时间需要 14 分钟。

HTML之基础介绍

简单介绍html的历史、html文档的结构，同时也拓展了其他前端知识点，如样式脚本的异步加载、页面渲染原理及优化！

html的历史

html诞生于1993年，应用最广泛的为html4和xhtml，现在最新版本为html5。html全称超文本标记语言（英语：HyperText Markup Language），它是一种用于创建网页的标准标记语言，页面内可以包含图片、链接，甚至音乐、程序等非文字元素。如果页面需要考虑兼容性（如需兼容至ie8），提出几条具体建议：

编写格式严格的html语法，了解html5的最新特性！

所有标签属性加引号：<p id="pp"></p>

所有标签使用小写形式

属性值不进行省略：<input type="checkbox" checked="checked"/>

自闭合标签需要闭合：<br/>

在线兼容性查询网站：

html规范

html控制结构，css控制样式，js控制行为，如何组织代码结构？提高首屏渲染速度？进行seo优化？下述规范来自于网易NEC规范~

            
            
            
            html基本介绍                
            
            
            
            
            
                    
            
            
            
            
            
            
            
            
            
                    
                            
            
                
     hello world！

补充衍生

从输入网址到显示网页的过程中发生了什么？

发生了什么过程？

用户输入url，客户端从服务器获取数据

客户端获取数据后开始渲染页面

获取数据的过程？

查找浏览器缓存

输入地址url，通过dns解析获取对应的ip

浏览器通过tcp三次握手建立tcp/ip链接

浏览器通过tcp/ip发送http请求！

服务器永久重定向响应

浏览器跟踪重定向地址

服务器处理请求，服务器返回http响应！

浏览器显示html内容
浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯，而从缓存中直接读取

浏览器发出ajax请求！

浏览器渲染对应的事件

document.ready事件，表示dom已经加载完成（同步 JavaScript 会暂停 DOM 的解析。）（不包含图片等非文字媒体）【html5标准事件DOMContentLoaded】

window.onload事件，表示包含图片等所有元素都加载完成

document.onreadystatechange事件，当文档的readyState属性发生改变，readystatechange事件会被触发。

浏览器渲染原理及流程

原理和流程

浏览器渲染原理及流程

渲染引擎首先通过网络获得所请求文档的内容，接着对html文档进行渲染，渲染流程为：

解析html以构建dom树和css树 -> 构建render树（dom和css整合生成） -> 布局render树（根据信息计算元素的位置） -> 绘制render树（在屏幕绘制）

了解渲染流程，首先理解几个基本概念：

DOM Tree：浏览器将HTML解析成树形的数据结构。

CSS Rule Tree：浏览器将CSS解析成树形的数据结构。

Render Tree: DOM和CSSOM合并后生成Render Tree。

layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。

painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。

reflow（重排）：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

注意：上述过程是逐步完成的，但是渲染引擎会尽可能早的将内容呈现到屏幕！

重排和重绘对页面显示有何影响？

重排和重绘会迫使浏览器重新计算刷新页面，消耗计算机性能！良好的设计必须减少重排和重绘！具体规则如下：

display:none会触发重排！visibility: hidden会触发重绘！改变元素定位方式position、浮动float、盒模型等都可能触发重排！改变元素的背景色等会触发重绘！

如何优化？

优化的重点在于，如何减少重排重绘对页面的影响，为此有以下几点建议

减少修改html结构的次数，如文档片段、innerHtml等技术，对html只修改一次！避免在设置元素css属性后立即获取元素信息（如通过getComputedStyle获取宽高等信息），避免浏览器强制渲染页面！（现代浏览器对重排重绘进行了优化！）

外部样式和外部脚本

外部样式

通过link加载外部样式文件，css文件会并行下载，等待解析！具体规则如下：

外部样式文件不会阻塞dom的解析，但是会阻塞页面渲染！外部样式文件不会阻塞外部脚本的加载，但会阻塞外部脚本的执行（外部样式必须加载完成后js才会执行！）。

外部脚本

!(javascript)[]

通过script加载外部脚本文件，会阻塞html解析和渲染，等待js执行完后接着渲染！具体规则如下：

外部脚本文件默认会阻塞html解析！async属性，指外部脚本文件异步加载，加载完后立即执行！defer属性，指外部脚本文件异步加载，加载完后等待html解析完后执行（DOMContentLoaded 事件之前）

如何减少渲染阻塞节点？（前端性能优化之一）

传统的前端优化要点，具体可以参考“雅虎军规35条”

通过在\之前加载外部样式或脚本文件！（此时页面全部解析完成！）通过动态js代码加载外部文件，如在window.onload事件中调用loadScript函数！重要css样式或js代码可以直接卸载html文档当中！

前端缓存的机理？

前端缓存的分类？

服务端缓存，如：CDN

客户端缓存，浏览器对于静态资源（CSS,JS,图片）的缓存！

通过js对ajax获取的数据进行缓存！

为什么要使用缓存？

请求更快，在不影响交互的前提下，大大加快网站访问的速度！

节省带宽，对已缓存的文件，可以减少网络请求！

降低服务器压力，将静态资源放在多个节点上降低服务器压力！

浏览器缓存的机理？

浏览器缓存的分类？
- 强缓存，浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。
- 协商缓存，当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回（304），但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；若未命中请求，则将资源返回客户端，并更新本地缓存数据（200）。

如何设置缓存？
- http meta标签，<META HTTP-EQUIV="Pragma" CONTENT="no-cache">，这段代码告诉浏览器当前页面不缓存！
- 通过设置http头部信息，如：Expires（强缓存）、Cache-control（强缓存）、Last-Modified/If-Modified-Since（协商缓存）、Etag/If-None-Match（协商缓存）
  - Expires设置资源过期时间（绝对时间），Expires:Thu, 31 Dec 2016 23:55:55 GMT
  - Cache-control设置资源过期事件（相对事件，借助max-age属性！）（cache-control还有其他属性值，如public、private、no-cache、no-store等）
  - Expires和Cache-Control同时存在时，Cache-Control优先级高于Expires！
  - last-Modified/If-Modified-Since协商缓存，需要配合cache-control使用！（当强缓存失效时，浏览器携带If-Modified-Since头部。服务端接受后，将Last-Modified与资源最后修改时间进行确认，若文件更新了则200，否则304！）（缺点：文件可能定期刷新，但是内容没更新，导致缓存无法使用！）
  - Etag/If-None-Match协商缓存，需配合cache-control使用！（当资源过期时，浏览器携带If-None-Match头部。服务器接受后，将Etag与资源标识符进行对比，若相同则304，否则200！）（etag解决了上述问题，etag由服务器生成的资源标识符！）