web前端优化10点总结

tenfy    发表于2010年01月12日 11:41 阅读(5) 评论( 1) 分类: web前台开发

举报

实际上,我们通过前台web端的梳理和逻辑的优化(哪怕是一个小的处理细节)都可以提高我们的页面响应速度,从而不断改善用户体验和提升用户价值。这里主要有下面几点分享::

1, 对页面内容按照优先级进行分块,然后根据不同的级别决定各块拉取的时机。

就象版本特性一样,我们可以通过不断的敏捷迭代去实现用户最重要最care的特性,实际上,我们的页面内容也是可以根据用户的需求划分优先级的,

把用户最重要,最紧迫想看到的内容第一时间“送”到用户的面前,而不是第一时间去加载一些用户认为不是非常重要的内容,而这种内容一般可以延迟加载(晚点看到用户也不会觉得很不爽)。而用户如果没有第一时间看到这些内容会产生“失落感”和“迷失感”,从而会对这个站点的体验迅速产生“不满”,那么这些内容我们都可以认为是高优先级别的,应该安排在早点拉取,比如炫铃,用户最想看到的就是炫铃的一个个item,而不是上面的一句话:尊敬的xxxx。因此这里的上面的提示语可以延迟加载。

2, 不要用<script src=’xxxx.php’></script>的形式实现静态页面拉取动态内容。

<script>拉取内容的方式本质上是一种同步模型,通过该script请求的资源如果无法及时拉取到,页面是无法继续往下渲染的,通过这种方式,我们无法享受到

静态页面带来的好处。

3, 减少页面拉取的图片数目很重要。

浏览器拉取页面图片的开销是比较大的,而实际上,我们的页面为了提升用户体验使用了大量图片,这里我们常采用cdn存放,图片合并(几个图片合成一个,然后使用css进行截取片断显示),永久cache(存在图片变更的维护成本,工具的建设等),甚至有些效果是可以用css来实现的代替图片

4, 统计需要等非业务逻辑的实现方案尽量要轻量化。

为了实现一个isdstat统计,跳转了一次php,这样的代价有点高,可以等到用户的页面数据拉取完毕后“偷偷”的发送个请求去实现统计即可,基本原则是:

统计出现的位置1,不能影响页面功能;2,发到页面最后执行。

5, 对性能要求更高的站点首页可以单独处理。

首页作为一个站点门面,可以进行特别处理:如单独build成静态页面,写只对该首页有用的js等,会员这边对好多首页是直接使用html页面而非php。

6, Js脚本的执行顺序也是重要的web优化方向。

Js的一般执行顺序是从上到下的执行,但defer属性在IE下可以延迟脚本的执行时机(Firefox忽略该属性),特别是结合src属性的使用可以告诉浏览器先从后台下载该js代码但不立即执行它,从而实现延迟加载的效果。

7, 别忘了php的逻辑也是重要的优化方向

Php方面的优化主要包括两点:1,php本身的优化,包括减少不必要的包含文件,php不同写法的性能差异,php的环境配置等,这里可以参考下网上的php的40条优化建议

