web页面的性能优化以及SEO

前言：

在同样的网络环境下，两个同样能满足你的需求的网站，一个“Duang”的一下就加载出来了，一个纠结了半天才出来，你会选择哪个？研究表明：用户最满意的打开网页时间是2-5秒，如果等待超过10秒，99%的用户会关闭这个网页。也许这样讲，各位还不会有太多感触，接下来我列举一组数据：Google网站访问速度每慢400ms就导致用户搜索请求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。网站的加载速度严重影响了用户体验，也决定了这个网站的生死存亡。

可能有人会说：网站的性能是后端工程师的事情，与前端并无多大关系。我只能说，too young too simple。事实上，只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传送到浏览器的，那剩余的时间去哪儿了？来瞄一下性能黄金法则：

只有10%_{20%的最终用户响应时间花在了下载HTML文档上。其余的80%}90%时间花在了下载页面中的所有组件上。

接下来我们将研究一下前端攻城狮如何来提高页面的加载速度。
一、减少HTTP请求

上面说到80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此，改善响应时间最简单的途径就是减少HTTP请求的数量。

图片地图：

假设导航栏上有五幅图片，点击每张图片都会进入一个链接，这样五张导航的图片在加载时会产生5个HTTP请求。然而，使用一个图片地图可以提高效率，这样就只需要一个HTTP请求。
服务器端图片地图：将所有点击提交到同一个url，同时提交用户点击的x、y坐标，服务器端根据坐标映射响应

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /><map name="planetmap" id="planetmap"><area shape="rect" coords="180,139,14" href ="venus.html" alt="Venus" /><area shape="rect" coords="129,161,10" href ="mercur.html" alt="Mercury" /><area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /><area shape="rect" coords="140,0,110,260" href ="star.html" alt="Sun" />
</map>

使用图片地图的缺点：指定坐标区域时，矩形或圆形比较容易指定，而其它形状手工指定比较难

CSS Sprites

CSS Sprites直译过来就是CSS精灵，但是这种翻译显然是不够的，其实就是通过将多个图片融合到一副图里面，然后通过CSS的一些技术布局到网页上。特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

<div><span id="image1" class="nav"></span><span id="image2" class="nav"></span><span id="image3" class="nav"></span><span id="image4" class="nav"></span><span id="image5" class="nav"></span>
</div>

.nav {width: 50px;height: 50px;display: inline-block;border: 1px solid #000;background-image: url('E:/1.png');
}
#image1 {background-position: 0 0;
}
#image2 {background-position: -95px 0;
}
#image3 {background-position: -185px 0;
}
#image4 {background-position: -275px 0;
}
#image5 {background-position: -366px -3px;
}

PS：使用CSS Sprites还有可能降低下载量，可能大家会认为合并后的图片会比分离图片的总和要大，因为还有可能会附加空白区域。实际上，合并后的图片会比分离的图片总和要小，因为它降低了图片自身的开销，譬如颜色表、格式信息等。

字体图标

在可以大量使用字体图标的地方我们可以尽可能使用字体图标，字体图标可以减少很多图片的使用，从而减少http请求，字体图标还可以通过CSS来设置颜色、大小等样式，何乐而不为。

合并脚本和样式表

将多个样式表或者脚本文件合并到一个文件中，可以减少HTTP请求的数量从而缩短效应时间。

然而合并所有文件对许多人尤其是编写模块化代码的人来说是不能忍的，而且合并所有的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需要的样式或者脚本，对于只访问该网站一个（或几个）页面的人来说反而增加了下载量，所以大家应该自己权衡利弊。

二、使用CDN

如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。

CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如，CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。

CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力。

CDN的缺点：

1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。

2、如果CDN服务质量下降了，那么你的工作质量也将下降

3、无法直接控制组件服务器

三、添加Expires头

页面的初次访问者会进行很多HTTP请求，但是通过使用一个长久的Expires头，可以使这些组件被缓存，下次访问的时候，就可以减少不必要的HTPP请求，从而提高加载速度。

Web服务器通过Expires头告诉客户端可以使用一个组件的当前副本，直到指定的时间为止。例如：

Expires: Fri, 18 Mar 2016 07:41:53 GMT

Expires缺点：它要求服务器和客户端时钟严格同步；过期日期需要经常检查

HTTP1.1中引入Cache-Control来克服Expires头的限制，使用max-age指定组件被缓存多久。

Cache-Control： max-age=12345600

若同时制定Cache-Control和Expires，则max-age将覆盖Expires头

四、压缩组件

从HTTP1.1开始，Web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持

Accept-Encoding: gzip,deflate

如果Web服务器看到请求中有这个头，就会使用客户端列出来的方法中的一种来进行压缩。Web服务器通过响应中的Content-Encoding来通知 Web客户端。

Content-Encoding: gzip

代理缓存

当浏览器通过代理来发送请求时，情况会不一样。假设针对某个URL发送到代理的第一个请求来自于一个不支持gzip的浏览器。这是代理的第一个请求，缓存为空。代理将请求转发给服务器。此时响应是未压缩的，代理缓存同时发送给浏览器。现在，假设到达代理的请求是同一个url，来自于一个支持gzip的浏览器。代理会使用缓存中未压缩的内容进行响应，从而失去了压缩的机会。相反，如果第一个浏览器支持gzip，第二个不支持，你们代理缓存中的压缩版本将会提供给后续的浏览器，而不管它们是否支持gzip。

解决办法：在web服务器的响应中添加vary头Web服务器可以告诉代理根据一个或多个请求头来改变缓存的响应。因为压缩的决定是基于Accept-Encoding请求头的，因此需要在vary响应头中包含Accept-Encoding。
vary: Accept-Encoding

五、将样式表放在头部

首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。

我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。

将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的行为：如果样式表仍在加载，构建呈现树就是一种浪费，因为所有样式表加载解析完毕之前务虚会之任何东西

