【高性能web开发】 网络传输环节

标签: 性能 web 开发 | 发表时间:2011-10-18 10:28 | 作者:听说读写 Bloger
出处:http://www.cnblogs.com/

【高性能web开发】将会是一个系列.

从html,js,css等前端,到HTTP/TCP等网络传输环节.

从Asp.net等应用服务器语言到数据库优化.

从架构设计到第三方组件和解决方案的应用.

之后大约还有4-5篇Blog和高性能web开发有关.
 

【高性能web开发】 网络传输环节

1.减少请求数.

  • 缓存,使用Expires 等设置过期时间;如果内容没有过期就不发送请求
  • 合并小体积内容,例如吧数量众多的小图片放在一个图片,之后用css部分呈现(大体积的内容就别合并了)
  • 延迟加载;部分内容,例如图片在页面呈现的时候才加载 (常用的就是滚动条到了以后才加载);减少不必要的请求 
  • 合并重复内容和文件
  • 考虑使用第三方CDN资源,例如jQuery有免费的CDN,有些用户已经在其他网站访问过该内容了,那么到我们的网站加载就更快了 (而且使用CDN降低对我们服务器的压力)
  • 使用HTML5 中的Local Storage等保存数据

2.减少响应内容的体积.

  • 适当的时候只返回响应头304 (HTTP缓存,如ETag等)
  • 使用Gzip等压缩文件内容
  • 使用免费的第三方工具,压缩css,js和html等文件的大小 (例如我们常见的 jquery.min.js)
  • 适当使用Ajax操作
  • 在适当的时候,将样式,HTML和数据分离 (数据量很大的时候极大减小文件体积)
<ul id="id">
<li style="一大堆的样式">数据 </li>
<li style="一大堆的样式">数据 </li>
<li style="一大堆的样式">数据 </li>
</ul>
分成HTML 样式 和数据3部分

HTML
<ul id="id">
<li></li>
<!-- 如果使用数据模板等方式 只需要保留一个Li 否则需要多个 -->
</ul>

样式保存在CSS文件中
一些基本的小常识 虽然有很多个li 不用给每个li指定class

数据
使用JSON返回 (如果觉得麻烦也可以嵌入在页面中)
  • 选择体积更小的数据格式,例如JSON一般就比XML体积来的小 (都经过压缩以后还是更小)
  • 在设计上,只传送变化的部分数据 (例如要获取100条数据,可能已经加载了90条,那么再加载10条就好了)
  • 移除请求和响应中不必要的HTTP Header (例如WCF Restful service中有的时候要传递表明当前数据是JSON还是XML的HTTP Header)
  • 部分功能,如压缩会消耗CPU, 如ajax等会增加开发工作量,请谨慎选择

3.增加请求并发数.

  • RFC中,浏览器对于同一个域名下的资源只能使用2个线程同时进行访问(很多新的浏览器支持6个或者更多);解决方法是使用子域名,例如1.abc.com 2.abc.com
  • <img src ="1.abc.com/1.png" />
    <img src ="1.abc.com/2.png" />
    <img src ="2.abc.com/3.png" />
    <img src ="2.abc.com/4.png" />
    <img src ="3.abc.com/5.png" />
    <img src ="3.abc.com/6.png" />
    <img src ="4.abc.com/7.png" />
    <img src ="4.abc.com/8.png" />
  • 将一个超大的文件(例如有些人喜欢吧整个网站的js都放在一个文件)拆成一系列的中小文件 (有利于并发加载和缓存!)这个文件大小的Size选择很重要 我个人建议是10k-200k (依赖于网络)
  • 上一条并没有和1-2冲突,文件太小太多也不行,文件太少太大也不行,这是一个平衡的问题
  • 通过分拆文件,使得最常用页面(例如首页)的加载速度变快了
  • 控制加载顺序,例如先加载页面大体结构,然后多个javascript异步请求加载数据(把一个大的html变为多个小的html片段)

4.其他特殊技术.

  • 利用HTTP 1.1的长连接特性,使得在一定程度上,服务器可以主动推送数据(减少了很多不必要的轮询)

5.工具.

  • Fiddler (Free)
  • FireDebug (Free)
  • HttpWatch

部分内容引用自MSDN和其他第三方文章..

因本人水平有限,如有遗漏或谬误,还请各位高手指正

作者: 听说读写 发表于 2011-10-18 10:28 原文链接

评论: 3 查看评论 发表评论


最新新闻:
· 雅虎周二发布第三季财报 或透露解雇巴茨原因(2011-10-18 14:37)
· 当投影仪取代游戏机(2011-10-18 14:36)
· 传新浪微博架构调整:杜红挂帅彭少斌去留未定(2011-10-18 14:23)
· 阿里巴巴推免费实地认证服务(2011-10-18 14:22)
· Adobe发布iOS版PDF阅读器Adobe Reader(2011-10-18 14:20)

