資訊專欄INFORMATION COLUMN
摘要：花瓣是國內(nèi)最大的圖片分享網(wǎng)站，部分用戶長期以來都有對個人主頁的畫板按字母順序進行歸檔的需求，但花瓣官方一直沒有支持這個能力。
花瓣是國內(nèi)最大的圖片分享網(wǎng)站，部分用戶長期以來都有對個人主頁的畫板按字母順序進行歸檔的需求，但花瓣官方一直沒有支持這個能力。
最近寫了個油猴腳本用于按字母順序歸檔主頁畫板。
僅供學(xué)習(xí)交流。
效果演示注：由于我自己沒幾個畫板，為了進行演示，這個圖是我在別人的主頁截取的。實際上使用這個工具時只在自己的主頁生效。
優(yōu)點安裝簡單
使用方便，直接改變個人主頁。不用打開別的軟件或者界面。
由于頁面更加簡單，并對圖片渲染做了點優(yōu)化，性能比原始頁面更好。
安裝和使用安裝chrome擴展TamperMonkey(俗稱油猴)
安裝花瓣畫板歸檔腳本
打開自己的畫板查看效果
按下首字母可以調(diào)到對應(yīng)位置
關(guān)閉/卸載
在生效的頁面點擊TamperMonkey圖標(biāo)可以關(guān)閉腳本
點擊TamperMonkey選擇dashboard可以全局管理腳本
卸載TamperMonkey亦可
開發(fā)中的一些總結(jié) 1.協(xié)議分析容易看到花瓣分段拉取畫板的url形如http://huaban.com/xxx/?jp4z1e1x&limit=10&wfl=1&max=42190948
jp4z1e1x這段每次請求是自增的，大概是個sequence之類的東西。chrome查看請求的initiator，點進去可以看到調(diào)用的是String.uniqueID，搜一下具體實現(xiàn)是
var m = Date.now();
String.extend("uniqueID", function() {
return (m++).toString(36)
})
跟猜測一致。不過這里我實際上不需要關(guān)注它的實現(xiàn)細(xì)節(jié)。油猴腳本是可以訪問到一樣的類型和函數(shù)的。
另外這里對請求的header也有要求，需要設(shè)置一下
xmlHttp.setRequestHeader("X-Request", "JSON");
xmlHttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xmlHttp.setRequestHeader("Accept", "application/json");
最后把limit字段調(diào)成需要的大小就好了。
2.圖片較多時的渲染性能一開始為了展示小圖片，用的是background-image，
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
結(jié)果發(fā)現(xiàn)滾動的時候會卡。
跑了一下性能工具，發(fā)現(xiàn)主要是渲染耗時。
改成標(biāo)簽性能會好一些，但是還是有點卡。
那么就只能去處理原始圖片了。
一開始想的是通過canvas放縮、裁剪圖片，再傳給img標(biāo)簽。但是花瓣的圖片是禁止跨域的，就是說雖然可以正常展示，但是用canvas去編輯是不行的。
最后發(fā)現(xiàn)，花瓣的圖片用的是又拍云存的。又拍、七牛這些，都允許針對圖片鏈接加點后綴返回指定的圖片。這里用_/both/50x50使得拿到的圖片限定大小50*50。使用原始大小的img，一個頁面就算有幾百張圖，也一點都不卡了。
3.快捷鍵沖突花瓣有定義一些自己的快捷鍵。比如按T會跳到頁面頂部。這和我需要的跳到對應(yīng)首字母分類的位置是矛盾的。
本來原有的時間監(jiān)聽我們是無法處理的，不過所幸花瓣把大量接口暴露在window.app變量里，找了一下相關(guān)的有window.app.hotkey.keyboard.$events和window.app.hotkey.keyboard.options.events，索性直接置為{}，花瓣的快捷鍵邏輯就沒了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99624.html
摘要：我相信這是很多人共同的感受，所以今天推薦的款書簽收藏夾插件印象筆記剪藏插件下載地址印象筆記推出的一款剪藏插件，可以一鍵收藏各類網(wǎng)頁圖文，并永久保存進。 今天有個人問我chrome瀏覽器器上有沒有可以稍后閱讀的插件?。克鋵嵪雴柕木褪菚炇詹貖A插件，因為我們在互聯(lián)網(wǎng)上一不小心就會看到很多感興趣的內(nèi)容，但是時間有限暫時無法閱讀，以后保存下來有時間的時候再看。我相信這是很多人共同的感受，所以...
摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...
摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...
摘要：相比于之前更加高效，易用。同時也是我們個種子用戶群呼聲最高的。首先的調(diào)整就是把智能標(biāo)注的圖標(biāo)放在了左側(cè)，體現(xiàn)從屬關(guān)系。戲太足的開發(fā)小隊設(shè)計的初衷，是在不打擾設(shè)計師的前提下，提供完整的項目管理與呼聲最高的畫板功能。 這世上哪有什么天才，有的人只是把大家設(shè)計標(biāo)注、寫前端的時間拿來喝咖啡，和思考罷了 showImg(https://segmentfault.com/img/bVUhyy?w=...
閱讀 1548·2023-04-26 02:50
閱讀 3553·2023-04-26 00:28
閱讀 1940·2023-04-25 15:18
閱讀 3225·2021-11-24 10:31
閱讀 999·2019-08-30 13:00
閱讀 1007·2019-08-29 15:19
閱讀 1777·2019-08-29 13:09
閱讀 2984·2019-08-29 13:06
