网站前端优化

网站前端优化

 

第一：减小HTTP请求

 

1: 将超连接关联到图片上，例如在导航栏按钮中。若是是以这种形式关联多个带有超连接的图片，使用图片地图这种方式既能减小HTTP请求，有无需改变页面外观感觉。图片地图容许在一个图片上关联多个URL.

 

2: CSS Sprites

和图片地图同样，CSS Sprites也能够合并图片，可是更加灵活，能够将多个图片合并到一个单独的图片中。

 

3：合并脚本和样式表

咱们在使用Javascript和CSS时，究竟是进行“内联”(也就是将其嵌套在HTML文档中)仍是将其放在外部的脚本和样式表文件中。通常来讲，使用外部脚本和样式表对性能更加有利（后面会说到）。可是，若是将代码分割到过多的小文件中，会下降性能，由于每一个文件都会致使一个额外的HTTP请求。为了清晰，不建议将脚本和样式表合并在一块儿。可是多个

脚本应该合并为一个脚本，多个样式表也应该合并为一个样式表。到底页面上应该有多少个脚本文件和CSS文件须要花必定的时间分析页面。

 

第二：使用内容发布网络

 

网站最初一般将其全部的服务器放在同一个地方。当用户群增长时，公司就必须面对服务器放置地点再也不使用的事实，有必要再多个地理位置不一样的服务器上部署内容。

CDN的通俗理解就是网站加速，CPU均衡负载，能够解决跨运营商，跨地区，服务器负载能力太低，带宽过少等带来的网站打开速度慢等问题。

好比：

1.一个企业的网站服务器在北京，运营商是电信，在广东的联通用户访问企业网站时，由于跨地区，跨运营商的缘由，网站打开速度就会比北京当地的电信客户访问速度慢不少，很容易形成这个企业的客户流失

2.一个网站的服务器性能比较差，承载能力有限，有时面临突发流量，招架不住，直接致使服务器崩溃，网站打不开，尤为是电商网站在节日期间，由于这种状况网站打不开，销售额白白流失的占比都高涨至60%

3.再好比一些中小企业租用的虚拟主机，由于跟好几个网站共用一台服务器，每一个网站所分带宽有限，带宽太小常常致使流量稍微一多，网站打开速度就很慢，甚至打不开。

国内较为有名的CDN服务商有蓝汛、网宿科技，世纪互联，帝联科技等

 

第三：添加Expires头

今天的WEB页面包含了大量的组件，而且其数量在不断增加，页面的初次访问者会进行不少HTTP请求，但经过一个长久的Expires头，使这些组件能够被缓存。这回在后续的页面浏览中避免没必要要的HTTP请求。长久的Expires头最经常使用于图片，可是应该将其用在全部的组件上，包括脚本，样式表等。在HTTP1.1引入了Cache-Control头来克服Expires头的限制。由于Expires头使用一个特定的时间，它要求服务器和客户端的时钟严格同步。

使用带有max-age的Cache-Control能够消除Expires的限制(我推荐尽可能使用Cache-Control)。若是二者同时出现，HTTP规定max-age指令将重写Expires头。

能够在IIS管理器为静态内容设置Cache-Control:max-age.

还能够在web.config文件里应用该设置.以下所示:

<configuration>

…………..

<system.webServer>

……………………..

<staticContent>

 <clientCache cacheControlMode=”UseMaxAge” cacheControlMaxAge= ‘365.00 :00 :00 ’ > 

</staticContent>

</system.webServer>

</configuration>

 

前面的<staticContent>节名字暗示这种方式只针对静态内容。对于动态内容，须要设置客户端缓存过时时间，能够在aspx文件中设置。

<%@ Page ……%>

<%@ OutputCache Duration=”86400” Location=”Client” VaryByParam=”None”%>

该指令告诉运行时生成的HTTP头，让浏览器缓存该内容1天（86400秒）。

 

第四：减小ViewState的大小。

有些控件，好比GridView,会很容易地产生数K字节的ViewState.由于浏览器会将ViewState做为HTTP POST的一部分发送回服务器，因此若是它大，会对页面的加载时间有不利的影响。因此应该关闭ViewState,代码以下

<%@ Page Title="" Language="C#" EnableViewState="false" AutoEventWireup="true" CodeBehind="View.aspx.cs" Inherits=" View" %>

 

 

