（因產(chǎn)品對(duì)新版本需求，時(shí)間較趕，這兩天抽空對(duì)以下問(wèn)題解決方案補(bǔ)充完整）

具體匯總：

注:主要適配IOS和服務(wù)端的一些配置優(yōu)化蝗锥，吐槽下IOS的坑太多！率触！
針對(duì)所有：
1终议、首屏加載過(guò)慢的白屏優(yōu)化
2、圖片加載過(guò)慢優(yōu)化
3葱蝗、vue開啟history模式穴张，服務(wù)端配置解決
IOS端：
4、IOS端滑動(dòng)卡幀式體驗(yàn)優(yōu)化
5垒玲、IOS端fixed的應(yīng)用導(dǎo)致多處按鈕頁(yè)面抖動(dòng)解決
6陆馁、IOS端穿透問(wèn)題（暫未解決）優(yōu)化
7找颓、IOS10+以上head中加入限制仍然可以縮放問(wèn)題解決
8合愈、IOS端突然性的不可滑動(dòng)問(wèn)題解決（IOS原生開發(fā)人員配合）
9、IOS端部分情況下上拉會(huì)拉出一塊白色區(qū)塊击狮，整體展示區(qū)塊變小解決（IOS原生開發(fā)人員配合）
10佛析、IOS端鍵盤彈起導(dǎo)致布局整體上移問(wèn)題解決

開發(fā)環(huán)境

vue腳手架版本：vue-cli 3.x
vue版本：3.1.3
編譯器：VScode

服務(wù)器

Nginx代理

1、首屏加載過(guò)慢的白屏優(yōu)化

1）開啟Nginx中的Gzip
在nginx.conf文件中

http{
  //......其它配置
  gzip on;
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  #gzip_http_version 1.0;
  gzip_comp_level 2;
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpg image/jpeg image/gif image/png;
  gzip_vary off;
  gzip_disable "MSIE [1-6]\.";
  //......其它配置
}

注意：
a彪蓬、首先要知道他是對(duì)資源的壓縮（js,css,jpg...）
b寸莫、注意的是gzip_types，這里配置進(jìn)入你所需要文件壓縮傳遞數(shù)據(jù)類型
c档冬、測(cè)試成功與否方式：

$ curl -I -H "Accept-Encoding: gzip, deflate" "http://localhost:8080/antd.dll.js"
//注意是自己的公網(wǎng)IP或者域名+對(duì)應(yīng)的資源文件名

2）使用CDN的方式：
a膘茎、部分使用CDN，減少壓縮包體積：
如果因?yàn)橘Y源有限酷誓，那么就使用一些較為正式的官方CDN（vue,vuex,vue-router,axios）
搜索方式：https://www.bootcdn.cn/
具體配置（vue-cli3.x）：
index.html頭部引入披坏，注意順序。
vue.config.js配置：

module.exports = {
    //...其它配置
    configureWebpack: config => {
         config.externals = {
             'vue': 'Vue',
             'vue-router': 'VueRouter',
             'vuex': 'Vuex',
             'axios': 'axios',
              //...
         }
    }
};

b盐数、全部采用CDN棒拂，需要對(duì)象OSS服務(wù)器（此處是后臺(tái)人員幫我申請(qǐng)，具體操作就不說(shuō)了玫氢，可自行百度谷歌）
OK帚屉，我所做的事情是：
在vue.config.js中配置：

module.exports = {
    baseUrl: '',//填入CDN的網(wǎng)址，打包后JS,CSS資源引入前綴會(huì)自動(dòng)加上
};

然后將Index.html丟到服務(wù)器上

2漾峡、圖片加載過(guò)慢優(yōu)化

1）圖片大小控制和優(yōu)化
因?yàn)樽龅氖且粋€(gè)需求多圖展現(xiàn)并讓用戶自定義上傳圖片的APP攻旦，所以為了更好的控制和限制，我們準(zhǔn)備引入了截圖+壓縮的功能生逸。
截圖：引用了現(xiàn)有的插件vue-cropper（這塊后來(lái)非我處理牢屋，時(shí)間較趕就沒(méi)去看看使用方式掰邢，只不過(guò)較為簡(jiǎn)單，可以參考作者的npm文檔調(diào)用）
壓縮：采用較為簡(jiǎn)單的壓縮方式伟阔，有點(diǎn)瑕疵在優(yōu)化辣之，就不提供這邊瑕疵的方式了（我們可能把壓縮的工作交給后臺(tái)）

