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/>
- 在线兼容性查询网站：https://caniuse.com/
html规范
html控制结构，css控制样式，js控制行为，如何组织代码结构？提高首屏渲染速度？进行seo优化？下述规范来自于网易NEC规范~
<!DOCTYPE html>
<html>
<head>
<!--定义网页编码信息-->
<meta charset="utf-8"/>
<!--定义网页标题-->
<title>html基本介绍</title>
<!--定义网页信息，方便搜索引擎自动收集网站信息-->
<!--定义网页关键词-->
<meta name="keywords" content=""/>
<!--定义网页描述内容-->
<meta name="description" content=""/>
<!--/定义网页信息，方便搜索引擎自动收集网站信息-->
<!--优化网页在移动设备上的显示效果-->
<meta name="viewport" content="width=device-width"/>
<!--定义页面2秒后跳转指定链接。http-equiv还可以对cache、cookie等进行控制！-->
<meta http-equiv="refresh" content="2；URL=#">
<!--导入css样式表-->
<link rel="stylesheet" href="./css/01/style.css"/>
<!--设置网页的小图标-->
<link rel="shortcut icon" href="../source/img/favicon.ico"/>
<link rel="apple-touch-icon" href="../source/img/touchicon.png"/>
<!--设置css样式-->
<style>
.g-doc {
margin: 10px;
padding: 10px;
border: 1px solid #ddd;
box-shadow: 1px 1px 5px #aaa;
}
</style>
<!--设置或者导入js脚本-->
<script>
window.onload = function () {
alert('我是js脚本！')
}
</script>
</head>
<body>
<!--主要编辑区域-->
<div class="g-doc">
<p>hello world！</p>
</div>
<!--/主要编辑区域-->
<!--导入外部js脚本-->
<script src="./js/01/index.js"></script>
</body>
</html>
补充衍生
从输入网址到显示网页的过程中发生了什么？
发生了什么过程？
- 用户输入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)[https://image-static.segmentf...]
通过script加载外部脚本文件，会阻塞html解析和渲染，等待js执行完后接着渲染！具体规则如下：
外部脚本文件默认会阻塞html解析！
async属性，指外部脚本文件异步加载，加载完后立即执行！
defer属性，指外部脚本文件异步加载，加载完后等待html解析完后执行（DOMContentLoaded 事件之前）
如何减少渲染阻塞节点？（前端性能优化之一）
传统的前端优化要点，具体可以参考“雅虎军规35条”
通过在\<body/>之前加载外部样式或脚本文件！（此时页面全部解析完成！）
通过动态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由服务器生成的资源标识符！）
- 浏览器的处理流程！
本地无缓存的流程：
本地有缓存的流程：
-
浏览器缓存行为还与用户行为有关?
- 地址栏回车
- 页面链接跳转
- 新窗口打开
- 前进后退！
- f5刷新，对于强缓存无效（不适用强缓存），对于协商缓存有效！
- ctrl-f5刷新，对于强缓存和协商缓存都无效！
cdn缓存的机理？
js缓存的原理？
- 通过js的变量存储ajax获取的数据！
- 或者通过localStroage存储数据，本地
- 或者通过sessionStroage储存数据，会话数据！
参考链接
- 文章图片全部来自网络，如有侵权请联系删除
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。