{"id":16439632,"url":"https://github.com/bluezhan/stroller","last_synced_at":"2026-04-15T23:33:12.470Z","repository":{"id":82647432,"uuid":"101154206","full_name":"bluezhan/stroller","owner":"bluezhan","description":":running::zap: 路漫漫其修远兮，吾将闲逛而求索","archived":false,"fork":false,"pushed_at":"2018-11-08T10:05:30.000Z","size":444,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-25T22:31:42.799Z","etag":null,"topics":["css","html","js","website"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bluezhan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-23T07:59:34.000Z","updated_at":"2020-08-15T14:52:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"4b9c1f25-ed52-4947-96b2-fbab9433248a","html_url":"https://github.com/bluezhan/stroller","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bluezhan/stroller","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluezhan%2Fstroller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluezhan%2Fstroller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluezhan%2Fstroller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluezhan%2Fstroller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluezhan","download_url":"https://codeload.github.com/bluezhan/stroller/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluezhan%2Fstroller/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31865067,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"ssl_error","status_checked_at":"2026-04-15T15:24:39.138Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","js","website"],"created_at":"2024-10-11T09:09:58.254Z","updated_at":"2026-04-15T23:33:12.443Z","avatar_url":"https://github.com/bluezhan.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![](https://github.com/bluezhan/stroller/raw/master/images/logo.png)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/language-HTML--CSS--JavaScript-green.svg\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/web-togo-orange.svg\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-MIT-ccc.svg\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Don't-Panic-ff69b4.svg\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/stroller-0.1.1-ded76a.svg\"\u003e\n\u003c/p\u003e\n\n\n\u003e `stroller`\t英[ˈstrəʊlə(r)]、美[ˈstroʊlə(r)]  \n  n.\t散步者，闲逛者;\n\n\n“作为个体的我到底是谁?”、“我又会成为谁?”、“我又如何成就着自己?”    \n\n身份的焦虑带来了来自于空间、时间、及心灵的三重困境。在这个遥远的征途中，不断的调试、重叠、移位，以寻求精神的修复和重生。   \n\n生活空间的位移所带来的变化，实际上又与传统和现代性的矛盾深刻交织在一起。   \n\n我在我的代码下成为了一名浪荡子和闲逛者。  \n\n__目了个录__\n\n* [一、知乎-建议反馈-屏幕截图-原理(rasterizeHTML)](#一知乎-建议反馈-屏幕截图-原理rasterizehtml)\n* [二、添加Github标题和提交commit的图标](#二添加github标题和提交commit的图标)\n* [三、知乎加载图片时从模糊到清晰的这个效果](#三知乎加载图片时从模糊到清晰的这个效果)\n* [四、百度M站将公共的代码缓存到localStorage](#百度M站将公共的代码缓存到localStorage)\n* [五、淘宝和天猫首页都用到了哪些技巧或者技术](#淘宝和天猫首页都用到了哪些技巧或者技术)\n* [六、新浪微博都用到了哪些技巧或者技术](#新浪微博都用到了哪些技巧或者技术)\n\n## 一、知乎-建议反馈-屏幕截图-原理(rasterizeHTML)\n\n将HTML渲染到指定的Canvas里  \n知乎就是采用了这个库  \n\n项目地址：[rasterizeHTML.js](http://bluezhan.com/stroller/rasterizeHTML/)  \n\n#### API\n\n实现将浏览器整个或部分页面渲染到Canvas里。\n\n```js\nrasterizeHTML.drawURL( url [, canvas] [, options] )\nrasterizeHTML.drawHTML( html [, canvas] [, options] )\nrasterizeHTML.drawDocument( document [, canvas] [, options] )\n```\n\n查看 [完整文档](https://github.com/cburgmer/rasterizeHTML.js/wiki/API) 和 [案例](https://github.com/cburgmer/rasterizeHTML.js/wiki/Examples)。\n\n#### 原理\n\n出于对安全的考虑，渲染HTML到Canvas上对浏览器是有限制的。 Firefox 提供`ctx.drawWindow()`这个方法来实现 , 但只有Chrome提供了 ([Canvas绘画图像](https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas))。\n\n如此描述到[绘画DOM内容到Canvas](http://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html) 和 [绘画DOM节点对象到Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas)，然而有可能通过将HTML嵌入SVG图像`\u003cforeignObject\u003e`,然后通过`ctx.drawImage`绘画产生的图像()。\n\n除了SVG是不允许所以rasterizeHTML链接到外部资源。js将加载外部图像、字体和内联通过样式表和存储它们 [data: URIs](https://en.wikipedia.org/wiki/Data_URI_scheme) (或者是内联样式的元素)。\n\n由鄙人修改和更新了一下下，别见笑： [bluezhan\\rasterizeHTML.js](http://bluezhan.com/stroller/rasterizeHTML/)   \n这个项目原处出自 [cburgmer](https://github.com/cburgmer)-[rasterizeHTML.js](https://github.com/cburgmer/rasterizeHTML.js)\n\n## 二、添加Github标题和提交commit的图标\n\nEmoji Cheat Sheet 是绘文字短代码小抄列表。Github上支持Emoji表情符号，短码，而不是特殊字符。 ：heart_eyes： 相当于 :heart_eyes: 。只需将鼠标悬停显示短代码，点击复制简码。有许多网站的支持这种类型的短代码： Github, Basecamp, Slack, Trello, Hackpad, Qiita, Zendesk, Ello. \n\n网址：https://www.webpagefx.com/tools/emoji-cheat-sheet/\n\n:sunglasses::dizzy_face::imp::smiling_imp::neutral_face::no_mouth::innocent::alien::yellow_heart::blue_heart::purple_heart::heart::green_heart::broken_heart::heartbeat::heartpulse::two_hearts::revolving_hearts::cupid::dizzy::boom::collision::anger::exclamation::question::grey_exclamation::grey_question::zzz::dash::sweat_drops::notes::musical_note::fire::hankey::poop::shit::runner::running::couple::trollface::sunny::umbrella::cloud::snowflake::snowman::zap::cyclone::foggy::ocean::cat::dog::mouse::hamster::rabbit::wolf::frog::tiger::koala::bear::pig::pig_nose::cow::boar::monkey_face::monkey::horse::racehorse::camel::sheep::elephant::panda_face::snake::bird::baby_chick::hatched_chick::hatching_chick::chicken::penguin::turtle::bug::honeybee::ant::beetle::snail::octopus::tropical_fish::fish::whale::whale2::dolphin::cow2::ram::rat::water_buffalo::tiger2::rabbit2::dragon::goat::rooster::dog2::pig2::mouse2::ox::dragon_face::blowfish::crocodile::dromedary_camel::leopard::cat2::poodle::paw_prints::bouquet::cherry_blossom::tulip::four_leaf_clover::rose::sunflower::hibiscus::maple_leaf::leaves::fallen_leaf::herb::mushroom::cactus::palm_tree::evergreen_tree::deciduous_tree::chestnut::seedling::blossom::ear_of_rice::shell::globe_with_meridians::sun_with_face::full_moon_with_face::new_moon_with_face::new_moon::waxing_crescent_moon::first_quarter_moon::waxing_gibbous_moon::full_moon::waning_gibbous_moon::last_quarter_moon::waning_crescent_moon::last_quarter_moon_with_face::first_quarter_moon_with_face::crescent_moon::earth_africa::earth_americas::earth_asia::volcano::milky_way::partly_sunny::octocat::squirrel::bamboo::gift_heart::dolls::school_satchel::mortar_board::flags::fireworks::sparkler::wind_chime::rice_scene::jack_o_lantern::ghost::santa::christmas_tree::gift::bell::no_bell::tanabata_tree::tada::confetti_ball::balloon::crystal_ball::cd::dvd::floppy_disk::camera::video_camera::movie_camera::computer::tv::iphone::phone::telephone::telephone_receiver::pager::fax::minidisc::vhs::sound::speaker::mute::loudspeaker::mega::hourglass::hourglass_flowing_sand::alarm_clock::watch::radio::satellite::loop::mag::mag_right::unlock::lock::lock_with_ink_pen::closed_lock_with_key::key::bulb::flashlight::high_brightness::low_brightness::electric_plug::battery::calling::email::mailbox::postbox::bath::bathtub::shower::toilet::wrench::nut_and_bolt::hammer::seat::moneybag::yen::dollar::pound::euro::credit_card::money_with_wings::e-mail::inbox_tray::outbox_tray::envelope::incoming_envelope::postal_horn::mailbox_closed::mailbox_with_mail::mailbox_with_no_mail::package::door::smoking::bomb::gun::hocho::pill::syringe::page_facing_up::page_with_curl::bookmark_tabs::bar_chart::chart_with_upwards_trend::chart_with_downwards_trend::scroll::clipboard::calendar::date::card_index::file_folder::open_file_folder::scissors::pushpin::paperclip::black_nib::pencil2::straight_ruler::triangular_ruler::closed_book::green_book::blue_book::orange_book::notebook::notebook_with_decorative_cover::ledger::books::bookmark::name_badge::microscope::telescope::newspaper::football::basketball::soccer::baseball::tennis::8ball::rugby_football::bowling::golf::mountain_bicyclist::bicyclist::horse_racing::snowboarder::swimmer::surfer::ski::spades::hearts::clubs::diamonds::gem::ring::trophy::musical_score::musical_keyboard::violin::space_invader::video_game::black_joker::flower_playing_cards::game_die::dart::mahjong::clapper::memo::pencil::book::art::microphone::headphones::trumpet::saxophone::guitar::shoe::sandal::high_heel::lipstick::boot::shirt::tshirt::necktie::womans_clothes::dress::running_shirt_with_sash::jeans::kimono::bikini::ribbon::tophat::crown::womans_hat::mans_shoe::closed_umbrella::briefcase::handbag::pouch::purse::eyeglasses::fishing_pole_and_fish::coffee::tea::sake::baby_bottle::beer::beers::cocktail::tropical_drink::wine_glass::fork_and_knife::pizza::hamburger::fries::poultry_leg::meat_on_bone::spaghetti::curry::fried_shrimp::bento::sushi::fish_cake::rice_ball::rice_cracker::rice::ramen::stew::oden::dango::egg::bread::doughnut::custard::icecream::ice_cream::shaved_ice::birthday::cake::cookie::chocolate_bar::candy::lollipop::honey_pot::apple::green_apple::tangerine::lemon::cherries::grapes::watermelon::strawberry::peach::melon::banana::pear::pineapple::sweet_potato::eggplant::tomato::corn:\n\n## 三、知乎加载图片时从模糊到清晰的这个效果\n\n[[译]Medium 是如何优化图片加载的](http://www.jackpu.com/medium-shi-ru-he-zuo-tu-pian-jia-zai-de/)  \n[使用渐进式JPEG来提升用户体验](https://www.biaodianfu.com/progressive-jpeg.html)  \n[网站如何解决图片过大加载慢的问题？](https://www.zhihu.com/question/23655692/answer/164643803)  \n[使用高斯模糊的效果逐步加载图片（仿 Medium）](https://segmentfault.com/a/1190000006743512)  \n\n__TODO__\n\n-动手弄个Demo\n\n## 四、百度M站将公共的代码缓存到localStorage\n\n百度M站使用了localStorage缓存Js和css文件。\n\n[webapp之路--百度手机前端经验（转）](http://www.cnblogs.com/dunken/p/4383101.html)   \n[Web移动端使用localStorage缓存Js和css文件](http://blog.csdn.net/a497785609/article/details/48321405)    \n[手机百度localstorage细粒度缓存介绍](http://js8.in/2015/12/06/%E6%89%8B%E6%9C%BA%E7%99%BE%E5%BA%A6localstorage%E7%BB%86%E7%B2%92%E5%BA%A6%E7%BC%93%E5%AD%98%E4%BB%8B%E7%BB%8D/)    \n[localStorage的黑科技-js和css缓存机制](http://www.jianshu.com/p/0fa0bf842bbb)\n\n\n## 五、淘宝和天猫首页都用到了哪些技巧或者技术\n\n[知乎-淘宝和天猫首页都用到了哪些技巧或者技术？](https://www.zhihu.com/question/46149490)    \n\n![](https://github.com/bluezhan/stroller/raw/master/images/taobao.png) \n\n#### 淘宝：  \n```\n    background: url(jpg) no-repeat #F40;\n    background-image: -webkit-image-set(url(jpg) 1x,url(.png) 2x);\n    background-image: -moz-image-set(url(jpg) 1x,url(.png) 2x);\n    background-image: -ms-image-set(url(jpg) 1x,url(.png) 2x);\n    background-image: -o-image-set(url(jpg) 1x,url(.png) 2x);\n    _background-image: url(jpg);\n```\n```\n \u003cins\u003e\u003c/ins\u003e\n```\n\n在隐藏元素的时候记得把动画过渡也关闭了。   \ndisplay: none;  \ntransition: none;  \n\n像大部分优化的机制就是使用JavaScript来处理DOM的植入   \n不过淘宝使用textatea来装 HTML ~~~  \n\n![](https://github.com/bluezhan/stroller/raw/master/images/1479696653291.png) \n  \n对字体渲染  \n\n-webkit-font-smoothing（听说在Mac OS 才有效）   \n[CSS 中 -webkit-font-smoothing: antialiased 反而让字体更难看了?](https://segmentfault.com/q/1010000000467910)\n\n## 六、新浪微博都用到了哪些技巧或者技术\n\n长链接的技术，long polling  \ncometd 支持长连接，WebSocket\n\n[新浪微博平台架构解析](https://sdk.cn/news/5593)  \n[从新浪微博的改版谈网页重构](http://kb.cnblogs.com/page/114649/)  \n[使用BigPipe提升浏览速度](http://velocity.oreilly.com.cn/2011/ppts/WK_velocity.pdf)  \n[名站技术分析 — facebook奇特的页面加载技术](http://www.cnblogs.com/BearsTaR/archive/2010/06/18/facebook_html_chunk.html)  \n[围观STK](http://www.cnblogs.com/jkisjk/archive/2012/08/11/about_stk.html) \n\n\n### 关于新浪微博的那些前端知识\n\n大概在2年前，我在查看新浪微博web源码的时候，记得发现他们在对前端文件的压缩方式很有印象。\n\n我们来看看这JavaScript文件请求链接：\n\n```js\nhttps://g.alicdn.com/kissy/k/1.4.2/??event-min.js,event/dom/base-min.js,event/base-min.js,dom/base-min.js,event/dom/shake-min.js,event/dom/focusin-min.js,event/custom-min.js,node-min.js,anim-min.js,anim/base-min.js,promise-min.js,anim/timer-min.js,anim/transition-min.js\n```\n\n```js\nhttps://g.alicdn.com/kissy/k/1.4.2/??cookie-min.js,overlay-min.js,component/container-min.js,component/control-min.js,base-min.js,component/manager-min.js,xtemplate/runtime-min.js,component/extension/shim-min.js,component/extension/align-min.js,component/extension/content-xtpl-min.js,component/extension/content-render-min.js\n```\n\n是的，我们现在看到是这里面有个字眼 `kissy` ；这不难说，因为新浪微博被阿里承包了，固然会推广使用了阿里的技术。  \n\n这不是重点，在新浪微博易主之前它也是这样弄的。  \n\n就是这条链接放置所要请求的JavaScript并将它们一起合并了。  \n\n我当时一脸懵逼，怎么这么吊，而且我当时是在用 Node 的相关压缩处理方式或工具，比如 r.js、grunt、gulp等等。  \n\n这不难看出，这是服务器或者框架那边做了文件逻辑处理。  \n\n好啦，简简单单谈个开始，我们再聊聊新浪微博的其它前端实现的知识。\n\n### 资源目录\n\n这就是网站请求的资源目录：  \n\n![](https://github.com/bluezhan/stroller/raw/master/images/weibo-1.png)\n\n不难看出来，对JavaScript、HTML、images启动了多个域名处理。\n\n### 看看CSS结构\n\n\n#### 未登录时请求的CSS\n\n![](https://github.com/bluezhan/stroller/raw/master/images/weibo-2.png)\n\n文件目录：\n\n```js\n  - frame.css\n  - comb_login_v2.css\n  - skin.css\n  - base.css\n```\n\n##### frame.css\n\n请求链接：  \n\n```js\nhttp://img.t.sinajs.cn/t6/style/css/module/base/frame.css\n```\n\n我还特么去看了一遍内容源码。  \n\n大部分CSS命名有 `W_`、`B_` 、`WB_` 开头命名的，很明显吧。      \n不过还有 `S_`、`SW_` 、`PCD_`、`UI_` 开头的....  \n其它小写开头的命名的我就不提了。  \n\n顾名思义这CSS是框架骨架CSS了。  \n\n不过不过，这些简写命名也行是压缩工具或者等等其它东西特地弄的。\n\n##### comb_login_v2.css\n\n这个CSS从命名可以看出是对登录特殊的CSS。  \n里面出现 `W_unlogin_`、`B_unlog`、`PCD_pictext_i` 为重。\n\n##### skin.css\n\n这个不用说了就是皮肤的CSS，里面控制呈现的CSS：\n\n```\ncolor: #fff;\nbackground-color: #fff;\nborder-color: #fff;\n...\n```\n\n\n##### base.css\n\n至于base.css，为毛隔不到0.5ms加载了两次呢，不明白。  \n\n![](https://github.com/bluezhan/stroller/raw/master/images/weibo-3.png)\n\n看得出是嵌入淘宝登录逻辑带过来的，为毛要去请求淘宝账号呢，嘿嘿嘿.......你懂得。  \n\n#### 登录时请求的CSS\n\n![](https://github.com/bluezhan/stroller/raw/master/images/weibo-4.png)\n\n多了几个CSS  \n\n```\n - home_A.css\n - extra.css\n - PCD_mplayer.css\n```\n\n\n#### 定时请求push_count.json\n\n\n每隔30秒请求一下下面这个链接：\n\n```\nRequest URL:http://rm.api.weibo.com/2/remind/push_count.json?trim_null=1\u0026with_dm_group=0\u0026with_settings=1\u0026exclude_attitude=1\u0026with_common_cmt=1\u0026with_comment_attitude=1\u0026with_common_attitude=1\u0026with_moments=1\u0026with_dm_unread=1\u0026msgbox=true\u0026with_page_group=1\u0026with_chat_group=1\u0026with_chat_group_notice=1\u0026_pid=1\u0026count=0\u0026source=351354573\u0026status_type=0\u0026callback=STK_14795361469975\n```\n\n\n#### bigpipe 技术\n\n通过JavaScript动态生成HTML  \nhttp://blog.csdn.net/fyqcdbdx/article/details/7042355  \nhttp://idlelife.org/archives/969  \nhttp://timyang.net/  \nhttps://github.com/JacksonTian/fks  \nhttp://caibaojian.com/some-fe  \nhttp://www.yixieshi.com/10354.html  \nhttp://web.jobbole.com/86343/  \nhttp://kb.cnblogs.com/page/114649/  \nhttp://tech.sina.com.cn/i/2010-11-16/14434871585.shtml  \nhttps://zhuanlan.zhihu.com/p/23074882  \n\n#### STK 脚本库\n\nhttp://www.cnblogs.com/jkisjk/archive/2012/08/11/about_stk.html\n\n#### 页面分片加载\n\nhttp://www.cnblogs.com/BearsTaR/archive/2010/05/19/flush_chunk_encoding.html  \nfacebook使用了chunk 对页面进行分块输出\n\n#### document.execCommand\n\nhttps://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand\n\n#### 前端4秒的分水岭事件\n\n// TODO\n\n#### DNS Prefetch\n\n// TODO\n\n#### 微博背后的那些算法\n\nhttp://blog.csdn.net/zhangyunpengchang/article/details/50349981\n\nhttp://blog.csdn.net/stdcoutzyx/article/details/18814627\n\n#### 千万级规模高性能、高并发\n\nhttp://www.wtoutiao.com/p/1catvAN.html\nhttp://mobile.51cto.com/comment-492447.htm\nhttp://web.jobbole.com/86343/\n\n\n#### 面试题\n\n// TODO\n\n#### 《新浪微博我们所不知道的发展》PPT\n\n技术，小步快跑，媒体运营，定位，数据。\n\n- 2009年 开始\n- 2010年 推广起步\n- 2011年 不断尝试，小步快跑\n- 2012年 定位思考\n- 2013年 大胆转型\n- 2014年 媒体运营定型\n- 2015年 起飞\n- 2016年 起飞起飞再起飞\n\n僵尸粉满天飞的那年，转行中...\n\n#### 后文\n\n一个勤奋的程序员不一定是一个好程序员，而一个懒惰的程序员却很有可能是一个好程序员。\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluezhan%2Fstroller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbluezhan%2Fstroller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluezhan%2Fstroller/lists"}