2）利用CDN方式處理圖片獲取
（和上面的靜態(tài)資源上傳雷同）
3）視覺(jué)優(yōu)化：
a、首先給予圖片一個(gè)外殼皱炉，不要讓圖片未加載的時(shí)候?qū)е马?yè)面變形怀估，造成重排問(wèn)題
b、對(duì)未加載的成功的圖片附上加載失敗的圖片合搅，因?yàn)槲覀兇蟛糠植捎昧薭ackground-image的方式展現(xiàn)圖片所以使用了vue的自定義指定方式

Vue.directive('checkimg', {
    bind(el, binding) {
        var imgUrl = el.style.backgroundImage.match(/https\S+\.(png|jpg|jpeg|svg)/g)[0];
        var img = new Image();
        img.src = imgUrl;
        img.onload = function () {
        }
        img.onerror = function () {
            el.style.backgroundImage = "url('')" //寫入加載失敗使用的圖片
          }
        }
})

直接在引入的地方寫入v-checkimg就行
4）懶加載處理
（此處暫未加入多搀，準(zhǔn)備加入中，后續(xù)補(bǔ)充）也可以使用現(xiàn)有的插件 vue-lazy啥來(lái)著的我一下子記不清了

3灾部、vue開啟history模式康铭，服務(wù)端配置解決

此處新開一篇文章做詳細(xì)操作教程

4、IOS端滑動(dòng)卡幀式體驗(yàn)優(yōu)化（非通用赌髓，個(gè)人問(wèn)題）

問(wèn)題現(xiàn)象：
滑動(dòng)時(shí)候會(huì)出現(xiàn)卡幀一樣的滑動(dòng)感覺(jué)从藤，體驗(yàn)賊差
解決方式：
此處導(dǎo)致該問(wèn)題出現(xiàn)會(huì)有很多，在我所優(yōu)化的項(xiàng)目中是因?yàn)樵谝粋€(gè).vue頁(yè)面中為了讓body可以滑動(dòng)锁蠕，寫該頁(yè)面的同伴在mounted中改變了Body的style的樣式但是未在頁(yè)面destroyed（銷毀）時(shí)候?qū)⑵涓幕貋?lái)夷野，導(dǎo)致了所有.vue頁(yè)面都存在了該樣式。

具體原因也很好理解荣倾，主要是因?yàn)镾PA的模式下就一個(gè)index頁(yè)面悯搔，你改動(dòng)了.vue頁(yè)面，其實(shí)就是對(duì)整個(gè)index頁(yè)面造成了改動(dòng)舌仍，又不將其銷毀改回來(lái)妒貌，那么整個(gè)樣式就將會(huì)一直存在。
注意：
此處不算IOS的坑铸豁，而是VUE中會(huì)遇到的坑

5灌曙、IOS端fixed的應(yīng)用導(dǎo)致多處按鈕頁(yè)面抖動(dòng)解決

問(wèn)題現(xiàn)象：
fixed的應(yīng)用導(dǎo)致多處按鈕頁(yè)面抖動(dòng)解決

解決方式：
說(shuō)實(shí)話fixed在IOS中真的是太坑了，最好就是別用推姻。
如果確實(shí)需要平匈，那么簡(jiǎn)單的解決方式將是對(duì)整個(gè)頁(yè)面固定定位（fixed），再將你要懸浮的按鈕等等東西使用絕對(duì)定位（absolute）確定位置藏古，這樣將可以實(shí)現(xiàn)你需要的效果

<div style="position:fixed">
  <button style="position:absolute"></button>
</div>

注意：
兩者是父子關(guān)系增炭，至于整體布局將怎么做是你額外需要考慮的事情。

劃重點(diǎn)拧晕！劃重點(diǎn)隙姿！

另外還得注意的是你將通過(guò)router-view展現(xiàn)的整個(gè).vue頁(yè)面設(shè)置fixed也有可能會(huì)遇到 因?yàn)镮OS穿透問(wèn)題導(dǎo)致 放置router-view的頁(yè)面移動(dòng)并且造成你展現(xiàn)的這個(gè)頁(yè)面發(fā)生抖動(dòng)，我的解決方式不是將根源的穿透問(wèn)題解決厂捞，而是一樣使用了絕對(duì)定位输玷，但是最外層（放置router-view的頁(yè)面队丝，此頁(yè)面不會(huì)出現(xiàn)該問(wèn)題）設(shè)置固定定位

6、IOS端穿透問(wèn)題優(yōu)化（暫未解決）

問(wèn)題現(xiàn)象：
因?yàn)榇┩竼?wèn)題欲鹏，你跳轉(zhuǎn)子頁(yè)面的時(shí)候會(huì)導(dǎo)致后面的頁(yè)面出現(xiàn)滑動(dòng)現(xiàn)象机久。

