`
manjingtou
  • 浏览: 121174 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

有关web效率

阅读更多

1)web开发的特点是是:没有太复杂的技术难点,一切在于迅速的把握需求,其实这正式敏捷开发的要旨所在,一切都可以非常快速的建立,非常快速的重构,我们的开发工具,底层库和框架,包括搜索引擎和web文档提供的帮助,都提我们供给了敏捷的能力。

2)此外,相应的,最有效率的交流方式必须留给web开发,那就是face2face(面对面),不要太担心你的设计不能被完备的文档所保留下来,他们会以交流,代码和小卡片的方式保存下来

3)人的因素会更加重要,无论是对用户的需求,还是开发人员的素质。

另:有关web效率,有著名的14条规则,由yahoo性能效率小组所总结,并广为流传。业已出现相关插件(YSlow),14 rules列在下面:

1. Make Fewer HTTP Requests

减少http请求次数

Image maps  图像中增加url可以将多个图片合为一个,减少http请求。

CSS Sprites  通过css 将图片引入到页面中减少页面请求http

Combined files合并文件不如合并多个请求的javascript为一个。减少http请求。

http://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html

2. Use a Content Delivery Network

3. Add an Expires Header

在下载的cssjsimage组件里增加过期时间

4. Gzip Components

(对下载的组件进行压缩)

毫无疑问,对站点内容进行压缩是一个比较常用的 Web 优化手段.但是并不一定都能达到理想的效果.原因在于 mod-gzip 模块不但消耗服务器端 CPU资源,也消耗客户端 CPU资源. 而且, mod_gzip 压缩文件后创建的临时文件是放到磁盘上的,这也会给磁盘 IO带来严重的问题.

Flickr 采用的是 Httpd 2.x 以后支持的 mod_deflate 模块.压缩操作都在内存中进行.mod_deflate Httpd 1.x 是不可用的, 不过可以通过创建 RAM盘的方式来间接提高性能.

当然, mod_gzip 到也不是一无是处, 对于预压缩的文件, 还是有好处的. 而且, 采用压缩的时候,也要注意策略. 图片文件压缩就没什么必要了(Flickr 上图像多, 而且压缩得不到什么好处). Flickr 只对JavaScript CSS进行压缩. mod_gzip 新一点的版本能够自动通过配置 mod_gzip_update_static 选项自动处理预压缩的文件. Cal 也指出这个特性在一些旧版本的浏览器上会出问题.

压缩的另一个主要手段是内容的压缩. 针对 JavaScript 可以进行通过减少注释、合并空格、使用紧凑的语法等小技巧(Google 的所有脚本都非常难读,而且非常紧凑,思想类似).当然,经过这样处理的 JavaScript 可能带了很多括号不容易解析,Flickr 使用了 Dojo Compressor 来构建解析树。Dojo Compressor 开销很低,而且对于最终用户是透明的. JavaScript 的处理方法介绍过,CSS 处理则相对简单.通过简单的正则表达式替换(比如把多个空格替换为一个空格符), 最高可以获得 50% 的压缩比。

5. Put CSS at the Top

css文件尽可能放在页面的最上面

· Move Scripts to the Bottom

js文件尽可能放在页面的最下面

6Put JS components as close to the bottom of the page as possible.

js文件尽可能放在页面的最下面)

7Avoid CSS Expressions

(在css文件中慎用表达式)

8Make JavaScript and CSS External

(在外部包含jscss文件)

9Reduce DNS Lookups

(减少请求中域名的解析次数)

10Minify JavaScript

js代码压缩)

11Avoid doing redirects.

(避免重定向)

12Remove Duplicates Scripts

(避免请求重复的js文件)

13Configure ETags

(配置好ETag

Flickr 的开发者充分利用了 Http 1.1 规范定义的 Etag 与 Last-Modified 机制 来提高 Caching 的效率. 值得注意的是,Cal 介绍了一个在负载均衡条件下的 e-Tag 小技巧. 即可以设定 Apache 通过文件调整时间与文件大小获得 E-Tag ,而默认情况下, Apache 是通过文件节点获取 e-Tag 的。当然,这也不是很完美,因为会影响 if-modified-since

但是有的网站的e-Tag,如yahoo,其产生规则是基于节点的。相同的cssjs脚本在不同节点服务器上的e-Tag不同,所以如果有n个服务器,那么浏览器获得304应答消息的概率是1/n

14Make Ajax Cacheable

(缓存Ajax请求)

以下几点是新增的准则,还没有正式公布,所以大家要注意,

15Flush the Header

(先发送Header里的信息)

We improved the page load times by flushing the apache output buffer after the document HEAD was generated.This had two benefits.

First, the HEAD contains SCRIPT and LINK tags for scripts and stylesheets. By flushing the HEAD, those tags are received and parsed by the browser sooner, and in turn the browser starts downloading those components earlier.

Second, the HEAD is flushed before actually generating the search results. This is a win for any property doing a significant backend computation or especially making one or more backend web service calls.

16Split Static Content Across Multiple Hostnames

(把较大的静态文件分割成不同域的请求)

If you have many (10 or more) components downloaded from a single hostname, it might be better to split those across two hostnames.

17Reduce the Size of Cookies

(不要让Cookie内容过大)

Reduce the amount of data in the cookie by storing state information on the backend, and abbreviating names and values stored in the cookie. Set expiration dates on your cookies, and make them as short as possible.

18Host Static Content on a Different Top-Level Domain

(把静态文件放在不同的顶级域名下)

19Minify CSS

Css代码压缩)

20Use GET for XHR

(有XHR时使用GET请求)

Iain Lamb did a deep study of how using POST for XMLHttpRequests is inefficient, especially in IE. His recommendation: “If the amount of data you have to send to the server is small (less than 2k), I suggest you design your webservice / client application to use GET rather than POST

21Avoid IFrames

(尽量避免使用IFrame

Don’t use SRC (set it via JS instead). Each IFrame takes 20-50ms, even if it contains nothing

22Optimize images

(优化图片)

分享到:
评论

相关推荐

    AJAX异步提高Web应用效率.pdf

    AJAX异步提高Web应用效率 AJAX(Asynchronous JavaScript and XML)是一种提高Web应用效率的技术,通过异步请求和更新页面内容,解决了传统Web应用的弱点:用户在向远程服务器提交请求直到请求返回到客户端的时间内...

    weboffice控件的使用

    例如,在企业内部,WebOffice 控件可以用于在线文档编辑和共享,提高工作效率和协作效率。在教育领域,WebOffice 控件可以用于在线学习和协作,提高教学效率和学生参与度。 4. WebOffice 控件的主要功能 WebOffice...

    WebApi和访问WebApi两个项目

    理解并熟练掌握这两个项目的核心概念和技术,对于提升开发效率和构建高质量的分布式系统至关重要。提供的源码和详细注释将为学习者提供宝贵的实践指导,有助于进一步加深对WebApi和HttpWebRequest的理解。

    WebRobot使用教程

    WebRobot是一款强大的网页自动化工具,它能够帮助用户自动执行一系列在网页上的操作,例如数据抓取、表单填写、点击按钮等,极大地提高了工作效率。在本教程中,我们将深入探讨WebRobot的安装、配置、基本操作以及...

    Web挖掘技术综述.

    Web内容挖掘是指对Web页面内容进行挖掘,从文本、图像、音频、视频、动画等各种形式的网络资源中发现所需的特定化信息,以实现Web资源的自动检索,提高Web数据的利用效率。Web结构挖掘是挖掘Web潜在的链接结构模式,...

    WEB客户端技术 WEB客户端技术

    在提供的压缩包文件中,我们可以看到一系列有关Web客户端编程的知识点,如"ITJOB_TP"系列可能是教学课件,涵盖了不同阶段的Web技术学习;"WEB客户端编程知识要点.ppt"可能是对核心概念的总结;"chapter1-3课堂案例...

    c# WebApi Winform托管

    总之,"c# WebApi Winform托管"是一个将Web服务功能引入桌面应用的实践,它允许在Winform应用内直接运行WebAPI,提高了开发效率,并简化了系统架构。同时,子线程访问UI确保了用户体验的流畅性,避免了因为后台操作...

    ntko插件web版,插件

    这个插件在Web环境中为用户提供了与桌面应用相似的文档处理能力,极大地提升了用户体验和工作效率。 在Web版的NTKO插件中,核心特性包括: 1. **在线预览**:用户无需下载文件即可在浏览器中查看各种格式的文档,...

    weboffice_weboffice

    这款系统主要用于实现网页上的文档编辑、查看、协作等功能,让用户无需下载安装软件即可在线处理文档,极大地提高了工作效率。WebOffice 常常应用于企业内部的文档管理系统或者云存储服务中,为用户提供便捷的文件...

    webapi文档生成,快速生成WebApi说明文档

    总的来说,WebAPI文档生成工具是现代软件开发流程中不可或缺的一部分,它能够帮助团队有效地管理和共享API接口的信息,提高开发效率,减少沟通成本,同时也能提高API的可维护性和可读性。通过合理利用这样的工具,...

    开源 web office 源码

    开源Web Office源码是开发基于Web的文档处理应用的核心组件,尤其对于那些希望构建自定义办公解决方案的企业或开发者而言,这是一个宝贵的资源。标题中的“开源”意味着这些源代码是公开的,允许用户自由查看、使用...

    基于Python的Web技术

    Python 是一种广泛应用于 Web 开发的高级语言,具有简洁易学、开发效率高、可读性强等优点。今天,我们将对基于 Python 的 Web 技术进行详细的介绍。 什么是 LAMP LAMP 是一种流行的 Web 开发平台,由 Linux、...

    weboffice插件下载安装

    1. 远程办公:员工在家或出差时,可通过WebOffice访问公司内部文档,提高工作效率。 2. 文档共享:团队成员可即时分享和讨论文档,加速项目进度。 3. 教育培训:教师和学生可以在云端共同编辑课程资料,促进教学互动...

    ue webUI 5.3版本的插件 支持打包

    UE WebUI 5.3的插件打包功能可能允许开发者将他们的插件代码整合成一个或多个可部署的文件,这可以极大地提升项目的维护性和部署效率。 2. **工作流优化**:支持打包意味着UE WebUI现在可能拥有一个内置的构建系统...

    Web3.0知识体系分享

    一、Web3行业赛道包括: 1.区块链基础设施(Web3.0核心技术) 2.DeFi(Web3.0金融体系) 3.NFT(Web3.0基本载体) 4.元宇宙(Web3.0具象表现形式) 5.DAO(Web3.0基本组织...3.这个场景下,Web 3 的产品解决问题的效率会更好吗?

    30个提高Web程序执行效率的好经验

    尽量避免使用DOM。当需要反复使用DOM时,先把对DOM的引用存到JAVAScript本地变量里再使用。

    Microsoft.Web.Infrastructure.rar

    这个库包含了动态编译、依赖注入以及其他一些Web应用开发中的基础设施功能,对于提升开发效率和代码质量有着重要的作用。在本文中,我们将深入探讨其核心功能和应用场景,并了解如何进行有效安装与使用。 1. **动态...

    华为 S5700 web管理加载文件

    华为S5700系列交换机是一款企业级的高性能以太网交换机,广泛应用于数据中心、企业网络等场景。在这款设备上实现Web管理能够提供便捷的图形化配置界面,使得非...这种方式极大地简化了网络运维工作,提高了工作效率。

Global site tag (gtag.js) - Google Analytics