高性能网站建设指南---前端工程师技能精髓

只有10-20%的最终用户响应时间花在了下载html文档上。其余的80-90%时间花在了下载页面中的所有组件上。
http概述压缩条件get请求expirekeep-alive规则1、减少http请求图片地图：将多个图片合并成一个，而后通过css定位显示不同的位置css sprites:同上内联图片合并脚本和样式表规则2、使用内容发布网络（cdn，content delivery network）规则3、添加expires头expires头：在这一日期/时间之后，响应将被认为是无效的max-age: 设置相对有效时间cache-control:max-age=100空缓存vs完整缓存：尽可能将页面内容放入大缓存中不仅仅是图片：图片应该使用缓存，但这一优质实践不应该仅限于图片修订文件名：为能够获取最新的文件，最有效的解决方案是修改其所有链接，这样，全新的请求将从原始服务器下载最新的内容。规则4、压缩组件gzip:accept-encoding:gzip,deflate。gzip是目前最流行和最有效的压缩方法，是最理想的压缩方法压缩内容：压缩脚本和样式表是非常值得的，同时还有xml和json在内的文本。图片和pdf不应该压缩，因为它们本来就已经被压缩了。节省率：压缩通常能将响应的数据量减少将近70%gzip配置：不同的web服务器有不同的gzip配置方式，但大多支持gzip代理缓存：web服务器基于accept-encoding来检测是否对响应进行压缩。不管是否压缩过，浏览器都会基于响应中的其他http头如expires和cache-control来缓存响应。由于压缩的决定是基于accept-encoding请求头的，因此需要在服务器的vary响应头中包含accept-encoding。边缘情形：服务器和客户端的压缩对等性看似简单，但必须正确才行。无论是客户端还是服务器发生错误（发送压缩内容到不支持它的客户端、忘记将压缩内容声明为已经进行了gzip编码等），页面都会被破坏。错误并不会经常发生，但它们是必须考虑的边缘情形（edge case）。这种情况虽然可以通过浏览器白名单方式解决，但设置浏览器白名单的指令过于复杂，无法使用http头进行编码。优质做法是将user-agent作为代理的另外一种判断标准添加到vary头中vary:accept-encoding,user-agent规则5、将样式表放在顶部规则5对于加载页面所需的实际时间没有太多影响，它影响更多的是浏览器对这些组件顺序的反应。为避免当样式变化时重绘页面中的元素，浏览器会等待位于底部的样式表加载完成后才会呈现，这时浏览器会延迟任何可视化组件。实际上，用户感觉缓慢的页面反而是可视化组建加载得更快的页面。使用link标签将样式表放在文档的head中可以解决该问题。
在使用样式表时，页面逐步呈现会被阻止，直到所有的样式表下载完成。将样式表移到文档head中，这样就能首先下载它们而不会阻止页面呈现。
规则6、将脚本放在底部并行下载 对响应时间影响的是页面中组件的数量，如果一个web页面平均地将其组件分别放在两个主机名下，整体响应时间将可以减少大约一半。但并行下载数量并不是越多越快，因为增加并行下载数量是有开销的，其优劣取决于带宽和cpu速度。脚本阻塞下载 并行下载组件的优点是很明显的，然而，在下载脚本时并行下载实际上被禁用的。即使使用了不同的主机名，浏览器也不会启动其他的下载。其中一个原因是，脚本可能使用document.write来修改页面内容，因此浏览器会等待，已确保页面能够恰当地布局。另一个原因是为了保证脚本能够按照正确的顺序执行。在使用脚本时，对于所有位于脚本以下的内容，逐步呈现都被阻塞了。将脚本放在页面越靠下的地方，意味着越多的内容能逐步地呈现。
规则7、避免css表达式规则8、使用外部javascript和css纯碎而言，内联快一些页面查看 每个用户产生的页面查看越少，内联javascript和css的论据越强势。另一方面，如果普通用户能够产生很多的页面查看，浏览器很可能将（具有长久的expires头的）外部文件放在其缓存中。组件重用 如果你的网站中的每一个页面都使用了相同的javascript和css，使用外部文件可以提高这些组件的重用率。在这种情况下使用外部文件更加具有优势，因为当用户在页面间浏览时，javascript和css组件已经位于浏览器的缓存中了。动态内联 如果主页服务器知道一个组件是否在浏览器的缓存中，它可以在内联和使用外部文件之间做出优质选择。尽管服务器不能查看浏览器缓存中有些什么，但可以用cookies做指示器。如果cookie不存在，就内联了javascript和css。如果cookie出现了，则有可能外部组件位于浏览器的缓存中，并使用了外部文件。规则9、减少dns查找internet是通过ip地址来查找服务器的。由于ip地址很难记忆，通常使用包含主机名的url来取代它，但当浏览器发送其请求时，ip地址仍然是必需的。这就是domain name system(dns) 所处的角色。dns也有开销，通常浏览器查找一个给定的主机名的ip地址要花费20-120毫秒。响应时间依赖于dns解析器（通常由你的isp提供）、它所承担的请求压力、你与它之间的距离和你的带宽速度。
dns缓存 dns查找可以被缓存起来提高性能。这种缓存可以发生在由你的isp或局域网中的一台特殊的缓存服务器上，但这里探讨的是发生在独立用户的计算机上的dns缓存。在用户请求了一个主机名之后，dns信息会留在操作系统的dns缓存中，之后对于该主机名的请求将无需进行过多的dns查找，至少短时间内不需要。·影响dns缓存的因素 首先，服务器可以表明记录可以被缓存多久。查找返回的dns记录包含了一个存活时间（time-to-live,ttl）值。该值告诉客户端可以对该记录缓存多久，尽管操作系统缓存会考虑ttl值，但浏览器通常忽略该值，并设置它自己的时间限制。另外浏览器对缓存的dns记录的数量也有限制，ttl设置值通常是1天。减少dns查找 当客户端的dns缓存为空（浏览器和操作系统都是）时，dns查找的数量与web页面中唯一主机名的数量相等。这包括页面url、图片、脚本文件、样式表、flash对象等的主机名。减少唯一主机名的数量就可以就可以减少dns查找的数量。通过使用keep-alive和较少的域名来减少dns查找规则10、精简javascriptjavascript作为一门解释型语言，是构建web页面的选。当以快速原型为基准开发用户界面时，解释语言要优于其他语言。
精简 是从代码中移除不必要的字符以减少其大小，进而改善加载时间的实践。在代码被精简后，所有的注释以及不必要的空白字符（空格、换行和制表符）都将被移除。对于javascript而言，这可以改善响应时间效率，因为需要下载的文件大小减少了。精简javascript最流行的工具是jsmin。混淆 是可以应用在源代码上的另外一种优化方式。和精简一样，它也会移除注释和空白，同时它还会改写代码。作为改写的一部分，函数和变量的名字将被转换为更短的字符串，这时的代码更加精炼。但是会带来三个弊端：可能引入错误、增加调试难度、需要对javascript关键字标记内联脚本 内联的javascript块也应该精简规则11、避免重定向重定向用于将用户从一个url重新路由到另一个url，种类有很多，常用的是301和302。它是损伤性能的，可以采用alias、mod_rewirte、directoryslash和直接连接代码来避免重定向。
规则12、移除重复脚本重复脚本--确有其事 开发一个网站需要极大数量的资源，除了核心团队要构建网站外，其他团队也会向页面贡献html代码。由于来自不同团队的很多人都要向页面中添加html，很容易想到相同的脚本可能会被添加多次重复脚本伤害性能 引起不必要的http请求和执行javascript所消耗的时间规则13、配置etag实体标签（entity tag，etag）是web服务器和浏览器用于确认缓存组件的有效性的一种机制。减少呈现页面时所必需的http请求的数量是加速用户体验的优质方式。可以通过化浏览器缓存组件的能力来实现这一目标，但当网站被宿主在多于一台服务器上时，etag头可能会阻碍缓存。
etag带来的问题 etag的问题在于，通常使用组件的某些属性来构造它，这些属性对于特定的、寄宿了网站的服务器来说是唯一的。当浏览器从一台服务器上获取了原始组件，之后又向另外一台不同的服务器发起条件get请求时，etag是不会匹配的----而对于使用服务器集群来处理请求的网站来说，这是很常见的一种情况。默认情况下，对于拥有多台服务器的网站，apache和iis向etag中嵌入的数据都会大大地降低有效性验证的成功率。
解决该问题的两种方式：选择etag的配置方式或者直接移除etag
规则14、使ajax可缓存ajax表示异步javascript和xml（asynchronous javascript and xml），尽管今天除了xml有很多其他选择，最著名的是json。ajax的目的是为了突破web本质的开始--停止交互方式。向用户显示一个白屏然后重绘整个页面不是一种后的用户体验。而ajax在ui和web服务器之间插入了一层。这个ajax层位于客户端，与web服务器进行交互以获取请求的信息，并与表现层交互，仅更新哪些必要的组件。它将web体验从“浏览页面”转变为“与应用程序进行交互”。
ajax的一个明显优点是向用户提供了及时反馈，因为它异步地从后端web服务器请求信息。但ajax并不保证用户就不会一边玩弄自己的手指一边等着“异步javascript和xml”返回响应，记住“异步”并没有暗示“即时”，这一点很重要。用户是否需要等待的关键因素在于ajax请求是被动的还是主动的。被动请求是为了将来使用而预先发起的。主动请求是基于用户当前的操作而发起的。
改善ajax请求的最重要的方式就是使响应可缓存，前面第4、9、10、11、13原则也适用于此。
确保ajax请求遵守性能指导，尤其应具有长久的expires头。


移动端网站的制作都有哪些误区？要怎样防止？
网站的百度收录减少有哪些原因
辉县seo网站排名推广有什么样的的规则？
【微信营销教程】微商到底怎么做
蓝色的信息量与网页表现
网站后期如何优化处理
网站建设中这4方面不能掉以轻心！
企业网站建设能够全面的剖析公司在互联网上的定位