前端之旅：性能优化

April 20 2017

Yahoo军规

网页内容

  • 减少http请求次数
    • 组合文件：将所有同类型文件组合到一起(images, css, js等)
    • CSS Sprites
    • Image Maps
    • Inline images(比如base64格式)
  • 减少DNS查询次数：每个引用的新域名(比如cdn)具有DNS查询的前端代价，你必须确保这个代价确实是值得的。
  • 避免页面跳转
  • 缓存Ajax
  • 延迟加载
  • 提前加载
    • 有条件
    • 无条件
    • 有预期的加载
  • 减少DOM元素数量
  • 根据域名划分内容（动静分离）
  • 减少iframe数量
  • 避免404

服务器

  • 使用CDN
  • 添加Expires 或Cache-Control报文头
  • Gzip压缩传输文件（对pdf作用不大）
  • 配置ETags
  • 尽早flush输出
  • 使用GET Ajax请求数据
  • 避免空的图片src
  • 减少Cookie大小
  • 页面内容使用无cookie域名（动静分离）

CSS

  • 将样式表置顶
  • 用代替@import
  • 避免CSS表达式（IE）
  • 避免使用Filters（IE）

Javascript

  • 将脚本置底或者使用deffer、async关键字
  • 使用外部Javascirpt和CSS文件（尤其是会重复访问的网页）
  • 精简Javascript和CSS（打包压缩）
  • 去除重复脚本
  • 减少DOM访问
  • 使用智能事件处理（比如事件代理）

图片

  • 优化图像（去除一些无用信息）
  • 优化CSS Sprite
  • 不要在HTML中缩放图片
  • 使用小且可缓存的favicon.ico

移动客户端

  • 保持单个内容小于25KB
  • 打包组建成符合文档

给网页设计师和前端开发者看的前端性能优化

基础知识：

  • 将样式表放在文档的顶部
  • 将JavaScript放在底部（可能的地方）
  • 尽可能减少HTTP请求
  • 从多个域名提供资源服务能增加浏览器并行下载的资源数量。

HTTP 请求与 DNS 查询

  • 浏览器受限于有多少请求可以并行发生。这也是为什么我们经常要使用子域名或者CDN；以便允许这些请求在数个域名上发生，允许同时发生多得多数量的请求。然而，一个新的域名被引用，HTTP请求会受制于一个耗时的DNS查询（某个介于20到120毫秒之间的值）
  • DNS查询代价很高，因此你需要决定什么才是对你的网站更合适的；承担查询的消耗或者只是由一个域名提供所有服务。

DNS 预取

如果你的网站不得不访问第三方域名的资源，这就牵涉到了DNS查询。幸运的是，有一个相当快又简单的办法来加速这个过程：DNS预取。DNS预取所做的恰恰就是凭证领餐，如下html

1
2
3
<head>
    <link rel="dns-prefetch" href="foo.com">
</head>

那行简单的内容将会告诉支持的浏览器去开始预取那个域名的DNS

资源预取

虽然作者给出了和DNS预取类似的方法，但是作者似乎也不太肯定，所以可以看下作者推荐的资料

CSS 与性能

  • 永远不要从其他资源域名提供服务 因为这会引起DNS查询并进一步延迟渲染。
  • 先提供服务 因此浏览器可以继续忙下去。
  • 合并它 因为不管怎样浏览器会获取所有CSS，你最好将所有这些压缩于一个HTTP请求。
  • 压缩并简化它 以便浏览器需要下载的少一些。
  • 缓存它的一切 以便上述的过程尽可能少的发生。

压缩与简化

对于你的文本资源，有两个实在很简单的事情是你能（而且也应该）做的；简化他们移除任何注释和空格，并且进一步的压缩它们大小。

.htaccess评估每一个到达请求，因此实际它有很多开销。这取自 Apache 文档 ：

你应该完全避免使用.htaccess文件，如果你可以直接访问http主服务器的配置文件的话。 使用.htaccess文件使你的Apache http server慢下来。任何你能包含进一个.htaccess文件的指令最好设置在一个字典块,因为它具有同样的效用并且有更好的性能。

压缩（Gzip）将任何基于文本的输入，基于重复的/可重复的字符串对其进行压缩。

优化图像

  • Spriting (精灵)
  • 视网膜图像
    一旦图像解压并在浏览器中渲染，有四倍数量于平常的像素需要存储于内存，视网膜图像消耗了内存并不很多的移动设备
    如果统计数据表明有足够富余，你就可以针对矢量图形优化，或者用字体图标代替位图。
  • 渐进的 JPGs
  • 完全不用图片，如果用适量纯CSS可以完成某种效果，那么久应该使用纯CSS来实现

CSS Sprites：鱼翅还是三鹿？

缺点

  • 拼合图片的时间成本会增加
  • 编码和维护的时间成本会增加
  • 不是所有图片都是背景
  • 错误的使用 Sprites 影响可访问性

编写高效的 CSS 选择器

  • 浏览器解析选择器是从右到左的方式。
  • 你的关键选择器会决定浏览器的工作量，因此，我们应该重视一下关键选择器（即匹配规则的最右一个选择器）
  • 拥有一个明确的关键选择器最大的好处就是你可以避免使用过度限制选择器

参考

http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html
http://www.oschina.net/translate/front-end-performance-for-web-designers-and-front-end-developers
https://developer.yahoo.com/performance/rules.html
http://www.zhangxinxu.com/wordpress/2013/04/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/
http://www.cnblogs.com/mofish/archive/2010/10/12/1849062.html
https://www.qianduan.net/css-sprites-useful-technique-or-potential-nuisance/
http://www.cnblogs.com/leefreeman/p/3993449.html
http://www.cnblogs.com/leefreeman/p/3998757.html
http://web.jobbole.com/35339/

avatar

神无

舍悟离迷，六尘不改。