(http://www.yeeyan.com/articles/view/davidkoree/4409 ),A HOWTO on Optimizing PHP:(http://phplens.com/lens/php-book/optimizing-debugging-php.php);

2,php里面的业务逻辑优化:把更重的逻辑后移到Server其执行,php只负责接入;考虑是否可以把部分逻辑省略,去掉重复调用的接口等。

8, 充分利用浏览器的cache机制,必要时,考虑实现js层面的cache;

通过设置http头中的Cache-control和 Expires 字段,可以利用浏览器本身的cache,从而减少http请求数,如果有必要,特别是在js模板替换方面,可以实现js层面的cache层,把已经parse后的模板内容进行cache。如何使用cache-control和expires可以参考以下网址:

(http://www.exp2up.com/blog/2008/07/24/http%E5%A4%B4%E7%9A%84expires%E4%B8%8Ecache-control/ )。

9, 尽量少用重定向机制;

Header(“Location:url”);会增加两次浏览器和web server之间的来回,因此减少这里的重定向是我们优化的一个重要方向,这里的例子是会员专区的跳转优化。

10, 考虑cpu和内存资源和带宽资源的互换。

就好像算法设计中的时间和空间复杂度一样,我们可以通过缓冲中间的计算结果减少计算的时间,但相应的增加存储空间,相应的,如:我们可以利用json从服务器上拉取数据,由于json的简洁性,使得数据通讯量比较小,一旦拿到客户端,在对json数据进行模板替换,生成html代码(生成的代码一般比json大许多),达到利用用户cpu和内存资源降低带宽压力的目的。

11, 其他:

对js和css进行压缩,去重,合并等处理;html尽量使用标准规范的写法,提高渲染引擎的执行效率;对广告图片进行适当的压缩处理;

web前端优化10点总结相关推荐

  1. 关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)...

    Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...

  2. WEB前端优化之内容篇

    WEB前端优化之内容篇 Web前端优化过程中难免对相关的前台内容进行重新安排.其中主要的一些点如下: 1尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能 ...

  3. Web前端优化最佳实践

    一.Web 前端优化最佳实践之内容篇 Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献.广为人知的优化规则也由 13 条到 14 条,再 ...

  4. Web前端优化工具集锦

    1.  Google PageSpeed Google提供了 PageSpeed工具,这是一个浏览器插件,可以很好地应用上文中Google所提到的Web优化实践--帮助你轻松对网站的性能瓶颈进行分析, ...

  5. Web前端优化最佳实践及工具集锦

    摘要:前端的性能对于Web应用的用户体验来说非常重要.不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方.本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验 ...

  6. [转] Web前端优化之 内容篇

    原文网址: http://lunax.info/archives/3090.html Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献. ...

  7. Web前端优化最佳实践及工具集锦(如减少页面加载时间)

    前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页 ...

  8. 干货 | Web前端优化及工具集锦

    原文地址:http://www.csdn.net/article/2013-09-23/2817020-web-performance-optimization   前端的性能对于一个Web应用来说非 ...

  9. web前端优化与细节

    雅虎WEB前端网站优化--34条军规:https://www.jianshu.com/p/3d77c3d3cc8f 前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duan ...

最新文章

  1. 实验五:任意输入10个int类型数据,排序输出,再找出素数
  2. 正则表达式的坑与调试
  3. Django使用Mysql时数据库配置
  4. 商品评价 - 实现分页
  5. 类属性和实例属性冲突
  6. wowbl最优势的服务器,CWOW中BL为什么远远多于LM一个新手之见
  7. 【kotin】统计字符串中的字母数(拓展函数)
  8. Linux 常用但较容易忘记的命令
  9. 46.网络安全与主机基本防护:限制端口、网络升级与 SELinux
  10. 从CSV和VCF文件中获取联系人信息
  11. 二分之一波长传输线有啥用?
  12. android按钮半透明
  13. 泰晤士2021计算机科学排名,重磅!2021泰晤士学科排名发布!
  14. ACM一年总结(写于2011年11月18日)
  15. 开涛的博客—公众号:kaitao-1234567,一如既往的干货分享
  16. UVALive 4850 Installations——思维
  17. Win10邮箱管理QQ邮箱+163邮箱
  18. bzoj 1633: [Usaco2007 Feb]The Cow Lexicon 牛的词典【dp】
  19. Centos更新内核
  20. 凌动智行宣布获China AI Capital Limited战略投资 迟睿及李宇成董事会成员

热门文章

  1. 直观说明Hadoop是什么?有什么作用?
  2. Windows API 函数SendMessage与PostMessage使用方法和常见的坑
  3. keycloak 验证 token
  4. 查看python openCV的版本号
  5. python——不同路径 ||
  6. 如何进行不同容量硬盘对拷
  7. 中科曙光 量子计算机,中科曙光 量子计算机 量子计算机的曙光
  8. VsCode插件整理
  9. 用迭代法求 x=根号a。求平方根的迭代公式为:X(n+1)=(Xn+a/Xn) /2。
  10. 异常(如何捕获和抛出异常,自定义异常)