最近的文章列表

web前端优化之动态加载
网站最近搞了次优化,效果比较明显,以前不敢用的动态加载(我自己起得,洋名叫lazy load,这样翻译应该也算得体,延迟加载也说得过去..)终于派上了用场.总的来说是这样的:页面加载时不会初始化的脚本不引用,不显示的ui用的样式不加载.用户交互用到时加载.除用户可视区域外的图片不加载,用户有滚屏操作时加载.具体实现:1 . 实现js和css的动态加载适用 : 页面的pv较高,功能模块较多,每次刷新页面都需要重复解析和渲染.缺点 : 用户从点击一个按钮到函数响应,中间会有静态的下载和解析的一段延迟(有客户端缓存会好的多)优化 : 为了尽量让用户感觉不到延迟,我们在登录页面预载的一些经常用到的脚本(由于网站的更新周期固定,所以脚本仅会在更新当天预载)实现 :XN.dynamicLoad({fil
2011/11/9 Comments:
data类型的Url格式--url(data:image/gif;base64,AAAA):把小数据

所谓"data"类型的Url格式,是在RFC2397中提出的,目的对于一些小的数据,可以在网页中直接嵌入,而不是从外部文件载入。例如对于img这个Tag,哪怕这个图片非常非常的小,小到只有一个点,也是要从另外一个外部的图片文件例如gif文件中读入的,如果浏览器实现了data类型的Url格式,这个文件就可以直接从页面文件内部读入了。data类型的Url格式早在1998年就提出了,时至今日,Firfox、Opera、Safari和Konqueror这些浏览器都已经支持,但是IE直到7.0版本都还没有支持,IE不支持的东西太多了,也不差这一个。:(小例子下面这个html代码可以在支持data类型Url的浏览器中运行,例如Firefox。运行后会看到一条蓝色渐变底色的标题。<

2011/11/4 Comments:
Web前端-HTTP Cache-control ETag保鲜期 + 自定义标识验证
HTTP协议分别在 1.0 / 1.1 两个时代推出了 Expires / Cache-control 两种cache策略,这里我们无需了解全部的细节,无需记住整个RFC内容,但是当我们需要使用HTTP cache策略时,我们需要注意以下细节:Expires 是HTTP 1.0 那个时代的东西了,目前来看,可以不使用了,因为HTTP 1.0 的user agent占有率在 0.1% 以下(我们主要面向的web浏览器均默认使用HTTP 1.1),Cache-control 是 HTTP 1.1 的新特性,也是我们主要做文章使用cache策略的工具.Cache策略:#1 保鲜期only 这个是最最基础的一种策略,只需要在响应头中设定:Cache-control: max-age=[secs][s
2011/6/23 Comments:
HTTP头的Expires与Cache-control
1.概念Cache-control用于控制HTTP缓存(在HTTP/1.0中可能部分没实现,仅仅实现了Pragma: no-cache)数据包中的格式:Cache-Control: cache-directivecache-directive可以为以下:request时用到:| "no-cache"| "no-store"| "max-age" "=" delta-seconds| "max-stale" [ "=" delta-seconds ]| "min-fresh" "=" delta-seconds| "no-tr
2011/6/23 Comments:
优化缓存
大多数的网页包括诸如CSS文件,图像文件,JavaScript文件等资源,改变很少。这些资源需要一段时间才能通过网络下载,这增加了花费的时间来加载网页。HTTP缓存使这些资源得以保存,或通过浏览器缓存或代理。一旦资源被缓存,浏览器或代理可以参考本地缓存的副本,而无需下载到网页以后访问一遍。因此,缓存是一种双赢:你减少 往返时间 ,消除众多的HTTP请求所需的资源,并大大降低了你的反应总有效载荷的大小。除了 ​​导致在随后的页面加载时间大幅降低用户访问,使缓存还可以显着降低带宽和托管费用为您的网站。利用浏览器缓存利用代理缓存利用浏览器缓存概述设定到期日或静态资源的HTTP头的最高年龄指示浏览器加载,而不是通过网络本地磁盘先前下载的资源。详情HTTP / S支持本地浏览器的静态资源缓存。最新的浏
2011/6/23 Comments:
34条网站加速方法 [精]
Yahoo给出的包括Yslow规则(22条)的34条 详细说明 ,通过这此规则对自己页面进行一次全面的分析优化,可以提高你网站的加载速度。 1.Minimize HTTP Requests 减少HTTP请求  图片、css、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位。  2.Use a Content Delivery Network 利用CDN技术  CDN 确实是好东西,8过服务器提供商的这项服务一般是要收费的,我以前买的国内空间是有这个的但是我当时根本不知道啥用,现在没
2011/6/22 Comments:
快速提升网页加载速度,只需6招!
如何提高网页的打开速度,提高网页的打开速度有什么用?其一,我们都知道,一个网站的生存离不开搜索引擎的收录,而网站关键字的排名和网页加载的速度直接影响到搜索引擎的收录。谷歌Google的Web搜索团队在官方博客上宣布,将把网站的速度作为PR(PageRank)算法的一个因子,在所有因素都相等的情况下,速度快的网站将排在速度慢的网站前面。再者,最重要的问题在于我们都知道用户都喜欢浏览速度快的网站,不喜欢花费太多的时间等待网页的打开,等待的时间过长(据调查,用户的容忍时间通常不超过8秒),往往会让用户失去耐心,甚至烦躁时会直接关闭网页,这样就会失去一些潜在的客户了。 网页打开的速度如此重要,那么我们就该怎样去优化网页呢?下面分享6个网者网络经常用到的网页优化技巧: 1、在url
2011/6/20 Comments:
提高网页打开速度的一些小技巧
互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃。其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度还是一个重要的课题。加快网页的打开速度,有三个路径,一是提高网络带宽,二是用户在本机做优化,三是网站设计者对网页做一定的优化。这篇文章站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧。一、优化图片几乎没有哪个网页上是没有图片的。如果你经历过56K猫的年代,你一定不会很喜欢有大量图片的网站。因为加载那样一个网页会花费大量的时间。即使在现在,网络带宽有了很多的提高,56K猫逐渐淡出,优化图片以加快网页速度还是很有必要的。优化图片包括减少图片数、降低图像质量、使用恰当的格式。1、减少图片数:去除不必要的图片。2、降低图像质量:如果不是很必要,尝试降低图像的质量
2011/6/20 Comments:
巧用XML+XSLT+CSS+JQuery创建Asp.Net网站(二)
添加一个CSS文件,命名为Style.css,输入以下代码: body   {   background-color: Silver;   }   h1   {   color: Gray;   }   a   {   color:White;   margin-right:6px;   }编译并运行,即可看到输出的数据:查看其源代码:用户访问不同页面时,只有这些XML代码会被多次下载,其他客户端的文件都只需下载一次,大大节省了服务器网络资源。由于此前在ashx中编写了支持Url参数查询的代码,我们可以通过设置max参数来决定显示的最大数据条目数: 输出部分至此就完成了,接下来是输入部分:导入JQuery代码jquery-1.3.2.js到项目中。添加一个JS文件,命名为Post
2011/6/14 Comments:
巧用XML+XSLT+CSS+JQuery创建Asp.Net网站(一)
前言早在Web标准化风潮到来之前,我就考虑过XML+XSLT建站了,我以为这是一种非常优雅、高效、低耦的方案,必将大行其道。然而时至今日,使用这种方案建站的人依然寥寥无几,大家还都在抱着Web标准化不撒手,其实Web标准化只是将表现(Css)分离了出来,而数据和结构仍然混杂在一起,它绝对不是我们最终的归宿,它只是一个过渡品。XHtml标准的建立初衷,其实也就是为了向XML过渡的,XML+XSLT+CSS才真正做到数据、结构、表现的完美分离,才是我们的终极目标。诚然,XML+XSLT确实有其技术难度,我想这是它难于普及的最大障碍所在,但我觉得随着时间的推移、观念的更新、工具的发展,这仍旧是我们必会到达的一站。方案简介XML+XSLT+CSS的方案将数据、结构、表现进行了分离,而依托JQuery
2011/6/14 Comments: