网页前端优化
浏览数：22 /
时间：2015年06月09日
网页前端优化的多重标准：
一、使用浏览器缓存
优化缓存：
大多数的网页，包括CSS文件，图像文件，JavaScript文件等，需要一段时间才能通过网络下载，从而增加加载一个网页的时间。
HTTP缓存允许保存这些资源，或通过浏览器或代理缓存。一旦资源被缓存，浏览器可以下载本地缓存，而不是不必每次下载web服务器。
因此，缓存可以消除许多HTTP请求所耗费的资源， 减少加载时间，并大幅降低总有效载荷大小 。从而减少用户访问页面时间，也可以显著减少服务器带宽占用。
如：
利用浏览器缓存：
1、设定一个静态资源的HTTP请求头的到期日时间，从而指示从本地磁盘，而不是通过网络浏览器加载先前下载的资源。
2、配置Web服务器的缓存头，并将其应用到所有缓存的静态资源，包括图像，JS和CSS文件，图像文件和其它二进制目标文件（媒体文件，PDF文件，Flash文件等）。
3、HTTP/1.1提供以下缓存响应头：
Expires和的Cache - Control：max - age。
Last - Modified。
=====================================================================================================================================================
二、图片优化
正确的格式和压缩图像，可以节省字节和数据，保证图片加载速度更快。
基本的图像优化，包括将图片的裁剪成合适的大小，将图片的色彩深度减少到可接受的水平，并以适当的格式保存图像如png等标准格式。执行一些图像编辑程序如photoshop来编辑。
优化建议:
1、选择一个合适的图像文件格式。
2、图像类型对文件大小具有很大的影响。
3、PNG一般是互联网图像的最佳选择。IE浏览器，Mac，Safari和Firefox的所有版本都完全支持PNG，包括png图片的透明度。
4、不要使用BMP的或TIFF格式。
5、使用图像压缩。
6、有几个工具可以执行进一步无损压缩，JPEG和PNG图片文件而且对图像质量没有影响。
7、对于JPEG，建议jpegtran 或jpegoptim。
8、对PNG，建议OptiPNG 或PNGOUT。
9、指定图片的大小：在css中指定图片的大小，比如商品的缩略图，指定它的大小可以有效减少不必要的请求数。
10、将价格以 CSS 贴图定位的方式尽量合并，以便减少图片数量。
=====================================================================================================================================================
三、由同一网址提供资源
概述：
网页内容从统一的URL的资源，消除重复下载字节。
有时需要从一个页面的多个地方引用相同的资源如：图像
有时候需要在多个页面共享相同的资源，如CSS和js文件。
如果网页需要引用相同的资源，资源应该尽量从同样的URL传达。
确保资源从单一的URL调用有很多好处，它能降低整体的有效载荷大小，因为浏览器不需要下载额外的相同的字节，还可以节省额外的往返时间。
请注意：请使用绝对URL的主机名。
例如，如果www.example.com引用的主页资源/图像/ example.gif和www.example.com /图像/ example.gif，网址是一致的。
但网页的引用/图像/ example.gif和mysite.example.com /图像/ example.gif，就不一致。
如：下列资源的内容完全相同，但是却来自不同的网址。如果使用同一网址提供这些资源，可减少 1 个请求并减少 437B 的数据量。
http://price1.xxxx.cn/webapp/wcs/stores/prdprice/285232_9173_10052_1.png
http://price1.xxxx.cn/webapp/wcs/stores/prdprice/410116_9173_10052_1.png
=====================================================================================================================================================
四、启用压缩功能
通过gziP压缩网页资源，可以减少通过网络发送的字节数。
目前大多数浏览器支持HTML，CSS和JavaScript文件的数据压缩。这可以使网页内容更紧凑，同时在网络发送过程中大幅减少下载时间。
许多Web服务器可以在文件下载发送之前gzip压缩文件，压缩服务器上施加过多的负荷，需要注意的是gzip压缩仅适用于较大的资源。由于压缩和解压本身的运算和延迟，建议150以上的文件才去考虑。
低于150字节的gzip压缩文件反而会使其更大。
为了确保内容压缩，做到以下几点：
1、确保在HTML和CSS代码的一致性。为了实现一致性：
2、指定CSS值 - 按字母顺序排列它们。
3、指定HTML属性相同的顺序，即按字母顺序排列它们。
4、例如，谷歌的搜索结果页面上，按字母顺序排列的HTML属性，导致在gzip压缩输出的大小减少1.5％ 。
5、使用一致的嵌套标签，尽量小写。
6、保持HTML标签属性的一致，即，总是单引号，总是双引号。
7、缩小JavaScript 和CSS，减少不必要的文件内容。
8、不要使用gzip压缩的影像、PDF等文件或其他二进制文件。
========================================================================================================================================================
五、尽量减少请求的数据量
理想的情况下，一个HTTP请求不应超过1个包。一般限制大约为1500字节的数据包，所以，如果能限制每个请求少于1500字节，就可以有效减少请求。
建议：
1、Cookie：对于必须与发送的cookie的资源，保存Cookie为最小。指定任何一个cookie应不超过1000字节。
2、请求的资源的URL，尽量减少和减短URL的长度和字节数。
3、删除未使用的或重复的cookie字段。
=========================================================================================================================================================
六、压缩 JavaScript
压缩JavaScript代码，可以节省的数据，并加快下载，解析和执行时间。
1、压缩和排除如额外的空格，换行符和缩进，消除不必要的字节。
2、保持JavaScript代码紧凑，有很多好处 。
a.进一步提高压缩外部JS文件和JS代码内嵌的HTML文件。
b.较小的文件可以加载和运行Web浏览器更快速。
c.有几个工具免费提供给JavaScript的压缩JSMin或YUI压缩。我们建议缩小4096字节或规模较大的JS文件。
=========================================================================================================================================================
七、指定图片大小
指定所有图像的宽度和高度可以通过消除不必要的信息回流，帮助页面更快的渲染。
1、可以在HTML <IMG> 的标签，或在CSS中指定的所有图像的宽度和高度。
2、指定这些图像本身的尺寸相匹配。
3、如果图像文件实际上是60 × 60像素，不要在css或者html中设置尺寸为30 × 30。如果图像需要更小，请在图像编辑器设定其尺寸相匹配。
=========================================================================================================================================================
八、压缩 HTML
1、压缩的HTML代码，包括其所加载的JavaScript和CSS，可以节省数据，并加快下载，解析和执行时间。
2、Minifying HTML可以减少网络延迟，提高压缩率和更快的加载和执行浏览器请求。
3、HTML包含内嵌的JS代码（<script>标记）和内联CSS（<STYLE>标签）。
==========================================================================================================================================================
九、压缩 CSS
1、压缩CSS代码可以节省字节数据，并加快下载，解析和执行时间。
2、压缩CSSg的好处：减少网络延迟，提高压缩和速度更快的浏览器加载和执行速度。
3、几个工具都是免费提供的压缩JavaScript中，包括了YUI压缩机和cssmin.js。
提示：当对引用CSS文件的页面速度时，它会自动运行文件cssmin.js和输出保存到一个可配置的目录。
==========================================================================================================================================================
十、指定一个"Vary: Accept-Encoding"标头
1、公共缓存启用静态资源的HTTP头，允许浏览器从附近的一个代理服务器下载资源，而不是从远程源服务器。
2、即使是第一次访问网站的网站的用户也可以从缓存中受益，代理缓存可以显着减少网络延迟。
3、可以根据访问用户所在的位置，调用离用户最近的服务器上面的缓存。
=========================================================================================================================================================
十一、优化样式表和脚本的排列顺序
正确的外部样式表加载顺序和外部内嵌脚本顺序可以更好的并行下载和加快浏览器的渲染时间。
下图是二种网页内容和布局方式所引发的加载情况：
=============================================================================================================================================
十二、将 CSS 放在文档标头处
将CSS和<link>文档的正文中的元素移动到的文件头部，可以提高渲染性能。
在html文件中，指定外部的样式表和CSS，可能会对浏览器产生负面影响，包括浏览器渲染，直到网页下载完成所有的CSS样式表，让浏览器逐步呈现该页面，
作为HTML4.0的规范，还这样可以确保您所指的样式表的脚本以正确的形式和顺序加载该顺序。
在html外部样式表中指定外部的CSS样式表会影响浏览器的加载性能，浏览器通常会等待外部css样式表完全下载完毕后才会加载页面，
所以通常我们需要将CSS样式表放在页面的头部以确保浏览器可以首先加载外部样式表以确保页面可以尽快打开。
=============================================================================================================================================
十三、尽量减少重定向
最大限度地减少从一个URL到另外一个URL的HTTP重定向可以减少额外的RTT，从而节省用户的等待时间。
有时将一个URL重定向到另外一个URL是不可避免的，如：
1、网站域名更新。
2、需要跟踪页面的点击次数和日志推荐网页等。
无论如何，重定向必然会导致出发一个额外的http请求，响应周期和往返时间的延迟是不可避免的，重要的是要如何最大限度的减少重定向和重定向所耗用的时间。
1、某些极少使用的页面。
2、直接定向到目标页面，比如目标页面是C页面，A和B，A和B都应该直接重定向到C，不需要再通过二次中转，这样可能会导致更多的时间损耗。
3、许多WEB服务器都支持"重写"，当客户端发起一个无效的URL请求时，服务器会自动重新映射它到正确的服务资源，而不是发出一个重定向请求。
==============================================================================================================================================
十二、提供压缩后的图片
正确的压缩图片可以有效的节省空间和提高加载速度。
有时浏览器需要一张相同的图片以不同的尺寸来展示，所以通常会用css等文件来指定图片的大小，比如如果你希望一张250*250的图片以10*10的尺寸来展示，
你可以通过压缩图片的方法来避免用户下载过大的图片，从而节省带宽和提升速度。
通过指定页面图片的大小，我们可以避免过多的RTT请求，从而提高页面的加载速度降低带宽的使用。
同时，出于提高并发数量的考虑，我们可以通过提供额外的图片服务器来提高图片的加载速度，降低浏览器的线程数。
==============================================================================================================================================
十三、延缓JavaScript解析
通常情况下，浏览器要加载一个网页必须要解析页面所有的<SCRIPT>标签，这样增加了额外的加载时间，
因此最大限度的减少JavaScript加载时间或者延迟所需的JavaScript加载可以有效的减少页面的初始加载时间。
有一些简单的方法可以推迟JavaScript的解析，最简单的方法就是延迟JavaScript的加载，直到它需要加载JavaScript的时候才让它加载。
==============================================================================================================================================
十四、指定缓存时间
设定浏览器缓存的指定日期可以让浏览器从本地的磁盘而不是通过网络浏览器来加载先前下载的资源。
HTTP/S支持本地浏览器缓存静态资源。一些最新的浏览器（如IE 7浏览器）使用了一种启发式缓存资源，没有明确的缓存头。其他较旧的浏览器可能需要设置缓存头，他们会从缓存中获取资源。
如果需要在缓存中设置浏览器的缓存可以有效配置Web服务器的缓存头，并将其应用到所有缓存的静态资源，而不是一小部分（如图像）。
==============================================================================================================================================
十五、避免出现错误的请求
随着网站的发展，网站的一些原有资源将会更换和移动，如果不及时更新，服务器将发出404的错误页面反馈。
不必要的请求导致了不佳的用户体验，使网站看起来不专业。
在速度和加载方面，如果不组织浏览器的后继处理，比如JS和CSS文件，它们会浪费和占用网站部分资源，所以，我们有必要定期检查和扫描整个网站，
比如用google的网站管理员工具定期扫描网站的错误和404页面，然后删除和适当的处理这些页面。
避免使用过多的HTTP重定向，减少向用户发送请求的资源，或未一个以"建议"的引导页面。如上所述，重定向可能会放慢网站速度，所以在实际情况中应该尽量的避免。
==============================================================================================================================================
十六、避免在 CSS 中使用 @import
使用一个外部的样式表CSS的@ import加载一个网页的过程中可能会增加额外的延迟。
CSS样式表的@ import允许导入其他样式表。当来自外部的样式表CSS的@ import，浏览器无法并行下载样式表，它增加了额外的往返时间，从而影响整体的页面加载。
例如，如果first.css包含下列内容 (浏览器在下载，解析，执行之前，需要下载second.css first.css)：
建议：
使用<link>标签而不是CSS的@ import
这使得浏览器下载并行的样式表，从而更快的加载页面。
一、使用浏览器缓存
优化缓存：
大多数的网页，包括CSS文件，图像文件，JavaScript文件等，需要一段时间才能通过网络下载，从而增加加载一个网页的时间。
HTTP缓存允许保存这些资源，或通过浏览器或代理缓存。一旦资源被缓存，浏览器可以下载本地缓存，而不是不必每次下载web服务器。
因此，缓存可以消除许多HTTP请求所耗费的资源， 减少加载时间，并大幅降低总有效载荷大小 。从而减少用户访问页面时间，也可以显著减少服务器带宽占用。
如：
利用浏览器缓存：
1、设定一个静态资源的HTTP请求头的到期日时间，从而指示从本地磁盘，而不是通过网络浏览器加载先前下载的资源。
2、配置Web服务器的缓存头，并将其应用到所有缓存的静态资源，包括图像，JS和CSS文件，图像文件和其它二进制目标文件（媒体文件，PDF文件，Flash文件等）。
3、HTTP/1.1提供以下缓存响应头：
Expires和的Cache - Control：max - age。
Last - Modified。
=====================================================================================================================================================
二、图片优化
正确的格式和压缩图像，可以节省字节和数据，保证图片加载速度更快。
基本的图像优化，包括将图片的裁剪成合适的大小，将图片的色彩深度减少到可接受的水平，并以适当的格式保存图像如png等标准格式。执行一些图像编辑程序如photoshop来编辑。
优化建议:
1、选择一个合适的图像文件格式。
2、图像类型对文件大小具有很大的影响。
3、PNG一般是互联网图像的最佳选择。IE浏览器，Mac，Safari和Firefox的所有版本都完全支持PNG，包括png图片的透明度。
4、不要使用BMP的或TIFF格式。
5、使用图像压缩。
6、有几个工具可以执行进一步无损压缩，JPEG和PNG图片文件而且对图像质量没有影响。
7、对于JPEG，建议jpegtran 或jpegoptim。
8、对PNG，建议OptiPNG 或PNGOUT。
9、指定图片的大小：在css中指定图片的大小，比如商品的缩略图，指定它的大小可以有效减少不必要的请求数。
10、将价格以 CSS 贴图定位的方式尽量合并，以便减少图片数量。
=====================================================================================================================================================
三、由同一网址提供资源
概述：
网页内容从统一的URL的资源，消除重复下载字节。
有时需要从一个页面的多个地方引用相同的资源如：图像
有时候需要在多个页面共享相同的资源，如CSS和js文件。
如果网页需要引用相同的资源，资源应该尽量从同样的URL传达。
确保资源从单一的URL调用有很多好处，它能降低整体的有效载荷大小，因为浏览器不需要下载额外的相同的字节，还可以节省额外的往返时间。
请注意：请使用绝对URL的主机名。
例如，如果www.example.com引用的主页资源/图像/ example.gif和www.example.com /图像/ example.gif，网址是一致的。
但网页的引用/图像/ example.gif和mysite.example.com /图像/ example.gif，就不一致。
如：下列资源的内容完全相同，但是却来自不同的网址。如果使用同一网址提供这些资源，可减少 1 个请求并减少 437B 的数据量。
http://price1.xxxx.cn/webapp/wcs/stores/prdprice/285232_9173_10052_1.png
http://price1.xxxx.cn/webapp/wcs/stores/prdprice/410116_9173_10052_1.png
=====================================================================================================================================================
四、启用压缩功能
通过gziP压缩网页资源，可以减少通过网络发送的字节数。
目前大多数浏览器支持HTML，CSS和JavaScript文件的数据压缩。这可以使网页内容更紧凑，同时在网络发送过程中大幅减少下载时间。
许多Web服务器可以在文件下载发送之前gzip压缩文件，压缩服务器上施加过多的负荷，需要注意的是gzip压缩仅适用于较大的资源。由于压缩和解压本身的运算和延迟，建议150以上的文件才去考虑。
低于150字节的gzip压缩文件反而会使其更大。
为了确保内容压缩，做到以下几点：
1、确保在HTML和CSS代码的一致性。为了实现一致性：
2、指定CSS值 - 按字母顺序排列它们。
3、指定HTML属性相同的顺序，即按字母顺序排列它们。
4、例如，谷歌的搜索结果页面上，按字母顺序排列的HTML属性，导致在gzip压缩输出的大小减少1.5％ 。
5、使用一致的嵌套标签，尽量小写。
6、保持HTML标签属性的一致，即，总是单引号，总是双引号。
7、缩小JavaScript 和CSS，减少不必要的文件内容。
8、不要使用gzip压缩的影像、PDF等文件或其他二进制文件。
========================================================================================================================================================
五、尽量减少请求的数据量
理想的情况下，一个HTTP请求不应超过1个包。一般限制大约为1500字节的数据包，所以，如果能限制每个请求少于1500字节，就可以有效减少请求。
建议：
1、Cookie：对于必须与发送的cookie的资源，保存Cookie为最小。指定任何一个cookie应不超过1000字节。
2、请求的资源的URL，尽量减少和减短URL的长度和字节数。
3、删除未使用的或重复的cookie字段。
=========================================================================================================================================================
六、压缩 JavaScript
压缩JavaScript代码，可以节省的数据，并加快下载，解析和执行时间。
1、压缩和排除如额外的空格，换行符和缩进，消除不必要的字节。
2、保持JavaScript代码紧凑，有很多好处 。
a.进一步提高压缩外部JS文件和JS代码内嵌的HTML文件。
b.较小的文件可以加载和运行Web浏览器更快速。
c.有几个工具免费提供给JavaScript的压缩JSMin或YUI压缩。我们建议缩小4096字节或规模较大的JS文件。
=========================================================================================================================================================
七、指定图片大小
指定所有图像的宽度和高度可以通过消除不必要的信息回流，帮助页面更快的渲染。
1、可以在HTML <IMG> 的标签，或在CSS中指定的所有图像的宽度和高度。
2、指定这些图像本身的尺寸相匹配。
3、如果图像文件实际上是60 × 60像素，不要在css或者html中设置尺寸为30 × 30。如果图像需要更小，请在图像编辑器设定其尺寸相匹配。
=========================================================================================================================================================
八、压缩 HTML
1、压缩的HTML代码，包括其所加载的JavaScript和CSS，可以节省数据，并加快下载，解析和执行时间。
2、Minifying HTML可以减少网络延迟，提高压缩率和更快的加载和执行浏览器请求。
3、HTML包含内嵌的JS代码（<script>标记）和内联CSS（<STYLE>标签）。
==========================================================================================================================================================
九、压缩 CSS
1、压缩CSS代码可以节省字节数据，并加快下载，解析和执行时间。
2、压缩CSSg的好处：减少网络延迟，提高压缩和速度更快的浏览器加载和执行速度。
3、几个工具都是免费提供的压缩JavaScript中，包括了YUI压缩机和cssmin.js。
提示：当对引用CSS文件的页面速度时，它会自动运行文件cssmin.js和输出保存到一个可配置的目录。
==========================================================================================================================================================
十、指定一个"Vary: Accept-Encoding"标头
1、公共缓存启用静态资源的HTTP头，允许浏览器从附近的一个代理服务器下载资源，而不是从远程源服务器。
2、即使是第一次访问网站的网站的用户也可以从缓存中受益，代理缓存可以显着减少网络延迟。
3、可以根据访问用户所在的位置，调用离用户最近的服务器上面的缓存。
=========================================================================================================================================================
十一、优化样式表和脚本的排列顺序
正确的外部样式表加载顺序和外部内嵌脚本顺序可以更好的并行下载和加快浏览器的渲染时间。
下图是二种网页内容和布局方式所引发的加载情况：
=============================================================================================================================================
十二、将 CSS 放在文档标头处
将CSS和<link>文档的正文中的元素移动到的文件头部，可以提高渲染性能。
在html文件中，指定外部的样式表和CSS，可能会对浏览器产生负面影响，包括浏览器渲染，直到网页下载完成所有的CSS样式表，让浏览器逐步呈现该页面，
作为HTML4.0的规范，还这样可以确保您所指的样式表的脚本以正确的形式和顺序加载该顺序。
在html外部样式表中指定外部的CSS样式表会影响浏览器的加载性能，浏览器通常会等待外部css样式表完全下载完毕后才会加载页面，
所以通常我们需要将CSS样式表放在页面的头部以确保浏览器可以首先加载外部样式表以确保页面可以尽快打开。
=============================================================================================================================================
十三、尽量减少重定向
最大限度地减少从一个URL到另外一个URL的HTTP重定向可以减少额外的RTT，从而节省用户的等待时间。
有时将一个URL重定向到另外一个URL是不可避免的，如：
1、网站域名更新。
2、需要跟踪页面的点击次数和日志推荐网页等。
无论如何，重定向必然会导致出发一个额外的http请求，响应周期和往返时间的延迟是不可避免的，重要的是要如何最大限度的减少重定向和重定向所耗用的时间。
1、某些极少使用的页面。
2、直接定向到目标页面，比如目标页面是C页面，A和B，A和B都应该直接重定向到C，不需要再通过二次中转，这样可能会导致更多的时间损耗。
3、许多WEB服务器都支持"重写"，当客户端发起一个无效的URL请求时，服务器会自动重新映射它到正确的服务资源，而不是发出一个重定向请求。
==============================================================================================================================================
十二、提供压缩后的图片
正确的压缩图片可以有效的节省空间和提高加载速度。
有时浏览器需要一张相同的图片以不同的尺寸来展示，所以通常会用css等文件来指定图片的大小，比如如果你希望一张250*250的图片以10*10的尺寸来展示，
你可以通过压缩图片的方法来避免用户下载过大的图片，从而节省带宽和提升速度。
通过指定页面图片的大小，我们可以避免过多的RTT请求，从而提高页面的加载速度降低带宽的使用。
同时，出于提高并发数量的考虑，我们可以通过提供额外的图片服务器来提高图片的加载速度，降低浏览器的线程数。
==============================================================================================================================================
十三、延缓JavaScript解析
通常情况下，浏览器要加载一个网页必须要解析页面所有的<SCRIPT>标签，这样增加了额外的加载时间，
因此最大限度的减少JavaScript加载时间或者延迟所需的JavaScript加载可以有效的减少页面的初始加载时间。
有一些简单的方法可以推迟JavaScript的解析，最简单的方法就是延迟JavaScript的加载，直到它需要加载JavaScript的时候才让它加载。
==============================================================================================================================================
十四、指定缓存时间
设定浏览器缓存的指定日期可以让浏览器从本地的磁盘而不是通过网络浏览器来加载先前下载的资源。
HTTP/S支持本地浏览器缓存静态资源。一些最新的浏览器（如IE 7浏览器）使用了一种启发式缓存资源，没有明确的缓存头。其他较旧的浏览器可能需要设置缓存头，他们会从缓存中获取资源。
如果需要在缓存中设置浏览器的缓存可以有效配置Web服务器的缓存头，并将其应用到所有缓存的静态资源，而不是一小部分（如图像）。
==============================================================================================================================================
十五、避免出现错误的请求
随着网站的发展，网站的一些原有资源将会更换和移动，如果不及时更新，服务器将发出404的错误页面反馈。
不必要的请求导致了不佳的用户体验，使网站看起来不专业。
在速度和加载方面，如果不组织浏览器的后继处理，比如JS和CSS文件，它们会浪费和占用网站部分资源，所以，我们有必要定期检查和扫描整个网站，
比如用google的网站管理员工具定期扫描网站的错误和404页面，然后删除和适当的处理这些页面。
避免使用过多的HTTP重定向，减少向用户发送请求的资源，或未一个以"建议"的引导页面。如上所述，重定向可能会放慢网站速度，所以在实际情况中应该尽量的避免。
==============================================================================================================================================
十六、避免在 CSS 中使用 @import
使用一个外部的样式表CSS的@ import加载一个网页的过程中可能会增加额外的延迟。
CSS样式表的@ import允许导入其他样式表。当来自外部的样式表CSS的@ import，浏览器无法并行下载样式表，它增加了额外的往返时间，从而影响整体的页面加载。
例如，如果first.css包含下列内容 (浏览器在下载，解析，执行之前，需要下载second.css first.css)：
建议：
使用<link>标签而不是CSS的@ import
这使得浏览器下载并行的样式表，从而更快的加载页面。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
