## 一、Web语义化 html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i 等等，另外html5 还新增了很多语义化的标签，比如，header,acticle,aside,section,footer,audio,radio 等等。Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。 ## 二、页面渲染机制 1. 用户输入网址，浏览器向服务器发出请求，服务器返回html文件； 2. 渲染引擎开始载入html代码，并将HTML中的标签转化为DOM节点，生成DOM树； 3. 如果中引用了外部css文件，则发出css文件请求，服务器返回该文件； 4. 如果中引用了外部js文件，则发出js文件请求，服务器返回该文件后开始运行； 5. 渲染引擎继续载入html中的部分的代码，并开始解析前面返回的css文件，然后根据css选择器计算出节点的样式，创建渲染树； 6. 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标； 7. 如果body中的引用了图片资源，则立即向服务器发出请求，此时渲染引擎不会等待图片下载完毕，而是继续渲染后面的代码； 8. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排版，因此引擎需要回过头来重新渲染这部分代码； 9. 如果此时js脚本中运行了style.display=”none”, 布局被改变，引擎也需要重新渲染这部分代码； 10. 直到为止，页面渲染完毕。 ## 三、重绘和回流 当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。比如上面的img文件加载完成后就会引起回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。 ## 四、本地存储 html5提供了两种在客户端存储数据的新方法：localStorage 和 sessionStorage, 它们都是以key/value 的形式来存储数据，前者是永久存储，后者的存储期限仅限于浏览器会话(session),即当浏览器窗口关闭后，sessionStorage中的数据被清除。 ## 五、浏览器缓存机制 浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来控制文件缓存的机制。 ## 六、History路由机制 HTML5 对History Api 进行了增强，新增了两个Api和一个事件，分别是pushState、replaceState 和 onpopstate ## 七、HTML5离线缓存 HTML5离线缓存又叫Application Cache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。 ## 八、Canvas和SVG Canvas 通过Javascript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。 SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。你可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。