第五：压缩组件

经过减少HTTP响应的大小来减小响应时间。若是HTTP请求产生的响应包很小，传输时间就会减小，由于只须要将很小的包从服务器传递到客户端。这一效果对速度较慢的带宽尤为明显。最主要的方式是经过gzip编码来压缩HTTP响应包，并由此减小网络响应时间。这是减少页面大小的最简单的技术，但影响是最大的。还有不少方式能够减少HTML文档的页面大小（例如删除注释和额外的空格，移除没有使用的CSS，移除没有使用的JAVASCRIPT,检查并移除冗余标签，移除没有内容的标签，移除<meta refresh>标签：页面自动刷新乍一看有时很动人，可是考虑到这样的状况，用户离开了电脑，或者正在看浏览器的另一个选项卡，那么这只会浪费客户端和服务器的资源）。

Web客户端能够经过HTTP请求中的Accept-Encoding头来标示对压缩的支持。

Accept-Encoding:gzip,deflate

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

Content-Encoding:gzip

Gzip是目前最流行和有效地压缩方法，你能看到的另外一种压缩方式为deflate,可是效果不如gzip,而且也不太流行，支持deflate的浏览器也支持gzip,可是不少浏览器支持gzip却不支持deflate,所以gzip是最理想的压缩方法。不少网站会压缩其HTML文档，压缩脚本和CSS样式表也是很重要的，图片不该该压缩，由于能够在上传时进行压缩，试图对它们进行压缩

只会浪费CPU资源。固然压缩也是有成本的，服务端会额外花费CPU周期来完成压缩，客户端须要对压缩文件进行解压缩。要检测收益是否大于开销，须要考虑响应的大小，连接的带宽和客户端与服务器之间的Internet距离，这些信息是很可贵到的，根据经验一般对于大于1KB或2KB的文件进行压缩。

能够在IIS中配置文件的压缩，具体步骤能够参考微软的MSDN

http://msdn.microsoft.com/zh-cn/ff695514.aspx

 

压缩分为静态压缩和动态压缩，我建议在这里启用静态压缩，而不要启用动态压缩。对于一个活跃的网站，启用压缩一般会增长大概3%~5%的CUP使用率。对于大多数网站，这种取舍一般是值得的。

这里须要考虑代理缓存的状况，有兴趣的同窗能够查一下资料。

第六：将样式表放在顶部（使用Link标签将样式表放在HEAD标签中）

咱们但愿浏览器可以尽快显示内容，这对于有不少内容的页面以及Internet连接很慢的用户来讲很重要。将样式表放在文档底部会致使在浏览器中阻止内容逐步呈现。该规则对于加载页面所须要的时间没有什么太大的影响。在浏览器和用户等待位于底部的样式表时，浏览器会延迟显示任何的可视化的内容，咱们称之为”白屏”

你们能够本身测试一下。

为了不白屏，请将样式表放在文档顶部的Head中。在Head中导入外部样式可使用Link,和@import，我更喜欢使用Link，由于性能要好一些，而且@import有时候可能会致使白屏的出现，甚至放在文档的Head标签中。

 

第七：将脚本放在底部

在使用样式表时，页面逐步呈现会被阻止，直到全部的样式表下载完成。这就是最好将样式表移到文档的HEAD的缘由，这样就能首先下载它们而不会阻止页面呈现。使用脚本时，对于全部位于脚本如下的内容，逐步呈现都被阻塞了。将脚本放在页面越靠下的地方，意味着越多的内容可以逐步呈现。

并行下载组件的优势是很明显的。然而在下载脚本文件时并行下载其实是被禁用的，其中的一个缘由是，脚本可能使用了document.write来修改页面内容，所以浏览器会等待，以确保可以恰当的布局。

另一个缘由是为了保证脚本可以按照正确的顺序执行。因此脚本会阻塞对其后面内容的呈现。若是将脚本放在页面顶部，页面中的全部的内容都位于脚本以后，整个页面的呈现和下载都会被阻塞，直到脚本加载完毕。因为整个页面的呈现被阻塞了，所以也会出现白屏的现象。

 

第八：使用外部的CSS和Javascript

 

使用外部的CSS和Javascript的缘由是这些文件有机会被浏览器缓存起来。

