Category Archives: 他山石

Hello World 业界杂谈 他山石

[转]来自浏览器创造者的web优化技巧

2012 年 12 月 06 日 – 上午 3:09

Jatinder Mann是微软Internet Explorer产品的一名项目经理，在BUILD 2012大会上，他做了题为“提高HTML5应用和网站性能的50条秘技（50 performance tricks to make your HTML5 apps and sites faster）”的演讲，介绍了很多为Web应用提速的技巧。

Mann的建议是按照下面六个原则组织的。

1. 快速响应网络请求

  • 避免重定向。排名前1000的网站中，63%使用了重定向。如果不执行重定向的话，页面速度可以提高10%。
  • 避免Meta-refresh。世界上14%的URL使用了Meta-refresh。
  • 尽可能通过CDN定位用户，使服务器响应时间最小化。
  • 从不同的域下载资源，使并发连接的应用最大化。
  • 复用连接。不要在响应请求时关闭连接。
  • 确保页面加载不会因合作伙伴网站提供的数据而延迟。
  • 了解耗时的网络组件，如重定向、缓存、DNS、请求和响应等。在IE 9和10中可以使用Navigation Timing API来测量浏览器花在每个操作上的时间。

2. 最小化下载的字节数

  • 加载页面时，要尽量减少下载的数据量。平均而言，每个页面要下载的数据量达777KB，其中有474KB的图片、128KB的脚本和84KB的Flash。
  • 请求gzip压缩的内容。
  • 将资源保存在本地的包中，比如为Windows商店应用生成的包资源索引（Package Resource Index）文件。这样当需要这些资源时就可以很容易地获取到。
  • 使用HTML5 App Cache缓存动态资源。App Cache会只下载一次资源，从而避免多次网络行程。当应用的版本号发生变化时，它会自动重新下载相应资源。
  • 尽量在响应中使用“Expires”字段来提供可缓存的内容。
  • 通过设定请求的If-Modified-Since字段来使用条件请求。
  • 缓存数据请求，如HTTP、XML和JSON等，因为大约95-96%的请求不会整天变化。虽然这个想法很合理，但实际缓存接收到的请求的网站所占比重还不到1%。
  • 用大写将文件命名标准化。虽然服务器可能把Icon.jpg当作 icon.jpg，但是对于Web平台而言，它们是不同的资源，对应不同的网络请求。

3. 高效地组织标记

  • 对于IE而言，请使用最新的标记标准，因为它速度最快。IE 10也能识别早期的IE6-IE9标记风格，但是其速度不如新的标记风格。
  • 特定的业务Web应用可能需要强制IE运行于传统模式，请使用HTTP头字段“X-UA-Compatible: IE=EmulateIE7”来代替HTML标签 ，这样速度会快一些。
  • 为了平滑地渲染，样式表应该链接在页面顶部的<head>之中的<title>后面。
  • 绝对不要在页面底部链接样式表。否则加载页面时可能会出现闪烁。
  • 对于分层样式，不要使用“@import”，因为它是同步的，会阻塞CSS数据结构的创建和屏幕绘制。
  • 避免样式的嵌入和内联，因为它会强制浏览器在HTML和CSS解析器之间进行上下文切换。
  • 仅包含必要的样式。不要下载和解析用不到的样式。
  • 仅在页面底部链接JavaScript。这可以确保脚本执行时图片和CSS等资源已经加载，无需等待，也避免了上下文切换。
  • 不要在页面开头链接JavaScript。如果某些脚本必须在开始处加载的话，请使用“defer”属性。
  • 不要内联JavaScript，这样可以避免上下文切换。
  • 使用“async”属性加载JavaScript，这样整个脚本就可以异步加载和执行。
  • 避免冗余代码。世界上52%的网页包含100行甚至更多的冗余代码，比如一个JavaScript文件被链接了两次。
  • 将一个JS框架标准化，无论是jQuery，Dojo，Prototype.js还是其他框架。浏览器没有必要加载多个功能基本相同的框架。
  • 不要加载FB和Twitter等网站的脚本，只是看起来很酷而已，它们会争用资源。

