最近看到许多人在头痛pop 的点损问题，我想下面的这篇文章会很合适你，在我手机里面保存了很长时间, h# ~% M' j6 d9 [2 n6 q) t 虽然说的情况适用于国内，但是思路适用于全球: c) M1 |" M0 L . S% [ g+ t6 c( r& s& P 文章来自于苏洋的博客# A( g0 a6 Q' @" L4 e, ~ 2 W- d- |' j, u& A1 b) O3 t7 r9 C -----------------------------------------------------------------------------------------------------------/ M* c. n8 c+ e 6 R2 h4 N, G# @2 G* Z% P. K+ p1 }% c' y- Z 不知道从什么时候开始，不管是写独立博客，还是网络应用，甚至写托管博客的人都会朝着“大”网站看齐，去追求网站的响应速度，通俗点说，就是白屏时间，因为据各种报告说，网站打开速度更快一些，带来的用户体验就更好一些，从而带来更多的附加利益。但是对于用户来说，快，并不是简简单单请求数目尽可能少，和服务器吞吐能力尽可能大。那么，怎么快？" _, J9 i# B$ M; w8 p# T! ^ 7 j) n2 e+ [0 U. l 7 u9 z2 k7 r7 E8 U " t, Z1 I! \; z8 a1 @" U 谈到速度（参考物和例子稍后一起提），我们首先能想到的事物有：# S. f: e7 o/ f0 ?7 w 0 o1 n! L: U* y2 e- }) t 服务器机器性能 服务器机房带宽资源 服务器软件性能 DNS查询速度 页面资源压缩（服务端+客户端） 页面提供资源数量 页面资源加载时机 用户终端某时刻性能 用户终端浏览器性能 用户直观感受 [附加]异常流量情况- m9 q( Z! A- p ' M D* ^/ x. H4 s+ {# @9 H! g ' t& B$ O r) o1 U, K, s' Q, j: N+ V * W" M. C m9 [! I7 H* h & }6 j8 H& _6 d5 e7 V& j$ F ( {/ X. G8 P5 T4 K: J. S' x3 \" D( R 服务器性能 ! {& U$ M Z. Q9 F: G ; p1 m6 N8 d- t) H* t. ~, b1 G ) c& Q5 p4 L# N* T; n $ V, T4 x' Z- g+ | 就博客/网站主来说，我们应该使用尽可能更好的资源，但是非土豪的话，资源好到什么程度呢，答曰：够用。2 w# t$ v0 w: R6 G ( X' U; v7 x7 K" ?' Z2 }, ^. i3 {5 D+ q . `2 A. ]+ }9 L G) i' [ ( b0 U& F0 t( `8 k+ D/ H 这个“有余力”是你对网站/应用的访问量有评估后，并进行压测，观察机器负载得到的。. f- _) H9 p) j" v2 @% M0 W1 I , r, i% m, @+ G; [: ~) w 如果你的网站有大量文件IO/数据库读写操作，那么为了保证最佳性能，不妨尝试使用SSD，或者进行内存缓存等操作，一旦你使用内存缓存，那么整体的性能瓶颈多数情况下会从机器整体性能变为网卡/带宽，是不是可喜可贺。4 r9 D* s' p @ ) k* C. A6 M D. k ' J$ }- T* p$ l1 N' h6 m( \ & x- {# m1 B& L/ Q9 \ . r. \% r% k$ C3 X' ~8 v+ n0 O ( T# `, f2 n7 I, k+ Y' N9 ] 机房带宽资源 ! I* H( W$ E' Y7 `2 @7 n4 z' e. p ( r0 e2 `; i" b+ z2 R 带宽资源或许是除了高端存储设备外，价格最贵的资源之一了。所以，评估带宽是否满足你的站点，是特别重要的事情。4 s6 ]' b) a# \0 \2 d- X/ U & }+ b) M g; Y# |) e 一般来说小站点，1~2M的带宽绝对够用。如果不知道你的机器的带宽能力，不妨登录机器后台观察流量图峰值，或者机器安装speedtest-cli，来进行数据收集。$ m. i* |, R f+ N4 y% H 1 o. W4 o% d# I0 C& t, f; X 诸如我用过的机器，突发状况下能力为：- l7 {! D8 S/ J4 o. T0 R4 b 5 ?% w1 t$ H8 j! W, J. Q$ ~ % C. G+ K8 W3 J/ `& h8 k- u& r6 ? Linode 测速" S' I L! k" n Testing from Linode(X.X.X.X)... Selecting best server based on latency... Hosted byT-Mobile(West Norriton,PA)[104.63km]:79.475ms Testing download speed........................................ Download:53.68Mbits/s Testing upload speed.................................................. Upload:32.51Mbits/s " Q$ |2 j0 Z7 v+ Q3 w0 J- X* @ 7 h( o1 }& H: k: d4 M i* f" m( H- z0 H, J + O' ^3 a9 _2 G # M- K# D |7 k( E5 n2 H1 E# U) g Testing from HK DataCenter(X.X.X.X)... Selecting best server based on latency... Hosted by FPT Telecom(Hong Kong)[5.98km]:28.453ms Testing download speed........................................ Download:77.30Mbits/s Testing upload speed.................................................. Upload:4.45Mbits/s$ f& ]" U& |/ u4 Q' P0 l 6 W- Q9 R! A, S8 c0 B' V 5 C& b3 B# q' }) V# V4 c9 a/ |( s # P2 x7 S1 f! c . H3 F& m) }. b# }) n , n" k T. j3 y1 s, i 5 K. t" y) v- [7 m9 J8 Y 但是，综合现实因素，诸如政策和地理位置的原因，网站响应速度和机房有重大关系，比如，BGP机房线路智能负载后的响应时间可以达到10ms甚至以下，或者你可以尝试ping一下自己的本地服务器，响应时间感人，但是在祖国大地，如果你直接访问一些美帝国或者欧洲大陆机房则可能速度会增大几十到几百倍，甚至出现访问不能的状况。& a3 {5 D$ E6 M2 p$ [+ @% o: d & m& m3 M- s- T4 T8 ` ' c0 j7 I: [9 u- X8 h 3 y+ b* z& `& N& @ 国内无所谓，自己能访问就好，国外快快的： 美帝机房/加拿大机房/日本机房/韩国机房/欧洲机房 国内国外速度相对快的机房 港澳台机房/日本机房/韩国机房/欧洲机房 国内快速，国外可能访问不了的机房 各省市机房/学校机房/港澳台机房9 T5 q- g3 U( S $ `$ J7 D, j4 k% } 9 o- i; I, E& q1 \; m8 G 当然，你也可以根据自己情况选择CDN加速方案：# g/ q' u4 N# Q6 B ! [7 T5 q. D/ U5 L$ x 国内机房+国内外CDN 国外机房+国内外CDN! Z e9 N; S8 \, U% j" D 7 N, i9 D2 u8 ~ Y: F% f / Y2 v# v- N3 J I8 p 7 ?8 y2 i2 E' c) r ' W1 _: B: ~5 j9 s . `5 U' V% L6 d ! e+ e; U* C5 b! \: o1 [' X% a* I 服务器软件性能 g4 H: M& d( d! f' i ! R4 \9 @$ n1 E; `2 Y6 ^ “尺有所短，寸有所长”，软件也是一样，小站点，资源有限的情况下：6 c1 P- v$ ~. f. b3 e - [5 T8 j2 y2 B. z 如果你以前使用apache，且没有使用一些三方模块，或者不需要使用apache软件套装里的高级功能，或者没有软件必须依赖apache，以及三方模块能在nginx中找到替代的，可以考虑替换为nginx。 如果你的程序允许实现数据库缓存/站点内容缓存，但是没有使用缓存的，请开启缓存功能。 如果你的程序使用了文件缓存，在内存资源有富裕的情况下，请使用内存缓存（自己考虑缓存策略）。 如果你的程序原来的运行环境执行速度不够快，那么请考虑升级或运行环境，诸如php5.2->php.5.6+，或者php5.6->hhvm 3.x，asp/php->nodejs。 如果你的程序中多数功能你用不到，考虑使用更轻便的小程序。 如果你启用了缓存，且数据库（关系数据库）读取热数据频率高于冷数据，且访问量不是特别大，不需要考虑数据库效率，否则需要考虑数据库进行分库分表和建立适当的索引，以提高数据库吞吐能力。 根据自己情况适当调整nginx/mysql/redis/memcache等软件的数据分块大小。 优化程序关键逻辑的流程，尽可能让程序始终遵循最短路径结束任务。 尽可能让TCP链接重用，或者适当调整持久链接的时间和数量（Keep-Alive），以及考虑使用SPDY。 防火墙/服务器代理软件/程序对访客限制流量。 过滤或者禁止能力范围内的异常流量。& m$ ?, y6 M+ h- r1 @5 w; ~ . G6 O; r' `9 O% a+ Y* P 1 I# S3 z, P9 v- n# M2 r( C7 k, o1 Q DNS查询速度 ! a& L) Z8 R$ r# k9 T2 [2 y " U7 ]9 p) _% ^) B7 c/ e W 6 q2 T! N" _6 ~: a : n( u7 |2 ]4 {5 P; s 国内有两家DNS提供商比较不错：/ ~! E: B: f! {- |, T! U7 X& H7 E ! q" A+ t: k3 J; z DNSPOD DNSLA C [6 P( D: {3 a; c" m& B. ^ ( C4 m* c# A8 @( X( a1 p 7 D( n% j4 }% j) k3 `' I$ e . M, ?+ C+ }- I6 V( \. X; l2 j& ?; v 0 c, A7 L c( N1 n7 t2 X* a$ @0 l 比如，我的页面中可能存在资源域名和附件域名。如果页面在加载的时候，同时进行这两个域名的DNS缓存操作，接下来请求这两个域名的资源的速度会更加的快。3 E, Z9 a; \8 u( M7 \ ' G% f4 {4 J! B- @& {: E& H1 { 6 q" r6 m6 u2 }9 O <link rel="dns-prefetch"href="//7u2j6a.com1.z0.glb.clouddn.com"> <link rel="dns-prefetch"href="//7u2mwv.com1.z0.glb.clouddn.com">1 ?: F' Z, J* y, `$ F ; q v% U1 @3 c5 U - O; L) L" ]( f$ r! A 但是是否分离域名，请根据自己情况来。因为分离域名之后，不可否认的是，会带来额外的查询操作（查询本地缓存也算）。但是分离资源，可以使得程序更容易维护，以及对于程序整体安全性带来提高。5 `5 ]5 |$ E) W$ F; R1 n 4 j2 E& F+ l8 I1 h 解释一下最后一句话，当初还在新浪的时候，翻看现在已然是大boss的ppt，其中提过这么一句话“执行不可写，可写不执行”。如果你的目录允许上传，那么上传目录的文件一定要限定不可执行，以及可以执行的目录，不可以进行写入操作，以免网页木马的上传，提高系统安全性。- O' ^' q5 I2 o. d8 X$ c! y 9 j9 k. r1 H4 c3 O 另外，如果你将网站数据分离，那么网站的迁移操作，将会变的十分简单。比如，我将网站在国内国外迁移了若干次，只是需要先同步附件和页面资源域名，然后改变这两个域名的指向，然后同步程序文件，改版域名指向即可。2 P2 U: O8 q s. j4 s5 P5 a * x4 o. A6 g) T+ _ 接下来，我们说说节约带宽和提高速度的一个大杀器：压缩。1 ]+ Y3 {8 r5 f+ F; Y9 B0 C8 Z- e* ~4 H 6 O" t3 e( y0 V3 V 页面资源压缩（服务端+客户端） : A6 Z: `: S" z, z6 s9 d 9 v9 c* F, X/ F 提到压缩，正常用户会想到的是rar/zip/7z，媒体爱好者想到的会是ABR/CBR/VBR/H.264，我们这类代码爱好者恐怕是gzip，如果你也是前端，可能你还会想到js compressor。) Z( y& o3 }; F. { + x6 S/ D" h4 E- T 服务器根据CPU能力，尽可能输出gzip后的资源。# X: l1 j* [* M- w p # o9 b) c+ L* h- b( g 2 X$ m+ Z3 y I' m7 V1 @+ |5 _ ! X- u0 d8 p9 c( P" M8 o " V! x1 T) h. k5 T0 e 替换或者提高压缩算法和策略。" F9 h0 e9 W9 ?, d2 g ! `# ~2 h6 b& d: e) t% J+ h& e, B ' X4 D" H# l+ ?) A 如果你有特别的客户端，可以考虑使用自定义的更高压缩比的压缩方式，这个做手机应用的童鞋或许接触过，和十年前大家压缩MP3以及做软件压缩包一样，使用自己软件算法和策略替代市面上已有的算法和策略。如果没有特别的客户端，那么我们不妨对图片和视频使用更好的压缩格式，比如webp和webm，以及适当情况下的gif替代png等。0 c/ M, z+ G, t- H; s9 ? 7 X" y$ y2 E* Z2 N' Q: {) p8 l 对静态资源内容适当排序。( @6 B% U; }5 d8 ?7 \! N( ~( V ; v R- d' j$ D8 C5 \) i7 @ / E& y$ T7 f2 N7 k5 s 如对最后生成的css文件进行排序可以提高gzip压缩比。& N$ G+ l: [& P, G3 X) d # Y D& H- L5 M( m0 U 适当添加页面额外内容，提高压缩比。6 @& f# i( q. d0 x6 S; W 9 V2 B; {7 X G. v: _; r6 M3 X + J" \- i' m7 d, U, X! J" X * e& L, j5 u: n; x7 Y# q$ f 4 i: T: \' O- \' m9 W1 T 使用脚本去掉多余的空格和换行。. v9 P0 [$ h4 w# |9 Y/ I 4 ^1 b j; |0 o$ i2 S * J4 a6 D& B; ]# Y# d; Z" X: ]6 c 9 w$ E2 y* ^8 W' i/ r" u% o . l& q" f) O p% p$ g 使用缩略图/响应式图片来替代页面中展示的原始图片。: P* B- ^( P8 r' _9 e# g4 b% X ; e) U; u; @3 k7 o+ w 4 k7 k! `" @1 ~ 传统模式下，我们可以使用服务端脚本thumb类库/CDN提供的图片缩略服务来进行资源的缩略图，来替换原始图片，并增加一些交互文本，对用户实现降级访问。如果用户浏览器支持CSS3，那么我们可以使用Media Queries特性来对内容图片进行切换。如果用户浏览器支持HTML5，我们可以使用image-set标签来进行图片响应式输出。 x0 B& k8 K' X; E% z 9 b# Y6 q5 C, v3 H7 I/ w ! B" w# g1 b5 B& d4 R% l: D , r% l! L# v6 C7 z, b+ M 页面提供资源数量 ' q7 L; e Q; a# C6 G & l: Y$ u3 q! G1 X5 M7 V; _ 尽可能减少同一时间的资源请求数量。& S5 _) t: V+ S" _' J 4 R' p5 n. \# m3 Z4 n6 p / M! Q) y; ]/ E/ c( v; X / {% p/ @- t% j8 p- H5 b 6 m/ a+ [, t" Y! S 对不同浏览器使用不同的脚本。- _& ^ I" [6 J6 @ # K0 Q2 O' w$ }0 e! \! Y 4 L8 y; }* Y( W0 O2 X . q8 `" e% y0 S% r 6 d8 \$ x2 v* C7 u: z 页面增量更新。, h1 M2 Q5 l% H' F 2 ~9 X1 q- Q2 A: U* _, L) ? ( A- ^# c9 j! Y9 t4 z 如果你的内容支持异步增量更新，那么使用接口更新增量内容的模式，来替换打开新页面的模式。曾几何时，这个被称作ajax页面局部刷新。. T5 D h" |( l. A $ Q9 U8 A# e6 y/ b 客户端缓存7 {" R) K- u8 w6 c, G 9 a9 I( N; @ H$ f8 z$ C& i 2 G. \; y! q0 z* H; a- C- V1 W/ Q 此处深坑，稍后留写一篇详叙，简单的说，尽可能给所有资源使用最长时间的缓存，对于不支持200 cache的客户端提供304 Modified缓存（前者不需要额外HTTP请求）。8 p" k) H8 G( H% G, x1 s 5 O, F8 L+ D3 y! n: f8 ^4 C. b1 _, A9 P 客户端本地缓存。 S4 J, @- t/ Y7 a6 X 5 [" x- C8 ~" } ; W& f5 b6 W) q 2 U1 R4 J1 [ T8 p! U - W+ N* q6 L9 w 上面提到的内容，多数属于道，现在我们来聊聊术。( l7 e/ x5 g# h) F% y 9 ?- n& m( G! X 页面资源加载时机 8 o* |/ p+ L# K/ w, D ) Y' l3 b. x( e) } b' Q* @5 L 8 h; m4 ]: b& j4 [3 ~+ D* O! G 8 L1 {! e. ^9 k0 f6 C( u3 v 把css放在文档顶部。 把js放在文档底部。 减少inline脚本的存在。* L/ U# N% p5 {) j" P, ~8 y 2 G6 m$ o6 L- S % e( S. V) ]- T/ D - }$ Q7 N3 k0 G: {$ r * O$ b9 Y6 U' ?4 K: _1 y% ^9 W, [ 将页面主要样式尽可能放在文档顶部。 将三方不可合并脚本尽可能放置页面底部。 将页面inline脚本尽可能替换为配置内容。( Q% [* {8 k$ L V" K j0 B$ t/ A% R2 Q : G$ I0 x! _0 y2 e+ _( F : z+ u+ m4 g/ h3 N: r _! q ' |7 r# i" E# x) ?- B 将三方不可合并的内容放在页面底部，一方面是出于维护的考虑，一方面是因为我们要使用JS加载器来控制资源的加载（这里需要将原本页面中的脚本替换为具体执行脚本所需要的inline脚本配置）。 Y2 p; C- @8 a9 t [, N . |9 Y$ P4 b1 e3 z h 做到如此，页面将会首屏渲染极快，以及页面卡顿大幅减少（大量动画情况另说）。5 C- _4 [9 Q; e1 ~% c ; }; x) ?) M6 |7 z) ~6 s 用户终端某时刻性能 . l9 t4 u/ h/ L9 B) L# A: z' m ' L/ U9 }8 e& f: v $ B" q! n: ]4 ]# g6 X8 M & x# b F5 q3 o- _0 x) E! c6 Y5 i2 d 8 i; C3 y' B* _% @$ P7 W ( ?9 I7 a j* u" F( _5 F 页面加载过慢，不妨检查网络环境是否有其他软件占用（下载工具/在线视频），并刷新页面。 资源加载失败，请刷新重试。+ e& W$ ~/ h, o# I3 R$ V# L" c) m 3 J2 g' V# H0 Y 8 q' I( w) |7 U' F* |+ Q 待页面加载完成，干掉以上提示。但是请权衡此内容的存储位置和脚本执行时机，考虑搜索引擎将提示和内容都缓存的情况。( X a* D! t& x* X3 U , g# ^* p7 G0 l2 U: I* Z 用户终端浏览器性能 9 ?/ h! f* L! z S- R ) A( p# K8 u+ b0 ]) S 如果你的用户使用者古老的浏览器，软件性能成为页面数据下载和渲染瓶颈，那么不妨给其一个提示，或者强制其使用新版本的浏览器进行访问：5 i N4 x6 z& t/ G / a. ~$ @, d3 U, k c$ z1 w$ Q 请更新浏览器以获得更加体验。 本站仅支持新的浏览器：A,B,C。 为了您的访问速度和安全考虑，我们推荐您安装：X,Y,Z。 您是不是打开太多页面了，请考虑关闭无用的页面，加快本页面打开速度（这招请考虑道德问题）。% i- Z' @. E" a; R; l1 U $ e9 f) ]' L) v7 N/ v, @) R 3 Y" [3 |2 u. Z; f8 G $ D7 t4 k. Y$ \) a2 H1 [: @ . v' @$ u2 O4 p U0 q! W$ K! u 用户直观感受 1 i8 U6 {2 t1 F5 z & S8 z; _' Y7 R: H* F+ U% g % o( M7 e# g; T( U% M. J% ?, c 5 O. ?& L5 N. S. c 一句话以蔽之，用上面的方法，不要放过任何可以加快数据展示的方法，给用户尽可能最快的体验。" _% K0 _3 J" S. e& s- j# R! t, t, l 4 [4 w, F. B$ s* w$ ] % r, L) f6 \7 A 8 f6 N: r7 ]: V( S1 X3 u" Y [附加]异常流量情况 + @+ S7 Q! W% j6 a3 [ $ w, m+ C5 G4 I/ {% G 异常流量可能存在以下状况：7 m7 ], a; V2 |9 ^1 \! N! m & N( {' |4 p( G! P* _ 搜索引擎蜘蛛不约而同的来采集你的网站内容。% ^) y' h, J9 C* W" J ) m7 ~7 S* h; ~% u. u5 N% M 9 |' h: Y, n+ Z8 b/ G. f W 适当干掉一些你不喜欢和需要的蜘蛛，诸如俄罗斯的一堆等，或者小众浏览器搜索引擎。在sitemap中增加访问时间间隔，或者考虑对不同蜘蛛输出不同时间。内容添加缓存。; H& W T0 c. a7 v ! H2 b: F7 \9 Q0 S 内容引发热点，真实访问量大增。) m- z+ [" N) k6 c, O) r( U / m0 _% I7 A" `3 f$ t/ r 1 |) q* X5 ~, A( M3 E U. E5 K. N 内容确实有趣/有争议/有实用价值，用户访问量增加，如果你是盈利的，那么加机器吧，如果你是非盈利的，兴趣驱动，无广告的，诸如我这类小博客的，加缓存，或者加免费CDN，或者使用DNS进行多机负载。0 E6 m( |, I; H8 @* M/ e+ W9 e 三方无聊的恶作剧/利益相关的恶意攻击/错误的域名指向- H- D! {8 f. i& {3 D; d' k : N8 o# M- n$ ]% W # S5 [- E, I4 X4 e 5 X8 g$ i1 ~3 M$ S1 N( g5 m 6 t- l3 v4 h5 w7 M 如果是SYN的话，瓶颈在带宽资源/机器资源/机器流量限制，可以考虑切换DNS（前提是有备份机器）。4 x3 r. F& L0 [/ n8 z* l- T, d 7 i8 F$ Y1 u9 J+ w 5 J' Q3 O- E2 Y2 }0 n ]' M! ] 2 b- W8 W! O8 h+ d E! N 1 B7 n. Z- ?3 ?7 i" i + I! `2 i5 p) {$ }# B0 h 你是盈利的，对用户承诺SLA，那么请考虑加硬件，加CDN，过滤IP。 你是非盈利的，诸如我这类blog，加内容缓存就好了，自己实测，压满了带宽，机器负载还是0.5以下，当然如果带宽大的话，那么机器估计压挂。如果你有备份机器，那么切换下DNS，或者除了当前域名外，使用三方托管页面进行博客备份，诸如Github Page/Issue、新浪博客之类的BSP。7 V& }* R& y( p# N; }! o- F2 I5 e! L - f% n& \, @) v0 Q $ \. o: o( H# w! R: u5 I( M% o% Q5 k 暂时先写到这里，稍后把客户端缓存/参考物和优化后的对比的坑填了。% g" x8 i, Y1 O& o: T& d! y 3 q$ S: K' Z$ n# |, h# O 3 v A+ e% g* t0 T' K9 v5 g5 \ , \! D) N, {, R. [ 晓白，2015.1.10 {3 j% r' D$ Z5 \ 5 `' N+ j7 ?4 D
查看全部评分
相关帖子
发表于 2016-7-21 17:06:25
发表于 2016-7-21 17:37:37
发表于 2016-7-21 17:50:03
发表于 2016-7-21 17:52:50
发表于 2016-7-21 18:27:41
看完感觉很一般，而且国内的没啥参考意义。。。