六、将脚本放在底部

更样式表相同，脚本放在底部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现。

js的下载和执行会阻塞Dom树的构建（严谨地说是中断了Dom树的更新），所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。

下载脚本时并行下载是被禁用的——即使使用了不同的主机名，也不会启用其他的下载。因为脚本可能修改页面内容，因此浏览器会等待；另外，也是为了保证脚本能够按照正确的顺序执行，因为后面的脚本可能与前面的脚本存在依赖关系，不按照顺序执行可能会产生错误。

七、避免CSS表达式

CSS表达式是动态设置CSS属性的一种强大并且危险的方式，它受到了IE5以及之后版本、IE8之前版本的支持。

p {width: expression(func(),document.body.clientWidth > 400 ? "400px" : "auto");height: 80px;border: 1px solid #f00;
}
``

``` 鼠标移动了几次，函数的运行次数轻而易举的达到了几千次，危险性显而易见。

如何解决：

一次性表达式：

p {width: expression(func(this));height: 80px;border: 1px solid #f00;
}

<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<script>var n = 0;function func(elem) {n++;elem.style.width = document.body.clientWidth > 400 ? '400px' : "auto";console.log(n);}
</script>

事件处理机制

用js事件处理机制来动态改变元素的样式，使函数运行次数在可控范围之内。

八、使用外部的JavaScript和CSS

内联脚本或者样式可以减少HTTP请求，按理来说可以提高页面加载的速度。然而在实际情况中，当脚本或者样式是从外部引入的文件，浏览器就有可能缓存它们，从而在以后加载的时候能够直接使用缓存，而HTML文档的大小减小，从而提高加载速度。

影响因素：

1、每个用户产生的页面浏览量越少，内联脚本和样式的论据越强势。譬如一个用户每个月只访问你的网站一两次，那么这种情况下内联将会更好。而如果该用户能够产生很多页面浏览量，那么缓存的样式和脚本将会极大减少下载的时间，提交页面加载速度。

2、如果你的网站不同的页面之间使用的组件大致相同，那么使用外部文件可以提高这些组件的重用率。

加载后下载

有时候我们希望内联样式和脚本，但又可以为接下来的页面提供外部文件。那么我们可以在页面加载完成止呕动态加载外部组件，以便用户接下来的访问。

function doOnload() {setTimeout("downloadFile()",1000);}window.onload = doOnload;function downloadFile() {downloadCss("http://abc.com/css/a.css");downloadJS("http://abc.com/js/a.js");}function downloadCss(url) {var ele = document.createElement('link');ele.rel = "stylesheet";ele.type = "text/css";ele.href = url;document.body.appendChild(ele);}function downloadJS(url) {var ele = document.createElement('script');ele.src = url;document.body.appendChild(ele);}

在该页面中，JavaScript和CSS被加载两次（内联和外部）。要使其正常工作，必须处理双重定义。将这些组件放到一个不可见的IFrame中是一个比较好的解决方式。
九、减少DNS查找

当我们在浏览器的地址栏输入网址（譬如： www.linux178.com），然后回车，回车这一瞬间到看到页面到底发生了什么呢？

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

域名解析是页面加载的第一步，那么域名是如何解析的呢？以Chrome为例：

1.  Chrome浏览器 会首先搜索浏览器自身的DNS缓存（缓存时间比较短，大概只有1分钟，且只能容纳1000条缓存），看自身的缓存中是否有www.linux178.com 对应的条目，而且没有过期，如果有且没有过期则解析到此结束。注：我们怎么查看Chrome自身的缓存？可以使用 chrome://net-internals/#dns 来进行查看2.  如果浏览器自身的缓存里面没有找到对应的条目，那么Chrome会搜索操作系统自身的DNS缓存,如果找到且没有过期则停止搜索解析到此结束.注：怎么查看操作系统自身的DNS缓存，以Windows系统为例，可以在命令行下使用 ipconfig /displaydns 来进行查看 3.  如果在Windows系统的DNS缓存也没有找到，那么尝试读取hosts文件（位于C:\Windows\System32\drivers\etc），看看这里面有没有该域名对应的IP地址，如果有则解析成功。4.  如果在hosts文件中也没有找到对应的条目，浏览器就会发起一个DNS的系统调用，就会向本地配置的首选DNS服务器（一般是电信运营商提供的，也可以使用像Google提供的DNS服务器）发起域名解析请求（通过的是UDP协议向DNS的53端口发起请求，这个请求是递归的请求，也就是运营商的DNS服务器必须得提供给我们该域名的IP地址），运营商的DNS服务器首先查找自身的缓存，找到对应的条目，且没有过期，则解析成功。如果没有找到对应的条目，则有运营商的DNS代我们的浏览器发起迭代DNS解析请求，它首先是会找根域的DNS的IP地址（这个DNS服务器都内置13台根域的DNS的IP地址），找打根域的DNS地址，就会向其发起请求（请问www.linux178.com这个域名的IP地址是多少啊？），根域发现这是一个顶级域com域的一个域名，于是就告诉运营商的DNS我不知道这个域名的IP地址，但是我知道com域的IP地址，你去找它去，于是运营商的DNS就得到了com域的IP地址，又向com域的IP地址发起了请求（请问www.linux178.com这个域名的IP地址是多少?）,com域这台服务器告诉运营商的DNS我不知道www.linux178.com这个域名的IP地址，但是我知道linux178.com这个域的DNS地址，你去找它去，于是运营商的DNS又向linux178.com这个域名的DNS地址（这个一般就是由域名注册商提供的，像万网，新网等）发起请求（请问www.linux178.com这个域名的IP地址是多少？），这个时候linux178.com域的DNS服务器一查，诶，果真在我这里，于是就把找到的结果发送给运营商的DNS服务器，这个时候运营商的DNS服务器就拿到了www.linux178.com这个域名对应的IP地址，并返回给Windows系统内核，内核又把结果返回给浏览器，终于浏览器拿到了www.linux178.com对应的IP地址，该进行一步的动作了。注：一般情况下是不会进行以下步骤的如果经过以上的4个步骤，还没有解析成功，那么会进行如下步骤：
5.  操作系统就会查找NetBIOS name Cache（NetBIOS名称缓存，就存在客户端电脑中的），那这个缓存有什么东西呢？凡是最近一段时间内和我成功通讯的计算机的计算机名和Ip地址，就都会存在这个缓存里面。什么情况下该步能解析成功呢？就是该名称正好是几分钟前和我成功通信过，那么这一步就可以成功解析。6.  如果第5步也没有成功，那会查询WINS 服务器（是NETBIOS名称和IP地址对应的服务器）7.  如果第6步也没有查询成功，那么客户端就要进行广播查找8.  如果第7步也没有成功，那么客户端就读取LMHOSTS文件（和HOSTS文件同一个目录下，写法也一样）如果第八步还没有解析成功，那么就宣告这次解析失败，那就无法跟目标计算机进行通信。只要这八步中有一步可以解析成功，那就可以成功和目标计算机进行通信。

DNS也是开销，通常浏览器查找一个给定域名的IP地址要花费20~120毫秒，在完成域名解析之前，浏览器不能从服务器加载到任何东西。那么如何减少域名解析时间，加快页面加载速度呢？

当客户端DNS缓存（浏览器和操作系统）缓存为空时，DNS查找的数量与要加载的Web页面中唯一主机名的数量相同，包括页面URL、脚本、样式表、图片、Flash对象等的主机名。减少主机名的数量就可以减少DNS查找的数量。

减少唯一主机名的数量会潜在减少页面中并行下载的数量（HTTP 1.1规范建议从每个主机名并行下载两个组件，但实际上可以多个），这样减少主机名和并行下载的方案会产生矛盾，需要大家自己权衡。建议将组件放到至少两个但不多于4个主机名下，减少DNS查找的同时也允许高度并行下载。

十、精简JavaScript

精简

精简就是从代码中移除不必要的字符以减少文件大小，降低加载的时间。代码精简的时候会移除不必要的空白字符（空格，换行、制表符），这样整个文件的大小就变小了。

混淆

混淆是应用在源代码上的另外一种方式，它会移除注释和空白符，同时它还会改写代码。在混淆的时候，函数和变量名将会被转换成更短的字符串，这时代码会更加精炼同时难以阅读。通常这样做是为了增加对代码进行反向工程的难度，这也同时提高了性能。

缺点：

混淆本身比较复杂，可能会引入错误。

需要对不能改变的符号做标记，防止JavaScript符号（譬如关键字、保留字）被修改。

混淆会使代码难以阅读，这使得在产品环境中调试问题更加困难。

在以上提到了关于用gzip之类的压缩方式来压缩文件，这边说明一下，就算使用gzip等方式来压缩文件，精简代码依然是有必要的。一般来说，压缩产生的节省是高于精简的，在生产环境中，精简和压缩同时使用能够最大限度的获得更多的节省。

CSS的精简

CSS的精简带来的节省一般来说是小于JavaScript精简的，因为CSS中注释和空白相对较少。

除了移除空白、注释之外，CSS可以通过优化来获得更多的节省：

合并相同的类；

移除不使用的类；

使用缩写，譬如
.right {
color: #fff;

padding-top: 0; margin: 0 10px;border: 1px solid #111

}
.wrong {
color: #ffffff;

padding-top: 0px; margin-top: 0;
margin-bottom: 0;
margin-left: 10px;
margin-right: 10px;border-color: #111;
border-width: 1px;
border-style: solid;

}
上面.right是正确的的写法，颜色使用缩写，使用0代替0px，合并可以合并的样式。另外，在精简的时候其实样式最后一行的’；'也是可以省略的。

来看看精简的例子：

以上分别是jquery-2.0.3的学习版（未精简）和精简版，可见精简文件的大小比源文件小了155k，而且，在精简版中jquery还做了混淆，譬如用e代替window等，从而获得最大的节省。

十一、避免重定向

什么是重定向？

重定向用于将用户从一个URL重新路由到另一个URL。

常用重定向的类型

301：永久重定向，主要用于当网站的域名发生变更之后，告诉搜索引擎域名已经变更了，应该把旧域名的的数据和链接数转移到新域名下，从而不会让网站的排名因域名变更而受到影响。

302：临时重定向，主要实现post请求后告知浏览器转移到新的URL。

304：Not Modified，主要用于当浏览器在其缓存中保留了组件的一个副本，同时组件已经过期了，这是浏览器就会生成一个条件GET请求，如果服务器的组件并没有修改过，则会返回304状态码，同时不携带主体，告知浏览器可以重用这个副本，减少响应大小。

重定向如何损伤性能?

当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载。

来看一个实际例子：对于ASP.NET webform开发来说，对于新手很容易犯一个错误，就是把页面的连接写成服务器控件后台代码里，例如用一个Button控件，在它的后台click事件中写上：Response.Redirect("")；然而这个Button的作用只是转移URL，这是非常低效的做法，因为点击Button后，先发送一个Post请求给服务器，服务器处理Response.Redirect("")后就发送一个302响应给浏览器，浏览器再根据响应的URL发送GET请求。正确的做法应该是在html页面直接使用a标签做链接，这样就避免了多余的post和重定向。

重定向的应用场景

跟踪内部流量

重定向经常用于跟踪用户流量的方向,当拥有一个门户主页的时候，同时想对用户离开主页后的流量进行跟踪，这时可以使用重定向。例如: 某网站主页新闻的链接地址http://a.com/r/news，点击该链接将产生301响应，其Location被设置为http://news.a.com。通过分析a.com的web服务器日志可以得知人们离开首页之后的去向。

我们知道重定向是如何损伤性能的，为了实现更好的效率，可以使用Referer日志来跟踪内部流量去向。每个HTTP请求都有一个Referer表示原始请求页(除了从书签打开或直接键入URL等操作)，记录下每个请求的Referer，就避免了向用户发送重定向，从而改善了响应时间。

跟踪出站流量

有时链接可能将用户带离你的网站，在这种情况下，使用Referer就不太现实了。

同样也可以使用重定向来解决跟踪出站流量问题。以百度搜索为例，百度通过将每个链接包装到一个302重定向来解决跟踪的问题，例如搜索关键字“前端性能优化”，搜索结果中的一个URL为https://www.baidu.com/link?url=pDjwTfa0IAf_FRBNlw1qLDtQ27YBujWp9jPN4q0QSJdNtGtDBK3ja3jyyN2CgxR5aTAywG4SI6V1NypkSyLISWjiFuFQDinhpVn4QE-uLGG&wd=&eqid=9c02bd21001c69170000000556ece297，即使搜索结果并没有变，但这个字符串是动态改变的，暂时还不知道这里起到怎样的作用？（个人感觉：字符串中包含了待访问的网址，点击之后会产生302重定向，将页面转到目标页面（待修改，求大神们给我指正））

除了重定向外，我们还可以选择使用信标(beacon)——一个HTTP请求，其URL中包含有跟踪信息。跟踪信息可以从信标Web服务器的访问日记中提取出来，信标通常是一个1px*1px的透明图片，不过204响应更优秀，因为它更小，从来不被缓存，而且绝不会改变浏览器的状态。

十二、删除重复脚本

在团队开发一个项目时，由于不同开发者之间都可能会向页面中添加页面或组件，因此可能相同的脚本会被添加多次。

重复的脚本会造成不必要的HTTP请求（如果没有缓存该脚本的话），并且执行多余的JavaScript浪费时间，还有可能造成错误。

如何避免重复脚本呢？

形成良好的脚本组织。重复脚本有可能出现在不同的脚本包含同一段脚本的情况，有些是必要的，但有些却不是必要的，所以需要对脚本进行一个良好的组织。
实现脚本管理器模块。

例如：

function insertScript($file) {if(hadInserted($file)) {return;}exeInsert($file);if(hasDependencies($file)) {$deps = getDependencies($file);foreach ($deps as $script) {insertScript($script);}echo "<script type='text/javascript' src='".getVersion($file)."'></script>";}}

先检查是否插入过，如果插入过则返回。如果该脚本依赖其它脚本，则被依赖的脚本也会被插入。最后脚本被传送到页面，getVersion会检查脚本并返回追加了对应版本号的文件名，这样如果脚本的版本变化了，那么以前浏览器缓存的就会失效。

十三、配置ETag

以前浏览器缓存的就会失效。

什么是ETag？

实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串，是web服务器用于确认缓存组件的有效性的一种机制，通常可以使用组件的某些属性来构造它。

条件GET请求

如果组件过期了，浏览器在重用它之前必须首先检查它是否有效。浏览器将发送一个条件GET请求到服务器，服务器判断缓存还有效，则发送一个304响应，告诉浏览器可以重用缓存组件。

那么服务器是根据什么判断缓存是否还有效呢?有两种方式：

ETag（实体标签）；

最新修改日期

原始服务器通过Last-Modified响应头来返回组件的最新修改日期。

举个栗子：

当我们不带缓存访问www.google.com.hk的时候，我们需要下载google的logo，这时会发送这样一个HTTP请求：
Request：

GET googlelogo_color_272x92dp.png HTTP 1.1Host: www.google.com.hk

Response:

HTTP 1.1 200 OKLast-Modified:Fri, 04 Sep 2015 22:33:08 GMT
当需要再次访问相同组件的时候，同时缓存已经过期，浏览器会发送如下条件GET请求：

Request：

GET googlelogo_color_272x92dp.png HTTP 1.1If-Modified-Since:Fri, 04 Sep 2015 22:33:08 GMTHost: www.google.com.hk

Response:

HTTP 1.1 304 Not Modified

实体标签

ETag提供了另外一种方式，用于检测浏览器缓存中的组件与原始服务器上的组件是否匹配。摘抄自书上的例子：

不带缓存的请求：

Request：

GET /i/yahoo/gif HTTP 1.1Host: us.yimg.com

Response:

HTTP 1.1 200 OKLast-Modified:Tue,12 Dec 200603:03:59 GMTETag:”10c24bc-4ab-457elc1f“

再次请求相同组件:

Request：

GET /i/yahoo/gif HTTP 1.1Host: us.yimg.comIf-Modified-Since:Tue,12 Dec 200603:03:59 GMTIf-None-Match:”10c24bc-4ab-457elc1f“

Response:

HTTP 1.1 304 Not Midified

为什么要引入ETag?

ETag主要是为了解决Last-Modified无法解决的一些问题：

一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET;
某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);
某些服务器不能精确的得到文件的最后修改时间。

ETag带来的问题

ETag的问题在于通常使用某些属性来构造它，有些属性对于特定的部署了网站的服务器来说是唯一的。当使用集群服务器的时候，浏览器从一台服务器上获取了原始组件，之后又向另外一台不同的服务器发起条件GET请求，ETag就会出现不匹配的状况。例如：使用inode-size-timestamp来生成ETag，文件系统使用inode存储文件类型、所有者、组和访问模式等信息，在多台服务器上，就算文件大小、权限、时间戳等都相同，inode也是不同的。

最佳实践

如果使用Last-Modified不会出现任何问题，可以直接移除ETag，google的搜索首页则没有使用ETag。
确定要使用ETag，在配置ETag的值的时候，移除可能影响到组件集群服务器验证的属性，例如使用size-timestamp来生成时间戳。

十四、使Ajax可缓存

维基百科中这样定义Ajax：

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出。传统的Web应用允许用户端填写表单（form），当提交表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。与此不同，AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少（大约只有原来的5%）[来源请求],服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。虽然其名称包含XML，但实际上数据格式可以由JSON代替，进一步减少数据量，形成所谓的AJAJ。而客户端与服务器也并不需要异步。一些基于AJAX的“派生／合成”式（derivative/composite）的技术也正在出现，如AFLAX。

Ajax的目地是为突破web本质的开始—停止交互方式，向用户显示一个白屏后重绘整个页面不是一种好的用户体验。

异步与即时

Ajax的一个明显的有点就是向用户提供了即时反馈，因为它异步的从后端web服务器请求信息。

用户是否需要等待的关键因素在于Ajax请求是被动的还是主动的。被动请求是为了将来来使用而预先发起的，主动请求是基于用户当前的操作而发起的

什么样的AJAX请求可以被缓存？

POST的请求，是不可以在客户端缓存的，每次请求都需要发送给服务器进行处理，每次都会返回状态码200。（可以在服务器端对数据进行缓存，以便提高处理速度）

GET的请求，是可以（而且默认）在客户端进行缓存的，除非指定了不同的地址，否则同一个地址的AJAX请求，不会重复在服务器执行，而是返回304。

Ajax请求使用缓存

在进行Ajax请求的时候，可以选择尽量使用get方法，这样可以使用客户端的缓存，提高请求速度。

SEO:搜索引擎优化
SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。
通过了解各类搜索引擎 [1] 抓取互联网页面、进行索引以及确定其对特定关键词搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售或宣传的效果。搜索引擎优化对于任何一家网站来说，要想在网站推广中取得成功，搜索引擎优化都是至为关键的一项任务。同时，随着搜索引擎不断变换它们的排名算法规则，每次算法上的改变都会让一些排名很好的网站在一夜之间名落孙山，而失去排名的直接后果就是失去了网站固有的可观访问量。
通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术，来对网页内容进行相关的优化，使其符合用户浏览习惯，在不损害用户体验的情况下提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售能力或宣传能力的技术。所谓“针对搜寻引擎优化处理”，是为了要让网站更容易被搜索引擎接受。搜索引擎会将网站彼此间的内容做一些相关性的资料比对，然后再由浏览器将这些内容以最快速且接近最完整的方式，呈现给搜索者。由于不少研究发现，搜索引擎的用户往往只会留意搜索结果最开始的几项条目，所以不少商业网站都希望透过各种形式来干扰搜索引擎的排序。搜索引擎优化专家“一来胜”认为，在网站里尤以各种依靠广告为生的网站最甚。SEO技术被很多目光短浅的人，用一些SEO [2] 作弊的不正当手段，牺牲用户体验，一味迎合搜索引擎的缺陷，来提高排名，这种SEO方法是不可取的，最终也会受到用户的唾弃。
在国外，SEO开展较早，那些专门从事SEO的技术人员被Google称之为“Search Engine Optimizers”。由于Google是世界最大搜索引擎提供商，所以Google也成为了全世界SEOers的主要研究对象，为此Google官方网站专门有一页介绍SEO，并表明Google对SEO的态度。
所以每次搜索引擎算法的改变，都会在网站之中引起不小的骚动和焦虑。我们可以说，搜索引擎优化也成了一个愈来愈复杂的任务。
搜索引擎优化
一、内部优化
　　（1）META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化；
　　（2）内部链接的优化，包括相关性链接（Tag标签），锚文本链接，各导航链接，及图片链接；
　　（3）网站内容更新：每天保持站内的更新(主要是文章的更新等)。
　　二、外部优化
　　（1）外部链接类别：友情链接、博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、站群、相关信息网等尽量保持链接的多样性；
　　（2）外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升；
　　（3）外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名。
　　优化知识
编辑
网站url
网站创建具有良好描述性、规范、简单的url，有利于用户更方便的记忆和判断网页的内容，也有利于搜索引擎更有效的抓取您的网站。网站设计之初，就应该有合理的url规划。
处理方式：
1.在系统中只使用正常形式url，不让用户接触到非正常形式的url。
2.不把session id、统计代码等不必要的内容放在url中。
3.不同形式的url，301永久跳转到正常形式。
4.防止用户输错而启用的备用域名，301永久跳转到主域名。
5.使用robots.txt禁止Baiduspider抓取您不想向用户展现的形式。
title信息
网页的title用于告诉用户和搜索引擎这个网页的主要内容是什么，而且当用户在百度网页搜索中搜索到你的网页时，title会作为最重要的内容显示在摘要中。
搜索引擎在判断一个网页内容权重时，title是主要参考信息之一。
描述建议：
1.首页：网站名称或者网站名称_提供服务介绍or产品介绍。
2.频道页：频道名称_网站名称。
3.文章页：文章title_频道名称_网站名称。
需要注意：
1.标题要主题明确，包含这个网页中最重要的内容。
2.简明精练，不罗列与网页内容不相关的信息。
3.用户浏览通常是从左到右的，重要的内容应该放到title的靠前的位置。
4.使用用户所熟知的语言描述。如果你有中、英文两种网站名称，尽量使用用户熟知的那一种做为标题描述。
meta信息
meta description是meta标签的一部分，位于html代码的区。
meta description是对网页内容的精练概括。如果description描述与网页内容相符，百度会把description当做摘要的选择目标之一，一个好的description会帮助用户更方便的从搜索结果中判断你的网页内容是否和需求相符。
meta description不是权值计算的参考因素，这个标签存在与否不影响网页权值，只会用做搜索结果摘要的一个选择目标。
推荐做法：
1.网站首页、频道页、产品参数页等没有大段文字可以用做摘要的网页最适合使用description。
2.为每个网页创建不同的description，避免所有网页都使用同样的描述。
3.长度合理，不过长不过短。
图片alt
建议为图片加alt说明。
因为这样做可以在网速较慢图片不能显示时让用户明白图片要传达的信息，也能让搜索引擎了解图片的内容。
同理，使用图片做导航时，也可以使用alt注释，用alt告诉搜索引擎所指向的网页内容是什么。
flash信息
Baiduspider只能读懂文本内容，flash、图片等非文本内容暂时不能处理，放置在flash、图片中的文字，百度无法识别。
所以如果一定要使用flash，建议给object标签添加注释信息。
这些信息会被看作是对Flash的描述信息。让搜索引擎更好的了解您flash的内容。
frame框架
不建议使用frame和iframe框架结构，通过iframe显示的内容可能会被百度丢弃。
白帽与黑帽
编辑
搜索引擎优化技术，可分为两大类：白帽技术与黑帽技术。
白帽技术（Whitehat）：在搜索引擎优化行业中，使用正规符合搜索引擎网站质量规范的手段和方式，使网站在搜索引擎中关键词获得良好的自然排名称为白帽技术。白帽技术是较为流行的网络营销方式，主要目的是增加特定关键字的曝光率以增加网站的能见度，进而增加销售的机会。分为站外SEO和站内SEO两种。SEO的主要工作是通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售能力或宣传能力的技术。
黑帽技术（Blackhat）：黑帽技术是指在seo就是通过一些类似作弊的方法或技术手段，以不符合主流搜索引擎优化发行方针规定的手法来获得短时间内较好的搜索引擎优化的一种技术。黑帽SEO获利主要的特点就是短平快，为了短期内的利益而采用的作弊方法，同时随时会因为搜索引擎算法的改变而面临惩罚。
须遵循原则
1.原创的文章内容为王，所以一定要重视文章内容的原创性；
2.外链建设要注重数量的自然增加；
3.客户体验是实现网络价值的最终追求。一切以客户体验为目的。
黑帽八种形式
1.域名群建
2.关键词叠加
3.桥页、跳页
4.隐藏文字和使用透明文字
5. 障眼法
6.采用细微的文字
7.网站毫无意义的灌水
8.网页劫持
常用方法
编辑
1.SEO的设置
SEO设置中三个重要的参数:title、keywords、description。
2. 文章标题优化
3.内链优化
4. 明确目标关键词
5.“与众相同”的原创内容
6.外链的发布
写作技巧
编辑
1.确保对行业有一定的研究，文章内容有一定的深度。这能够建立起网站的权威性。
2.文字始终紧紧围绕关键字，围绕网站主题。
3.使用的语句，要使大部分人都能读懂。
4.避免内容重复。
5.多提供一些有价值性的资料给用户，提高信任度。
域名和空间
编辑
1.域名对搜索引擎的影响
（1）域名的权重：域名分为三类顶级域名:类别顶级域名、地理顶级域名、新顶级域名
（2）域名的长短：域名的长短对优化并无影响，只是短域名更容易记忆
（3）中文域名：中文域名在搜索引擎排名上有优势，不过IE6浏览器不支持中文域名，所以综合角度，选择英文域名还是首选
（4）域名的拼写方式：为了符合中国用户输入习惯，拼音域名还是网站的首选
（5）域名的存在时间：一般来说，域名时间越长，对优化越有帮助
（6）域名是否被K：一般来说不建议选用被K的域名，对seo不利
2.空间搜索引擎的影响
（1）空间的位置
（2）空间的速度
（3）空间的稳定性
（4）支持在线人数
（5）是否支持404错误页
（6）是选择虚拟主机还是服务器
错误问题
编辑
1.把某某几个关键词做到百度或谷歌的首页，需要多少钱？或者，你需要多少钱才能帮我做上去？
这个问题的本质是想让SEO顾问或SEO公司提供关键词排名保证。但这个是无法给予保证的，给多少钱都没有用。因为搜索引擎不是SEO顾问或某个SEO公司的，最终排名的决定权在搜索引擎的程序里。
2.能否先提供优化方案或者试用1-2个月，然后看效果决定是否支付报酬？
SEO不是几句话或一个方案就完事了，而是一个非常系统的工程。对于任何一次策划和方案，都需要前期大量的工作。包括：竞争对手分析、网站结构分析、关键词定位、链接检查、SPAM清除等等。先试用，或提供优化方案，对SEO顾问或SEO公司来说是不公平的。
3.你有朋友在百度或谷歌吗？
搜索引擎不会因为某个人而改变排名的。
排名因素
编辑
内部因素
URL中出现关键词
网页Title中出现关键词
常规内容中出现关键词
在页面的第一段中出现关键词
在页面的最后一段中出现关键词

标签比如h1,h2中出现关键词站内的链接中出现关键词导向相关内容的导出链接导出链接中出现关键词图片文件名中出现关键词 Alt标签中出现关键词 comment中出现关键词合理的频率更新内容内容对搜索引擎的展示位置网站结构循环PR，而非散发PR 关键词进行适当的修饰（加粗、斜体等）外部因素大量的导入链接从高PR值的网页获得导入链接从相关内容网站获得导入链接导入链接指向的网页有具体内容锚文字中有关键词锚文字周围有相关词锚文字存在于文章或句子中导入链接的时间长度，一般导入链接的存在时间有3-6个月单向链接的价值高于交换链接导入链接的页面的导出链接小于100个，流出链接越少越好链接来自不同IP 合理的导入链接增长频率 SEO操作编辑 SEO又分为站外SEO和站内SEO [3] 。站内SEO优化包括：网站结构的设计、网站代码优化和内部链接优化、网站内容的优化、网站用户体验优化等这些内容。站外SEO优化包括：网站外部链接优化、网站的链接建设、网站的外部数据分析等。站外SEO 站外SEO，也可以说是脱离站点的搜索引擎技术，命名源自外部站点对网站在搜索引擎排名的影响，这些外部的因素是超出网站的控制的。最有用功能最强大的外部站点因素就是反向链接，即我们所说的外部链接。毫无疑问，外部链接对于一个站点收录进搜索引擎结果页面起到了重要作用。那么如何产生高质量的反向链接呢？ 1.高质量的内容产生高质量的外部链接最好的方法就是写高质量的内容，你的网站内容使读者产生阅读的欲望。你可以和别的网站交换链接，也可以注册自动生成链接的程序，还可以去其它的站上买链接。 2.跟你内容相关的网站发邮件我并不提倡给其它的网站群发邮件来交换链接，但我建议如果你在某个话题写了篇有质量的文章，并且觉得会使其它的网站感兴趣，那给这些网站发一封短小礼貌的邮件让他们知道你的文章，将是有价值的。即使他们没有链接，也不要感到尴尬。你会发现如果他们点击了就为链接产生了直接的流量，从而在你的网站将在搜索引擎里得到较好的分数。 3.分类目录另一个产生高质量的反向链接的方法是把你的网址提交到分类目录。很多站长都很对这个方法的效果深信不疑，当开始一个新站点的时候，他们做的第一步就是围绕分类目录做工作，选择合适的关键词提交到相关页面进行链接。有很多分类目录，大部分是免费的，这里推荐部分分类目录：DMOZ、Yahoo!、ODP等。 4.社会化书签将网站加入百度搜藏、雅虎收藏、Google书签、QQ书签等社会化书签 5、发布博客创建链接获取外部链接最有效的方式之一就是通过发布博客文章 6、论坛发帖或签名档在论坛中发布含有链接的原创帖或者编写签名档中插入网址站内SEO 丰富网站关键词为你的文章增加新的关键词将有利于搜索引擎的“蜘蛛”爬行文章索引，从而增加网站的质量。但不要堆砌太多的关键词，应该考虑人们在搜索引擎中找到这篇文章，会搜索的是什么样关键词？这些关键词需要在你的文章中被频繁的提及，你可以遵循下面的方法：关键词应该出现于网页标题标签里面； URL里面有关键词,即目录名文件名可以放上一些关键词；在网页导出链接的链接文字中包含关键词；用粗体显示关键词（至少试着做一次）；在标签中提及该关键词（关于如何运用head标签有过争论，但一致都认为h1标签比h2、h3、 h4的影响效果更好，当然有些没有运用head标签的网页也有很高的PR值）；图像ALT标签可以放入关键词；整个文章中都要包含关键词，但最好在第一段第一句话就放入；在元标签（meta 标签）放入关键词建议关键词密度最好在5-20%之间主题网站如果你的网站写的都是关于同一主题，那么它可能将获得较好的排名。例如：一个主题的网站将比那些涵盖了多个主题的网站的排名要高。建立一个200多页的网站，内容都是同一个主题，这个网站的排名就会不断的提升，因为在这个主题里你的网站被认为具有权威性。站点设计搜索引擎更喜欢友好的网页结构，无误的代码和明确导航的站点。确保你的页面都是有效的和在主流浏览器中的可视化。搜索引擎不喜欢太多的Flash、iframes和java script脚本，所以保持站点的干净整洁，也有利于搜索引擎“蜘蛛”更快更精确的爬行到你网站的索引。站点的内部链接搜索引擎的工作方式是通过“蜘蛛”程序抓取网页信息，追踪你写的内容和通过网页的链接地址来寻找网页，抽取超链接地址。许多SEO专家都建议网站提供网站地图，在网站上的每个页面之间最好都有一个到两个的深入链接。网站要做的第一步是确保导航中包含目录页面，也要确保每个子页面都有链接回到主页面和其它的重要页面。有规律的更新网站更新的次数越频繁，搜索引擎蜘蛛爬行的也就越频繁。这意味着网站新文章几天甚至几小时内就可以出现于索引中，而不需要等几个星期。这是网站最好的受益方式。导出链接导出链接会提高网站在搜索引擎中的排名，在文章中链接到其它相关站点对读者们是有用的，也有一些轶趣的证据来支持这种理论。太多的导出链接将影响降低你的网站，应该“适度是关键”。明智的选择域名选择域名有大量的学问，其重要的一点是尽量选择包括关键词的域名。其次看看之前是否有注册过这个域名。如果之前有高质量的站点和它做反向链接，那你就受益了；但是也有可能做反向链接的都是一些质量不好的站点，那你可能会被搜索引擎不友好一段时间了。每篇文章的主题一个页面的主题越紧凑，搜索引擎对它的排名就越好。有时发现你写了很长的文章，覆盖了一些不同的话题，它们的相关性并不高，所以在搜索引擎上的排名也不好。如果你关心搜索引擎的排名，那最好把这样的文章切块，分成几个主题更密切的文章。写适宜长度的文章太短的文章不能获得较高的排名，一般控制每篇文章至少有300个字。另一方面，也不要让文章显得太长，因为这将不利于你保持关键词的密度，文章看上去也缺少紧凑。研究显示过长的文章会急剧减少读者的数量，他们在看第一眼的时候就选择了关闭文章。避免内容重复搜索引擎在使用指南中严重警告过关于多个网页相同内容的问题。不管这些网页是你拥有的还是别人拥有的。因为一系列的垃圾站点就是不断复制网页内容（也窃取别人网站内容）。有一些争论关于什么样的内容算复制，其实要看这些内容是否对你的网站有用来选择。目录的数量当我的目录过多的时候，我自己都会陷入麻烦。我认为大站点的等级比小站高，当然一些小站点也有高的等级，这并不是标准。目录越多，搜索引擎搜索的也就越全面。如果你有太多的页面，你需要组织它们以方便搜索引擎爬行。提交到搜索引擎如果你做了所有站内SEO都该做的事，网站却还没有出现于搜索引擎中。那是因为搜索引擎还没有开始收录，每个搜索引擎都允许用户提交未收录站点，这个工程一般要等待3-5天。 SEO是依据通过对长期摸索、观察得出来的技术与经验，利用搜索引擎录取网站的规则，将网站的整体结构、网站布局、关键词分布及密度进行优化，使网站对搜索引擎的抓取有友好性，从而进行搜索引擎优化，达网站到提高排名效果。由于搜索引擎的排名规则及算法是在不断改变中的，而且这些规则和算法又是商业机密，所以不可能达到保证排在某几位的效果的。 seo=更多页面的收录+页面文字的友好安排+转化率 SEO分为白帽SEO [4] 和黑帽SEO，白帽SEO就是正规合理的运作，黑帽SEO [5] 就是作弊手法，下面介绍几种常见的作弊方法，希望大家不要用，不然会后悔的桥页（doorway pages）通常是用软件自动生成大量包含关键词的网页，然后从这些网页做自动转向到主页。目的是希望这些以不同关键词为目标的桥页在搜索引擎中得到好的排名。当用户点击搜索结果的时候，会自动转到主页。有的时候是在桥页上放上一个通往主页的链接，而不自动转向。大部分情况下，这些桥页都是由软件生成的。你可以想象，生成的文字是杂乱无章，没有什么逻辑的。如果是由人写出来的真正包含关键词的文章，就不是桥页了。关键词 [6] 堆砌（keyword stuffing）在网页中大量堆砌关键词，希望提高关键词密度，提高网页针对关键词的相关度。关键词堆砌可以在很多地方，比如在用户可以看到的文字本身中，也可能是在标题标签Title Tag，关键词标签，说明标签中。随着搜索引擎算法的改进，关键词密度已经不是一个重要的因素。隐藏文字 [7] （hidden text）隐藏文字是在网页的HTML文件中放上含有关键词的文字，但这些字不能被用户所看到，只能被搜索引擎看到。可以有几种形式，比如说超小字号的文字，与背景同样颜色的文字，放在评论标签当中的文字，放在表格input标签里面的文字，通过样式表把文字放在不可见的层上面等等。其目的也都是想提高网页的相关性。有的时候，有的人还在这些地方放上与网站内容无关的，但是很热门的关键词，希望网页能在这些热门关键词下得到好的排名和流量。隐藏链接（hidden link）隐藏链接 [8] 和隐藏文字相似，但是区别是把关键词放在链接里面，而这个链接也是用户所看不到的。隐藏页面（cloaked page）有的网页使用程序或脚本来检测来访问的是搜索引擎还是普通用户。如果是搜索引擎，网页就返回经过优化的网页版本。如果来访的是普通人，返回的是另外一个版本。这种作弊方式，通常用户无法发现。因为一旦你的浏览器去看这个网页，无论是在页面上还是在HTML源文件中，你所得到的都已经是与搜索引擎看到的不同的版本。检测的方法是，看一下这个网页的快照。策略编辑搜索引擎优化策略应该包括三部分： 1.内容调查和编写第一件事就是关键词调查，关键词是搜不尽、查不绝的。一般来说，调查越深入，发现的词条就越多，尽量在允许的时间内对这些词条进行进一步的分析和研究。反复此过程，最后才能确定关键词。记住重要的一点：Google上进行的一半以上的搜索是不一样的! 你需要为选定的每个关键词产生一个单独的页面：一个关键词条一个页面。这意味着一个站要产生无数页面。 2.网站内容排版这部分工作的目的是提高主页的页面等级PR。理论上来讲，网站的每个页面都拥有自己的外部链接和PR 值，但实际上，这不仅不可能，而且也没有必要。 Google认为每个页面的链接数量最好不要超过50-100。简单来说，随着主页的点击次数的提高，页面的PR值反而会降低。所以我们追求的网站结构是：在每页的链接上限内，给每个页面最少的点击次数。 3.外部链接建设这是SEO策略中最难的部分，不仅需要投入大量精力，更需要创意，找到链接的独特方法。获得外部链接的方式：交换友情链接; 购买单向链接; 增加网站创意与特色，链接自然会找上门。

web页面的性能优化以及SEO相关推荐

web页面的性能优化以及SEO（搜索引擎优化）
Web页面的性能优化研究表明:用户最满意的打开网页的时间是2-5秒,如果等待超过5秒,99%的用户会关掉页面. 一.尽量减少前端HTTP请求 1,能使用icon不适用图片,实在避免不了要使用图片,就 ...
QQ音乐客户端Web页面通用性能优化实践
导语 | QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进 ...
QQ音乐Android客户端Web页面通用性能优化实践
QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进行 Web ...
webview加载的页面和浏览器渲染的页面不一致_QQ音乐Android客户端Web页面通用性能优化实践...
QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进行 Web ...
web 折线图大数据量拉取展示方案_【第2010期】QQ音乐Android客户端Web页面通用性能优化实践...
前言今日早读文章由QQ音乐客户端开发工程师@关岳分享,公号:云加社区(ID:QcloudCommunity,腾讯云官方开发者社区)授权分享. 正文从这开始~~ QQ音乐 Android 客户端的 W ...
web页面性能优化及SEO优化
web页面性能优化前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网 ...
web前端性能优化与SEO
web前端性能优化与SEO 网站优化的必要性浏览器的页面优化使用浏览器缓存 css Sprites 压缩 css与js文件的位置减少cookie运输 javascript代码优化数据访问字符 ...
H5缓存机制浅析-移动端Web加载性能优化【干货】
转载:H5缓存机制浅析-移动端Web加载性能优化[干货] 作者:贺辉超,腾讯游戏平台与社区产品部高级工程师目录 1 H5缓存机制介绍 2 H5缓存机制原理分析 2.1 浏览器缓存机制 2.2 Do ...
speeding up your web site 前端性能优化规则（二）
接上一篇:speeding up your web site 前端性能优化规则(一) --------------------------------------------------------- ...

web页面的性能优化以及SEO

web页面的性能优化以及SEO相关推荐

最新文章

热门文章