若是你的网站中的每一个页面都使用了相同的CSS和Javascript，使用外部文件能够提升这些组件的重用率。在这些状况下使用外部文件更加具备优点，由于当用户在页面间导航时，Javascript和CSS组件已经位于浏览器的缓存中了。相反的状况时，若是没有任何两个页面共享相同的JAVASCRIPT和CSS，重用率就会下降。固然解决这个问题，没有什么好的办法，我认为能够采用一个折中的办法，就是将你网站的页面划分红几种页面类型，而后为每种类型建立单独的脚本和样式表，这样的话对于给定的任意界面都只须要下载不多的多余的CSS和JAVASCRIPT文件。固然，你的CSS和JAVASCRIPT有很高的重用度，则部署在外部文件中更有优点，可是若是重用度很低，仍是内联更有意义一些。

 

第九：减小DNS的查找

Internet是经过IP地址来查找服务器的，因为IP地址比较难记，一般使用包含主机名的URL来代替（域名），可是当浏览器发出请求时，IP地址仍然是必须的，这就须要DNS将主机名称映射到IP地址上，你在浏览器上键入 :www.baidu.com时，链接到浏览器的DNS解析器会返回服务器的IP地址。DNS也是有开销的，一般状况下浏览器查找一个给定的主机名的IP地址须要花费20~120毫秒，在DNS查找完成以前，浏览器是不能从主机名那里下载到任何东西的。响应的时间依赖于DNS解析器，它所承担的请求的压力，你与它之间的距离和你的带宽。固然DNS也是能够被缓存起来的，可是浏览器对缓存的DNS记录的数量也有限制，而无论缓存记录的时间。若是用户在短期内访问了不少具备不一样域名的网站，较早的DNS记录将被丢弃，必须从新查找该域名。

减小DNS查找，个人建议是将CSS,图片，脚本等这些组件分别放在至少2个，但不要超过4个主机域名下。这是在减小DNS查找和容许高度并行下载之间作出的很好的权衡。

 

第十：精简JavaScript

精简是从代码中移除没必要要的字符以减少其大小，进而改善加载时间，在代码被精简之后，全部的注释以及没必要要的空白字符（空格，换行等）都被移除。对于Javascript而言，这能够改善响应时间效率，由于须要下载的文件大小减少了。说到精简，简单提一下混淆。

混淆是能够应用在源码上的另一种优化方式，和精简同样，它也会移除注释空白，同时它还会改写代码。做为改写的一部分，函数和变量的名字将被变的更短，可是也更难阅读。一般这样作的目的主要是为了增长对代码进行反向工程的难度。固然对提升性能也有帮助，由于这比精简更能减少代码的大小。缺点就是，更加复杂，并且很难阅读与调试。

精简JavaScript代码的工具可使用JSMin.

咱们在前面说过，能够对Javascript外部文件使用gzip来完成压缩，当前gzip压缩比精简更能减小文件的大小，那么若是已经启用了压缩，是否还要在进行精简呢？

是有必要的，由于gzip虽然压缩产生的影响更大，可是精简可以进一步的减少文件的大小。

精简CSS可以带来的节省要小于精简JAVASCRIPT，由于CSS中的空白和注释通常状况下要比JAVASCRIPT的少，因此CSS主要是合并相同的类，移除不用的类等。

 

十一：移除重复的脚本

重复脚本损伤性能的方式主要有两种状况，没必要要的HTTP请求和执行JavaScript所浪费的时间。这种错误看似简单可是倒是常常发生的，例如在母版页中引用了一个脚本文件，在具体的内容页面中又引用了一次。有可能有人认为，如今脚本文件已经被缓存了，不会再发新的请求了，可是若是单击浏览器的刷新按钮时，仍是会产生两个HTTP请求（这种状况存在IE中）。同时，对脚本进行屡次求值也会浪费时间。

 

十二：注意图片的优化

 

1：减小页面上的图片的数量

图片一般比HTML占用更多的网站带宽，因此图片优化的第一步应该是考虑一下是否须要页面上全部的图片。

2：可使用CSS来代替翻转图片的效果。

3：优化背景图片

优化背景图片，必定要利用浏览器能够经过平铺重复单个图片的功能。例如将图片是1像素宽的渐变图片平铺。

4：选择正确的图片格式

5：压缩缩小图片尺寸。

6：使用图片切片

7：若是您的网站存在大量的图片读写操做，我建议您使用图片服务器