菜单开关

周梦康 发表于 2017-08-05 3863 次浏览 标签 : 网站架构实战

本内容的详细分享见我的直播 https://segmentfault.com/l/1500000010050212

性能优化的原则

  1. 性能优化是建立在对业务的理解之上的
  2. 性能优化与架构、业务相辅相成、密不可分的

性能优化的引入

我们先看一张简单的 web 架构图

亿级 pv 网站架构实战之性能压榨篇之前端优化

从上到下从用户的浏览器到最后的数据库,那么我们说先前端的优化。

前端优化

雅虎军规:http://www.cnblogs.com/paul-3/p/5999722.html

减少 http 请求数

  1. 图片、css、script等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。
    把多个JS、CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,小图拼合后利用 background 来定位。
  2. 现在很多 icon 都是直接做成字体,矢量高清,也减少网络请求数
  3. 现在的前端框架都会通过组件的方式开发,最后打包生成一个 js 或者 两个 js 文件 + 一个 css 或者两个 css 文件。

利用浏览器缓存 expires,cache-control,last-modified,etag

http://blog.csdn.net/eroswang/article/details/8302191
防止缓存,比如资源更新了,原来的做法是?v=xxxx 现在前端的打包工作可以能会生成 /v1.2.0/xxx.js

使用分布式存储前端资源

接地气利用 cdn 存储前端资源

多域名访问资源

  • 原因一:浏览器对同一域名的并行请求数有上限,多个域名则支持更多并行请求
  • 原因二:使用同一域名的时候无用的 cookie 简直是噩梦

数据压缩

  1. 开启gzip
  2. 前端资源本身的压缩,js/css 打包编译(去掉空格,语意简化)图片资源的压缩等。

优化首屏展示速度

  1. 资源的按需加载,延时加载 https://mengkang.net/229.html
  2. 图片的懒加载,淘宝的商品介绍太多图,用户点击进来又有多少人一直往下看图的呢?

评论列表