【web前端】花瓣画板分类归档查看工具

花瓣是国内最大的图片分享网站，部分用户长期以来都有对个人主页的画板按字母顺序进行归档的需求，但花瓣官方一直没有支持这个能力。

最近写了个油猴脚本用于按字母顺序归档主页画板。

仅供学习交流。

效果演示

注：由于我自己没几个画板，为了进行演示，这个图是我在别人的主页截取的。实际上使用这个工具时只在自己的主页生效。

优点

1. 安装简单
2. 使用方便，直接改变个人主页。不用打开别的软件或者界面。
3. 由于页面更加简单，并对图片渲染做了点优化，性能比原始页面更好。

安装和使用

1. 安装chrome扩展TamperMonkey(俗称油猴)
2. 安装花瓣画板归档脚本
3. 打开自己的画板查看效果
4. 按下首字母可以调到对应位置

5. 关闭/卸载

   • 在生效的页面点击TamperMonkey图标可以关闭脚本
   • 点击TamperMonkey选择dashboard可以全局管理脚本
   • 卸载TamperMonkey亦可

开发中的一些总结

1.协议分析

容易看到花瓣分段拉取画板的url形如http://huaban.com/xxx/?jp4z1e1x&limit=10&wfl=1&max=42190948
jp4z1e1x这段每次请求是自增的，大概是个sequence之类的东西。chrome查看请求的initiator，点进去可以看到调用的是String.uniqueID，搜一下具体实现是

var m = Date.now();
    String.extend("uniqueID", function() {
        return (m++).toString(36)
    })

跟猜测一致。不过这里我实际上不需要关注它的实现细节。油猴脚本是可以访问到一样的类型和函数的。
另外这里对请求的header也有要求，需要设置一下

xmlHttp.setRequestHeader("X-Request", 'JSON');
    xmlHttp.setRequestHeader("X-Requested-With", 'XMLHttpRequest');
    xmlHttp.setRequestHeader("Accept", 'application/json');

最后把limit字段调成需要的大小就好了。

2.图片较多时的渲染性能

一开始为了展示小图片，用的是background-image，

background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;

结果发现滚动的时候会卡。
跑了一下性能工具，发现主要是渲染耗时。
改成<img>标签性能会好一些，但是还是有点卡。
那么就只能去处理原始图片了。
一开始想的是通过canvas放缩、裁剪图片，再传给img标签。但是花瓣的图片是禁止跨域的，就是说虽然可以正常展示，但是用canvas去编辑是不行的。

最后发现，花瓣的图片用的是又拍云存的。又拍、七牛这些，都允许针对图片链接加点后缀返回指定的图片。这里用_/both/50x50使得拿到的图片限定大小50*50。使用原始大小的img，一个页面就算有几百张图，也一点都不卡了。

3.快捷键冲突

花瓣有定义一些自己的快捷键。比如按T会跳到页面顶部。这和我需要的跳到对应首字母分类的位置是矛盾的。
本来原有的时间监听我们是无法处理的，不过所幸花瓣把大量接口暴露在window.app变量里，找了一下相关的有window.app.hotkey.keyboard.$events和window.app.hotkey.keyboard.options.events，索性直接置为{}，花瓣的快捷键逻辑就没了。