前端性能优化

减少HTTP请求（CSS Sprites、内联图片和脚本、样式表合并）

只有10%~20%的最终用户响应时间花在了下载HTML文档商，其余80%~90%时间花在了下载页面的所有组件上。

CSS Sprites：

CSS Sprites也可以合并图片，但是更为灵活。CSS Sprites是将多个图片合并到一个图片中，CSS Sprites适用于任何支持背景图片的HTML标签中。通过使用CSS的background-position属性可以将元素放置到图片中期望的位置上面。

内联图片：

通过使用data:URL模式可以在Web页面包含图片但无需任何额外的HTTP请求。data:URL模式在1995年提议的，对它描述为：允许将小块数据内联为‘立即数’，数据就在URL自身中。其它类似的模式包括：ftp:、file:和mailto:。除此之外还有很多模式，smtp:、pop:、dns:等等。

合并脚本和样式表

将样式表放在顶部

将样式表放于文档底部会导致在浏览器中阻止内容逐步呈现。为了避免当样式变化时重绘页面的元素，浏览器会阻止内容的逐步呈现，也就出现了白屏 。白屏是对无样式内容闪烁的弥补，浏览器可以延迟呈现，知道所有的样式表都下载完成后。

将脚本放在底部

前面使用样式表的时候，页面逐步呈现会阻止，因此建议将样式表置于HEAD中，使用脚本时，脚本会阻止并行下载，脚本后面的内容，逐步呈现都被阻塞了，后面的组件下载都被阻塞了，将脚本放在页面越靠下的地方，意味着越多的内容能够逐步的呈现。

CSS的优化手段

由于在解析 CSS 选择器的时候是从右往左解析的，所以这种解析顺序决定了我们在写选择器的时候就可以有一些优化操作：

根据上面的代码，可以总结以下几点

1.尽量避免使用通配符 *，尽可能的只对用到的元素去匹配

2.少使用标签选择器，如果可以的话可以利用类来代替，例如上面的 1 和 2 的写法

3.对于嵌套较深的元素，在利用 CSS 匹配的时候尽可能的少嵌套，因为后代选择器的消耗是很高的。

4.对于 p.name 这种写法，如果只用一个 .name 就可以的话，那么就没必要写前面的 p，这样也可以减轻检索的消耗

JS 的优化手段

浏览器在遇到 script 标签的时候，会停止对 HTML 和 CSS 的解析，这是因为我们可以用 JS 修改 DOM，也可以修改样式，对于浏览器来说，它并不知道我们在 JS 里面做了什么操作，所以干脆就停止解析 HTML和 CSS，直接去下载执行 JS，省的会造成一些错误。

在浏览器遇到第一段 script 的时候，此时拿不到 div ，正是因为渲染 HTML 停止了，证明了 JS 可以阻塞 HTML 的解析

浏览器遇到第二段 script 的时候，此时已经解析完了 body 部分的 HTML 代码，所以可以拿到 div，但是因为 style 是在这个 script 后面执行的，所以此时拿到的 color 是默认颜色 rgb(0, 0, 0) ，也就是黑色。所以证明了 JS 可以阻塞 CSS 的解析。

最后一段，CSS 解析完了以后，就拿到了设置的颜色，红色，没有任何问题。

优化 JS 的建议：

.删除不必要的注释和空格

我们尽量把操作 DOM 相关的 JS 文件放到 body 后面，这样不会阻塞 HTML 和 CSS 的解析，毕竟，最快解析出来 HTML 和 CSS，呈现出一个页面给用户，是最主要的，就算此时只是一个静态的页面。