如何模拟低网速状态

星期四 08月 28th工作杂记, 工作研究 Category

遇到了什么?

在做项目时,通常容易遇到一个问题:在项目环境中拥有良好的表现,功能很酷很炫,但是在实际发布上线之后,却发现因为用户网速不理想,容易产生一些意料不到的状况,例如页面的可用性出现障碍。而且这些问题通常在进行测试的时候也难以发现,因为测试多半也和我们处于同样网络条件下。这个时候我们需要模拟在低网速下产品的表现。

如何解决?FIDDLER or NET LIMITER!

FIDDLER

一个由微软出品的软件,记录了所有的http通讯的debug工具。他可以允许你查看所有的http请求,设置断点,监控进出流量数据等,同时还可以支持几乎所有的浏览器。

官方地址:http://www.fiddlertool.com/fiddler/

在经过简单的安装完成之后,默认fiddler支持ie,firefox等其他浏览器需要手工配置,方法如下:

1.选择:工具->选项,单击网络选项卡,然后点击设置

image

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

image

 

3.启动浏览器及fiddler之后就可以监控firefox了。其他浏览器也可以类似设置。

如果设置了对firefox的监控,但是却关闭了fiddler,是不能够继续浏览网页。

启动fiddler并监控之后,我们可以看到如下页面:

image

这时选择rules->performance->simulate modem speeds。再次刷新你的浏览器窗口。ok我们就可以看到模拟低网速条件下页面的反应了。当然,它还有其他很多非常强大的功能。

 

NET LIMITER 2

一个监控软件,可以对整个机器的网络状况进行监控和控制,可以指定某个特定进程的的网络请求,而不局限于浏览器。

官方地址:http://www.netlimiter.com/download.php

但是这个软件的pro版本并不是免费软件。而且它需要在你的机器中安装一个服务。

image 

它的使用也很简单,我们只需要找到浏览器进程,然后在如图红框所示的limit上选中既可。

什么时候需要低网速下的检测?

通常我们的项目环境下网速都非常理想,飞快的网速可以掩盖很多问题。但是用户不一样。用户可能是一台老旧的机器,和服务器的连接也很缓慢。

保持用户的可访问性始终是前端开发工程师应该尽力去做到的:

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

这些时候,我们都需要去利用这个工具来让尽可能的模拟用户的处境,设身处地的体验一下用户的感受。这样的页面才是一个有责任心的页面。

如果你做的不够好,那么是以为你靠的不够近。

work record I

星期二 08月 26thYY的生活 Category

  • 判断当前页面是否是iframe的子页面的方法:

可以通过判断页面的parent.location和self.location是否相等。

     if(parent&&parent.location==self.location){ 

      //is not a iframe page 

    }else{ 

      //this is a iframe page 

     }

  • 在子页面中调用父页面所定义的函数:

假设父页面parent.html中有段脚本,定义了一个函数 alertThis(),他会生成一个警告提示窗口。我们通过注册一个事件:onclick来触发这个函数,这个是一般的做法。假设在parent.html中有一个iframe页面iframe.html。我们希望在iframe.html中同样可以注册一个onClick事件来触发父页面中的alertThis()。但由于这是一个警告窗口,处于对用户体验的一致性,我们希望他是在parent.html页面中执行,以保证他得到同样效果和位置的一个警告提示,如果在iframe.html中则很可能做不到。这样的一个典型应用就是在网站**后台中。

范例代码:

  function alertThis(){}

   function alertControl(){ 

     if(parent&&parent.location==self.location){ 

       alertThis();//这里在当前页面中执行该函数 

      }else{ 

       top.alert();//这里在父页面中执行该函数 

      }

   } 

   //注册onClick事件,执行alertControl()

*也许不需要判断是子窗口还是父窗口,应该都可以运行top.alert()。因为子页面的top对象是他的父页面,而父页面的top对象,就是他自己本身?但是这样会不会有其他问题?还要进一步验证。

无法自动从DHCP获取IP的问题

星期一 08月 25thYY的生活 Category

遇到了什么:

今天笔记本带到公司,怎么样也无法上网,总是显示未识别的网络。ipconfig查看之,IP总是获取到:169.254.*.*的IP。上次也遇到过这样的问题,忘记了是怎么处理之后就重新恢复上网。今天弄了很久也搞不定,ipconfig /renew,修复网络连接等等办法都用过,还是无济于事。

为什么?

我还是不知道为什么,不过知道了解决办法。

解决办法:

直接去控制面板卸载掉无法获取IP的对应连接的网卡,然后重新安装网卡,就可以顺利获取到正确的IP。

在这里备注一个,以后遇到了就不用浪费时间了。同时在baidu国内的信息,好像没有找到遇到类似问题的解决办法,都是说要在CMD中运行:netshwinsock reset,但是在我的机器上是无效的。GOOGLE到国外有个人说:运行这个命令之后,要关闭机器在启动,而不是直接重新启动(restart)。虽然不知道这个方法能否有效,但是就要重启机器而言,是断然不方便的做法。

完全不知道这个是在干嘛

星期一 08月 25thYY的生活 Category

昨天晚上的表演和开幕式完全是两个档次的东西,乱七八糟一塌糊涂,讲什么也不知道。不过福娃终于露脸了

熄灭火焰的时候那个表现还不错,但是相比开幕式的水墨画和希腊小女孩最后“吹灭”火炬的创意,缺乏灵动之感。后面的表演就越来越雷了。刚开幕的时候那个表演,还算继承了一点点的视觉效果,但是一样的不知道想表明什么。还有那些个莫名其妙的自行车头盔和大铁圈。。。。。。最后那个大铁树,是干嘛的?会旗交接的时候,伦敦市长的确很没风度。。。。

LD有语录如下:

  1. 树倒猢狲散
  2. 这个是全运会闭幕式的世界版
  3. 全部都是one night (love) in beijing,特别祖英同学和名戈同学的表演,加上之前的“阿妹想阿哥”,更表明了这一点。
  4. 福娃终于出来了
  5. 查一下这个导演是谁
  6. 被雷到了

分享生活 共享智慧

星期四 08月 14thYY的生活 Category

IT人士么,总要blog一把。无论写还是看,blog是一件有趣的事情,blog都快变成一个动词了。

昨天突然听到徒弟在旁边喊了句:谁谁你的文章很有意思嘛。然后突发奇想,号召大家把自己的blog地址共享出来一下。大家都很踊跃的相互提供了blog,一下就把团队成员的blog给汇总了。然后我花了点时间,用yahoo的pipes把大家的blog都烧到了一起。

我们有一个团队blog 。不过现在大家都忙,要顾及质量,所以团队blog上更新的内容总是要很谨慎。现在好了,有一个另类的blog地址,分享各自的生活 共享大家的智慧。

 

有关pipes。这是一个很有趣的东西。相当于一个简单的可视化编程界面,不过又比较傻瓜化。可以组合网上的各类信息,然后挑选出得到你自己兴趣的内容。不过还是要有一点门槛,总归也要互联网老鸟才好用。而且预览比较变态,明明逻辑上和debug都ok的组合,在预览中却看不到。搞得我还以为自己那里弄错了。

看一下下面的图,应该就知道怎么用了

yahoo_pipes

Size

Colors