语言基础

Doctype

Doctype 声明于文档最前面，告诉浏览器以哪种方式来渲染页面。

有两种模式：

• 严格模式：排版和 JavaScript 运作模式是以该浏览器支持的最高标准运行

• 混杂模式：向后兼容，模拟老式浏览器，防止浏览器无法兼容页面

HTML 语义化标签

正确的标签包含了正确的内容，结构良好，便于阅读，比如 <nav> 表示导航条，类似的还有 <article>, <header>, <footer> 等标签。

iframe

<iframe> 元素会创建包含另一个文档的内联框架。

优点：

1. xx

2. xxx

缺点：

1. 会阻塞主页面的 onload 事件

2. 不利于 SEO，搜索引擎无法解读这种页面

3. iframe 和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能

href 和 src 的区别

defer 和 sync

浏览器渲染页面

1. 解析 HTML 文件，创建 DOM 树

   • 自上而下，遇到任何样式（link, style）和脚本（script）都会阻塞

   • 外部样式不阻塞后续外部脚本的加载

   • ...

2. 解析 CSS

3. 将 CSS 与 DOM 树合并，构建 Render Tree

4. 布局和绘制

   • 重绘 repaint

   • 重排 reflow

HTML5 新特性

1. 语义化标签

2. 表单控件：丰富了 input 的类型，新增了 calander date time email url search

3. 多媒体：audio video source embed track

4. canvas 绘图，支持内联 SVG，支持 MathML

5. 存储方面

   • 客户端存储：sessionStorage, localStorage

   • 本地离线存储（manifest 配置文件）

6. 多线程编程的 web worker 和 websocket 协议

7. 其它

   • 地理定位

   • 移除过时标签