4. 优化多媒体资源的使用

  • 图片是最常用的资源，每个页面平均会下载58张图片。
  • 尽量避免下载太多图片，根据页面加载时间将图片最大数量控制在20-30之间。
  • 使用Image Sprites将多个图片组合成一个。该技术可以减少网络连接数，也会减少下载的字节数并节省GPU处理周期。
  • 手动创建Image Sprites，因为工具创建的可能会留下较大的空洞，这会加大需要下载的数据量，也需要更多的GPU 处理周期。
  • 使用PNG格式的图片，该格式在下载大小、解码时间、兼容性和压缩率之间实现了完美的折中。JPEG格式可以用于照片。
  • 使用原始的图像分辨率，这样可以避免下载不必要的数据以及缩放所需的CPU 处理。
  • 尽可能使用CSS3 Gradient替代图片。
  • 尽可能使用CSS3 border radius替代图片。
  • 使用CSS3 Transform来创建移动、旋转和倾斜效果。
  • 对于小型的单个图片，可以使用Data URI。这样可以节省一张图片的下载量。
  • 避免复杂的SVG，因为它们会延长下载和处理时间。
  • 当包含HTML5时，指定一个预览图片。这样浏览器就不必下载整个视频文件来确定预览图片了。
  • 使用HTML5来代替Flash、Silverlight或QuickTime。HTML5速度更快，而且其他几种形式的运行时插件会消耗系统资源。
  • 主动地以异步方式下载富媒体资源并将其保存在App Cache中。

5. 编写快速的JavaScript

  • 在JavaScript中进行数学运算时尽量使用整型。JavaScript的浮点运算比相应的整型运算耗费的时间要多得多。在进行数学运算，特别是计算密集型运算时，请使用Math.floor和Math.ceil将浮点数转换为整型数。
  • 降低JavaScript代码量，这样不但可以减少下载的数据量，而且能够提供更好的运行时性能。
  • 按需初始化JS。当需要时动态加载JS。
  • 通过缓存变量（如document和body等）使DOM交互减到最少。
  • 使用内置的DOM代码，如element.firstChild或node.nextSibling等。这些代码都是高度优化的，相对于第三方库能提供更好的性能。
  • 访问大量DOM元素时，使用querySelectorAll。
  • 使用.innerHTML来构建动态页面。
  • 批量标记更改。
  • 维护小巧而健壮的DOM——将其元素数目控制在1000以内。.
  • JSON快于XML。
  • 使用浏览器的JSON原生方法。
  • 不要滥用正则表达式。

6. 知道你的应用在做什么

  • 理解JavaScript定时器，了解setTimeout和clearInterval。除非确定要使用定时器完成一些功能，否则不要启动定时器。组合定时器也是如此。
  • 如果监视器的刷新率是60Hz，请将显式帧的定时器调整为16.7 ms。
  • 在IE 10、Chrome和Firefox中，图形处理请使用requestAnimationFrame动画函数。其绘制通过回调实现，因此不需要定时器。
  • 使用可见性API（document.hidden和 Visibilityhange）来确定应用程序的可见状态，如果页面是隐藏的，就关闭该活动。这样可以节省CPU和电池寿命。
  • Mann建议在IE中使用Windows Performance Tools来测试Web页面的性能， 并以减少CPU时间和增加并发性为目标进行优化

—————-
转自：http://www.searchsoa.com.cn/showcontent_68434.htm

Tags , , , | Permalink | Comment (1)
Hello World 他山石

[转]CSS的position:fixed的使用

2012 年 11 月 21 日 – 上午 3:32

接触CSS已有相当长一段时间，我们竟然没有留意position:fixed的用法。

我们都知道CSS中定位属性position的值，除了默认的值外，还有absolute,relative和fixed。我平时比较常用absolute和relative，而position:fixed却没多关注。或许是因为当初在CSS中文手册中看到position:fixed旁边有说明“IE5.5及NS6尚不支持此属性”吧。

前段时间，在做一个项目时需要使一个层相对于浏览器边框固定，那时用position:absolute试了下，发觉absolute是对网页边框而言的。后来，上网查了一些根据滚动条的移动，动态地改变left和top的值的JavaScript语句，虽然能实现了类似的效果，但滚动条移动时，那个层晃来晃去的，感觉不好看，想要一种能使层固定不动的做法。

