浏览器渲染流程及如何提高页面性能优化

渲染的流程如下：

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

           自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

    2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式

    3.将CSS与DOM合并，构建渲染树（Render Tree）

    4.布局和绘制，重绘（repaint）和重排（reflow）

性能优化如下：

内容方面：

    1.减少 HTTP 请求 (Make Fewer HTTP Requests)

    2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)

    3.使得 Ajax 可缓存 (Make Ajax Cacheable)

针对CSS：

    1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)

    2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

    3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)

    4.避免 CSS 表达式 (Avoid CSS Expressions)

针对JavaScript ：

    1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

    2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

    3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

    4. 移除重复脚本 (Remove Duplicate Scripts)

面向图片(Image)：

    1.优化图片

    2 不要在 HTML 中使用缩放图片

    3 使用恰当的图片格式

    4 使用 CSS Sprites 技巧对图片优化