stroller: An HTML repository from bluezhan

stroller 英[ˈstrəʊlə(r)]、美[ˈstroʊlə(r)]
n. 散步者，闲逛者;

“作为个体的我到底是谁?”、“我又会成为谁?”、“我又如何成就着自己?”

身份的焦虑带来了来自于空间、时间、及心灵的三重困境。在这个遥远的征途中，不断的调试、重叠、移位，以寻求精神的修复和重生。

生活空间的位移所带来的变化，实际上又与传统和现代性的矛盾深刻交织在一起。

我在我的代码下成为了一名浪荡子和闲逛者。

目了个录

一、知乎-建议反馈-屏幕截图-原理(rasterizeHTML)
二、添加Github标题和提交commit的图标
三、知乎加载图片时从模糊到清晰的这个效果
四、百度M站将公共的代码缓存到localStorage
五、淘宝和天猫首页都用到了哪些技巧或者技术
六、新浪微博都用到了哪些技巧或者技术

一、知乎-建议反馈-屏幕截图-原理(rasterizeHTML)

将HTML渲染到指定的Canvas里
知乎就是采用了这个库

项目地址：rasterizeHTML.js

API

实现将浏览器整个或部分页面渲染到Canvas里。

rasterizeHTML.drawURL( url [, canvas] [, options] )
rasterizeHTML.drawHTML( html [, canvas] [, options] )
rasterizeHTML.drawDocument( document [, canvas] [, options] )

查看完整文档和案例。

原理

出于对安全的考虑，渲染HTML到Canvas上对浏览器是有限制的。 Firefox 提供ctx.drawWindow()这个方法来实现 , 但只有Chrome提供了 (Canvas绘画图像)。

如此描述到绘画DOM内容到Canvas 和绘画DOM节点对象到Canvas，然而有可能通过将HTML嵌入SVG图像<foreignObject>,然后通过ctx.drawImage绘画产生的图像()。

除了SVG是不允许所以rasterizeHTML链接到外部资源。js将加载外部图像、字体和内联通过样式表和存储它们 data: URIs (或者是内联样式的元素)。

由鄙人修改和更新了一下下，别见笑： bluezhan\rasterizeHTML.js
这个项目原处出自 cburgmer-rasterizeHTML.js

二、添加Github标题和提交commit的图标

Emoji Cheat Sheet 是绘文字短代码小抄列表。Github上支持Emoji表情符号，短码，而不是特殊字符。：heart_eyes：相当于 😍 。只需将鼠标悬停显示短代码，点击复制简码。有许多网站的支持这种类型的短代码： Github, Basecamp, Slack, Trello, Hackpad, Qiita, Zendesk, Ello.

网址：https://www.webpagefx.com/tools/emoji-cheat-sheet/

