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-width: 480px)" href="phone-styles.css">
还可以在样式表内部中通过 @media 指令使用它。
@media only screen and (max-width: 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