@qgy18 贵站怎么做的优化啊，速度快到哭

yangqi

2016-01-30 00:35:33 +08:00

qgy18

2016-01-30 00:37:22 +08:00

https://imququ.com/post/summary-of-my-blog-optimization.html
其实还有好多蛋疼的策略，但我今天头疼得厉害，明天如果好了再来补充！

wdlth

2016-01-30 00:39:52 +08:00

看起来是把页面全缓存上了。

hienchu

2016-01-30 00:42:08 +08:00

我觉得载入的动画效果很巧妙

yangqi

2016-01-30 00:44:36 +08:00

all_js 和 all_css 缓存在 localStorage 效果还是很明显的

huangtao728

2016-01-30 00:45:17 +08:00

@hienchu 有载入动画？

abcfyk

2016-01-30 00:55:19 +08:00

这个好玩。谢谢推荐。值得研究一下。

hienchu

2016-01-30 00:59:21 +08:00

@huangtao728 貌似是 ios safari 效果，重新打开就没了

xiaodaigou

2016-01-30 01:07:46 +08:00

哈哈，瞬间好多回复 - -

huangtao728

2016-01-30 01:09:01 +08:00

@hienchu 快得即使有动画也看不到😂

finab

2016-01-30 01:13:06 +08:00

真的好快啊，不像请求了数据的样子

aivier

2016-01-30 08:24:58 +08:00

看了下 js 和 css 是 localStorage ，如果要更新，不能很方便的通知客户端又更新吧？用 Cookie 的话对缓存又不是很好
我自己用的是 WordPress+自己以前写的主题，没什么图片，文章图片也不大，感觉如果服务器不抽的话速度对于访客来说还是可以接受的，比一般人的要快一些吧~
折腾？好久没折腾了，过段时间优化下自己的图床

Bryan0Z

2016-01-30 08:49:12 +08:00

我去…真快

iTakeo

2016-01-30 08:59:55 +08:00

@aivier 使用 localstorage 更新也很简单啊，重新写入一遍就行了

denghongcai

2016-01-30 09:32:58 +08:00

只要不放在国外，这速度还是挺正常的吧……

qgy18

2016-01-30 10:18:44 +08:00

@aivier 可以更新的，我有 cookie 记录资源当前的版本。你清除那个名为 v 的 cookie ，或者改一下它的值，服务端就会内联输出全量资源了。
我的博客用的是比较老的方案，所有资源共享一个版本，因为我的资源个数少，也不经常变动。我们的业务中用的是改进后的方案，每个资源都有单独的版本，资源名一个字节，版本号一个字节，用 70 进制确保总体上 cookie 不会太长。
总的来说，资源存 localstorage 有很多细节要处理，例如如何保证在 cookie 被禁用 / localstorage 被禁用 / localstorage 被写满 / cookie 中的版本号存在，但 localstorage 丢失等等情况下都能正常工作。
另外， js 代码存在 localstorage 还有一个风险：如果网站有 xss ，可以修改用户 localstorage ，导致 xss 生效时间被拉长。这个问题我也解决了，大家可以改下我博客 all_js 那个 localstorage 内容，不会生效的（仅限最新的 chrome 和 firefox 下）。
手机打字太累，先写这么多。

chemzqm

2016-01-30 10:33:41 +08:00

这种代码放 localstorage 的做法会有很多弊端：
1. 首次访问用户需要重新加载两次页面
2. 浏览器无法并发请求 css javascript 资源，如果使用 http2 的话加载速度应该会下降
3. 灵活性很受限制，例如不同页面使用不同 css js 资源
4. 调试麻烦，还要考虑更新的策略
5. css 也放 localstorage 会导致禁用 js 用户无法获得 css

aliuwr

2016-01-30 10:36:05 +08:00

@qgy18 光是支持 PubSubHubbub 我就要点个赞。 V 站就迟迟没有这个并不复杂的功能。

qgy18

2016-01-30 11:05:06 +08:00

@chemzqm
1 、为什么首次访问用户需要重新加载两次页面？这个难以想象，如果有这种严重问题，这个方案如何能发布上线。

2 、这个方案我们业务中只针对移动端使用。你也可以看到百度 / 神马移动搜索都采用了这个方案。这是移动端头部外链对性能影响特别大，会显著增加白屏时间。所以一般在移动端，宁可将资源完全内联来牺牲缓存，也不会在头部引入外链。 HTTP/2 的调研一直在做，但是在移动端普及还不理想，尤其是在 Android 端，只有 Chrome 47 才支持，随着时间的推移，优化手段也会随之改进的。对了， HTTP/2 的 Server Push 就是用来解决资源内联的问题，但 Server Push 也不是没有弊端，具体可以看我这几篇文章：
https://imququ.com/post/http2-and-wpo-1.html
https://imququ.com/post/server-push-in-http2.html
https://imququ.com/post/cache-aware-server-push-in-h2o.html
https://imququ.com/post/golomb-coded-sets.html

3 、前面说过，我们业务中实际的方案，如果 A 页面在 localStorage 中存放了 1 、 2 两个资源； B 页面需要 1 、 2 、 3 三个资源时，服务端只会输出 3 这个资源的全量内联。因为我们有高度压缩的 cookie 来存放资源标识及对应版本信息。

4 、确实，从字符串 eval / new Function 执行的代码不好调试。但我们有参数，禁用所有 localStorage 策略，这时候页面资源就跟普通内联没区别了。

5 、我们业务中有 noscript 标签，如果禁用 cookie ，会跳转到极速版——极速版不需要任何 JS 就可以工作得很好——因为我们正常版禁用了 JS ，就算 css 能加载也基本无法使用，交互太多了。

我的博客是我的试验田，我用在我博客中的策略并不一定适合用在业务中——这个我之前多次强调过。

而在业务中是否启用某个策略，需要更完善的考虑、数据支持以及配套设施。例如我们业务代码中所有资源都是外链形式书写，如果要编译为内联，加一个自定义属性即可；如果要内联 + localStorage ，就换成另外的自定义属性；如果什么都不加，那最后就会自动压缩合并 + 发布到 CDN 。

Troevil

2016-01-30 11:36:26 +08:00

@chemzqm
@qgy18

他的意思是首次进入,就是 localstorage 没有换存的时候,需要 reload 一次吧