网络优化方案

1.合并资源文件，减少HTTP请求

浏览器并发的HTTP请求是由数量限制的（比如桌面浏览器并发请求可能是8个，手机浏览器是6个），如果一下子并发的几十个请求那么会有很多请求会停下来等，等前面的请求好了下一个再进去，这样就延长了整个页面的加载时间

2.压缩资源文件减小请求大小

文件大小越小当然加载速度就越快。 可对代码进行压缩，去掉空格、注释、变量替换，在传输时，使用gzip等压缩方式也可以降低资源文件的大小。

3.利用缓存机制，尽可能使用缓存减少请求

浏览器是有缓存机制的，在返回资源的时候设置一个cache-control设置过期时间，在过期时间内浏览器会默认使用本地缓存。

但缓存机制也存在一定的问题，因为网站开发是阶段性的，隔一段时间会发布一个新的版本。因为HTTP请求是根据url来定位的，如果资源文件名的url没有发生更改那么浏览器还是会使用缓存，这个时候怎么办那？ 这时就需要一个缓存更新机制来让修改过的文件具有一个新的名字。 最简单的方法就是在url后加一个时间戳，但是这会导致只要有新的版本发布就会重新获取所有的新资源。 一个现代流行的方法就是根据文件计算一个hash值，这个hash值是根据文件的更新变化而变化的。 当浏览器获取文件时如果这个文件名有更新那么就会请求新的文件。

4.DNS预解析

现代浏览器在 DNS Prefetch 上做了两项工作：

  1. html 源码下载完成后，会解析页面的包含链接的标签，提前查询对应的域名
  2. 对于访问过的页面，浏览器会记录一份域名列表，当再次打开时，会在 html 下载的同时去解析 DNS

自动解析 浏览器使用超链接的href属性来查找要预解析的主机名。当遇到a标签，浏览器会自动将href中的域名解析为IP地址，这个解析过程是与用户浏览网页并行处理的。但是为了确保安全性，在HTTPS页面中不会自动解析

手动解析

预解析某域名
<link rel="dns-prefetch" href="//img.alicdn.com">

强制开启HTTPS下的DNS预解析
<meta http-equiv="x-dns-prefetch-control" content="on">

5.CDN加速

CDN 的原理是尽可能的在各个地方分布机房缓存数据。

因此，我们可以将静态资源尽量使用 CDN 加载，由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。并且对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie，平白消耗流量。

6.预加载

  1. 在开发中，可能会遇到这样的情况。有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载。

  2. 预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使用以下代码开启预加载。

  3. 预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好。

// 1.使用HTML标签
<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>

// 2.使用Image对象
<script src="./myPreload.js"></script>

//myPreload.js文件
var image= new Image()
image.src="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"

// 3.使用XMLHttpRequest对象,虽然存在跨域问题，但会精细控制预加载过程
    var xmlhttprequest=new XMLHttpRequest();
    xmlhttprequest.onreadystatechange=callback;
    xmlhttprequest.onprogress=progressCallback;
    xmlhttprequest.open("GET","http://image.baidu.com/mouse,jpg",true);
    xmlhttprequest.send();
    function callback(){
      if(xmlhttprequest.readyState==4&& xmlhttprequest.status==200){
        var responseText=xmlhttprequest.responseText;
      }else{
         console.log("Request was unsuccessful:"+xmlhttprequest.status);
      }
    }
    function progressCallback(e){
        e=e || event;
        if(e.lengthComputable){
            console.log("Received"+e.loaded+"of"+e.total+"bytes")
        }
    }

使用预渲染后，只需加载index.html和app.css即可看到页面的部分形式。 预渲染的最佳时间莫过于预渲染骨架屏了。静态的骨架屏预渲染后保存在本地，基本永久使用，只要骨架屏返回并渲染了，用户是看不到白屏的(诸如以上只有topNav的那种)，而骨架屏作为布局简单，样式普通的一个小组件，构建后返回的html在浏览器渲染当然速度也是极快的，用户体验++

7.图片优化

  1. 不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。
  2. 对于移动端按理说，图片不需要加载原图，可请求裁剪好的图片
  3. 小图使用base64格式
  4. 将多个图标文件整合到一张图中（雪碧图）
  5. 采用正确的图片格式
    • 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好
    • 色彩很多的使用 JPEG
    • 色彩种类少的使用 PNG，有的可用SVG代替

8.预渲染

[!NOTE] 预渲染：构建阶段生成匹配预渲染路径的 html 文件（注意：每个需要预渲染的路由都有一个对应的 html）。构建出来的 html 文件已有部分内容。

非预渲染需要加载到1(index.html)，2（app.css），3(manifest.js)，4(vender.js)，用户才能看到页面

js 1 index.html 2 app.css 样式 3 manifest.js webpack manifest 4 vender.js 第三方库 5 app.js 业务逻辑 6 0.js 路由分包文件

results matching ""

    No results matching ""