解決方式：
上面也有提到，暫時(shí)未能解決該問(wèn)題赔嚎，查詢了較多的方式也無(wú)法解決膘盖，只能先做簡(jiǎn)單的優(yōu)化在跳轉(zhuǎn)時(shí)候把滑動(dòng)到的位置保留，回來(lái)時(shí)候再次回到該位置

注意：
如果可以的話尤误，希望成功處理該問(wèn)題的大佬們幫助下侠畔！謝謝！

7损晤、IOS10+以上head中加入限制仍然可以縮放問(wèn)題解決

問(wèn)題現(xiàn)象：
遇到的主要問(wèn)題就是雙指觸碰會(huì)放大縮小

解決方式：
這個(gè)是IOS為了讓safari體驗(yàn)更好造成的原因软棺，

document.body.addEventListener('touchstart', function (event) {
      if (event.touches.length > 1) {
        event.preventDefault();
      }
    }, false);

雙擊屏幕放大其實(shí)一般不會(huì)，只要在頭部正常設(shè)置meta中的viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0" minimum-scale="1.0" ,maximum-scale="1.0" ,user-scalable="no">

8尤勋、IOS端突然性的不可滑動(dòng)問(wèn)題解決（IOS原生開發(fā)人員配合）

問(wèn)題現(xiàn)象：
這個(gè)問(wèn)題主要是在滑動(dòng)時(shí)候突然不滑動(dòng)喘落，造成的原因我個(gè)人認(rèn)為是IOS中safari什么橡皮筋模式造成
通過(guò)調(diào)試發(fā)現(xiàn)，在滑動(dòng)時(shí)候突然性不能滑動(dòng)是因?yàn)槲覀冞@個(gè)時(shí)候選中了整個(gè)Body造成了整個(gè)body的被移動(dòng)斥黑，說(shuō)的更大點(diǎn)我覺(jué)得是我們整個(gè)html被拖動(dòng)了揖盘，而沒(méi)有觸發(fā)或進(jìn)入我們本身Body中的事件中

解決方式：
是App開發(fā)人員那邊對(duì)safari橡皮筋模式進(jìn)行了限制眉厨，取消該效果

注意：
（原生代碼處理方式不提供锌奴，可自行百度谷歌，咳咳憾股，因?yàn)槲乙膊恢溃?/p>

9鹿蜀、IOS端部分情況下上拉會(huì)拉出一塊白色區(qū)塊，整體展示區(qū)塊變小解決（IOS原生開發(fā)人員配合）

問(wèn)題現(xiàn)象：
有時(shí)候我們?cè)诨瑒?dòng)的時(shí)候會(huì)導(dǎo)致整個(gè)區(qū)塊上移服球，下面出現(xiàn)白色塊

解決方式：
其實(shí)是因?yàn)镮OS給我展現(xiàn)頁(yè)面的時(shí)候隱藏底部的導(dǎo)航條后并未正確處理造成茴恰，如果遇到該問(wèn)題和IOS開發(fā)人員提一下就知道了。唯一注意的是蘋果max機(jī)型最下面消除的操作方式有點(diǎn)額外的代碼斩熊，我們IOS開發(fā)人員之前也沒(méi)注意到往枣，測(cè)試時(shí)候才發(fā)現(xiàn)。
注意：
（原生代碼處理方式不提供粉渠，可自行百度谷歌分冈，咳咳，因?yàn)槲乙膊恢溃?/p>

10霸株、IOS端鍵盤彈起導(dǎo)致布局整體上移問(wèn)題解決

問(wèn)題現(xiàn)象：
當(dāng)你點(diǎn)擊輸入框彈出鍵盤的時(shí)候會(huì)造成整個(gè)布局上移雕沉，整個(gè)和第九個(gè)上移不同，它不會(huì)讓布局錯(cuò)亂去件，但是就是整個(gè)Body上移坡椒，你的所有事件全部要向上移動(dòng)一部分距離扰路，簡(jiǎn)單的說(shuō)就是你看到那個(gè)按鈕在那里可就是點(diǎn)不了（和抓魚一樣。倔叼。汗唱。）

解決方式：
造成該問(wèn)題的原因是因?yàn)殒I盤的出現(xiàn)導(dǎo)致了整個(gè)scrollY上移了一整個(gè)鍵盤大小的位置，我們只需要在鍵盤收起的時(shí)候置回0.

windows.scroll(0,0);

注意：
可能遇見(jiàn)的是不知道怎么判斷鍵盤收起丈攒，我暫時(shí)沒(méi)有一個(gè)較為準(zhǔn)確的判斷渡嚣，但是我對(duì)整個(gè)頁(yè)面點(diǎn)擊時(shí)候觸發(fā)一次，輸入框change時(shí)候觸發(fā)一次
如果有較好的方式希望提出肥印！謝謝识椰！