Web前端经常使用调优

时间 2019-12-07 标签 web 前端经常使用

1、减小HTTP请求javascript

图片地图：css

假设导航栏上有五幅图片，点击每张图片都会进入一个连接，这样五张导航的图片在加载时会产生5个HTTP请求。然而，使用一个图片地图能够提升效率，这样就只须要一个HTTP请求。html

服务器端图片地图：将全部点击提交到同一个url，同时提交用户点击的x、y坐标，服务器端根据坐标映射响应前端

客户端图片地图：直接将点击映射到操做java

<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>

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

CSS Spriteslinux

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

<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还有可能下降下载量，可能你们会认为合并后的图片会比分离图片的总和要大，由于还有可能会附加空白区域。实际上，合并后的图片会比分离的图片总和要小，由于它下降了图片自身的开销，譬如颜色表、格式信息等。chrome

字体图标express

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

合并脚本和样式表

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

然而合并全部文件对许多人尤为是编写模块化代码的人来讲是不能忍的，并且合并全部的样式文件或者脚本文件可能会致使在一个页面加载时加载了多于本身所须要的样式或者脚本，对于只访问该网站一个（或几个）页面的人来讲反而增长了下载量，因此你们应该本身权衡利弊。

2、使用CDN

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

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

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

CDN的缺点：

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

二、若是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头

4、压缩组件

从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

5、将样式表放在头部

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

咱们老是但愿页面可以尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来讲是很重要的。

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

6、将脚本放在底部

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

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

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

7、避免CSS表达式

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

p {
    width: expression(func(),document.body.clientWidth > 400 ? "400px" : "auto");
    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() {
        n++;
        // alert();
        console.log(n);
    }
</script>

鼠标移动了几回，函数的运行次数垂手可得的达到了几千次，危险性显而易见。

如何解决：

一次性表达式：

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事件处理机制来动态改变元素的样式，使函数运行次数在可控范围以内。

8、使用外部的JavaScript和CSS

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

影响因素：

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

二、若是你的网站不一样的页面之间使用的组件大体相同，那么使用外部文件能够提升这些组件的重用率。

加载后下载

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

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中是一个比较好的解决方式。

9、减小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查找的同时也容许高度并行下载。

10、精简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，合并能够合并的样式。另外，在精简的时候其实样式最后一行的'；'也是能够省略的。

11、避免重定向

什么是重定向？

重定向用于将用户从一个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和重定向。

重定向的应用场景

1. 跟踪内部流量

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

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

2. 跟踪出站流量

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

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

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

12、删除重复脚本

在团队开发一个项目时，因为不一样开发者之间均可能会向页面中添加页面或组件，所以可能相同的脚本会被添加屡次。

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

如何避免重复脚本呢？

1. 造成良好的脚本组织。重复脚本有可能出如今不一样的脚本包含同一段脚本的状况，有些是必要的，但有些却不是必要的，因此须要对脚本进行一个良好的组织。

2. 实现脚本管理器模块。

例如：

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会检查脚本并返回追加了对应版本号的文件名，这样若是脚本的版本变化了，那么之前浏览器缓存的就会失效。

十3、配置ETag

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

什么是ETag？

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

条件GET请求

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

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

ETag（实体标签）；