web性能优化

1.高级web性能优化：
  a.服务器端技术:改进并行性，使用缓存控制和HTTP压缩，重写URL，以及对RSS订阅使用差值压缩
  b.客户端技术:延迟加载JS，按需加载资源，使用逐步增强和使用与数据URL内联的图像以节省HTTP请求数
2.吸引眼球的方法：
  a.前载标题，b.描述元标签，c.PPC标题和摘要
3.搜索引擎优化:站内优化和站外优化
  a.站内优化：内容关键字优化，有效内容创建和策略性链接交换
  b.站外优化：将指向本站的链接数量和流行度最大化
4.flash优化技巧：使用两个div，一个div用于flash动画，另一个用于与其等价的HTML代码
  当flash插件可用时，利用JS把HTML DIV隐藏起来，此时HTML对搜索引擎仍然有效
  注意：这种方法无法用于复杂的多页面站点，因为所有文字都存放在flash之外的一个XMl文件中
5.专业设计：象征信誉的logo易用的布局，舒服的配色方案，广告词注重收益精确无误与目标受众密切相关，能够吸 引用户的相关图片，易于更新的特别标记
6.导航设计：放弃图片导航，避免将关键字放入图像，扔掉只支持JS的导航，换成基于列表的层叠样式表风格，或提 高等价的导航文本
7.避免在不同URL上使用相同或非常相似的页面
8.影响搜索引擎排名的重要因素：
  在标题中使用关键字，入链的锚文本，站点全局链接流行度，站点年龄，站点内部链接结构里链接流行度，站点入链的主题相关性，站点链接在主题社区里的流行度，主体文本中使用的关键字，链接站点的全局链接流行度，链接页面的主题相关度
9.对搜索引擎负面影响的因素：
  服务器经常不能访问，内容与索引中已有的内容非常相似或重复，出链质量低或指向垃圾站点，在许多页面上复制标题/元标签，滥用目标关键字（表现为填充，堆砌垃圾信息），参与链接工厂或大量出售链接，非常慢的服务器响应速度，从垃圾站点来的入链，站点的访问者层次低
10.添加关键字的策略：
   可见文本的前两句，版式标题及子标题，链接和锚文本，页面URL，文件名，Alt文本，可索引的导航元素
11.a.永久重定向：
   Options+FollowSymLinks
   RewriteEngine on
   RewriteRule ^oldpage.htm$ ......[R=301,L]
   b.IIS重定向：
   打开Internet Services Manager并浏览你想要重定向的站点
   在右侧面板，点击想要重定向的文件或者目录，然后点击Properties
   在File标签下面，点击单选按钮A redirection to a URL
   将目标输入到Redirect to文本框
   确保选中多选框The exact URL entered above和A permanent redirection for this resource
   点击Apply
12.加快网页速度方法：
   尽量减少HTTP请求，调整图片大小并优化，优化多媒体，将JS转换为CSS，使用服务器端探测，优化JS获得更快的执行速度和更小的文件体积，把表布局转换为CSS布局，用CSS规则替代内联样式，最小化初始显示时间（快速加载有用部分），理智的加载JS
   1）减少HTTP请求数：合并文件和用CSS技术代替基于图形的技术（转换图形文本为CSS文本，合并外部文件、脚本、CSS文件，去掉框架和JS头文件包含，用CSS边距代替空白单元，CSS悬停代替JS，CSS精灵）
   2）调整图片大小并优化：提前计划最大程度压缩文件大小（简化背景图像）；裁剪图片只保留与上下文最相关的部分；调整图像到正好所需的像素大小；合并图片，节约HTTP请求，使用图像映射或CSS精灵；模糊JPEG背景，通过‘表面模糊’进行测试；使用CSS边界或背景代替在图像中的嵌入边框，不要为子排版而设置某种颜色的空白边距，而是使用剪切的图像和通过编码实现背景色；尽可能使用PNG图像替换GIF和JPEG，必要时使用色彩抖动；用HTML高度和宽度指定图像大小；PS智能锐化；用CSS或透明GIF或PNG叠加文本代替JPEG中的嵌入文本，有更高压缩比；优化图片前先消噪；最小化GIF和PNG色彩抖动、位深；采用加权优化（区域压缩），通过alpha遮罩来优化背景；对于尺寸稍小的GIF和PNG，可以使用“有损”压缩；减少或避免在分层图像中阴影效果；
   3）快速加载有用部分：通过分层表格或div确保有用内容（例如导航信息），能够快速加载
