问的人其实并不明白他想问的真正问题，回答的人貌似明白，但又好像少了点什么。牛逼的能力、新的接口、炫酷的效果，首先回答的人自己就是晕晕乎乎。什么是HTML、什么是CSS、什么是DOM、什么是JavaScript，大部分的前端开发每天都在用这些，但很少会有人去思考一下他们之间的关系。

准备做一个网页版聊天界面，表情啊、图片啊、上传文件啊都应该要有，视频就算了，语音还是要的。

本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器，前几天升了一下级，以后有时间再专门写一篇记录

采用HTML5网页录音技术上传数据，Recorder用于html5录音，为一个纯粹的js库，支持大部分已实现getUserMedia的移动端、PC端浏览器，包括腾讯Android X5内核(QQ、微信)。

录音默认输出mp3格式，另外可选wav格式（此格式录音文件超大）；有限支持ogg、webm、amr格式；支持任意格式扩展（前提有相应编码器）。

类似的问题肯定有很多，所以出来了CSS，层叠样式表，带来了css规则、css选择器、css声明、css属性等，这样以来就解决了以上痛点。标记语言这层解决了，但是浏览器就不能干坐着玩耍了，必然得提供支持。所以浏览器来解析一个静态html文件时，遍历整个html文档生成DOM树，当所有样式资源加载完毕后，浏览器开始构建呈现树。呈现树就是根据一系列css声明，经历了层叠之后，来确定一个个个DOM元素应该怎么绘制。这时候其实页面上还没有显示任何界面，渲染树也是浏览器内存里面的一种数据结构。渲染树完成之后，开始进行布局，这就好比已经知道一个矩形的宽高，现在要在画布量一量该画在哪，具体占多大地方。这个过程完了之后就是绘制的过程，然后我们便有了我们看到的显示界面了