1.
<meta name="renderer" content="webkit"> 国产浏览器
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
2. canvas GPU渲染 animate.css
移动设备下，计算性能有限，图片较多时，应该用canvas来展示图片，因为img标签不会调用gpu渲染。
3.jquery width() webkitAnimationEnd
4.减少后代选择器
浏览器解析 CSS 选择器是从右往左的。这意味着，如果它看到
一个如“nav ul li a”的规则时，它首先必须获得所有匹配 a 的元素列表，然后检查看
它是不是 li 的后代，再按相同规则继续检查。后代选择器虽然看起来方便，但它的性
能开销是最大的。
5
http-equiv 元信息告诉浏览器如何去做，等效于设置了 HTTP 报头。这让你可以向浏览器传
达一些原本由服务器告诉它的内容。当你不能控制服务器时，它特别有用。例如，如果你想
设置一个缓存头，但又不能控制服务器，你可以使用 http-equiv 属性：
<meta http-equiv="expires" content="Wed, 05 August 2020 00:00:00 GMT">.
请注意， 服务器报头的优先级高， 所以只能设置或取消某一报头项， 不能覆盖服务器的报头项。
6
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
我用了一个 http-equiv 属性设置非标准的“X-UA-Compatible”报头。它的值是
chrome=1 和 IE= edge，如果 IE 用户安装了 Chrome Frame 插件，则可以使用这个插
件；如果没有安装，则使用 IE 浏览器最新、最好的引擎呈现，而不是以传统模式呈现。
7
<link rel="stylesheet" media="only screen and (max- 480px)" href="phone-styles.css">
还可以在样式表内部中通过 @media 指令使用它。
@media only screen and (max- 800px) {
/* css that applies only in this case */
}
8
如果一个 cookie 与请求的域名或路径相匹配，
它会伴随着每次请求发送（即上传）。所以，如果你在你的域名下的第一个请求中设
置了几千字节的 cookie，那么此后发送到这个域的每次请求都将把这些字节包含在
请求头里，然后发送、解压缩。服务器还必须在读取请求体之前读取这些 cookie。
cookie 可以把一个很小的请求变得很大。
9 性能问题
请求的数目
cdn
大文件 大文件较多时，向多个域请求 因为浏览器对同个域下的并行下载量有限制
10
Flickr 上，用户上传大尺寸的图像后，其他尺寸的图像会自动创建。正
因为这个实际的问题，Flickr 为每个图像生成 11 种不同的尺寸，包括常见的尺寸的高
密度显示的版本。
11 小屏幕自动请求小图像
<img/>标签无法实现，改用css的媒体查询，配合背景图片实现（改用背景图片后，图片的自适应可通过父元素的padding实现）
考虑到高分辨率的小屏幕手机，用image-set
12
媒体查询逗号分隔符 相当于or
and only not
13
浏览器缓存、本地存储（localStorage）和应用缓存（application cache）
新鲜度 验证 失效（非get请求不会用缓存）
Cache-Control: public, max-age=31536000
14
pushState(状态对象，标题，url)
不会刷新页面，不会触发change事件，同源（协议，域名，端口）机制
popState事件会不会触发跟浏览器有关
15
PJax pushState结合ajax，再建立前端路由机制，单页应用
16