13.CSS和JS位置：
   CSS置顶，JS置底
14.JS优化：
   1）删除JS注释（注意条件注释）
   2）小心删除空白字符（有些语句忘记添加分号）
   3）使用缩写型赋值
   4）字符常量宏（定义全局变量）
   5）去除无用代码：在声明或多层循环中只包含一个声明，可删除花括号；变量在首次使用时会自动创建且是全局性的，如果使用全局变量，可省略var声明（小心使用）；在函数末尾的返回表达式没有参数可删掉（如return）
15.CSS优化：
   1)用类型选择器代替内联样式
   2)使用后代选择器而不要使用内联类
   3)将存在相同声明的选择器归组
   4)将相同选择器的不同声明分组
   5)将相同样式合并为共享类
   6)利用继承消除重复声明
   7)使用CSS缩写来简化规则和颜色的定义
   8)缩写较长的类名和ID名
   9)用CSS代替JS动作
   10）使用CSS3
   11）属性值的复写：（border，border-color，margin，padding，outline）
       一个值代表所有边，两个代表上下和左右，三个代表上 右左 下，四个代表上右下左
   12）CSS单幅图像菜单翻转：
       一般准备两个图片，但这样的话需要两次HTTP请求，在“关”图片没有预加载情况下，会产生闪烁，最好的解决方法是将两个图片放在一个图片精灵里，通过切换背景位置实现翻转
   13）可靠的CSS架构：
       重置样式表让渲染行为保持一致
       对主页区域使用标记容器单元格，以此设计后代选择器
       将外部CSS文件放在head元素里，使之渐进渲染
16.Ajax优化：
   1)恰当的使用Ajax解决问题
   2）使用良好构建和支持的Ajax库
   3）最小化JS代码
   4）减少HTTP请求
   5）选择正确的传输数据格式
   6）确保网络可用性和性能
   7）使用JS缓存
   8）为搜索引擎提供兼容机制，保证JS被禁用时的可访问性
   9）使用片段标识符来储存状态
17.解决Ajax缓存问题：
   不将Ajax请求放入缓存的三种方法：
   1）在服务器端输出No Cache头部信息
      例（PHP）：
      header("Cache-Control:no-cache");
      header("Pragma:no-cache");
   2）使用唯一URL来生成请求（使用时间戳）
      例：
      var ts = "ts="+(new Date()).getTime();
      sendRequest("sayhello.php",ts);
   3)为过去的某个时间设定If-Modified-Since
     ①使用XHR对象方法setRequestHeader()来将请求中的If-Modefied-Since设定为遥远的过去
     例：xhr.setRequestHeader("If-Modefied-Since","Tue,14 Nov 1995 03:33:08 GMT");
     ②将Expires头设为遥远的未来
     例：header("Expires:Sun,05 Jan 2025 04:00:09 GMT");
18.超时、重试和顺序
   设置在一段时间，比如5秒后触发的定时器，来取消正在进行的链接

   var g_abort=false;
   var xhr=createXHR();
   if(xhr)
   {
     xhr.open("GET","sayhello.php",true);
     var timeout=setTimeout(function(){g_abort=true;xhr.abort();},5000);
     xhr.onreadystatechange=function(){responseCallback(xhr,timeout);};
     xhr.send();
   }

 

