摘要：优化条法则减少请求次数是性能优化的起点。总文件大小变化不大，但减少了请求次数从而加快了页面显示速度。使用内容分发网络可以通过服务提供商增加缓存相关压缩页面元素通过压缩响应内容可减少页面响应时间。混淆是最小化于源码的备选方式。
Yahoo WEB优化14条法则
减少HTTP请求次数是性能优化的起点。这最提高首次访问的效率起到很重要的作用。
减少HTTP请求次数Image maps组合多个图片到一张图片中。总文件大小变化不大，但减少了HTTP请求次数从而加快了页面显示速度。该方式只适合图片连续的情况；同时坐标的定义是烦人又容易出错的工作。
CSS Sprites是更好的方法。它可以组合页面中的图片到单个文件中，并使用CSS的background-image和background-position属性来现实所需的部分图片。
Inline images使用data: URL scheme来在页面中内嵌图片。这将增大HTML文件的大小。组合inline images到你的（缓存）样式表是既能较少HTTP请求，又能避免加大HTML文件大小的方法。
优点： ①. 减少资源请求链接数。
缺点： ①. 不会被浏览器缓存起来； ②. 移动端性能比http URI scheme低。
可通过在css文件的background-image样式规则使用Data URI Scheme，使其随css文件一同被浏览器缓存起来。
Combined files通过组合多个脚本文件到单一文件来减少HTTP请求次数。样式表也可采用类似方法处理。这个方法虽然简单，但没有得到大规模的使用。10大美国网站每页平均有7个脚本文件和2个样式表。当页面之间脚本和样式表变化很大时，该方式将遇到很大的挑战，但如果做到的话，将能加快响应时间。
使用CDN(Content Delivery Network, 内容分发网络)可以通过 CDN服务提供商增加Expires Header缓存相关
压缩页面元素通过压缩HTTP响应内容可减少页面响应时间。从HTTP/1.1开始，web客户端在HTTP请求中通过Accept-Encoding头来表明支持的压缩类型
把样式表放在头上我们发现把样式表移到HEAD部分可以提高界面加载速度，因此这使得页面元素可以顺序显示。
把脚本文件放在底部与样式文件一样，我们需要注意脚本文件的位置。我们需尽量把它们放在页面的底部，这样一方面能顺序显示，另方面可达到最大的并行下载。
在某些情况下，不是很容易就能把脚本移到底部的。如，脚本使用document.write方法来插入页面内容。同时可能还存在域的问题。不过在很多情况下，还是有一些方法的。
一个备选方法是使用延迟脚本（deferred script）。DEFER属性表明脚本未包含document.write，指示浏览器刻继续显示。不幸的是，Firefox不支持DEFER属性。在IE中，脚本可能被延迟执行，但不一定得到需要的长时间延迟。不过从另外角度来说，如果脚本能被延迟执行，那它就可以被放在底部了。
一种减少CSS表达式执行次数的方法是一次性表达式，即当第一次执行时就以明确的数值代替表达式。如果必须动态设置的话，可使用事件处理函数代替。如果您必须使用CSS表达式的话，请记住它们可能被执行上千次，从而影响页面性能。
把JavaScript和CSS放到外部文件中在现实世界中，使用外部文件会加快页面显示速度，因为外部文件会被浏览器缓存。如果内置JavaScript和CSS在页面中虽然会减少HTTP请求次数，但增大了页面的大小。另外一方面，使用外部文件，会被浏览器缓存，则页面大小会减小，同时又不增加HTTP请求次数。
因此，一般来说，外部文件是更可行的方式。唯一的例外是内嵌方式对主页更有效，如Yahoo!和My Yahoo!都使用内嵌方式。一般来说，在一个session中，主页访问此时较少，因此内嵌方式可以取得更快的用户响应时间。
减少主机名可减少DNS查询的次数，但可能造成并行下载数的减少。避免DNS查询可减少响应时间，而减少并行下载数可能增加响应时间。一个可行的折中是把内容分布到至少2个，最多4个不同的主机名上。
最小化JavaScript代码最小化JavaScript代码指在JS代码中删除不必要的字符，从而降低下载时间。两个流行的工具是#JSMin 和YUI Compressor。
混淆是最小化于源码的备选方式。象最小化一样，它通过删除注释和空格来减少源码大小，同时它还可以对代码进行混淆处理。作为混淆的一部分，函数名和变量名被替换成短的字符串，这使得代码更紧凑，同时也更难读，使得难于被反向工程。Dojo Compressor (ShrinkSafe)是最常见的混淆工具。
重定向功能是通过301和302这两个HTTP状态码完成的，如：
HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html
浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是降低了用户体验。
删除重复的脚本文件在一个页面中包含重复的JS脚本文件会影响性能，即它会建立不必要的HTTP请求和额外的JS执行。
配置ETags不是很懂，留个坑
缓存Ajax提高Ajax的性能最重要的方式是使得其response可缓存
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/79297.html
摘要：标题标签会将其中的文本加粗加黑显示，并从到依次减弱。换行标签换行符。可在标签内使用。规定表头单元格可横跨的行数。HTML的概念 概念： HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup t...
摘要：最近熬了很多个夜晚踩坑无数终于写出了用驱动的主题只需体验三分钟，你就会跟我一样，爱上这款主题已经发布到请客官享用介绍的原主题是的数高达的有个它在静态博客网站中的应用处处可见在这里首先感谢原作者然而它的定位是仅支持等现代浏览器。 最近熬了很多个夜晚, 踩坑无数, 终于写出了用VuePress驱动的主题. 只需体验三分钟，你就会跟我一样，爱上这款主题. vuepress-theme-ind...
摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。 如何提升页面渲染效率 - 前端 - 掘金Web页面的性能 我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...
摘要：写在前面开发中的图像压缩是一个很重要的部分。而这篇文章会让我们从另外一个角度来认识平台下的图像压缩和优化。所以，它是你图像压缩和优化的首选，尽可能的去使用吧。 写在前面 Android开发中的图像压缩是一个很重要的部分。而这篇文章会让我们从另外一个角度来认识Android平台下的图像压缩和优化。 这篇文章更适合和设计师一起来看，所以，如果你和你的设计师是好基友的话，不妨叫上他，倒两杯咖...
阅读 2232·2021-10-13 09:39
阅读 3413·2021-09-30 09:52
阅读 804·2021-09-26 09:55
阅读 2778·2019-08-30 13:19
阅读 1892·2019-08-26 10:42
阅读 3189·2019-08-26 10:17
阅读 546·2019-08-23 14:52
阅读 3636·2019-08-23 14:39