且看下面的代码：

#help{
    width:30px;
    height:20px;
    background-color:green;
    position:fixed;
    left:60px;
    top:100px;
}

我们用上面这段代码来定义页面上的一个层“help”（id=“help”）。这样就能实现我们想要的效果了。

在IE8、Firefox、Opera、Google等浏览器中测试，都没有问题，唯独低版本的IE中，这个属性无效。

转自：http://www.blogjava.net/rongxh7/archive/2009/11/22/303225.html

——————-
ps：置顶菜单的定位：

div.top_nav{
    width:100%;
    position:fixed;
    left:0;
    top:0;
    ......
}

Tags | Permalink | Comment (0)
业界杂谈 他山石

[转]提升CakePHP网页应用速度的八大方法

2012 年 07 月 27 日 – 上午 8:21

原文标题：8 Ways to Speed Up the Performance of CakePHP Apps

引言

CakePHP 有些慢已经不是什么公开的秘密了。但不为众人所知的是这是一个大大的阴谋。而我会因揭露这个阴谋惹上不少麻烦。不过我愿意冒险一搏。我手头有大量的记录和文档线索表明CakePHP开发团队的成员手头持有戴尔，IBM，思科以及其他服务器厂商的公司股票。想必你已经听说过这类的措辞像“硬件白菜价，而程序员太金贵了。”Cake的开发团队从中嗅到了商机，他们便制作出了这款易于上手和开发，但是却跑得很慢的框架来。他们希望你在硬件方面多砸点钱来。这点子太有才了吧，对不？好了，闲扯就此结束。作为一个CakePHP的开发者，每当你学会使用本文中的一个技巧，套在你脖子上的这枷锁就少了一层。

注意：

本文认为你已经在使用ContainableBehavior并且已经对你的SQL查询进行优化和索引了
我使用ab（ApacheBench是Apache自带的HTTP性能测试工具）对所有改动后的性能进行了测试，并与基准值做了对比。这里的基准值是 debug级别为0时的简单应用程序的性能。我并没有把实际基准数字贴出来。因为这类数字会因应用程序和机器性能而波动。不过我将以百分比的形式将大概的 性能提升数据附在了文中。
另外，你想看看我测试所用的应用程序内容？门儿都没有。

一、 将debug级别设置为0

这技巧很没技术含量，是吧？在Google小组中有 大量的帖子在扯其他方法。想都不用想，先把你CakePHP应用程序的debug级别设置为0在说。

将此值设0和不设0是有区别的，原因就在Cake引 擎生成两部分缓存内容

第一部分是/tmp /cache/models中的缓存内容。在这里，你会看到每个模型都有一个对应的文件，这些文件中包含的是数据库的表模式（table schema）。想必你已经看到过数据库查询记录中包含一些”DESC table;” 这类的查询内容，这些缓存文件就是做着这个用的。当debug级别设置为0时，这些数据库查询就不会进行。

第二部分的缓存是在/tmp /cache/persistent中。当你运行你的Cake网页应用时，CakePHP会用到其中几种不同的文件。而通常拖慢CakePHP运行速度最 厉害的当属cake_core_file_map。这个文件保存了到各个不同类的路径信息。为了创建这个文件，CakePHP会做一个必须但是也是非常耗 费时间的搜索，以便在你的目录结构中找到对应的文件。

那么，debug级别是0和debug级别大于0时有什么区别呢？呵，他们两者之间相差的是2.73517104年。当debug级别大于0时，这些缓存文件的时间周期是10秒钟。而把debug级别设置为0时，这些文件的缓存时间周期则是999 天。（译者：这就是前面 2.73517104年差距的来历）

实 际上我这里有这样一个疑问：既然这种事情是非常“脑残”的技巧，那么连这种“脑残”的技巧都不采用的人是不是比“脑残”好“脑残”呢？如果连“脑残”的人 都能弄明白这种技巧，那么那些不会的人的脑子是不是被狗吃了。既然这些人的脑子被狗吃了，那么我对这钟人讲这种技巧岂不是肉包子打狗——有去无回？（译 者：囧）

性能大致提升数字为：80%到100%左右