19.三种缓存方法：
   1）通过<meta>标签<meta http-equiv="Expires"...>
   2)通过编码实现HTTP头设置（CGI脚本等）
   3）通过网络服务器通用配置文件（httpd.conf）
20.web性能优化：
   1)服务器端优化技术：优化并行下载，缓存频繁使用的对象，使用HTTP压缩，使用delta编码，用mod_rewrite重写URL
   关闭ETag，使用Expires和Cache_Control头部来有效缓存资源
   关闭方法：在Apache配置文件中添加如下两行（需要mod_header包含在默认Apache结构中）
   Header unset Etag
   FileETag none
   2)客户端优化技术：
   Ⅰ.延迟脚本加载：（使用渐进增强，按需加载JS或装载，为外部widget使用一个iframe模拟异步JS）
     a.渐进增强：
       使用简介的语义化XHTML构造基础内容，让所有浏览器都可以访问，由外部CSS提供更高级的布局，由外部JS提供更高级的交互，用JS实现从DOM添加或删除对象，用JS实现更高级的功能
     b.按需加载JS：
       使用DOM创建一个脚本元素并把它追加到头部元素：

       function include_js(file){
         if(document.getElementByTagName){
           var html_doc=document.getElementsByTagName('head')[0];
           var js=document.createElement('script');
           js.setAttribute('src',file);
           js.setAttribute('type','text/javascript');
           html_doc.appendChild(js);
           js.onreadystatechange=function(){
             //for IE
             if(js.readyState=='complete'){
               alert('JS onreadystate fired');
               //return true;
             }
           }
           js.onload=function(){
             //for non-IE
             alert('JS onload fired');
             //return true;
           }
           return false;
         }
         else alert('getElementsByTagName not supported');
       }

 

   为了避免缓存，可添加随机种子到脚本名中：
   function include_jsNoCache{
     var ms=new Date().getTime().toString();
     var seed="?"+ms;
     include_js(src+seed);
   }
   上述代码在Safari中不会触发onload事件，只有在加载脚本前设置onload和src 属性才会触发Safari中的加载事件，而且前面的脚本也不会清理内存，当脚本被添加到DOM并使用完后，应该删除以节省内存，修改如下：

   include_js=(function(){
     var uid=0;
     var remove=function(id){
       var head=document.getElementsByTagName('head')[0];
       head.removeChild(document.getElementById('jsInclude_'+id));
     };
     return function(file,callback){
       var callback;
       var id=++uid;
       var head=document.getElementsByTagName('head')[0];
       var js=document.createElement('script');
       js.setAttribute('type','text/javascript');
       js.setAttribute('src',file);
       js.setAttribute('id','jsInclude_'+uid);
       if(document.all)
       js.onreadystatechange=function(){
         if(js.readyState=="complete"){callback(id);remove(id);}
       };
       else
         js.onload=function(){
           callback(id);remove(id);
         };
       head.appendChild(js);
       return uid;
     };
   })();

 

       c.为外部JS使用iframe：
       这样在加载脚本时如果有拖延，只有iframe被拖延，而不是整个网页，因为JS能从一个HTML文件访问嵌入其中的iframe中变量，反之亦然，所有通过把一个HTML分成几个iframe可以有效将同步的HTML网页变成异步
       首先，编写一个函数，用于在iframe加载完成之后处理数据：
       function mainPageFunction(data){
         //...
       }
       然后创建一个iframe加载外部的JS文件，注意iframe会引起布局问题，所以可以使用隐藏的iframe
       这里对指定位置的iframe不做介绍，可用用空的iframe加载数据：
       <iframe src="about:blank" height="0" width="0" name="dataframe"></iframe>
       <script type="text/javascript">
       window.frames['dataframe'].window.location.replace('loadData.html');
       </script>
       parent.mainPageFunction(data);
   Ⅱ.在服务器上缓存站外文件并本地加载：
     可以使用cron任务周期地抓取文件，然后本地加载以避免任何由外部服务器引起的延时