编辑推荐:最老程序员创业札记:全文检索、数据挖掘、推荐引擎应用48

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [性能 web 开发] 推荐:

【高性能web开发】 网络传输环节

- Bloger - 博客园-首页原创精华区
【高性能web开发】将会是一个系列.. 从html,js,css等前端,到HTTP/TCP等网络传输环节.. 从Asp.net等应用服务器语言到数据库优化.. 从架构设计到第三方组件和解决方案的应用.. 之后大约还有4-5篇Blog和高性能web开发有关.. 【高性能web开发】 网络传输环节. 缓存,使用Expires 等设置过期时间;如果内容没有过期就不发送请求.

Web性能优化

- - SegmentFault 最新的文章
Web网站的性能细线在几个方面:. 通过分析浏览器的渲染原理、资源对渲染的影响,得出优化网站性能的办法. Chrome的 Timeline面板录制网页加载的过程,分析记录浏览器渲染过程中每个过程的耗时. 关闭Chrome扩展或者启用隐身模式. 根据使用场景,模拟真实的网络加载情况:. 2.2 Timeline工具的各个组成.

web性能测试指标

- - 研发管理 - ITeye博客
Web性能测试的部分概况一般来说,一个Web请求的处理包括以下步骤:. (2)web server接受到请求,进行处理;. (3)web server向DB获取数据;. (4)webserver生成用户的object(页面),返回给用户. 给客户发送请求开始到最后一个字节的时间称为响应时间(第三步不包括在每次请求处理中).

Web性能优化:prefetch, prerender

- - Harttle Land
本文从预加载的角度介绍如何优化页面载入和渲染的性能,在展开内容之前先了解一下浏览器显示页面的过程: 首先是DNS解析,然后建立TCP连接,接着下载HTML内容以及资源文件,最后才是整个页面的渲染. 图片来源: https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present?slide=id.gc03305a_0106.

Web开发入门(转载)

- linchanx - Starming星光社最新更新
Web应用的竞争异常激烈,开发难度也是入门容易做好很难,所以第一次开发的应用不成功是很正常的事情. 不过这正是一个积累的过程,反正你需要的只是电脑和少量服务器经费,所以多磨练几次,水平自然会提高. 2, 习惯阅读及查阅英文资料. 前沿信息基本源自美国,翻译的东西不及时,不全,很多水平不高,再加之中文原创资料毕竟很有限,因此是否能熟练地查阅英文资料决定了你获取信息的 及时性和质量.

Spring MVC 与 web开发

- - 码蜂笔记
项目组用了 Spring MVC 进行开发,觉得对里面的使用方式不是很满意,就想,如果是我来搭建开发环境,我会怎么做. 下面就是我的想法,只关注于 MVC 的 View 层. 现在基本上都是用 ajax 来调用后台接口,拿到 json格式的数据再展示,有的人直接返回数据,却没有考虑异常的情况,我觉得返回的报文里必须包含表示可能的异常信息的数据和业务响应数据.

web开发利器之grunt

- - CSDN博客Web前端推荐文章
grunt不难,它主要依赖的是nodeJS的npm包管理器,和一个JSON及一个JS文件,先说说npm包管理器,玩过nodeJS的对它应该都很熟悉,在这里我们只需要安装nodeJS即可(新版的nodeJS基本都集成了npm),至于nodeJS的安装可以 点这里,这这篇文章就不做详细介绍,安装完后打开命令管理器(nodeJS安装完后的终端)输入:.

『Google发布移动Web性能工具PCAP Web Performance Analyzer』

- - jackyrong
最近,Google的Page Speed团队一直在关注如何更好的优化移动Web应用性能. 虽然我们拥有类似Firebug、Page Speed、YSlow!和Chrome/Safari Developer Tools等优秀工具,但是移动浏览器缺少这样的性能分析利器. 为此,Page Speed团队发布了一个分析移动浏览器网络信息的工具——PCAP Web Performance Analyzer.

提升 web 应用程序的性能

- pathfinder - IBM developerWorks 中国 : 文档库
作为 web 用户,我们知道页面加载或刷新的速度对其成功至关重要. 本文将帮助您更好地理解影响 web 应用程序性能的因素. 学习识别这些问题并且找到客户端内容的瓶颈. 探索 JavaScript、DOM、CSS 和 Dojo 小部件的性能问题. 将通过一个例子展示使用 YSlow 和 Firebug 适当调整 Dojo 小部件.

web前端性能优化进阶路

- - 阿里巴巴(中国站)用户体验设计部博客
Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践. 可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 黄金法则,以及大名鼎鼎的优化大师 Steve Souders. 本文并非一篇讨论性能优化技术方法的文章,而更多的是对中文站 搜索List页面持续两年多的前端性能优化实践的 思路总结.