web前端优化10点总结

news/2024/7/10 5:16:15 标签: 优化, web, php, cache, 浏览器, json

实际上,我们通过前台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尽量使用标准规范的写法,提高渲染引擎的执行效率;对广告图片进行适当的压缩处理; 

 

tenfyguo 于2010年01月tx


http://www.niftyadmin.cn/n/1738118.html

相关文章

微信开发常见问题:自动音乐播放,alert 显示网址

前言 在做各种HTML5场景页面的时候&#xff0c;插入背景音乐是一个很普遍的需求。我们都知道&#xff0c;IOS下的safari是无法自动播放音乐的&#xff0c;以至一直以来造成一种错误的认识&#xff0c;iso是无法自动播放媒体资源的。直到微信火爆起来&#xff0c;我们发现IOS的…

animate css动画小功能

1、动画结束回调: const element document.querySelector(.loadbar);//动画dom对象element.addEventListener(animationend, () > {//当前动画结束后时间element.classList.remove(animate__bounceInDown);element.classList.add(animate__shakeX,animate__slower,loopanim…

new, calloc和malloc的区别

函数malloc()和calloc()都可以用来动态分配内存空间,但两者稍有区别。 malloc()函数有一个参数,即要分配的内存空间的大小: void *malloc(size_t size); calloc()函数有两个参数,分别为元素的数目和每个元素的大小,这两个参数的乘积就是要分配的内存空间的大…

关于escape(), encodeURI()和encodeURIComponent()编码的几个实验

escape()&#xff0c;encodeURI() 和 encodeURIComponent() 编码函数是JavaScript编程中非常常用的几个函数&#xff0c;它们对应的解码函数分别是unescape()&#xff0c;decodeURL()和decodeURIComponent()&#xff0c;这里简单地归纳下几个函数的使用要点&#xff1a; 一&am…

TP6一键删除runtime缓存文件

话不多说开撸&#xff1a; 在系统公共函数文件里面新建一个方法&#xff1a;如下 /*** del_dir()* 循环删除目录和文件* param string $dir_name* return bool*/ function del_dir($dir) {$dhopendir($dir);while ($filereaddir($dh)) {if($file!"." && $fi…

警惕opera和遨游浏览器对一些请求关键词进行屏蔽

问题的出现&#xff1a; 1&#xff0c;用遨游打开QQ返利(http://fanli.qq.com)进行跳转到商家的时候&#xff0c;一直提示错误&#xff0c;无法正常的跳转&#xff0c;考虑到遨游是用IE的内核&#xff0c;所以重新尝试了下用IE进行跳转&#xff0c;发现却是正常的。 2&#xff…

21个php常用方法汇总

php常用方法汇总 1. PHP可阅读随机字符串 此代码将创建一个可阅读的字符串&#xff0c;使其更接近词典中的单词&#xff0c;实用且具有密码验证功能。 /***length - length of random string (must be a multiple of 2) **/ function readable_random_string($length 6){…

浏览器push技术测试demo

典型的B/S架构的使用模型是&#xff1a;浏览器发送一个HTTP请求后&#xff0c;web server 返回一个对应的HTTP响应&#xff0c;这种一来一回的请求响应却是b/s架构的典型应用。我们可以知道&#xff0c;基于这种方式&#xff0c;如果要实现服务器端的信息到浏览器端的主动周知是…