You are at the archive for the 工作杂记 category


小对比

09月 11th

 
大小
连接数

淘宝
半加载:330k。完全加载:493k
6290

拍拍
799k
111

ebay
355k
42

易趣
522k
155

yahoo
半加载:153k完全加载:大约221k
2766

 
 
 

pchome
4M
182

zol
2M
202

pconline
2M
159

pcpop
2M
164

 
上述数据用firebug取得。所谓半加载,意思是在页面中做过特殊处理,如果用户不满足某些触发条件,该部分内容不会被加载入当前显示。

work record II:有关Singleton

09月 8th

Singleton,有人翻译叫:“单例、单件”啥啥的。有关php的singleton,baidu不到多少有用的介绍,都是你抄我我抄你的。没啥意思。更详细的参考,应该直接看官方文档:php singleton 。
Singleton的主要设计思想就是:将对象的构造声明成一个私有方法,再把他本身丢到一个静态变量里面。通过判断静态变量的有无,来自己实例化自己。
一个简单的例子:

class Example{
private static $instance;

private function __construct(){ }

public function callObj(){
if(!self::$instance){
self::$instance = new Example();
}
return self::$instance;
}

function doSomething(){ …….. }
}
然后会这样调用:
$obj = Example::callObj();
$obj->doSomething();
ok,到现在为止,都很容易。
那么我遇到了什么?
最初我的function __construct()是空的,我实例化了对象之后,企图直接在callObj()中通过$this->doSomething();。按照我之前的理解,既然我上面已经实例化了该对象,之后应该就直接可以用了。结果非常囧,无论如何也不能调用$this,只能使用self,这样就有些个不方便了。
怎么回事情?
继续看了一下文档然后自己尝试了一下,原来是这样来解析的:

$obj = Example::callObj()已经实例化对象并返回,之后调用的$obj->doSomething()中,使用$this是不会有任何问题。和范例一样
在没有返回实例化的对象之前,在callObj()中只能使用self来调用方法,不能直接使用$this->doSomething(),这种情况下,方法doSomething中都不能使用$this
但是:如果是通过构造函数:__construct()来调用的,那么在__construct中可以使用$this关键字没有任何问题。

没了,就是这样一个小问题,这里记录一下

如何模拟低网速状态

08月 28th

遇到了什么?
在做项目时,通常容易遇到一个问题:在项目环境中拥有良好的表现,功能很酷很炫,但是在实际发布上线之后,却发现因为用户网速不理想,容易产生一些意料不到的状况,例如页面的可用性出现障碍。而且这些问题通常在进行测试的时候也难以发现,因为测试多半也和我们处于同样网络条件下。这个时候我们需要模拟在低网速下产品的表现。
如何解决?FIDDLER or NET LIMITER!
FIDDLER
一个由微软出品的软件,记录了所有的http通讯的debug工具。他可以允许你查看所有的http请求,设置断点,监控进出流量数据等,同时还可以支持几乎所有的浏览器。
官方地址:http://www.fiddlertool.com/fiddler/
在经过简单的安装完成之后,默认fiddler支持ie,firefox等其他浏览器需要手工配置,方法如下:
1.选择:工具->选项,单击网络选项卡,然后点击设置

2.如下图所示,在自动代理配置URL中填入D:/[FIDDLER INSTALL PATH]/Scripts/BrowerPAC.js。*请在fiddler的安装目录下找到BrowerPAC.js文件

 
3.启动浏览器及fiddler之后就可以监控firefox了。其他浏览器也可以类似设置。
如果设置了对firefox的监控,但是却关闭了fiddler,是不能够继续浏览网页。
启动fiddler并监控之后,我们可以看到如下页面:

这时选择rules->performance->simulate modem speeds。再次刷新你的浏览器窗口。ok我们就可以看到模拟低网速条件下页面的反应了。当然,它还有其他很多非常强大的功能。
 
NET LIMITER 2
一个监控软件,可以对整个机器的网络状况进行监控和控制,可以指定某个特定进程的的网络请求,而不局限于浏览器。
官方地址:http://www.netlimiter.com/download.php
但是这个软件的pro版本并不是免费软件。而且它需要在你的机器中安装一个服务。
 
它的使用也很简单,我们只需要找到浏览器进程,然后在如图红框所示的limit上选中既可。
什么时候需要低网速下的检测?
通常我们的项目环境下网速都非常理想,飞快的网速可以掩盖很多问题。但是用户不一样。用户可能是一台老旧的机器,和服务器的连接也很缓慢。
保持用户的可访问性始终是前端开发工程师应该尽力去做到的:

我们需要尽量把重要的内容先展示在用户面前;
在脚本没有加载完成的时候用户任然可以最低限度的得到他所欲获得的,或者给予用户一定的提示;
尽可能快的呈现页面。

这些时候,我们都需要去利用这个工具来让尽可能的模拟用户的处境,设身处地的体验一下用户的感受。这样的页面才是一个有责任心的页面。
如果你做的不够好,那么是以为你靠的不够近。

iframe 在ie 6 下的bug

08月 8th

概要
iframe这个东西让人又爱又恨。有很多好处,比如跨域通讯,一定要这东西。再比如嵌套某些页面,业务需求要这样做,没这个东西还真会提高系统的复杂度
在wui项目中,大量使用了iframe,无意中遇到一个iframe 的bug。
兼容性:
ie 6 only
表现:
iframe在ie 6中载入时候,如果载入页面body高度大于iframe高度,会出现一个横向的滚动条。
原因:
页面宽度等于viewprot的宽度+scroll的宽度。假设iframe宽度是400px,页面宽度是100%,载入页面时,宽度应该是400px;当页面高度不高于iframe高度时候,没有任何问题。但是当页面高度高于iframe高度时,正确的计算应该是400px-scroll宽度。但ie 6的计算任然是400px,由于页面多出来了一个滚动条的宽度,就导致在iframe中出现了横向滚动条。
解决办法
在网上搜索到的解决办法有如下几种:
1) Set the body style of the page that appears within the iframe to: display: inline; (<body style="display: inline"> or use a style sheet or set the style in the header) The reason this works is because it forces the body with to be only as wide as its content.
2) [...]

万恶的haslayout

08月 6th

之前只知道ie的haslayout会对IE的渲染产生影响,却不知道会对javascript也会产生影响。
在一个项目里面,为了让div可以自动适应高度并修复ie 的iframe滚动条bug,通过脚本来控制一个div的高度,但是怎么调脚本都有问题。我崩溃了。本来还以为是自己的逻辑出了问题,逐步排查之后,却发现某个元素的clientHeight,在ie下面是0。原来这个元素没有haslayout。
范例脚本:
<span id=”testHasLayout” style=”padding-top:20px;display:block”>test it</span> <script type=”javascript/text”> var obj=document.getElementById(”testHasLayout”); alert(obj.clientHeight); obj.style.zoom=”1″; alert(obj.clientHeight); </script>

原来如果在IE下,对象没有haslayout属性时,是没有办法通过脚本来获取他的clientHeight属性的。IE6,7均是如此
在这里再次回顾一下这个重要的概念:
默认拥有haslayout的元素:

<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>

能够让元素拥有haslayout的css属性

position: absolute
Refers to its containing block, and that’s where some problems begin.
float: left|right
The float model has a lot of quirks due to some aspects of a layout element.
display: inline-block
Sometimes [...]

« Previous Entries

Size

Colors