网页制作心得:WEB前端优化的方法

随着WEB2.0时代来,给网络的带来了空前的发展。前端用户体验变得越来越显的重要,从而来弥补B/S结构的用户交互型差的一些弊端,可是这样会带来一个问题就是会增加客户端的压力,比如大量运用JS代码,大家都知道JS代码是运行在客户端的,会影响到整个网页的在浏览器的解析效率,这样也可能暗示着会增加客户端的流量,所以不管是从服务器负载角度还是站在用户的角度来看,对客户端的代码进行优化都显得尤为重要!本文主要内部和外部两方面来阐述WEB前端优化的方法。希望能给读者一些体会和启发。

首先,我们通过一个雅虎的统计图表来看看打开http://yahoo.com的http的流量数据:

我们可以发现一个页面的从第一次发出服务器请求到完全载入到客户端的过程中,读取html代码只占了整个响应时间中的5%,这个结果适 用于绝大多数网站,在采样美国的前十位网站中,只有一家超过5%但少于20%,其余80%的时间是用来读取网页其他内容的,也就是说,前端(原文是 front-end,意思就是不包括html代码的其余内容,可以是图片,脚本,flash,视频,各种东西)。这就是为什么我们要把目光集中在这些东西 来提高显示速度的关键原因。

为什么要从前端开始着手有三个主要原因

  1. 这里有提升和改进的潜力。如果能减少一半的体积,就能减少40%的响应时间。
  2. 改进前端比改进后端需要的时间和资源更少。(改进后端要重新设计应用程序规划,代码,寻找优化代码的方法,添加或改变硬件配置,分布式数据库,等等)
  3. 我们的黄金规则是:首先优化前端表现,这些东西耗费了用户端响应时间中的80%。

一、从代码之外,咱们有以下三种方法

1.运用cdn技术

具体方式,可以Google一下。(大体的原理好像就是判断访问者的位置及访问的内容从而来选择就近的服务器来处理用户的请求)

2.加一个长时间过期的头部

Expires: Thu, 15 Apr 2010 20:00:00 GMT

浏览器会用缓存来减少http请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素。
不过这样会带来一个问题,就是如果页面里的东西变动的话就要改名字了,否则用户端不会主动刷新,在yahoo工作组用的是版本号,例如yahoo_2.0.6.js

3.Gzip压缩

Gzip是现在最流行和最有效的压缩方式,她是GNU开发的,RFC1952标准化。
(Gzip是在服务器端压缩图片,css,脚本等,传送到用户端的浏览器再解压,这样可以提高传输速度,不过对服务器的压力会增大,一般选择部分元素压缩比较合适。

时间: 2024-08-22 14:16:38

网页制作心得:WEB前端优化的方法的相关文章

web前端优化之图片显示优化

前言 此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实 都100多岁啦)是不会怕滴.所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题,而后 我本来还想多找几道来做做,但是没找到什么合适的,各位有什么好的前端面试题请给我留言哦,我们一起来 分析面试题进步哟! 前端时间,我与我们的产品有一次讨论,是针对图片压缩的,因为我对图片或者 说PS这块是个小白,所以当时做了一个广告图片有100来k也直接给传上去了,结果被我们的同事搞起来一压缩 ,便只有50多k了,

Web前端优化最佳实践之Server篇

Web 前端优化最佳实践第二部分面向 Server .目前共计有 6 条实践规则.[注,这最多算技术笔记,查看最原始内容,还请访问:Exceptional Performance : Best Practices for Speeding Up Your Web Site ] 1. 使用 CDN (Use a Content Delivery Network) 国内 CDN 的普及还不够.不过我们有独特的电信.网通之间的问题,如果针对这个作优化,基本上也算能收到 CDN 或类似的效果吧(假装如此

Web前端优化最佳实践之图象篇

Web 前端优化最佳实践第六部分面向 图片(Image),这部分目前有 4 条规则.在最近的 Velocity 2008 技术大会上,Yahoo! 的 Stoyan Stefanov 做的 Image Optimization: How Many of These 7 Mistakes Are You Making 也非常有参考价值.结合一起说一下. 1. 优化图片 (Optimize Images) 使用 GIF .JPG 还是 PNG 格式的图片? 尽可能的使用 PNG 格式的图片,更多的功

Web前端优化最佳实践之Mobile(iPhone)篇

Web 前端优化最佳实践最后一部分是针对移动应用的,其实只是针对 iPhone 的,目前只有两条规则. 1. 单个数据对象小于 25K (Keep Components under 25K) 这个似乎只是针对 iPhone 研究的.建议保持单个 Web 数据对象在 25 K 以下.为什么是 25K? Apple 官方信息指出可缓存到内存中的 Web 对象最大支持到 10M,但经过测试,发现也就是 25K 左右. iPhone 在市场上的优异表现,让 Web 人员不得不考虑如何针对其进行优化.相信

Web前端优化最佳实践之JavaScript篇

Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化最佳实践,最重要的还是"实践",要理解这东西容易得很,关键是要去"实践",去"执行",去"反馈",去获取受益. 1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom) 当一个脚本在下载的时候,浏览器干不了其它的事儿(串行了).所以,把它扔到最后面去处理.对于一些功能性的脚本,可

Web前端优化最佳实践之CSS篇

Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文章:Writing Efficient CSS 1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top) 官方的解释我觉得多少有点语焉不详.这一条其实和用户访问期望有关.CSS 放到最顶部,浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染.没有人喜欢等待,而浏览器已经考虑到了这一点. 2. 避免 CSS 表达式 (Avoid CSS Ex

Web前端优化最佳实践之Cookie篇

Web 前端优化最佳实践第三部分面向 Cookie .目前只有 2 条实践规则. 1. 缩小 Cookie (Reduce Cookie Size) Cookie 是个很有趣的话题.根据 RFC 2109 的描述,每个客户端最多保持 300 个 Cookie,针对每个域名最多 20 个 Cookie (实际上多数浏览器现在都比这个多,比如 Firefox 是 50 个) ,每个 Cookie 最多 4K,注意这里的 4K 根据不同的浏览器可能不是严格的 4096 .别扯远了,对于 Cookie

Web前端优化最佳实践之内容篇

Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献.广为人知的优化规则也由 13 条到 14 条,再到 20 条,乃至现在的 34 条--真是与时俱进啊.最新的 34 条也针对不同的角度做了分类. 面向内容的优化规则目前有 10 条. 1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大

CSS网页制作技巧:让网页内容居中的方法

文章简介:居中一直是设计师们比较喜欢使用的一种摆放形式,无论是图片还是文字都会被要求放在中间,水平或者垂直.css提供了很多方便的让内容居中的方法给我们使用,以下罗列那些最长被使用的居中技巧. 居中一直是设计师们比较喜欢使用的一种摆放形式,无论是图片还是文字都会被要求放在中间,水平或者垂直.css提供了很多方便的让内容居中的方法给我们使用,以下罗列那些最长被使用的居中技巧. 水平居中的text-align:center 和 margin:0 auto 这两种方法都是用来水平居中的,前者是针对父元