😎😵👿😈😐😶😇👽💛💙💜❤️💚💔💓💗💕💞💘💫💥💥💢❗❓❕❔💤💨💦🎶🎵🔥💩💩💩🏃🏃👫☀️☔☁️❄️⛄⚡🌀🌁🌊🐱🐶🐭🐹🐰🐺🐸🐯🐨🐻🐷🐽🐮🐗🐵🐒🐴🐎🐫🐑🐘🐼🐍🐦🐤🐥🐣🐔🐧🐢🐛🐝🐜🪲🐌🐙🐠🐟🐳🐋🐬🐄🐏🐀🐃🐅🐇🐉🐐🐓🐕🐖🐁🐂🐲🐡🐊🐪🐆🐈🐩🐾💐🌸🌷🍀🌹🌻🌺🍁🍃🍂🌿🍄🌵🌴🌲🌳🌰🌱🌼🌾🐚🌐🌞🌝🌚🌑🌒🌓🌔🌕🌖🌗🌘🌜🌛🌙🌍🌎🌏🌋🌌⛅:squirrel:🎍💝🎎🎒🎓🎏🎆🎇🎐🎑🎃👻🎅🎄🎁🔔🔕🎋🎉🎊🎈🔮💿📀💾📷📹🎥💻📺📱☎️☎️📞📟📠💽📼🔉🔈🔇📢📣⌛⏳⏰⌚📻📡➿🔍🔎🔓🔒🔏🔐🔑💡🔦🔆🔅🔌🔋📲📧📫📮🛀🛁🚿🚽🔧🔩🔨💺💰💴💵💷💶💳💸📧📥📤✉️📨📯📪📬📭📦🚪🚬💣🔫🔪💊💉📄📃📑📊📈📉📜📋📆📅📇📁📂✂️📌📎✒️✏️📏📐📕📗📘📙📓📔📒📚🔖📛🔬🔭📰🏈🏀⚽⚾🎾🎱🏉🎳⛳🚵🚴🏇🏂🏊🏄🎿♠️♥️♣️♦️💎💍🏆🎼🎹🎻👾🎮🃏🎴🎲🎯🀄🎬📝📝📖🎨🎤🎧🎺🎷🎸👞👡👠💄👢👕👕👔👚👗🎽👖👘👙🎀🎩👑👒👞🌂💼👜👝👛👓🎣☕🍵🍶🍼🍺🍻🍸🍹🍷🍴🍕🍔🍟🍗🍖🍝🍛🍤🍱🍣🍥🍙🍘🍚🍜🍲🍢🍡🥚🍞🍩🍮🍦🍨🍧🎂🍰🍪🍫🍬🍭🍯🍎🍏🍊🍋🍒🍇🍉🍓🍑🍈🍌🍐🍍🍠🍆🍅🌽

三、知乎加载图片时从模糊到清晰的这个效果

[译]Medium 是如何优化图片加载的
 使用渐进式JPEG来提升用户体验
 网站如何解决图片过大加载慢的问题？
使用高斯模糊的效果逐步加载图片（仿 Medium）

TODO

-动手弄个Demo

四、百度M站将公共的代码缓存到localStorage

百度M站使用了localStorage缓存Js和css文件。

webapp之路--百度手机前端经验（转）
Web移动端使用localStorage缓存Js和css文件
 手机百度localstorage细粒度缓存介绍
 localStorage的黑科技-js和css缓存机制

五、淘宝和天猫首页都用到了哪些技巧或者技术

知乎-淘宝和天猫首页都用到了哪些技巧或者技术？

淘宝：

    background: url(jpg) no-repeat #F40;
    background-image: -webkit-image-set(url(jpg) 1x,url(.png) 2x);
    background-image: -moz-image-set(url(jpg) 1x,url(.png) 2x);
    background-image: -ms-image-set(url(jpg) 1x,url(.png) 2x);
    background-image: -o-image-set(url(jpg) 1x,url(.png) 2x);
    _background-image: url(jpg);

 <ins></ins>

在隐藏元素的时候记得把动画过渡也关闭了。
display: none;
transition: none;

像大部分优化的机制就是使用JavaScript来处理DOM的植入
不过淘宝使用textatea来装 HTML ~~~

对字体渲染

-webkit-font-smoothing（听说在Mac OS 才有效）
CSS 中 -webkit-font-smoothing: antialiased 反而让字体更难看了?

六、新浪微博都用到了哪些技巧或者技术

长链接的技术，long polling
cometd 支持长连接，WebSocket

新浪微博平台架构解析
 从新浪微博的改版谈网页重构
 使用BigPipe提升浏览速度
 名站技术分析 — facebook奇特的页面加载技术
 围观STK

关于新浪微博的那些前端知识

大概在2年前，我在查看新浪微博web源码的时候，记得发现他们在对前端文件的压缩方式很有印象。

我们来看看这JavaScript文件请求链接：

https://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

https://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

是的，我们现在看到是这里面有个字眼 kissy ；这不难说，因为新浪微博被阿里承包了，固然会推广使用了阿里的技术。

这不是重点，在新浪微博易主之前它也是这样弄的。

就是这条链接放置所要请求的JavaScript并将它们一起合并了。

