-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathatom.xml
1799 lines (1633 loc) · 141 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[rank's blog]]></title>
<subtitle><![CDATA[Border is just for crossing]]></subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://rank.im/"/>
<updated>2015-02-15T15:48:49.430Z</updated>
<id>http://rank.im/</id>
<author>
<name><![CDATA[rank]]></name>
<email><![CDATA[[email protected]]]></email>
</author>
<generator uri="http://zespia.tw/hexo/">Hexo</generator>
<entry>
<title><![CDATA[用 hexo 在 github page 搭建博客]]></title>
<link href="http://rank.im/2014/03/10/hexo-for-blog/"/>
<id>http://rank.im/2014/03/10/hexo-for-blog/</id>
<published>2014-03-10T13:40:27.000Z</published>
<updated>2014-04-04T02:39:20.000Z</updated>
<content type="html"><![CDATA[<p>这两天把博客新迁在 github page 上，这两天抽空注册了新域名，并且在 github pages 上搭建了新的博客，还用了逼格极高的 hexo 。 </p>
<p>在 github pages 上搭建静态博客不只 hexo ，排名前 5 的系统有：</p>
<ul>
<li><a href="https://github.com/mojombo/jekyll" target="_blank">mojombo/jekyll</a> 最著名的静态博客引擎 (ruby) </li>
<li><a href="https://github.com/imathis/octopress" target="_blank">imathis/octopress</a> jekyll 的一个框架，降低了使用难度</li>
<li><a href="https://github.com/tommy351/hexo" target="_blank">tommy351/hexo</a> 使用 NodeJS 编写的静态博客生成器</li>
<li><a href="https://github.com/getpelican/pelican" target="_blank">getpelican/pelican</a> Python 编写的静态博客生成器</li>
<li><a href="https://github.com/lepture/liquidluck" target="_blank">lepture/liquidluck</a> 同样也是 Python 的系统</li>
</ul>
<p>官方推荐的是 <a href="https://github.com/mojombo/jekyll" target="_blank">jekyll</a> 。</p>
<p>我用 hexo 主要想借机多熟悉下 NodeJS ，另外也先看了简介使用，感觉 hexo 上手也相对容易， markdown 语言来写内容。<br>如果你想对这几种静态博客进行系统比较的话，可自行测试，或 <a href="http://www.zhihu.com/question/21981094" target="_blank"> 参考这篇贴子 </a> 。</p>
<p>hexo 的配置及使用官方有比较详细的 <a href="http://zespia.tw/hexo/docs/" target="_blank"> 文档 </a> ，有一位热心同学写了较为详细的博文 《 <a href="http://ibruce.info/2013/11/22/hexo-your-blog/" target="_blank">hexo 你的博客 </a> 》 。 </p>
<p>有一些问题他没有提及，我补充一下：</p>
<ul>
<li><a href="https://github.com/tommy351/hexo/wiki/Themes" target="_blank"> 这里 </a> 有详细的官方推荐皮肤。目前我使用的是 <a href="https://github.com/heroicyang/hexo-theme-modernist" target="_blank">modernist</a> ，如果你对皮肤要求比较高的话，恐怕 theme 上没有太满意的，只能自己设计。:(</li>
<li><a href="http://zespia.tw/hexo/docs/" target="_blank"> 文档 </a> 。看上去挺全的，但很多地方『点到即止』，所以才看到有很多使用说明都是自己搭建过的同学写出来的经验之谈，不过这没关系，结合 google baidu 来使用就可以了。</li>
<li><a href="http://zespia.tw/hexo/docs/migration.html" target="_blank"> 迁移 </a> 。 关键的功能从 rss 导入功能
"hexo migrate rss <a href="http://rank.im/atom.xml">http://rank.im/atom.xml</a>" 居然不能用。我哪天 fix 了放出来给大家。</li>
</ul>
]]></content>
<category term="tech" scheme="http://rank.im/categories/tech/"/>
</entry>
<entry>
<title><![CDATA[换域名，重新开博]]></title>
<link href="http://rank.im/2014/03/07/new-blog-start/"/>
<id>http://rank.im/2014/03/07/new-blog-start/</id>
<published>2014-03-07T09:04:20.000Z</published>
<updated>2014-04-04T02:39:20.000Z</updated>
<content type="html"><![CDATA[<p>注册了一个比较帅的域名 <a href="http://rank.im">rank.im</a> ，用于个人站点。<br>把原来的很古老的博客系统换成现在比较流行，逼格比较高的 hexo 。 </p>
<p>虽然原来我的博客在 G reader 的订阅数也有 1K 多，抛弃历史包袱从头再开始是个不错的选择。:)<br>此篇是个新的开始。</p>
]]></content>
</entry>
<entry>
<title><![CDATA[android/ios 开发切图神器 cutandslice]]></title>
<link href="http://rank.im/2013/10/09/cutandslice/"/>
<id>http://rank.im/2013/10/09/cutandslice/</id>
<published>2013-10-09T11:12:05.000Z</published>
<updated>2014-04-04T02:39:20.000Z</updated>
<content type="html"><![CDATA[<p>在多端开发时切图是个很痛苦的事，如果有一个很好的工具必将解决掉很多很繁琐的工作。<br>最近试用了一款软件「 cutandslice 」，觉得不错，推荐给大家。<br>官网： <a href="http://www.cutandslice.me/" target="_blank">http://www.cutandslice.me/</a><br>作者从简介上来看是一名 ue 设计师。 </p>
<p>用了之后你会发现其实开发的原理不难：<br>用了很多 PS 里自己的「宏」来解决问题，程序只处理了规则（ rule ）。</p>
<p>这个思路很赞。</p>
<p><img src="http://www.cutandslice.me/css/layout/v1/ui/plugin.png" alt="'cutandslice'"></p>
<a id="more"></a>
<p>cutandslice 能解决你下面的问题：</p>
<ul>
<li>解决 ios 的 @2x.png 的分辩率问题</li>
<li>解决 android 的多分辩率的问题</li>
<li>解决 web 下也需要导出图片的问题</li>
<li>自动切图 - 注意是切图，不是生成 html ，只是根据一些简单规则自动切好图放到相应的文件夹里。</li>
</ul>
<p>它的规则也非常简单，只有 3 条：</p>
<ol>
<li>要输出图的单位以图层文件夹 ( 组 ) 为单位， 文件夹命名末尾加「@」为结束符。并且，自动切除边界外透明的像素。</li>
<li>以「#」名字命名的图层可以认为是选择图片输出的边界。<br>如：输出背景图可将图层组命名为「 bg@」，组里有两个图层：<ul>
<li>1 是大背景图片；</li>
<li>2 是横向 1 个像素形状图层,并且此图层命名为「#」。</li>
</ul>
</li>
<li>button 是一种特殊的组。以「_BTN 」结尾认为是按钮，有多种状态支持：<ul>
<li>normal</li>
<li>hover</li>
<li>clicked / pressed</li>
<li>selected</li>
<li>disabled</li>
</ul>
</li>
</ol>
<p>输出图片时也会自动按按钮状态 「 btn_xxx_normal 」和「 btn_xxx_hover 」来命名，非常方便。</p>
<p>要看更详细的使用说明，可移步：<br><a href="http://www.zcool.com.cn/article/ZNDYzODA=.html" target="_blank">http://www.zcool.com.cn/article/ZNDYzODA=.html</a></p>
<p>-- EOF --</p>
]]></content>
<summary type="html"><![CDATA[<p>在多端开发时切图是个很痛苦的事，如果有一个很好的工具必将解决掉很多很繁琐的工作。<br>最近试用了一款软件「 cutandslice 」，觉得不错，推荐给大家。<br>官网： <a href="http://www.cutandslice.me/" target="_blank">http://www.cutandslice.me/</a><br>作者从简介上来看是一名 ue 设计师。 </p>
<p>用了之后你会发现其实开发的原理不难：<br>用了很多 PS 里自己的「宏」来解决问题，程序只处理了规则（ rule ）。</p>
<p>这个思路很赞。</p>
<p><img src="http://www.cutandslice.me/css/layout/v1/ui/plugin.png" alt="'cutandslice'"></p>
]]></summary>
<category term="tech" scheme="http://rank.im/categories/tech/"/>
</entry>
<entry>
<title><![CDATA[取得当前脚本元素的路径的一个特例]]></title>
<link href="http://rank.im/2012/12/13/get-script-path/"/>
<id>http://rank.im/2012/12/13/get-script-path/</id>
<published>2012-12-13T06:54:40.000Z</published>
<updated>2014-04-04T02:39:20.000Z</updated>
<content type="html"><![CDATA[<p>在正常情况下，无 defer 或 async 属性要准确取得当前脚本执行路径，在不同浏览器里有两种办法：</p>
<ol>
<li>在 <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.currentScript" target="_blank">MDC</a> 里可查看到用 document.currentScript 拿到当前运用的 script 路径。除此属性外还可通过它的子属性 「 document.currentScript.async 」 来查看「异步」还是「同步」加载。</li>
<li>用 document.scripts 得到最后一个 script.src ，但需注意 readyState 是否为 「 interactive 」状态。</li>
</ol>
<a id="more"></a>
<p>简单实现代码如下：</p>
<figure class="highlight js"><pre>
<span class="function"><span class="keyword">function</span> <span class="title">getCurrentScriptPath</span><span class="params">()</span> {</span>
<span class="comment">//currentScript</span>
<span class="keyword">if</span> (document.hasOwnProperty(<span class="string">'currentScript'</span>)) {
<span class="keyword">return</span> document.currentScript.src;
}
<span class="keyword">var</span> scripts = document.scripts || document.getElementsByTagName(<span class="string">'script'</span>),
len = scripts.length,
state = <span class="string">'interactive'</span>;
<span class="comment">//兼容 IE</span>
<span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i <len; i++) {
<span class="keyword">if</span> (scripts[i].readyState==state) {
<span class="keyword">return</span> scripts[i].src;
}
}
<span class="comment">//webkit</span>
<span class="keyword">return</span> scripts[len-<span class="number">1</span>].src;
}
</pre></figure>
<p>最近在开发中遇到一个 readyState 在 IE 下的特例：</p>
<ul>
<li>page.html 里引入一个外链的脚本 a.js 。</li>
<li>a.js 里有两个外链脚本： a.a.js 和 a.b.js 。「注：这是用 document.write 来引入脚本。」</li>
</ul>
<p>page.html 代码：</p>
<pre><code><html>
<head></head>
<body>
<script src="a.js"></script>
</body>
</html>
</code></pre><p>a.js 代码：</p>
<pre><code>document.write('<script src="a.a.js"><\/script>');
document.write('<script src="a.b.js"><\/script>');
</code></pre><p>在浏览器 IE6 至 IE10 里：</p>
<p>我们在 a.a.js 里将所有脚本元素打印出 readyState ：</p>
<ul>
<li>a.js -- complete</li>
<li>a.a.js -- interactive</li>
<li>a.b.js -- loaded</li>
</ul>
<p>上述的 log 告诉我们，从 readyState 状态上看:<br>其实 IE 里已经加载了 a.js, a.a.js, a.b.js 了。</p>
]]></content>
<summary type="html"><![CDATA[<p>在正常情况下，无 defer 或 async 属性要准确取得当前脚本执行路径，在不同浏览器里有两种办法：</p>
<ol>
<li>在 <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.currentScript" target="_blank">MDC</a> 里可查看到用 document.currentScript 拿到当前运用的 script 路径。除此属性外还可通过它的子属性 「 document.currentScript.async 」 来查看「异步」还是「同步」加载。</li>
<li>用 document.scripts 得到最后一个 script.src ，但需注意 readyState 是否为 「 interactive 」状态。</li>
</ol>
]]></summary>
<category term="tech" scheme="http://rank.im/categories/tech/"/>
</entry>
<entry>
<title><![CDATA[SWFUpload 2.5 bug 修改 (2)]]></title>
<link href="http://rank.im/2012/09/12/fix-swfupload2.5-2/"/>
<id>http://rank.im/2012/09/12/fix-swfupload2.5-2/</id>
<published>2012-09-12T03:11:54.000Z</published>
<updated>2014-04-04T02:39:20.000Z</updated>
<content type="html"><![CDATA[<p>在 github 上我放了一个 <a href="https://github.com/ranklau/repos/tree/master/labs/swfupload2.5-fixed" target="_blank"> 修改版 </a> ，有兴趣的同学可以测试下性能。<br>需要注意的是，要在支持 PHP 的 Webserver 下运行。</p>
<h2 id="-">再遇问题</h2>
<p>经过上一轮的 SWFUpload 修改两周后有人反馈：</p>
<ul>
<li>上传速度非常慢，上传 8 张图片，有时甚至 8 分钟都没上传完；</li>
<li>其次是上传图片数量到某个阈值就无法上传；</li>
</ul>
<p>Debug 了一个下午，发现：</p>
<ul>
<li>问题 1 上传速度慢的问题，只存在 IE 里。<ul>
<li>我也觉得很奇怪，为什么 Flash 的性能还和浏览器有差别</li>
</ul>
</li>
<li>问题 2 不是 Flash 的问题，与脚本使用有关<ul>
<li>经查问题发现 Flash 用 css 隐藏之后，在 IE 下压缩和上传都无法 work （这比较好查）；</li>
</ul>
</li>
</ul>
<a id="more"></a>
<h2 id="-">改造以及测试</h2>
<p>随之，经过一系列的调试和全系列机器环境测试：</p>
<ul>
<li>测试环境在 Flash Player 版本都是 11+；</li>
<li>在 Mac 下的最新版 Safari, Chrome, Firefox 和 win xp ， Win 7 下的 IE 6, 7, 8 ；</li>
<li>测试图片由 5616 × 3744 5M 及 3888 × 2592px 的图组成；</li>
<li>由原图压缩成 1000*1000 的图；质量 90 。</li>
</ul>
<p>我用了多种异步 JPEGencode 的库，发现还是 alchemy 的效率比较好，所以只列它的数据：</p>
<ul>
<li>异步 library 在非 IE 下表现良好，但是在 IE 下性能极差。</li>
<li>IE 时间值大致分布在 4s~30s 之间<ul>
<li>均值 8s ～ 10s 左右，时间上随机性很大</li>
</ul>
</li>
<li>非 IE 下值相对很稳定，时间都在 3~5s 这个区间。</li>
<li>IE 与其他浏览器相比，性能有的时候甚至有差 10 倍！这不能忍啊。<ul>
<li>我猜测是 Flash Player 在 IE 下，不能获得较长的 CPU 时间片。（注：目测了 CPU 监控得出的结论）</li>
</ul>
</li>
</ul>
<p>既然异步压缩没有办法允分利用 CPU ，那我试着改用同步压缩，而不用异步。<br>惊喜的发现效果比预期要好得多（如果用 swc 会更佳）。</p>
<ul>
<li>用同步的压缩有可以去大牛 <a href="http://www.bytearray.org/?p=775" target="_blank">bytearray</a> 下载优化后的 <a href="http://www.bytearray.org/wp-content/projects/fastjpeg/JPEGEncoder.as" target="_blank">JPEGEncoder.as</a> 。 </li>
<li>我这里用的是同事推荐的 <a href="http://www.blooddy.by/en/crypto/" target="_blank">blooddy_crypto.swc</a> 组件。</li>
</ul>
<h2 id="-">测试结果</h2>
<ul>
<li>IE 时间值大致分布在 1~8s 之间<ul>
<li>均值 4s 左右，时间上随机性很大， 1 次上传的图片越多，越趋向于均值）</li>
</ul>
</li>
<li>非 IE 下 值相对很稳定，时间都在 1s 左右，绝在多数用时不超过 1s 。</li>
<li>没有出现假死现象。用 i4 CPU 测试， cpu 使用最高才 13%。</li>
</ul>
<p>比预期还好，完爆异步压缩。</p>
<p>从 CPU 监控可以看到控制都较为良好（都没到 50%）；<br>IE 下的 Flash Player 的性能短期压缩时间很随机，长期看性能平均下来比非 IE 要慢不少。<br>曲线是由快而慢，然后慢慢是趋向均值（就象是电脑越用越慢一样）。</p>
<h2 id="-">教训</h2>
<p>这给我的教训是为什么不及早使用同步压缩？<br>是一直以来的观念束缚了我，认为「同步」一定会假死。</p>
<p>从我们这次的使用结果来看则不然。所以还是那句话：</p>
<blockquote>
<p>实践是检验真理的唯一标准。</p>
</blockquote>
<p>-- EOF --</p>
]]></content>
<summary type="html"><![CDATA[<p>在 github 上我放了一个 <a href="https://github.com/ranklau/repos/tree/master/labs/swfupload2.5-fixed" target="_blank"> 修改版 </a> ，有兴趣的同学可以测试下性能。<br>需要注意的是，要在支持 PHP 的 Webserver 下运行。</p>
<h2 id="-">再遇问题</h2>
<p>经过上一轮的 SWFUpload 修改两周后有人反馈：</p>
<ul>
<li>上传速度非常慢，上传 8 张图片，有时甚至 8 分钟都没上传完；</li>
<li>其次是上传图片数量到某个阈值就无法上传；</li>
</ul>
<p>Debug 了一个下午，发现：</p>
<ul>
<li>问题 1 上传速度慢的问题，只存在 IE 里。<ul>
<li>我也觉得很奇怪，为什么 Flash 的性能还和浏览器有差别</li>
</ul>
</li>
<li>问题 2 不是 Flash 的问题，与脚本使用有关<ul>
<li>经查问题发现 Flash 用 css 隐藏之后，在 IE 下压缩和上传都无法 work （这比较好查）；</li>
</ul>
</li>
</ul>
]]></summary>
<category term="tech" scheme="http://rank.im/categories/tech/"/>
</entry>
<entry>
<title><![CDATA[SWFUpload 2.5 bug 修改 (1)]]></title>
<link href="http://rank.im/2012/08/18/fix-swfupload2.5-1/"/>
<id>http://rank.im/2012/08/18/fix-swfupload2.5-1/</id>
<published>2012-08-18T07:08:51.000Z</published>
<updated>2014-04-04T02:39:20.000Z</updated>
<content type="html"><![CDATA[<h2 id="-swfupload">关于 SWFUpload</h2>
<blockquote>
<p>SWFUpload 是一个客户端文件上传工具，最初由 Vinterwebb.se 开发，它通过整合 Flash 与 JavaScript 技术为 WEB 开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。</p>
</blockquote>
<p>主要特点：</p>
<ul>
<li>可以同时上传多个文件；</li>
<li>类似 AJAX 的无刷新上传；</li>
<li>可以显示上传进度；</li>
<li>良好的浏览器兼容性；</li>
<li>兼容其他 JavaScript 库 ( 例如： jQuery, Prototype 等 ) ；</li>
<li>支持 Flash 8 和 Flash 9 ；</li>
</ul>
<blockquote>
<p>SWFUpload 不同于其他基于 Flash 构建的上传工具，它有着优雅的代码设计，开发者可以利用 XHTML 、 CSS 和 JavaScript 来随心所欲的定制它在浏览器下的外观；它还提供了一组简明的 JavaScript 事件，借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。</p>
</blockquote>
<p>这么多说的就是一个意思， SWFUpload 使用灵活方便，不少人在用。<br>但是，它在我们项目实际应用中发现问题。
<a id="more"></a></p>
<h2 id="-swfupload-2-5-">目前 SWFUpload 2.5 存在问题</h2>
<p>目前 swfupload 2.5 存在的 bug 及修改方法：</p>
<ul>
<li>在目前 v2.5 的代码里 bitmapData 不能用于 「 applyFilter 」 函数，那段代码需要去除（注释也可）或修改。对程序无明显影响。</li>
<li>使用 jpegencoder.swc 的 init() 方法有内存 free up 问题，可以改成单例模式「 singleton 」 调用组件 jpegencoder.swc 。</li>
</ul>
<p>如果有需要使用 SWFUploader ，可到我的 github 上下载 fix 后的代码。完全向前兼容。<br>在这篇文章中主要讲述 debug 过程。</p>
<h2 id="-">线上问题反馈</h2>
<p>从用户反馈过来，上传图片速度过慢。-- 用户界面 loading 的菊花图转比较久。</p>
<h2 id="-">定位问题</h2>
<p>单从描述来看太过笼统，需要先具体定位到哪个环节出了问题。</p>
<ul>
<li>我在本机上测试上传，感觉速度很快（图片大小平均大概 1M ， width 最大为 800 像素），几乎秒传。 </li>
<li>后来发起群众后发现在另一同事机器上传图片也很慢。</li>
</ul>
<p>我们先将「上传整体流程」分析，大致可分为以下几个部分:</p>
<ul>
<li>选择图片然后图片压缩</li>
<li>通过网络上传</li>
<li>修剪图象及入库</li>
<li>主库与从库进行同步</li>
</ul>
<p>从反馈问题来看，有可能出现的地方是在 压缩、网络 IO 上传、修剪图象及入库这 3 部分。<br>如何找到具体是哪一部分，首先看看我们执行图片 resize 上传的阈值是多少。</p>
<p>对应的 查看了一下 PublishUploader.js ，发现有这样的代码。</p>
<figure class="highlight as"><pre><span class="keyword">this</span>.startResizedUpload(<span class="keyword">null</span>,<span class="number">800</span>,<span class="number">800</span>,SWFUpload.RESIZE_ENCODING.JPEG,<span class="number">80</span>,<span class="keyword">false</span>);
</pre></figure>
<p>从代码作用是将所有图片最大尺寸 resize 为 800*800 象素。用 jpeg 图像压缩算法，并且图片质量是 80 。</p>
<p>于是，我进行以下操作：</p>
<ul>
<li>上传一张小于 800px 的图与一张大于 800px 的图，这两张图的总像素近似进行比较</li>
<li>分别在几台笔记本上试试</li>
</ul>
<p>经过实际测试，在「公司级网络」传输速度下，小于 800px 的图从上传到服务器返回在 1s 左右。<br>而 大于 800px 的图约 6s+ 才能执行完整个上传流程。</p>
<p>diff 这两个过程中，结论比较明显：</p>
<ul>
<li>图片 resize 压缩占的时间花了上传时间的 5 倍 -- 5s 。</li>
<li>后后经测试，发现在 3000px 的图上传压缩的时间占了 10s 左右。</li>
</ul>
<h2 id="-swfupload">修改 SWFUpload</h2>
<p>扫过 SWFUpload 代码，了解它的上传原理流程：</p>
<ul>
<li>FileReference 获取路径和图片内容</li>
<li>loader 载入图片</li>
<li>判断宽和高进行 resize 和压缩编码</li>
<li>进行 HTTP POST</li>
<li>服务器返回进行 JS 回调</li>
</ul>
<p>所以，在 Flash 里用 FileReference 是无法获取图片的宽高，如果如要得到图片的宽度和高度，需要创建一个 loader 把图片传入，通过 loader 的「 complete 」异步事件得到图片的高宽。</p>
<p>所以，查看 ImageResizer.as ，看到 loader_Complete 的事件处理函数：</p>
<figure class="highlight as"><pre> <span class="keyword">if</span> (<span class="keyword">this</span>.newWidth < bmp.width || <span class="keyword">this</span>.newHeight < bmp.height) {
<span class="comment">// Apply the blur filter that helps clean up the resized image result</span>
<span class="keyword">var</span> blurMultiplier:<span class="built_in">Number</span> = <span class="number">1.15</span>; <span class="comment">// 1.25;</span>
<span class="keyword">var</span> blurXValue:<span class="built_in">Number</span> = <span class="built_in">Math</span>.max(<span class="number">1</span>, bmp.width / <span class="keyword">this</span>.newWidth) * blurMultiplier;
<span class="keyword">var</span> blurYValue:<span class="built_in">Number</span> = <span class="built_in">Math</span>.max(<span class="number">1</span>, bmp.height / <span class="keyword">this</span>.newHeight) * blurMultiplier;
<span class="keyword">var</span> blurFilter:BlurFilter = <span class="keyword">new</span> BlurFilter(blurXValue, blurYValue, int(BitmapFilterQuality.LOW));
bmp.applyFilter(bmp, <span class="keyword">new</span> Rectangle(<span class="number">0</span>, <span class="number">0</span>, bmp.width, bmp.height), <span class="keyword">new</span> Point(<span class="number">0</span>, <span class="number">0</span>), blurFilter);
}
</pre></figure>
<p>这一段大概意思是，如果有把大图片 resize 成小图片，就会给图片加模糊滤镜，以防止出现马赛克。<br>先将以上代码注释掉，化简我们的逻辑。</p>
<p>然后再看还有另一段代码：</p>
<figure class="highlight as"><pre> <span class="reserved">var</span> <span class="attribute">_bytes</span>:ByteArray = resizedBmp.getPixels(resizedBmp.rect);
_bytes.compress();
<span class="reserved">var</span> <span class="attribute">jpegEncoder</span>:AsyncJPEGEncoder = <span class="keyword">new</span> AsyncJPEGEncoder(<span class="keyword">this</span>.quality, <span class="number">0</span>, <span class="number">100</span>);
jpegEncoder.addEventListener(EncodeCompleteEvent.COMPLETE, <span class="keyword">this</span>.EncodeCompleteHandler);
jpegEncoder.addEventListener(ErrorEvent.ERROR, <span class="keyword">this</span>.EncodeErrorHandler);
jpegEncoder.encode(resizedBmp);
/*
<span class="keyword">this</span>.ba = resizedBmp.getPixels(resizedBmp.rect);
<span class="keyword">this</span>.ba.position = <span class="number">0</span>;
<span class="keyword">this</span>.baOut = <span class="keyword">new</span> ByteArray();
<span class="reserved">var</span> <span class="attribute">cLibEncoder</span>:Object = (<span class="keyword">new</span> CLibInit).init();
<span class="keyword">this</span>.debug(resizedBmp.width.toString());
<span class="keyword">this</span>.debug(resizedBmp.height.toString());
cLibEncoder.encodeAsync(compressFinished, <span class="keyword">this</span>.ba, <span class="keyword">this</span>.bagOut, resizedBmp.width, resizedBmp.height, <span class="keyword">this</span>.quality);
*/
</pre></figure>
<p>未注释的代码是用一个开源异步 JPEG 编码类（ <a href="http://code.google.com/p/sync-to-async/source/browse/#svn%2Ftrunk%2Facr%2Fcodec" target="_blank">AsyncJPEGEncoder</a> ）用于编码图片。</p>
<p>为什么它没有用内置的 JPEG 图片 lib 「 JEPGEncoder 」进行编码？是因为开源的 AsyncJPEGEncoder 是异步的，且它在效率上对比 Adobe 内置的要稍高一些。</p>
<p>注释的代码是用 <a href="http://labs.adobe.com/wiki/index.php?title=Alchemy:Documentation:Developing_with_Alchemy:AS3_API&redirect=no
http://www.websector.de/blog/2009/06/21/speed-up-jpeg-encoding-using-alchemy/">Adobe alchemy</a> 技术实现的一个 clib 组件，这个组件在代码目录下可以看到是 jpegencoder.swc 。</p>
<p>这个技术简单的说就是，它是把 c 的 libjpeg 编进 flash 里，并且可以高效执行 swc ，看网上的一些测试数据，确实比较高效。</p>
<p>看到这里或许我们该高兴了，如果将现在异步的 AsyncJPEGEncoder 类改成 jpegencoder.swc ，那问题不就解决了吗？</p>
<h2 id="-bitmapdata">神奇的 BitmapData</h2>
<p>我带着上面的想法试了一下，果然有效！<br>但不久就发现一个问题，有的图片上传成功，有的图片在 resize 的时候抛出异常「#2015 」。 </p>
<p>google 了一下这个错误号，发现是 flash Player 10 的一个 <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html" target="_blank"> 限制 </a> ：</p>
<blockquote>
<p>In AIR 1.5 and Flash Player 10, the maximum size for a BitmapData object is 8,191 pixels in width or height, and the total number of pixels cannot exceed 16,777,215 pixels. (So, if a BitmapData object is 8,191 pixels wide, it can only be 2,048 pixels high.) In Flash Player 9 and earlier and AIR 1.1 and earlier, the limitation is 2,880 pixels in height and 2,880 in width.</p>
<p>Starting with AIR 3 and Flash player 11, the size limits for a BitmapData object have been removed. The maximum size of a bitmap is now dependent on the operating system.</p>
</blockquote>
<p>现在市面上比较好的全画幅相机，就会超过这个像素限制。<br>例如测试的一张样图 5616 × 3744=21026304 像素。<br>而我们目前的 SWFUploader 2.5 的编译是基于 flash player 10 。<br>所以，异常自然就抛出了。</p>
<p>但是</p>
<ul>
<li>为什么线上正在运行的 SWFUploader 没有这个异常问题？</li>
<li>不是超过 1600w 像素的限制了吗，为什么还能正常上传还没有报错呢？</li>
</ul>
<p>原来，是 bitmapdata 文档有一个 loader 无 1600w 像素限制的细节没有说。<br>先比较以下两段使用 bitmapdata 代码：</p>
<p>代码 A ：</p>
<figure class="highlight as"><pre><span class="keyword">var</span> bmp:BitmapData = (li.content <span class="keyword">as</span> Bitmap).bitmapData;
<span class="comment">//载入图片并放入到 bitmapData 里</span>
</pre></figure>
<p>代码 B ：</p>
<figure class="highlight as"><pre>
bmp.applyFilter(bmp, <span class="keyword">new</span> Rectangle(<span class="number">0</span>, <span class="number">0</span>, bmp.width, bmp.height), <span class="keyword">new</span> Point(<span class="number">0</span>, <span class="number">0</span>), blurFilter);
<span class="comment">//应用 bitmapData 的 filter</span>
</pre></figure>
<p>两者在使用上有何不同? </p>
<ul>
<li>「代码 A 」是将图片 load 到 bitmtpData 里，它不会报错。</li>
<li>「代码 B 」调用方法 applyFilter 创建出来的 Bitmap ，这样就会报错。</li>
</ul>
<p>applyFilter 从文档里的一段描述可以看出此方法是创建了一个新的 bitmapData 对象：</p>
<blockquote>
<p>applyFilter () method</p>
<p>public function applyFilter(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, filter:BitmapFilter):void</p>
<p>Takes a source image and a filter object and generates the filtered image.</p>
</blockquote>
<p>以上代码差别 AS 3 文档没有说明用 loader 载入图片没有像素限制的问题。<br>线上代码因之前是其他同学修改过部分代码，无意用成了「代码 A 」 loader 方式载入。<br>因此并没有报错。</p>
<p>所以，此问题的解决方法为将使用 filter 的条件由</p>
<figure class="highlight as"><pre>
if (this<span class="preprocessor">.newWidth</span> < bmp<span class="preprocessor">.width</span> || this<span class="preprocessor">.newHeight</span> < bmp<span class="preprocessor">.height</span>) {
//bmp<span class="preprocessor">.applyFilter</span>
}
</pre></figure>
<p>改为</p>
<figure class="highlight as"><pre>
<span class="comment">//（ 0x01000000 等于 10 进制数 16777216 ）</span>
<span class="keyword">if</span> (bmp.width * bmp.height < <span class="number">0x01000000</span>) {
<span class="comment">//bmp.applyFilter </span>
}
</pre></figure>
<p>像素问题 Bitmap 问题终于解决。</p>
<h3 id="-alchemy">神奇的炼金术 alchemy</h3>
<p>解决完上面的问题，再测试，又发现了一个问题。</p>
<ul>
<li>用 JS 创建 SWFUploader 上传图片第一次成功；</li>
<li>再用这个 flash 实例传一张图就可耻的失败了，而且还不抛异常。</li>
</ul>
<p>好吧，不抛异常，就只能加入调试埋 log 了，将几个代码关键函数加入对应的 log ：</p>
<ul>
<li>加入压缩进度 log 。因为不管用何种 JPEG 组件，都是异步成生成 JPEG 图片。</li>
<li>在重点逻辑的入口点与出口点加入相应 log ，<ul>
<li>加入到 load 图片成功；</li>
<li>开始进入压缩函数块；</li>
<li>压缩图片的宽高；</li>
<li>调用 alchemy 结束；</li>
<li>异步压缩结束。</li>
</ul>
</li>
</ul>
<p>再加入一个 log 函数：</p>
<figure class="highlight as"><pre>
<span class="keyword">private</span> <span class="function"><span class="keyword">function</span> <span class="title">debug</span><span class="params">(msg:String)</span><span class="type">:void</span> {</span>
ExternalCall.Debug(<span class="string">'console.log'</span>,msg);
}
</pre></figure>
<p>这样，就可以在控制台里看到 log 了。
发现规律</p>
<ul>
<li>第 1 次 resize 图正常</li>
<li>第 2 次除了压缩进度的有 log ，其他进展一直都是 0%。</li>
</ul>
<p>再次 review JPEG 编码的代码块:</p>
<figure class="highlight as"><pre>
var cLibEncoder:Object = (new CLibInit)<span class="preprocessor">.init</span>()<span class="comment">;</span>
this<span class="preprocessor">.debug</span>(resizedBmp<span class="preprocessor">.width</span><span class="preprocessor">.toString</span>())<span class="comment">;</span>
this<span class="preprocessor">.debug</span>(resizedBmp<span class="preprocessor">.height</span><span class="preprocessor">.toString</span>())<span class="comment">;</span>
cLibEncoder<span class="preprocessor">.encodeAsync</span>(compressFinished, this<span class="preprocessor">.ba</span>, this<span class="preprocessor">.bagOut</span>, resizedBmp<span class="preprocessor">.width</span>, resizedBmp<span class="preprocessor">.height</span>, this<span class="preprocessor">.quality</span>)<span class="comment">;</span>
</pre></figure>
<p>分析个组件的使用，第一感觉就是组件使用过后居然没有销毁，这代码太囧了 =.=</p>
<p>alchemy 如果为了高效，应该是</p>
<ul>
<li>将 lib 驻入内存再开辟一块 buffer 给它</li>
<li>Resize 大图时，如果 buffer 处理不好，没有很好的 free up ，第二次 init 会不会有问题？</li>
<li>如果开辟的内存小的话是不是更安全？</li>
</ul>
<p>按照上面的这个思路，我将 resize 的参数改小，使 buffer 使用尽可能的小：</p>
<ul>
<li>将 resize 参数改为所有上传图都 resize 到 100*100, quiality 为 80 。</li>
</ul>
<p>测试了一下发现都能正常上传多张图片。</p>
<p>那再按照第一次可上传后续不能传和 buffer 小可用的结论，我将使用 alchemy 组件初始化的使用改用为 static （即 singlton 类型）保证只实例化一次，看是否正常。</p>
<p>最后发现可正常 resize 多张图片，到此 alchemy 的问题也得已解决。</p>
<h2 id="-">后记</h2>
<p>这篇文章来源于我把 SWFUpload 的问题解决思路用邮件分享给大家。<br>如何改的，可以看我附件里的代码。<br>重要的不是代码怎么 fix 的，而是思路。 </p>
<p>因为我觉得前端同学看上去都是只关注兼容性而不关注逻辑思维。这篇文章是算是抛砖引玉了。<br>对于我们使用的第三方代码，有空可以多熟悉，关键时刻也许不用手忙脚乱。</p>
<p>其他的 flash 第三方上传解决方案：</p>
<ul>
<li><a href="http://www.plupload.com/example_all_runtimes.php" target="_blank">plupload</a> - 特点是支持平台全（ flash, silverlight, html5, html4) 都支持。 flash 支持客户端压缩图片， flash 编译出来的大小只有 18K 。压缩效率比 swfupload 低不少。<ul>
<li>5616 × 3744(5.1M) 图片， resize 成（ 320*240 ，质量 90 ）</li>
<li>plupload 用时在 10s+，而 Swfupload 用时在 2s- ;</li>
<li>环境在 mac ML 系统 flash player 11 ， safari 6 & chrome 22dev 。</li>
</ul>
</li>
<li><a href="http://www.uploadify.com/demos/" target="_blank">uploadify</a> <ul>
<li>平台支持全面， 与 plupload 类似</li>
<li>但是不支持 resize 图片，</li>
<li>在大图上传的时，网速慢时，上传整体时间就会比较久，全依赖于带宽。</li>
</ul>
</li>
</ul>
<p>虽然两年过去了， swfupload 的压缩性能还算是不错的（主要是依赖于 flash 平台的性能）。</p>
<h2 id="-">相关链接汇总</h2>
<ul>
<li><a href="http://code.google.com/p/swfupload/" target="_blank">swfupload</a></li>
<li><a href="http://code.google.com/p/sync-to-async/source/browse/#svn%2Ftrunk%2Facr%2Fcodec" target="_blank">AsyncJPEGEncoder</a></li>
<li><a href="http://www.bytearray.org/?p=775" target="_blank">JPEG encoder with alchemy</a> <a href="http://www.adobe.com/cn/devnet/author_bios/thibault_imbert.html" target="_blank"> 作者介绍 </a></li>
<li><a href="http://www.plupload.com/example_all_runtimes.php" target="_blank">plupload</a></li>
<li><a href="http://www.uploadify.com/demos/" target="_blank">uploadify</a> </li>
<li><a href="http://labs.adobe.com/wiki/index.php?title=Alchemy:Documentation:Developing_with_Alchemy:AS3_API&redirect=no
http://www.websector.de/blog/2009/06/21/speed-up-jpeg-encoding-using-alchemy/">adobe alchemy</a></li>
<li><a href="http://wenku.baidu.com/view/42b5633e5727a5e9856a61ff.html" target="_blank">JPEG 图像格式详解 </a></li>
</ul>
]]></content>
<summary type="html"><![CDATA[<h2 id="-swfupload">关于 SWFUpload</h2>
<blockquote>
<p>SWFUpload 是一个客户端文件上传工具，最初由 Vinterwebb.se 开发，它通过整合 Flash 与 JavaScript 技术为 WEB 开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。</p>
</blockquote>
<p>主要特点：</p>
<ul>
<li>可以同时上传多个文件；</li>
<li>类似 AJAX 的无刷新上传；</li>
<li>可以显示上传进度；</li>
<li>良好的浏览器兼容性；</li>
<li>兼容其他 JavaScript 库 ( 例如： jQuery, Prototype 等 ) ；</li>
<li>支持 Flash 8 和 Flash 9 ；</li>
</ul>
<blockquote>
<p>SWFUpload 不同于其他基于 Flash 构建的上传工具，它有着优雅的代码设计，开发者可以利用 XHTML 、 CSS 和 JavaScript 来随心所欲的定制它在浏览器下的外观；它还提供了一组简明的 JavaScript 事件，借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。</p>
</blockquote>
<p>这么多说的就是一个意思， SWFUpload 使用灵活方便，不少人在用。<br>但是，它在我们项目实际应用中发现问题。
]]></summary>
<category term="tech" scheme="http://rank.im/categories/tech/"/>
</entry>
<entry>
<title><![CDATA[山西的几张照片]]></title>
<link href="http://rank.im/2012/06/26/tourism-in-shanxi/"/>
<id>http://rank.im/2012/06/26/tourism-in-shanxi/</id>
<published>2012-06-26T09:08:31.000Z</published>
<updated>2014-04-04T02:39:20.000Z</updated>
<content type="html"><![CDATA[<p>出门旅游在外， iPhone 4S 这样的设备拍照比较方便，可以不用拿沉重的单反了。
这次用 iPhone 拍的照片除了象素低点，广角和长焦都不够用以外，其他的还蛮好的。</p>
<p>大同或平遥都是有历史的城市，所以我把照片去色，用黑白体现历史感。</p>
<p><img src="/images/shanxi/IMG_0691.JPG" alt=""></p>
<a id="more"></a>
<p>这里是云岗石窟的一座建筑，整体的感觉很象北京故宫的角楼。</p>
<p><img src="/images/shanxi/IMG_0688.JPG" alt=""></p>
<p>石雕很有感觉，不足的是霓虹灯有点败景。</p>
<p><img src="/images/shanxi/IMG_0695.JPG" alt=""></p>
<p><img src="/images/shanxi/IMG_0698.JPG" alt=""></p>
<p>云岗石窟的石像大多数已经被风化，拍照一定不要开闪光。</p>
<p><img src="/images/shanxi/IMG_0699.JPG" alt=""></p>
<p>平遥古镇一瞥。</p>
<p><img src="/images/shanxi/IMG_0700.JPG" alt=""></p>
<p>云岗石窟的石像。</p>
<p><img src="/images/shanxi/IMG_0702.JPG" alt=""></p>
<p>很多石窟原本都有彩绘，由于时间久远现在大多数都没有色彩了，也许褪色的石像才能体现它们的历史</p>
<p><img src="/images/shanxi/IMG_0701.JPG" alt=""></p>
<p>一个古镇的历史，用城墙来说明最好不过了。</p>
<p><img src="/images/shanxi/IMG_0703.JPG" alt=""></p>
<p>传说中的乔家大院。</p>
<p>-- EOF --</p>
]]></content>
<summary type="html"><![CDATA[<p>出门旅游在外， iPhone 4S 这样的设备拍照比较方便，可以不用拿沉重的单反了。
这次用 iPhone 拍的照片除了象素低点，广角和长焦都不够用以外，其他的还蛮好的。</p>
<p>大同或平遥都是有历史的城市，所以我把照片去色，用黑白体现历史感。</p>
<p><img src="/images/shanxi/IMG_0691.JPG" alt=""></p>
]]></summary>
<category term="life" scheme="http://rank.im/categories/life/"/>
</entry>
<entry>
<title><![CDATA[webkit 里会出现突然闪一下的问题]]></title>
<link href="http://rank.im/2012/01/05/webkit-css3-blink/"/>
<id>http://rank.im/2012/01/05/webkit-css3-blink/</id>
<published>2012-01-05T06:00:03.000Z</published>
<updated>2014-04-04T02:39:20.000Z</updated>
<content type="html"><![CDATA[<h2 id="-">问题</h2>
<p>有用户反馈在 chrome 下出现屏幕会闪，但不是每次都能复现。 </p>
<h2 id="-">解决办法</h2>
<figure class="highlight css"><pre><span class="class">.no-flick</span><span class="rules">{<span class="rule"><span class="attribute">-webkit-backface-visibility</span>:<span class="value"> hidden</span></span>; <span class="comment">/*但不能用于 sprite 雪碧图*/</span><span class="rule">}</span></span>
<span class="comment">/* 或 */</span>
<span class="class">.no-flick</span><span class="rules">{<span class="rule"><span class="attribute">-webkit-transform</span>:<span class="value"><span class="function">translate3d(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>)</span></span></span>;<span class="rule">}</span></span>
</pre></figure>
<a id="more"></a>
<h2 id="-">过程</h2>
<p>昨天晚上 maomao ，晓刚我提起，会否是我们的「浮层」导致。逻辑是因为</p>
<ul>
<li>「浮层」 的 style 加了 opacity 。</li>
<li>页面还没 load 完毕就把 mask 给加到 body 第一个元素了，这时没有加 display:none 。</li>
</ul>
<p>而后我在「浮层」的蒙板 mask 把 background:white 改成 Red 。<br>很遗憾是没有出现红色。</p>
<p>所以，确定不是「浮层」的 mask 导致的问题。</p>
<p>在调试的时候感到幸运的是：<br>发现「闪」这个问题，都是闪在页面头部，经过精简后发现是在</p>
<pre><code><a><i><i></a>
</code></pre><p>标签里。</p>
<p>晓亮提到会否是 Transform 引起的。<br>试后，去除 transform 果然管用。<br>但是我们仍然没有知道解决办法，以及为何这样。</p>
<p>在百度上搜索类似 css 3 transform bug ，无果。
别灰心，在 stackoverflow 上 看看。
query: "transform flick bug webkit"</p>
<p>果然有料。<br><a href="http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform" target="_blank">http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform</a></p>
<figure class="highlight css"><pre><span class="tag">-webkit-backface-visibility</span>: <span class="tag">hidden</span>; <span class="comment">/*但不能用于 sprite 雪碧图*/</span>
<span class="comment">/* 或 */</span>
<span class="tag">-webkit-transform</span><span class="pseudo">:translate3d(0</span>,0,0);
</pre></figure>
<p>来解决「闪」的问题。</p>
<p>如果用 translate3d 这么解决，心里想这不是用 3d 另一个问题解决现在 css3 3d 的一个问题吗。
顺着往下找了下资料。</p>
<p>果然如此， translate3d 有问题：</p>
<blockquote>
<p>However, the body {-webkit-transform} approach causes all elements on the page to effectively be rendered in 3D. This isn't the worst thing, but it slightly changes the rendering of text and other CSS-styled elements.</p>
<p>It may be an effect you want. It may be useful if you're doing a lot of transform on your page. Otherwise, -webkit-backface-visibility:hidden on the element your transforming is the least invasive option.</p>
</blockquote>
<p>所以，从目前来看 -webkit-backface-visibility: hidden; 是最优解。</p>
<h2 id="-">弄清源头</h2>
<p>关于这个 css3 属性拿来作什么用的。可以查阅<br>w3c 资料
<a href="http://www.w3.org/TR/css3-3d-transforms/#backface-visibility-property" target="_blank">http://www.w3.org/TR/css3-3d-transforms/#backface-visibility-property</a></p>
<blockquote>
<p>The ‘ backface-visibility ’ property determines whether or not the "back" side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer. Applying a rotation about Y of 180 degrees (for instance) would cause the back side of the element to face the viewer.
This property is useful when you place two elements back-to-back, as you would to create a playing card. Without this property, the front and back elements could switch places at times during an animation to flip the card. Another example is creating a box out of 6 elements, but where you want to see the inside faces of the box. This is useful when creating the backdrop for a 3 dimensional stage.</p>
</blockquote>
<p>用这个属性做翻卡片的小游戏比较合适 :) 。<br>测试运行以下代码，就能理解为什么会在 transform 时会闪：</p>
<figure class="highlight html"><pre><span class="doctype"><!DOCTYPE HTML></span>
<span class="tag"><<span class="title">html</span>></span>
<span class="tag"><<span class="title">head</span>></span>
<span class="tag"><<span class="title">style</span> <span class="attribute">type</span>=<span class="value">"text/css"</span>></span><span class="css">
<span class="id">#div1</span> <span class="rules">{
<span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">120</span>px</span></span>;
<span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">100</span>px</span></span>;
<span class="rule"><span class="attribute">background-color</span>:<span class="value">yellow</span></span>;
<span class="rule"><span class="attribute">border</span>:<span class="value"><span class="number">1</span>px solid black</span></span>;
<span class="rule"><span class="attribute">-moz-transform</span>:<span class="value"><span class="function">rotateY(<span class="number">25</span>deg)</span></span></span>; <span class="comment">/* Firefox */</span>
<span class="rule"><span class="attribute">-webkit-transform</span>:<span class="value"><span class="function">rotateY(<span class="number">25</span>deg)</span></span></span>; <span class="comment">/* Safari and Chrome */</span>
<span class="rule"><span class="attribute">transform</span>:<span class="value"><span class="function">rotateY(<span class="number">25</span>deg)</span></span></span>;
<span class="rule">}</span></span>
</span><span class="tag"></<span class="title">style</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>></span><span class="javascript">
<span class="function"><span class="keyword">function</span> <span class="title">rotate</span><span class="params">(value)</span> {</span>
document.getElementById(<span class="string">'div1'</span>).style.webkitTransform = <span class="string">"rotateY("</span> + value + <span class="string">"deg)"</span>;
document.getElementById(<span class="string">'div1'</span>).style.MozTransform = <span class="string">"rotateY("</span> + value + <span class="string">"deg)"</span>;
document.getElementById(<span class="string">'div1'</span>).style.transform = <span class="string">"rotateY("</span> + value + <span class="string">"deg)"</span>;
document.getElementById(<span class="string">'span1'</span>).innerHTML = value + <span class="string">"deg"</span>
}
<span class="function"><span class="keyword">function</span> <span class="title">checkBackface</span><span class="params">()</span> {</span>
<span class="keyword">if</span> (document.getElementById(<span class="string">"bf"</span>).checked == <span class="literal">true</span>) {
document.getElementById(<span class="string">'div1'</span>).style.webkitBackfaceVisibility = <span class="string">"hidden"</span>
} <span class="keyword">else</span> {
document.getElementById(<span class="string">'div1'</span>).style.webkitBackfaceVisibility = <span class="string">"visible"</span>
}
}
</span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"></<span class="title">head</span>></span>
<span class="tag"><<span class="title">body</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"div1"</span>></span>HELLO<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">p</span>></span>Rotate the yellow div element, with and without checking the backface-visibility checkbox:<span class="tag"></<span class="title">p</span>></span>
<span class="tag"><<span class="title">p</span>></span>Hide the backside:<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"checkbox"</span> <span class="attribute">onchange</span>=<span class="value">"checkBackface()"</span> <span class="attribute">id</span>=<span class="value">"bf"</span> /></span><span class="tag"></<span class="title">p</span>></span>
Rotate:<span class="tag"><<span class="title">br</span> /></span>
<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"range"</span> <span class="attribute">min</span>=<span class="value">"-360"</span> <span class="attribute">max</span>=<span class="value">"360"</span> <span class="attribute">value</span>=<span class="value">"25"</span> <span class="attribute">onchange</span>=<span class="value">"rotate(this.value)"</span> /></span><span class="tag"><<span class="title">br</span> /></span>
-webkit-transform: rotateY(<span class="tag"><<span class="title">span</span> <span class="attribute">id</span>=<span class="value">"span1"</span>></span>7deg<span class="tag"></<span class="title">span</span>></span>);
<span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span>
</pre></figure>
<p>transform 是 3D 变换，而 backface-visibility:hidden ，则是在背面隐藏，实际上就变成了 2D 。<br>而把 translate3d 变换关闭也可以，但性能不好。</p>
<h2 id="-">结论</h2>
<p>在用 </p>
<ul>
<li>position:absulote+zindex!=0 </li>
<li>用 transform 会偶尔出现页面会闪的现象</li>
</ul>
<p>确实是 chrome 的一个 bug 。<br>chromium 里没有发现有人提 bug ，所以我检索了一下 webkit.org 的 bugtrace ，看到</p>
<ul>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=47175" target="_blank">https://bugs.webkit.org/show_bug.cgi?id=47175</a></li>
<li><a href="https://bug-47175-attachments.webkit.org/attachment.cgi?id=69779" target="_blank">https://bug-47175-attachments.webkit.org/attachment.cgi?id=69779</a></li>
</ul>
<p>无疑，这个问题后续 webkit 一定会 fix 。<br>另，-webkit-backface-visibility: hidden; 是最优解。</p>
<p>-- EOF --</p>
]]></content>
<summary type="html"><![CDATA[<h2 id="-">问题</h2>
<p>有用户反馈在 chrome 下出现屏幕会闪，但不是每次都能复现。 </p>
<h2 id="-">解决办法</h2>
<figure class="highlight css"><pre><span class="class">.no-flick</span><span class="rules">{<span class="rule"><span class="attribute">-webkit-backface-visibility</span>:<span class="value"> hidden</span></span>; <span class="comment">/*但不能用于 sprite 雪碧图*/</span><span class="rule">}</span></span>
<span class="comment">/* 或 */</span>
<span class="class">.no-flick</span><span class="rules">{<span class="rule"><span class="attribute">-webkit-transform</span>:<span class="value"><span class="function">translate3d(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>)</span></span></span>;<span class="rule">}</span></span>
</pre></figure>
]]></summary>
<category term="tech" scheme="http://rank.im/categories/tech/"/>
</entry>
<entry>
<title><![CDATA[呼伦贝尔游的几张照片]]></title>
<link href="http://rank.im/2011/08/08/tourism-in-hunlunbeier/"/>
<id>http://rank.im/2011/08/08/tourism-in-hunlunbeier/</id>
<published>2011-08-08T04:05:22.000Z</published>
<updated>2014-03-16T14:07:20.000Z</updated>
<content type="html"><![CDATA[<p><img src="/images/hunlunbeier/6016693788_149811e489_z.jpg" alt="">
<a id="more"></a>
<img src="/images/hunlunbeier/6016136621_80fa51b162_z.jpg" alt="">
<img src="/images/hunlunbeier/6016137457_48d4f44b93_z.jpg" alt="">
<img src="/images/hunlunbeier/6016143997_2c676523e3_z.jpg" alt="">
<img src="/images/hunlunbeier/6016159861_4affbf7408_z.jpg" alt="">
<img src="/images/hunlunbeier/6016254241_fb69d4bb7b_z.jpg" alt="">
<img src="/images/hunlunbeier/6016781576_e0fa3441d3_z.jpg" alt="">
<img src="/images/hunlunbeier/6016780322_75bc0477ec_z.jpg" alt="">
<img src="/images/hunlunbeier/6016157935_779e9d9f34_z.jpg" alt="">
<img src="/images/hunlunbeier/6016710608_b83334bbb8_z.jpg" alt="">
<img src="/images/hunlunbeier/6016706512_d246f9434f_z.jpg" alt="">
<img src="/images/hunlunbeier/6016700104_33e9bf8f07_z.jpg" alt="">
<img src="/images/hunlunbeier/6016701922_f91ec3c378_z.jpg" alt="">
<img src="/images/hunlunbeier/6016151539_773f5ebc2d_z.jpg" alt="">
<img src="/images/hunlunbeier/6016703430_e6c2cbcbb7_z.jpg" alt="">
<img src="/images/hunlunbeier/6016698086_0251a6a9db_z.jpg" alt="">
<img src="/images/hunlunbeier/6016696994_d86533a1b8_z.jpg" alt="">
<img src="/images/hunlunbeier/6016143377_2f6331d3ba_z.jpg" alt="">
<img src="/images/hunlunbeier/6016141623_eb1dc9f418_z.jpg" alt="">
<img src="/images/hunlunbeier/6016142819_39d2347f5f_z.jpg" alt="">
<img src="/images/hunlunbeier/6016145973_984cbc3eea_z.jpg" alt="">
<img src="/images/hunlunbeier/6016138203_38eeeaefe6_z.jpg" alt="">
<img src="/images/hunlunbeier/6016139009_c68fa86fed_z.jpg" alt="">
<img src="/images/hunlunbeier/6016692290_c27e600c75_z.jpg" alt="">
<img src="/images/hunlunbeier/6016687668_86db875efe_z.jpg" alt="">
<img src="/images/hunlunbeier/6016135033_211a847822_z.jpg" alt=""></p>
<p>-- EOF --</p>
]]></content>
<summary type="html"><![CDATA[<p><img src="/images/hunlunbeier/6016693788_149811e489_z.jpg" alt="">
]]></summary>
<category term="life" scheme="http://rank.im/categories/life/"/>
</entry>
<entry>
<title><![CDATA[用户行为系统 如何记录行为数据]]></title>
<link href="http://rank.im/2011/04/07/user-behavior-record-data/"/>
<id>http://rank.im/2011/04/07/user-behavior-record-data/</id>
<published>2011-04-07T15:45:43.000Z</published>
<updated>2014-04-04T02:39:20.000Z</updated>
<content type="html"><![CDATA[<p>最近准备把我主持并负责的前端用户行为系统开源了，这个系统我们内部命名为 marmot 。中文为「土拨鼠」，有挖掘之意。
除我之外，还有两位开发人员分别是： seven 和 cyhello 。</p>
<p>本篇文章简短的说明一下 marmot 的 log 重点问题：</p>
<ol>
<li>解决不同分辩率的策略.</li>
<li>解决粒度过细的问题.</li>
<li>还原路径问题.</li>
<li>何时发回数据及数据量的问题</li>
</ol>
<a id="more"></a>
<h2 id="-">分辩率策略</h2>
<p>默认原点以 p(0,0) 开始计算,如果是定宽页面,p(0,0) 坐标在不同辩率下得到的坐标是不同的.如何解决这一问题.
普遍情况下会采取截面坐标. 分析目前页面几种类型：</p>
<ul>
<li>页面居左布局原点坐标从 p(0,0) 开始计算。</li>
<li>页面居中布局原点坐标从 p(document.documentElement.scrollWidth/2|0,0) 开始计算。</li>
<li>百分比的宽其实也是可以定位的，原理也是引入相对坐标系，但也有一些劣势，这里不展开了。</li>
</ul>
<h2 id="-">页面像素粒度切分</h2>
<p>每个页面默认粒度为 pixel(1,1) ，即 1 像素为单位。 这样的优点是数据不失真，但缺点则是数据量传输和存储量大。</p>
<p>大多数时候我们是不需要按 pixel(1,1) 来计算的。而解决这一问题的思路很简单：</p>
<ul>
<li>页面做先 grid 化, pixel(n,n) 。</li>
<li>数量为: Math.floor(document.documentElement.scrollWidth/n) 。「 n 为象素比例尺」</li>
</ul>
<h2 id="-">还原路径</h2>
<ul>
<li>可以序列化 DOM path 成 selector 。</li>
<li>以 previousSibling + ancestor 不断向上递归出 presudo selector( 伪 selector) 。</li>
</ul>
<h2 id="-">何时发回及发回数据量</h2>
<p>beforeunload 异步发回。
数据量不会太大, HTTP 里 GET 方式请求我们所知：</p>
<ul>
<li>IE6 2K 数据 ( 已知 ) 。</li>
<li>IE7+5K 左右 ( 记得之前我测过，印象中是这个数据 ) ，非 IE 都有 >= 2K 的数据量。</li>
</ul>
<p>肯定有人问发回的比例是多少，据 dron 同学统计过约 80%左右。<br>虽说不是绝对发回来，但足够你用。<br>采样率 5K~1W 左右 pv 的操作发回，数据最大为 2K*1W 约 20~30M log 不算多。</p>
]]></content>
<summary type="html"><![CDATA[<p>最近准备把我主持并负责的前端用户行为系统开源了，这个系统我们内部命名为 marmot 。中文为「土拨鼠」，有挖掘之意。
除我之外，还有两位开发人员分别是： seven 和 cyhello 。</p>
<p>本篇文章简短的说明一下 marmot 的 log 重点问题：</p>
<ol>
<li>解决不同分辩率的策略.</li>
<li>解决粒度过细的问题.</li>
<li>还原路径问题.</li>
<li>何时发回数据及数据量的问题</li>
</ol>
]]></summary>
<category term="tech" scheme="http://rank.im/categories/tech/"/>
</entry>
<entry>
<title><![CDATA[九寨沟拍的几张图]]></title>
<link href="http://rank.im/2010/11/05/tourism-in-jiuzhaigou/"/>
<id>http://rank.im/2010/11/05/tourism-in-jiuzhaigou/</id>
<published>2010-11-05T03:59:38.000Z</published>
<updated>2014-03-16T14:02:41.000Z</updated>
<content type="html"><![CDATA[<p><img src="/images/jiuzhaigou/2bdc2fc4c22d75e38326ac1d.jpg" width="700"><br/><br/>
<a id="more"></a>
<img src="/images/jiuzhaigou/88fd974320a6845b9213c601.jpg" width="700"><br/><br/></p>
<p><img src="/images/jiuzhaigou/8310696e929f679080cb4a0f.jpg" width="350">
<img src="/images/jiuzhaigou/97e186a7b83efedfd0435879.jpg" width="350"><br/><br/></p>
<p><img src="/images/jiuzhaigou/9bfe9fb506d9238437d3ca20.jpg" width="700"><br/><br/>
<img src="/images/jiuzhaigou/31b2fd123265861bf919b8eb.jpg" width="700"><br/><br/>
<img src="/images/jiuzhaigou/190efddbe58d642cd1164ee4.jpg" width="700"><br/><br/>
<img src="/images/jiuzhaigou/3829ccfaf84910dd58ee90e1.jpg" width="700"><br/><br/>
<img src="/images/jiuzhaigou/503907ce80eaca4993457e43.jpg" width="700"><br/><br/>
<img src="/images/jiuzhaigou/e0353336df424f7b0b55a9f6.jpg" width="700"><br/><br/>
<img src="/images/jiuzhaigou/992cfd01d23d80447aec2c77.jpg" width="700"><br/><br/>
<img src="/images/jiuzhaigou/33a1c74f14f5cf7caec3ab72.jpg" width="700"><br/><br/>
<img src="/images/jiuzhaigou/547aa881a10e2192bd3e1e70.jpg" width="700"><br/><br/>
<img src="/images/jiuzhaigou/fdfdc8d770d7a097a344df61.jpg" width="700"><br/><br/>
<img src="/images/jiuzhaigou/4f0fbfcbb1c5c455bf09e6f0.jpg" width="700"><br/><br/></p>
<p>-- EOF --</p>
]]></content>
<summary type="html"><![CDATA[<p><img src="/images/jiuzhaigou/2bdc2fc4c22d75e38326ac1d.jpg" width="700"><br/><br/>
]]></summary>
<category term="life" scheme="http://rank.im/categories/life/"/>
</entry>
<entry>
<title><![CDATA[模拟里 firebug 的 DOM inspect 功能]]></title>
<link href="http://rank.im/2010/08/29/simulate-dom-inspect-effect/"/>
<id>http://rank.im/2010/08/29/simulate-dom-inspect-effect/</id>
<published>2010-08-29T06:09:15.000Z</published>
<updated>2014-04-04T02:39:20.000Z</updated>
<content type="html"><![CDATA[<h2 id="-">常规思路</h2>
<p>在 firefox 里如何实现 firebug 的 DOM inspect 选择功能?</p>
<ul>
<li>首先，我们会 document 里添加 mouseover 事件时在 HTMLElement 上飘一个 absolute 的容器，设置 border 。</li>
<li>接着， mousedown ，这个 absolute 的元素隐藏；</li>
<li>再着着， click 结束后从事件里的 event 得到 target ，从而再得到 inspect 。</li>
</ul>
<p>可这样是不是真的能做到呢？
<a id="more"></a>
忽视了一点。<br>mouseover 如果在某个元素上飘一个 absolute 容器，那么你的 over 事件永远在这个 absolute 元素上了。</p>
<p>可惜不是 as ， as 可以把某个容器的事件 enable 设为 false 即可。<br>DOM w3c 没有禁用事件的功能。</p>
<h2 id="-">打破常规</h2>
<p>回到题目，那怎么做呢？<br>同事能跳出刚才的程序思维——用 4 个 div 当 4 条边就可以了。</p>
<p>不知道你第还没试之前的分析是否是这样的呢？
我当时在想，在 coding 的时候能跳出原来传统的思维真是不易。太赞了!</p>
<p>写个简单 demo 记念（用 firefox 看吧。 )
八卦一下，据观察， firebug 确实真的也是这么做的（没看代码，只看了 DOM tree 里多了几个 div ）。</p>
<figure class="highlight html"><pre><span class="doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"></span>
<span class="tag"><<span class="title">html</span>></span>
<span class="tag"><<span class="title">title</span>></span>rank's HTML Document<span class="tag"></<span class="title">title</span>></span>
<span class="tag"><<span class="title">head</span>></span><span class="tag"></<span class="title">head</span>></span>
<span class="tag"><<span class="title">body</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"http://code.jquery.com/jquery-1.4.2.min.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"><<span class="title">style</span>></span><span class="css">
<span class="class">.abs</span> <span class="rules">{<span class="rule"><span class="attribute">position</span>:<span class="value">absolute</span></span>;<span class="rule"><span class="attribute">zoom</span>:<span class="value"><span class="number">1</span></span></span></span>}
</span><span class="tag"></<span class="title">style</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">style</span>=<span class="value">"background:#ffc;height:20px;margin:20px 0;padding:20px;"</span>></span>rank<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">style</span>=<span class="value">"background:#ffc;height:20px;margin:20px 0;padding:20px;"</span>></span>rank<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">style</span>=<span class="value">"background:#ffc;height:20px;margin:20px 0;padding:20px;"</span>></span>rank<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">style</span>=<span class="value">"background:#ffc;height:20px;margin:20px 0;padding:20px;"</span>></span>rank<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">style</span>=<span class="value">"background:#ffc;height:20px;margin:20px 0;padding:20px;"</span>></span>rank<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">style</span>=<span class="value">"background:#ffc;height:20px;margin:20px 0;padding:20px;"</span>></span>rank<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">style</span>=<span class="value">"background:#ffc;height:20px;margin:20px 0;padding:20px;"</span>></span>rank<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">style</span>=<span class="value">"background:#ffc;height:20px;margin:20px 0;padding:20px;"</span>></span>rank<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"abs-right"</span> <span class="attribute">class</span>=<span class="value">"abs"</span>></span>&nbsp;<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"abs-left"</span> <span class="attribute">class</span>=<span class="value">"abs"</span>></span>&nbsp;<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"abs-bottom"</span> <span class="attribute">class</span>=<span class="value">"abs"</span>></span>&nbsp;<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"abs-top"</span> <span class="attribute">class</span>=<span class="value">"abs"</span>></span>&nbsp;<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>></span><span class="javascript"><span class="comment">//<![CDATA[</span>
$(document).mouseover(<span class="function"><span class="keyword">function</span><span class="params">(e)</span> {</span>
<span class="keyword">var</span> target = e.target;
<span class="keyword">var</span> width = target.offsetWidth;
<span class="keyword">var</span> height = target.offsetHeight;
<span class="keyword">var</span> pos = $(target).offset();
$(<span class="string">'#abs-top'</span>).css({<span class="string">"background"</span>:<span class="string">"blue"</span>,<span class="string">"left"</span>:pos.left,<span class="string">"top"</span>:pos.top,<span class="string">"width"</span>:width,<span class="string">"height"</span>:<span class="number">1</span>});
$(<span class="string">'#abs-bottom'</span>).css({<span class="string">"background"</span>:<span class="string">"blue"</span>,<span class="string">"left"</span>:pos.left,<span class="string">"top"</span>:pos.top+height,<span class="string">"width"</span>:width,<span class="string">"height"</span>:<span class="number">1</span>});
$(<span class="string">'#abs-left'</span>).css({<span class="string">"background"</span>:<span class="string">"blue"</span>,<span class="string">"left"</span>:pos.left,<span class="string">"top"</span>:pos.top,<span class="string">"width"</span>:<span class="number">1</span>,<span class="string">"height"</span>:height});
$(<span class="string">'#abs-right'</span>).css({<span class="string">"background"</span>:<span class="string">"blue"</span>,<span class="string">"left"</span>:pos.left+width,<span class="string">"top"</span>:pos.top,<span class="string">"width"</span>:<span class="number">1</span>,<span class="string">"height"</span>:height});
});
$(document).click(<span class="function"><span class="keyword">function</span><span class="params">(e)</span> {</span>
alert($(e.target).html());
});
<span class="comment">//]]></span></span><span class="tag"></<span class="title">script</span>></span>
<span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span>
</pre></figure>
<h2 id="-">穿透事件</h2>
<p>不能像 AS 一样禁止事件，但是非 IE 下可穿透事件。<br>非 IE 下可以通过
<a href="https://developer.mozilla.org/en/CSS/pointer-events" target="_blank">pointer-events:none</a> 来透过事件，这里有个 <a href="http://www.qgy18.com/file/code/firebug_demo.html" target="_blank">demo</a> 。</p>
<p>-- EOF --</p>
]]></content>
<summary type="html"><![CDATA[<h2 id="-">常规思路</h2>
<p>在 firefox 里如何实现 firebug 的 DOM inspect 选择功能?</p>
<ul>
<li>首先，我们会 document 里添加 mouseover 事件时在 HTMLElement 上飘一个 absolute 的容器，设置 border 。</li>
<li>接着， mousedown ，这个 absolute 的元素隐藏；</li>
<li>再着着， click 结束后从事件里的 event 得到 target ，从而再得到 inspect 。</li>
</ul>
<p>可这样是不是真的能做到呢？
]]></summary>
<category term="tech" scheme="http://rank.im/categories/tech/"/>
</entry>
<entry>
<title><![CDATA[IE6 SP1+SSL+AJAX(XMLHttpRequest)=trouble]]></title>
<link href="http://rank.im/2008/12/21/ie6-ssl-ajax-trouble/"/>
<id>http://rank.im/2008/12/21/ie6-ssl-ajax-trouble/</id>
<published>2008-12-20T17:04:33.000Z</published>
<updated>2014-04-04T02:39:20.000Z</updated>
<content type="html"><![CDATA[<h2 id="-">问题描述</h2>
<p>在 IE 6 SP1 访问 https 站点， AJAX 会随机出现一个 winet 的状态码： 12152 。<br><a href="http://www.baidu.com/s?tn=ichuner_4_pg&ie=gb2312&bs=xmlhttp+12152&sr=&z=&cl=3&f=8&wd=ajax+12152&ct=0" target="_blank"> 网上 </a> 有不少人遇到了这困惑的状态码。</p>
<p>说明</p>
<ul>
<li>Windows 下的 IE 里 new ActiveXObject(progId) 生成的 XMLHttpRequest 是 winet 的一部分。</li>
<li>IE 7 以下对 SSL ( 即 HTTPS) 的支持不够好。</li>
</ul>
<a id="more"></a>
<h2 id="-">解决方案</h2>
<p>考虑</p>
<ul>
<li>如上述的情况基数人群很少，那可考虑短时间内不解决此问题。</li>
<li>要解决而我们又不想彻底的抛弃 AJAX ，该怎么办。<ul>
<li>因为我们不仅仅只有 IE 6 ，还有 IE 7 和 IE 8 。</li>
<li>所以不能因为 IE 6 SP1 或某些奇怪版本的 IE 用户而摒弃 AJAX ）</li>
</ul>
</li>
</ul>
<p>要解决此问题，可以想</p>
<ul>
<li>把无刷新页面看做是一个与服务器沟通的桥梁的话，这座桥除了用 XMLHttpRequest 之外。</li>
<li>还可以用 iframe 。形成一个 connection 的 adapter 。</li>
</ul>
<p>除此之外可以将 AJAX 加一个比较快速的 「重试」（ retry ）方案：</p>
<figure class="highlight js"><pre> <span class="keyword">switch</span>(<span class="keyword">this</span>.requestor.status)
{
<span class="keyword">case</span> <span class="number">12029</span>:
<span class="keyword">case</span> <span class="number">12030</span>:
<span class="keyword">case</span> <span class="number">12031</span>:
<span class="keyword">case</span> <span class="number">12152</span>:
<span class="keyword">case</span> <span class="number">12159</span>:
<span class="comment">// fixed ie ssl bug, retry send data</span>
<span class="keyword">var</span> loader = <span class="keyword">this</span>;
setTimeout( <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span> loader.execute.call(loader); }, <span class="number">10</span>);
<span class="keyword">break</span>;
<span class="keyword">default</span>:
<span class="keyword">this</span>.onError(<span class="keyword">this</span>);
}
</pre></figure>
<p>-- EOF --</p>
]]></content>
<summary type="html"><![CDATA[<h2 id="-">问题描述</h2>
<p>在 IE 6 SP1 访问 https 站点， AJAX 会随机出现一个 winet 的状态码： 12152 。<br><a href="http://www.baidu.com/s?tn=ichuner_4_pg&ie=gb2312&bs=xmlhttp+12152&sr=&z=&cl=3&f=8&wd=ajax+12152&ct=0" target="_blank"> 网上 </a> 有不少人遇到了这困惑的状态码。</p>
<p>说明</p>
<ul>
<li>Windows 下的 IE 里 new ActiveXObject(progId) 生成的 XMLHttpRequest 是 winet 的一部分。</li>
<li>IE 7 以下对 SSL ( 即 HTTPS) 的支持不够好。</li>