二、缓存拖慢速度的查询/网络服务请求等等

对于缓存你应用程序中的单个部件而 言，CakePHP的缓存库（cache lib）是一个非常不错的工具。它会处理所有“脏重累的活儿”，比如向缓存引擎中的文件或者内存中写入内容。你所需要做的就是想清楚哪些东西需要缓存。

打个比方说，你有一个已经索引并已经优化了的数据库 查询，但是查询速度还是比较慢。CakePHP的烹饪手册上（link）就提供了一个例子，教你 如何将缓存库应用起来，缓存后，CakePHP就不会对每一个请求都进行这种拖慢速度的数据库查询。

如 果你网站的部分内容是来自其他网络服务的的，比如一个显示最新推文的区域（这个例子并不恰当，因为大多数Twitter挂件都是用JavaScript写 成的，这里读者就将就一下吧。）我们完全没必要对每个发来的请求都调用这个网络服务。只需像上面一样，用缓存功能将其缓存起来即可

性能提升：+0% 到 1000000%，这取决于你的应用程序，以及你所缓存的内容。

三、缓存视图

你可将这视作整个页面的缓存。CakePHP的烹饪手册提供了一些基本的知识（link），因为页面创建依然是通过PHP进 行，所以对于保持页面的部分动态内容还是有些灵活方法的。比如，如果你运营着一个网店时，你可以将产品页面进行缓存，但是页面上还是可以有一块区域来显示 用户的购物车内容，

注意：在CakePHP的烹饪手册中有一个专门的小节来介绍CakePHP支持的各种缓存引擎（link）。 但是，目前的版本（1.2.1.8004），视图缓存所使用的是基于文件的缓存引擎，并不依赖于上面第二部分所说的缓存库（ cache library）
速度大致提升：+130% 到 160%

四、HTML网页页面缓存

这个是我们自己的想出来的（link）。 它的原理跟WordPress上的Super Cache插件一样。它会将CakePHP的 页面以HTML文档的形式直接写入网站的根目录。下次，当用户点击这个页面时，你的服务器会直接将这个HTML文件传输给用户，而无需运行PHP。

这种方法也有其明显的局限性，比如缓存的页面上完全 没有动态内容，缓存的内容也不会自动清除。但是，对于RSS的订阅源或者其他像popurls 这种所有浏览者所看到的都是同样内容的页面而言，这种方法就非常不错。

速度提升：~60000%——这绝非夸张，这才是真正的速度提 升

五、 APC

维基百科是这样描述APC的，“它是一种自由的开源框架，它可以优化PHP的中间 代码，并在共享内存中缓存PHP字节码编译器（Bytecode compiler）中的数据和编译好的代码。”（维基百科链接）。总的来说，速度真TMD的 快，并且你还无需改动你的代码。很爽，是吧？

速度提升：+25% 到 100%

六、持久性模型

CakePHP的烹饪手册并没有提及这个技巧，这个 功能的开启很简单，你只需在你的控制器（或者父控制器中）中添加如下属性即可

var $persistModel = true;

在页面刷新后，你会注意到 /tmp/cache/persistent 目录下会出现两个新的文件，它对应控制器所包含的每个模型。一个文件是模型的缓存，另一个缓存的是类注册器（ClassRegistry）中的对象。跟上 面所提到的视图的缓存一样，这种缓存只会保存在文件系统中。

速度提升：+0%到200%

这种方法效果怎么样取决于你的应用程序。如果你的控制器只有一个模型，并且并没有与其他任何模型关联，那么你不会看到有多大的速度提升。在我们的测试应用程 序中，它带来的速度提升大约在100%左右。其中测试用的控制器中有一个模型，该模型关联其他三个模型，这些关联的模型又有各自关联的模型。

七、在APC中存储持久性缓存内容

要使用这个，你需要开启APC，将CakePHP的 核心缓存模式设置为APC。在core.php文件中，添加如下代码。

Cache::config(‘_cake_core_’, array(‘engine’ => ‘Apc’,
‘duration’=> 3600,
‘probability’=> 100,
));
这会将通常缓存在/tmp/cache/persistent 中的缓存文件（不包括持久性模型）保存到内存中去。