我当时一脸懵逼，怎么这么吊，而且我当时是在用 Node 的相关压缩处理方式或工具，比如 r.js、grunt、gulp等等。

这不难看出，这是服务器或者框架那边做了文件逻辑处理。

好啦，简简单单谈个开始，我们再聊聊新浪微博的其它前端实现的知识。

资源目录

这就是网站请求的资源目录：

不难看出来，对JavaScript、HTML、images启动了多个域名处理。

看看CSS结构

未登录时请求的CSS

文件目录：

  - frame.css
  - comb_login_v2.css
  - skin.css
  - base.css

frame.css

请求链接：

http://img.t.sinajs.cn/t6/style/css/module/base/frame.css

我还特么去看了一遍内容源码。

大部分CSS命名有 W_、B_ 、WB_ 开头命名的，很明显吧。
不过还有 S_、SW_ 、PCD_、UI_ 开头的....
其它小写开头的命名的我就不提了。

顾名思义这CSS是框架骨架CSS了。

不过不过，这些简写命名也行是压缩工具或者等等其它东西特地弄的。

comb_login_v2.css

这个CSS从命名可以看出是对登录特殊的CSS。
里面出现 W_unlogin_、B_unlog、PCD_pictext_i 为重。

skin.css

这个不用说了就是皮肤的CSS，里面控制呈现的CSS：

color: #fff;
background-color: #fff;
border-color: #fff;
...

base.css

至于base.css，为毛隔不到0.5ms加载了两次呢，不明白。

看得出是嵌入淘宝登录逻辑带过来的，为毛要去请求淘宝账号呢，嘿嘿嘿.......你懂得。

登录时请求的CSS

多了几个CSS

 - home_A.css
 - extra.css
 - PCD_mplayer.css

定时请求push_count.json

每隔30秒请求一下下面这个链接：

Request URL:http://rm.api.weibo.com/2/remind/push_count.json?trim_null=1&with_dm_group=0&with_settings=1&exclude_attitude=1&with_common_cmt=1&with_comment_attitude=1&with_common_attitude=1&with_moments=1&with_dm_unread=1&msgbox=true&with_page_group=1&with_chat_group=1&with_chat_group_notice=1&_pid=1&count=0&source=351354573&status_type=0&callback=STK_14795361469975

前端4秒的分水岭事件

// TODO

DNS Prefetch

// TODO

微博背后的那些算法

http://blog.csdn.net/zhangyunpengchang/article/details/50349981

http://blog.csdn.net/stdcoutzyx/article/details/18814627

千万级规模高性能、高并发

http://www.wtoutiao.com/p/1catvAN.html http://mobile.51cto.com/comment-492447.htm http://web.jobbole.com/86343/

面试题

// TODO

《新浪微博我们所不知道的发展》PPT

技术，小步快跑，媒体运营，定位，数据。

2009年开始
2010年推广起步
2011年不断尝试，小步快跑
2012年定位思考
2013年大胆转型
2014年媒体运营定型
2015年起飞
2016年起飞起飞再起飞

僵尸粉满天飞的那年，转行中...

后文

一个勤奋的程序员不一定是一个好程序员，而一个懒惰的程序员却很有可能是一个好程序员。

bluezhan/stroller

一、知乎-建议反馈-屏幕截图-原理(rasterizeHTML)

API

原理

二、添加Github标题和提交commit的图标

三、知乎加载图片时从模糊到清晰的这个效果

四、百度M站将公共的代码缓存到localStorage

五、淘宝和天猫首页都用到了哪些技巧或者技术

淘宝：

六、新浪微博都用到了哪些技巧或者技术

关于新浪微博的那些前端知识

资源目录

看看CSS结构

未登录时请求的CSS

frame.css

comb_login_v2.css

skin.css

base.css

登录时请求的CSS

定时请求push_count.json

bigpipe 技术

STK 脚本库

页面分片加载

document.execCommand

前端4秒的分水岭事件

DNS Prefetch

微博背后的那些算法

千万级规模高性能、高并发

面试题

《新浪微博我们所不知道的发展》PPT

后文