速度提升：~25%

这带来的速度提升很难衡量。我试着启用不带指令缓存 （opcode caching）的APC，以便衡量所带来的速度提升，但是却找不到如何设置。

八、加速反向网址路径的寻找

目前有两种方法可以达到此目的。第一种是Debuggable.com网站上Tim同学在一篇文章中所提及的。Tim的方法只对某种链接类型有效，而且还会破坏反向网址路径的寻找功能，而我的方法使用的是缓存功能（link） （译者:具体内容见这个链接。），CakePHP开发团队的Nate同学也称这种方法非常“高明”（link）

速度提升：~50%

正如这里的所有技巧一样，实际的速度提升取决于你的 应用程序。如果你并不使用大量的自定义网址路径，而且页面的链接也不多，那么这个技巧不会带来多大的速度提升

——
转自：http://21haolou.com/articles/show/46

Tags | Permalink | Comment (0)
Hello World 他山石

ios入门—-定位的使用[转]

2012 年 07 月 11 日 – 上午 3:15

IOS中的core location提供了定位功能，能定位装置的当前坐标，同时能得到装置移动信息。因为对定位装置的轮询是很耗电的，所以最好只在非常必要的前提下启动。
其中，最重要的类是CLLocationManager，定位管理。
其定位有3种方式：
1，GPS，最精确的定位方式，貌似iphone1是不支持的。
2，蜂窝基站三角定位，这种定位在信号基站比较秘籍的城市比较准确。
3，Wifi，这种方式貌似是通过网络运营商的数据库得到的数据，在3种定位种最不精确

使用方式：
1，引入CoreLocation的包，一般的默认模板里是没有的，所以需要手动导入。
2，通过启动CLLocationManager来启动定位服务，因为定位信息是需要轮询的，而且对于程序来说是需要一定时间才会得到的，所以翠玉lcationManager的操作大多都给委托来完成。
加载locationManager的代码：

CLLocationManager *locationManager = [[CLLocationManager alloc] init];//创建位置管理器  
locationManager.delegate=self;  
locationManager.desiredAccuracy=kCLLocationAccuracyBest;  
locationManager.distanceFilter=1000.0f;  
//启动位置更新  
[locationManager startUpdatingLocation];

desiredAccuracy为设置定位的精度，可以设为最优，装置会自动用最精确的方式去定位。
distanceFilter是距离过滤器，为了减少对定位装置的轮询次数，位置的改变不会每次都去通知委托，而是在移动了足够的距离时才通知委托程序，它的单位是米，这里设置为至少移动1000再通知委托处理更新。
startUpdatingLocation就是启动定位管理了，一般来说，在不需要更新定位时最好关闭它，用stopUpdatingLocation，可以节省电量。

对于委托CLLocationManagerDelegate，最常用的方法是：

- (void)locationManager:(CLLocationManager *)manager   
    didUpdateToLocation:(CLLocation *)newLocation   
           fromLocation:(CLLocation *)oldLocation;

这个方法即定位改变时委托会执行的方法。
可以得到新位置，旧位置，CLLocation里面有经度纬度的坐标值，
同时CLLocation还有个属性horizontalAccuracy，用来得到水平上的精确度，它的大小就是定位精度的半径，单位为米。
如果值为－1，则说明此定位不可信。

另外委托还有一个常用方法是

- (void)locationManager:(CLLocationManager *)manager   
       didFailWithError:(NSError *)error ;

当定位出现错误时就会调用这个方法。
———–
转自：http://blog.csdn.net/csj1987/article/details/6657468

Tags , | Permalink | Comment (0)
Hello World 他山石

[转]Objective-C 字符串与数值互相转换

2012 年 07 月 08 日 – 下午 4:51

Convert NSString to int

NSString *aNumberString = @"123";
int i = [aNumberString intValue];

Convert int to NSString

int aNumber = 123;
NSString *aString = [NSString stringWithFormat:@"%d", aNumber];

———-
转自：http://blog.163.com/prevBlogPerma.do?host=zyc-to&srl=171524002010104680552&mode=prev

Tags | Permalink | Comment (1)

« 上一页 — 下一页 »

« 上一页 — 下一页 »