整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
于網(wǎng)站不收錄，需要分情況討論，
比如：新站點(diǎn)不收錄、產(chǎn)品或者案例頁(yè)面不收錄、新發(fā)文章不收錄、欄目頁(yè)面不收錄、聚合頁(yè)面不收錄、當(dāng)天不收錄、一周或者一個(gè)月不收錄、網(wǎng)站被K、降權(quán)后恢復(fù)不收錄等。。。。。
不同的情況需要不同的方法去應(yīng)對(duì)。
今天科牛就結(jié)合自己的經(jīng)驗(yàn)，分享下我處理這些問(wèn)題的心得。
一、新站點(diǎn)，一個(gè)月了還沒(méi)有收錄
首先需要排除服務(wù)器訪問(wèn)慢、被人攻擊的情況，其次排除網(wǎng)站上有灰色、違規(guī)內(nèi)容，再者排除網(wǎng)站源代碼DIV+CSS的問(wèn)題。
以上都沒(méi)問(wèn)題，那么就去發(fā)外鏈，最簡(jiǎn)單的，百度搜“超級(jí)外鏈工具”，這個(gè)是免費(fèi)的。
如果覺(jué)得免費(fèi)的不夠，可以購(gòu)買付費(fèi)外鏈，幾十塊錢幾百條。
然后再去換友鏈，一般情況下，你一個(gè)新站點(diǎn)，沒(méi)收錄沒(méi)排名是很難換到高質(zhì)量的友鏈的，此時(shí)，可以去添加一些友鏈交換的qq群，在群里找個(gè)大哥，給人發(fā)個(gè)紅包，讓人幫你掛幾天。
當(dāng)然，也可以直接去百度搜索跟你同類型的網(wǎng)站，聯(lián)系對(duì)方站長(zhǎng)，談好價(jià)格直接付費(fèi)購(gòu)買，這種方法雖然笨一點(diǎn)，但交換來(lái)的友情鏈接質(zhì)量一般比較高，因?yàn)槿思矣信琶。?/span>
如果以上工作都做了，最后還是沒(méi)有收錄，那么可以到百度站長(zhǎng)平臺(tái)提交反饋，請(qǐng)百度工作人員幫忙排查原因并放出首頁(yè)收錄。
目前，根據(jù)科牛平時(shí)給客戶搭建的新網(wǎng)站案例來(lái)看，正常情況，新站點(diǎn)的首頁(yè)收錄時(shí)間一般在兩周到一個(gè)月之間，如果超過(guò)一個(gè)月還沒(méi)有收錄，大概率是有問(wèn)題了，如果你的外鏈、友鏈都做了，文章每天也按時(shí)發(fā)布，那么基本上可以判斷網(wǎng)站服務(wù)器、網(wǎng)站內(nèi)容、源代碼這三項(xiàng)中，必定有一個(gè)出問(wèn)題了，這時(shí)就需要進(jìn)一步深入排查了！
二、企業(yè)站，已經(jīng)搭建了一段時(shí)間，首頁(yè)已收錄，但新發(fā)布的文章遲遲不收錄
首先排查原因：
網(wǎng)站是否有中途改版或更改首頁(yè)關(guān)鍵詞的情況，這一點(diǎn)是非常影響百度收錄的因素，盡量不要對(duì)網(wǎng)站進(jìn)行太大的改動(dòng)，關(guān)鍵詞等在建站之初就應(yīng)該確定好。
企業(yè)站，基本上都有一個(gè)通病，就是內(nèi)容一般都不持續(xù)更新或更新數(shù)量少，這也就導(dǎo)致百度抓取次數(shù)會(huì)比較低，抓取不及時(shí)就會(huì)導(dǎo)致收錄慢或不收錄。
且企業(yè)站存在嚴(yán)重的內(nèi)容同質(zhì)化問(wèn)題，很多站點(diǎn)都是采集復(fù)制的內(nèi)容，文章原創(chuàng)度差。
建議：
企業(yè)站或者中小站長(zhǎng)，首先要做到人工定時(shí)更新養(yǎng)站，比如日均5篇，內(nèi)容盡可能偽原創(chuàng)或原創(chuàng)，風(fēng)雨無(wú)阻，有能力的話保證每個(gè)頁(yè)面或欄目頁(yè)做到內(nèi)容更新，這樣即可提升網(wǎng)站抓取的次數(shù)以及提升收錄速度。
另外，一年以內(nèi)的新站點(diǎn)，在第3個(gè)月到第7個(gè)月之間的某一段時(shí)間里，網(wǎng)站會(huì)有一個(gè)秒收期，就是在這段時(shí)間內(nèi)，不論你的網(wǎng)站發(fā)布任何內(nèi)容都會(huì)秒收，這時(shí)，配合上權(quán)重操作，是上排名的黃金期！
過(guò)了這個(gè)黃金期之后，就會(huì)繼續(xù)出現(xiàn)不收錄的情況，原因是爬蟲低質(zhì)。
此時(shí)，還是老套路，花錢買外鏈、換友鏈，增加非首頁(yè)的頁(yè)面抓取頻次。
3個(gè)月后，如果發(fā)現(xiàn)網(wǎng)站還是老樣子，不要慌，先去看網(wǎng)站索引，只要索引一直增長(zhǎng)就沒(méi)問(wèn)題，因?yàn)樗饕蔷W(wǎng)站收錄的根本，只要索引不掉，即使收錄掉了，過(guò)幾天必定也會(huì)漲上來(lái)。
三、網(wǎng)站被降權(quán)、被K，內(nèi)容頁(yè)不收錄怎么辦？
網(wǎng)站被k或降權(quán)，首要需要找出降權(quán)的原因，且期間要保證網(wǎng)站能正常訪問(wèn)，保證網(wǎng)站正常更新，及時(shí)提交新增加的鏈接。
好好的站點(diǎn)被K被懲罰了，那肯定是自己的問(wèn)題，百度官方后臺(tái)是有記錄每一個(gè)站點(diǎn)是否懲罰過(guò)的，可以查看下具體是什么程度。
首頁(yè)K了的話，請(qǐng)繼續(xù)通過(guò)內(nèi)容頁(yè)面補(bǔ)救，時(shí)間會(huì)很長(zhǎng)；
欄目或頻道頁(yè)被K了的話，請(qǐng)開(kāi)設(shè)其它欄目或二級(jí)域名補(bǔ)救，時(shí)間特長(zhǎng)；
全站被K了的話，我建議你放棄，更換其它域名吧；
優(yōu)化網(wǎng)站還是要正規(guī)手法，不然代價(jià)都是很大的！
網(wǎng)站被K或者降權(quán)的恢復(fù)周期，一般1個(gè)月起步，3-6個(gè)月是正常情況！
四、網(wǎng)站新增加的聚合頁(yè)面不收錄、無(wú)排名
聚合頁(yè)想要有收錄和排名，最常見(jiàn)的是標(biāo)簽tag做法，通過(guò)標(biāo)簽的超鏈接來(lái)增加聚合頁(yè)面的權(quán)重。
分析過(guò)很多客戶的網(wǎng)站，科牛發(fā)現(xiàn)，tag頁(yè)的收錄和排名一般都是優(yōu)于文章頁(yè)的。
如果你的聚合頁(yè)面沒(méi)有收錄和排名，那么問(wèn)題可能在于：
1、標(biāo)題的寫法存在問(wèn)題
比如，tdk沒(méi)有設(shè)置好，標(biāo)題只有一個(gè)關(guān)鍵詞或者是幾個(gè)關(guān)鍵詞的堆疊，并沒(méi)有拓展及延伸其他的相關(guān)需求。
2、聚合頁(yè)面的內(nèi)容相關(guān)程度低，內(nèi)容質(zhì)量少
作為一個(gè)聚合頁(yè)面，一定是需要大量的文章內(nèi)容來(lái)支撐的，建議每個(gè)聚合頁(yè)面至少10條以上內(nèi)容，盡可能做到無(wú)空白頁(yè)面。
3、網(wǎng)站自身權(quán)重低
網(wǎng)站首頁(yè)都沒(méi)什么權(quán)重，次級(jí)的聚合頁(yè)面就更不用提了，建議適當(dāng)交換一些內(nèi)頁(yè)友情鏈接，最好是有相關(guān)性的，10個(gè)左右即可，不用太多！
五、企業(yè)站分類欄目排名的seo優(yōu)化方法
企業(yè)站的重心一般都會(huì)集中在產(chǎn)品列表頁(yè)面，但一般來(lái)說(shuō)，產(chǎn)品列表頁(yè)面想要獲取比較大的流量是很困難的，因此可以直接把產(chǎn)品頁(yè)面設(shè)置到首頁(yè)，因?yàn)槭醉?yè)的收錄會(huì)比欄目頁(yè)快很多，再配合上首頁(yè)的營(yíng)銷頁(yè)面，有助于更快的把產(chǎn)品關(guān)鍵詞排名上去，不過(guò)需要注意的是，首頁(yè)必須時(shí)刻保持更新！
以上，就是在日常工作中給客戶解決問(wèn)題時(shí)，科牛積累的一些經(jīng)驗(yàn)心得，希望能夠給廣大站長(zhǎng)或者seo從業(yè)人員一點(diǎn)幫助！
今天就來(lái)聊聊在為了您更好的體驗(yàn)，本文章聊聊如何僅支持谷歌瀏覽器訪問(wèn)查看頁(yè)面？這篇文章中提到的瀏覽器兼容問(wèn)題，以此篇文章來(lái)證明自己并非不了解瀏覽器兼容性問(wèn)題，而是當(dāng)時(shí)其他因素導(dǎo)致選擇了一刀切的方法來(lái)處理需求（我就是一個(gè)不粘鍋）。
嘿，xdm~既然點(diǎn)進(jìn)來(lái)了，不妨就繼續(xù)看下去吧^_^
所謂的瀏覽器兼容性問(wèn)題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況。
上面的定義就是大白話，我們來(lái)看看來(lái)自百度百科的權(quán)威解釋：瀏覽器兼容性問(wèn)題又被稱為網(wǎng)頁(yè)兼容性或網(wǎng)站兼容性問(wèn)題，指網(wǎng)頁(yè)在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁(yè)間的兼容問(wèn)題。在網(wǎng)站的設(shè)計(jì)和制作中，做好瀏覽器兼容，才能夠讓網(wǎng)站在不同的瀏覽器下都正常顯示。而對(duì)于瀏覽器軟件的開(kāi)發(fā)和設(shè)計(jì)，瀏覽器對(duì)標(biāo)準(zhǔn)的更好兼容能夠給用戶更好的使用體驗(yàn)。
造成瀏覽器兼容性問(wèn)題的根本原因就是各瀏覽器使用了不同的內(nèi)核，并且它們處理同一件事情的時(shí)候思路不同。
怎么理解上述文字？即：不同瀏覽器使用的內(nèi)核及所支持的HTML等網(wǎng)頁(yè)語(yǔ)言標(biāo)準(zhǔn)不同，以及用戶客戶端的環(huán)境不同（如分辨率不同）造成了顯示效果不能達(dá)到理想效果。
前端開(kāi)發(fā)經(jīng)常需要檢查瀏覽器的兼容性，這里推薦(Can I Use)這個(gè)查詢網(wǎng)站。它是一個(gè)針對(duì)前端開(kāi)發(fā)人員定制的一個(gè)查詢CSS、JS、HTML5、SVG在主流瀏覽器中特性和兼容性的網(wǎng)站，可以很好的保證網(wǎng)頁(yè)在瀏覽器中的兼容性。有了這個(gè)工具我們就可以快速地了解到代碼在各個(gè)瀏覽器中的兼容情況了，強(qiáng)烈推薦一波，大家趕緊去體驗(yàn)吧?！界面效果如下圖所示：
工具只能給我們顯示查詢的特性在不同瀏覽器上的兼容情況，至于如何解決兼容問(wèn)題還得看下述的解決辦法→
1、不同瀏覽器的標(biāo)簽?zāi)J(rèn)的內(nèi)外邊距不同
解決方案：*{margin: 0; padding: 0;}
其實(shí)清除瀏覽器自帶的默認(rèn)樣式，每個(gè)前端開(kāi)發(fā)者所用的方法大同小異，這里給出我選用的清除默認(rèn)樣式的重置樣式代碼：
/**
* 該文件用于清除瀏覽器樣式
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
padding:0;
margin:0;
border:0;
outline: 0;
font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
word-wrap:break-word;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
-webkit-tap-highlight-color:rgba(255,255,255,0);
}
ul, ol {
list-style-type: none;
}
textarea {
resize: none;
}
/*去除input button默認(rèn)樣式*/
input, button, textarea {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(255, 225, 225, 0);
padding: 0;
border: 0;
outline: 0;
}
// 修改placeholder屬性默認(rèn)文字顏色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
/* WebKit browsers */
color: #999;
}
input:-moz-placeholder, textarea:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #999;
}
input::-moz-placeholder, textarea::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #999;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #999;
}除了自己定義清除默認(rèn)樣式的代碼，也可選擇引用別人寫好的成熟插件Normalize.css來(lái)清除默認(rèn)樣式；
2、圖片加a標(biāo)簽在IE9中會(huì)有邊框
解決方案：img{border: none;}
3、IE6及更低版本浮動(dòng)元素，浮動(dòng)邊雙倍邊距
解決方案：不使用margin，使用padding
4、IE6及更低版本中，部分塊元素?fù)碛心J(rèn)高度
解決方案：給元素設(shè)置font-size: 0;
5、a標(biāo)簽藍(lán)色邊框
解決方案：a{outline: none;}
6、IE6不支持min-height屬性
解決方案：{min-height: 200px; _height: 350px;}
7、IE9以下瀏覽器不能使用opacity
解決方案：Firefox/Chrome/Safari/Opera瀏覽器使用opacity；IE瀏覽器使用filter
opacity: 0.7; /*FF chrome safari opera*/
filter: alpha(opacity:70); /*用了ie濾鏡,可以兼容ie*/8、IE6/7不支持display:inline-block
解決方案：{display: inline-block; *display: inline;}
9、cursor兼容問(wèn)題
解決方案：統(tǒng)一使用{cursor: pointer;}
10、IE6/7中img標(biāo)簽與文字放一起時(shí)，line-height失效的問(wèn)題
解決方案：文字和<img>都設(shè)置float
11、table寬度固定，td自動(dòng)換行
解決方案：table設(shè)置 {table-layout: fixed}，td設(shè)置 {word-wrap: break-word}
12、相鄰元素設(shè)置margin邊距時(shí)，margin將取最大值，舍棄小值
解決方案：不讓邊距重疊，可以給子元素加一個(gè)父元素，并設(shè)置該父元素設(shè)置：{overflow: hidden}
13、a標(biāo)簽css狀態(tài)的順序
解決方案：按照l(shuí)ink--visited--hover--active的順序編寫
14、IE6/7圖片下面有空隙的問(wèn)題
解決方案：img{display: block;}
15、ul標(biāo)簽在Firefox中默認(rèn)是有padding值的，而在IE中只有margin有值
解決方案：ul{margin: 0;padding: 0;}
16、IE中l(wèi)i指定高度后，出現(xiàn)排版錯(cuò)誤
解決方案：設(shè)置line-height
17、ul或li浮動(dòng)后，顯示在div外
解決方案：清除浮動(dòng)；須在ul標(biāo)簽后加<div style="clear:both"></div>來(lái)閉合外層div
18、ul設(shè)置float后，在IE中margin將變大
解決方案：ul{display: inline;}，li{list-style-position: outside;}
19、li中內(nèi)容超過(guò)長(zhǎng)度時(shí)，用省略號(hào)顯示
li{
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}20、div嵌套p時(shí)，出現(xiàn)空白行
解決方案：li{display: inline;}
21、IE6默認(rèn)div高度為一個(gè)字體顯示的高度
解決方案：{line-height: 1px;}或{overflow: hidden;}
22、在Chrome中字體不能小于10px
解決方案：p{font-size: 12px; transform: scale(0.8);}
23、谷歌瀏覽器上記住密碼后輸入框背景色為黃色
input{
background-color: transparent !important;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
-webkit-text-fill-color: #333 !important;
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
background-color: transparent !important;
background-image: none !important;
transition: background-color 5000s ease-in-out 0s;
}24、CSS3兼容前綴表示
寫法 | 內(nèi)核 | 瀏覽器 |
-webkit- | webkit渲染引擎 | chrome/safari |
-moz- | gecko渲染引擎 | Firefox |
-ms- | trident渲染引擎 | IE |
-o- | opeck渲染引擎 | Opera |
如：
.box{
height: 40px;
background-color: red;
color: #fff;
-webkit-border-radius: 5px; // chrome/safari
-moz-border-radius: 5px; // Firefox
-ms-border-radius: 5px; // IE
-o-border-radius: 5px; // Opera
border-radius: 5px;
}1、事件對(duì)象的兼容
e=ev || window.event
2、滾動(dòng)事件的兼容
scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
3、阻止冒泡的兼容
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble=true;
}4、阻止默認(rèn)行為的兼容
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue=false;
}5、添加事件監(jiān)聽(tīng)器的兼容
if (target.addEventListener) {
target.addEventListener("click", fun, false);
} else {
target.attachEvent("onclick", fun);
}6、ajax創(chuàng)建對(duì)象的兼容
var xhr=null；
if (window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else {
xhr=new ActiveXObject("Microsoft XMLHTTP");
} 7、鼠標(biāo)按鍵編碼的兼容
function mouse (ev) {
var e=ev || window.event;
if (evt) {
return e.button;
} else if (window.event) {
switch (e.button) {
case 1: return 0;
case 4: return 1;
case 2: return 2;
}
}
}8、在IE中，event對(duì)象有x，y屬性，F(xiàn)irefox中與event.x等效的是event.pageX，而event.pageX在IE中又沒(méi)有
x=event.x ? event.x : event.pageX;
9、在IE下，event對(duì)象有srcElement屬性，但是沒(méi)有target屬性；Firefox下，event對(duì)象有target屬性，但是沒(méi)有srcElement屬性
var source=ev.target || ev.srcElement;
var target=ev.relatedTarget || ev.toElement;10、在Firefox下需要用CSS禁止選取網(wǎng)頁(yè)內(nèi)容，在IE用JS禁止
-moz-user-select: none; // Firefox
obj.onselectstart=function() {return false;} // IE11、innerText在IE中能正常工作，但在FireFox中卻不行
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('element').innerText="IE";
} else {
document.getElementById('element').textContent="Firefox";
}12、在Firefox下，可以使用const關(guān)鍵字或var關(guān)鍵字來(lái)定義常量；在IE下，只能使用var關(guān)鍵字來(lái)定義常量
解決方案：統(tǒng)一使用var關(guān)鍵字來(lái)定義常量
1、禁止iOS識(shí)別長(zhǎng)串?dāng)?shù)字為電話
解決方案：<meta content="telephone=no" name="format-detection" />
2、禁止iOS彈出各種操作窗口
解決方案：-webkit-touch-callout:none
3、禁止Android手機(jī)識(shí)別郵箱
解決方案：<meta content="email=no" name="format-detection" />
4、禁止iOS和Android用戶選中文字
解決方案：-webkit-user-select:none
5、iOS下取消input在輸入的時(shí)候英文首字母的默認(rèn)大寫
解決方案：<input autocapitalize="off" autocorrect="off" />
6、Android下取消輸入語(yǔ)音按鈕
解決方案：input::-webkit-input-speech-button {display: none}
7、在移動(dòng)端修改難看的點(diǎn)擊的高亮效果，iOS和安卓下都有效
解決方案：* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
8、iOS下input為type=button屬性disabled設(shè)置true，會(huì)出現(xiàn)樣式文字和背景異常問(wèn)題
解決方案：使用opacity=1;
9、input為fixed定位，在iOS下input固定定位在頂部或者底部，在頁(yè)面滾動(dòng)一些距離后，點(diǎn)擊input(彈出鍵盤)，input位置會(huì)出現(xiàn)在中間位置
解決方案：內(nèi)容列表框也是fixed定位，這樣不會(huì)出現(xiàn)fixed錯(cuò)位的問(wèn)題
10、移動(dòng)端字體小于12px使用四周邊框或者背景色塊，部分安卓文字偏上bug問(wèn)題
解決方案：可以使用整體放大1倍(width、height、font-size等等)，再使用transform縮放
11、在移動(dòng)端圖片上傳圖片兼容低端機(jī)的問(wèn)題
解決方案：input 加入屬性accept="image/*" multiple
12、在Android上placeholder文字設(shè)置行高會(huì)偏上
解決方案：input有placeholder情況下不要設(shè)置行高
13、overflow: scroll或auto；在iOS上滑動(dòng)卡頓的問(wèn)題
解決方案:加入-webkit-overflow-scrolling: touch;
14、iOS中日期如：2022-02-22 00:00:00格式的時(shí)間轉(zhuǎn)時(shí)間戳不成功
解決方案：需要將時(shí)間中的'00:00:00去除之后才能轉(zhuǎn)為時(shí)間戳'
15、iOS中需要將時(shí)間格式轉(zhuǎn)為/，如：2022/02/22
let date='2022-02-22';
let dateStr=date.replace(/-/g, '/'); // 2022/02/2216、移動(dòng)端click300ms延時(shí)響應(yīng)
解決方案：使用Fastclick
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );17、移動(dòng)端1px邊框問(wèn)題
解決方案：原先元素的border去掉，然后利用:before或者:after重做border，并transform的scale縮小一半，原先的元素相對(duì)定位，新做的border絕對(duì)定位
.border-1px{
position: relative;
border:none;
}
.border-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}至此，關(guān)于瀏覽器兼容性問(wèn)題的相關(guān)知識(shí)和解決方案就聊完了，最后還穿插了關(guān)于移動(dòng)端兼容的問(wèn)題描述，肯定還有很多沒(méi)有總結(jié)到的兼容性問(wèn)題，希望xdm在下方評(píng)論↘提供。
看文至此，順手點(diǎn)個(gè)贊再走唄，3Q^_^
伙伴們，如果覺(jué)得本文對(duì)你有些許幫助，點(diǎn)個(gè)或者?個(gè)關(guān)注在走唄^_^ 。另外如果本文章有問(wèn)題或有不理解的部分，歡迎大家在評(píng)論區(qū)評(píng)論指出，我們一起討論共勉。
隨時(shí)隨地給大家提供技術(shù)支持的葡萄又來(lái)了。這次的事情是這樣的，提供demo屬于是常規(guī)操作，但是前兩天客戶突然反饋壓縮傳輸模塊拋出異常，具體情況是壓縮內(nèi)容傳輸?shù)椒?wù)端后無(wú)法解壓。
由于代碼沒(méi)有發(fā)生任何變動(dòng)，前端相關(guān)依賴也沒(méi)有升級(jí)，服務(wù)端java版本也沒(méi)有變化，所以我們可以推定為環(huán)境問(wèn)題；進(jìn)一步仔細(xì)檢查，經(jīng)過(guò)反復(fù)對(duì)比后突然發(fā)現(xiàn)服務(wù)端收到的壓縮內(nèi)容變長(zhǎng)了；和前端請(qǐng)求內(nèi)容進(jìn)行對(duì)比，發(fā)現(xiàn)所有的\r和\n都變成了\r\n。
綜合以上分析我們初步判斷：?jiǎn)栴}出在了瀏覽器轉(zhuǎn)譯之中。為了驗(yàn)證猜想是否正確，葡萄將chrome版本回退到92版，異常消失，服務(wù)端接收的內(nèi)容也沒(méi)有被替換。
問(wèn)題是順利解決了，但是Chrome POST數(shù)據(jù)內(nèi)容居然會(huì)在傳輸過(guò)程中發(fā)生變化。一直擅長(zhǎng)大前端技術(shù)的葡萄絕不認(rèn)輸，為了弄明白這一原因，我們來(lái)看看POST的細(xì)節(jié)操作到底有什么。
控制字符
首先我們需要搞清楚幾個(gè)控制字符的含義。
在代碼管理中，在不同操作系統(tǒng)下CRLF會(huì)有很大不同。下面在不同系統(tǒng)中為大家實(shí)際演示一下：
在Mac Visual Code中新建一個(gè)文檔默認(rèn)為L(zhǎng)F，而Windows中為CRLF，可以選擇切換行尾序列的內(nèi)容的類型。
Mac版Visual Code
Windows 版
面對(duì)這種情況，需要開(kāi)發(fā)者統(tǒng)一CRLF，以免不同操作系統(tǒng)開(kāi)發(fā)導(dǎo)致代碼管理的混亂。
弄明白了在不同系統(tǒng)中，控制字符會(huì)出現(xiàn)不同的原因，接下來(lái)我們就需要搞清楚為什么POST的數(shù)據(jù)在傳輸過(guò)程中發(fā)生了變化。
我們來(lái)寫個(gè)簡(jiǎn)單Demo測(cè)試一下。先在頁(yè)面上放一個(gè)允許換行的textarea， 輸入帶換行的文本，獲取內(nèi)容看到只有\(zhòng)n轉(zhuǎn)譯。通過(guò)FormData直接post數(shù)據(jù)到服務(wù)端，然后直接返回，看到\n全部變成了\r\n。
var uploadData=document.getElementById("ta").value
var formData=new FormData();
formData.append("data", uploadData)
fetch("http://localhost:8088/spread/getpdf", {
body: formData,
method: "POST"
}).then(resp=> resp.text())
.then(text=> {
console.log(JSON.stringify(text));
document.getElementById("result").innerHTML=JSON.stringify(text)
})
瀏覽器標(biāo)識(shí)：
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36
回退Chrome到92版本，發(fā)送和接收文本此時(shí)編為一致：
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36
深入探究這一原因，我們了解到互聯(lián)網(wǎng)請(qǐng)求意見(jiàn)稿2046（RFC 2046）4.1.1.中有明確說(shuō)明：
“ The canonical form of any MIME‘text’ subtype MUST always represent a
line break as a CRLF sequence. “
這里我們可以看到所有的文本類型都要使用CRLF，而Chrome只是修復(fù)了一個(gè)“bug”，對(duì)于用戶而言，在普通文本中用戶感知不到CR、LF和CRLF的區(qū)別，但是當(dāng)使用場(chǎng)景轉(zhuǎn)換到解壓的文本內(nèi)容就變得十分重要。
大家都知道POST是HTTP的一個(gè)常用方法，而另一個(gè)我們常用的方法是GET。
關(guān)于GET和POST區(qū)別以及使用相關(guān)問(wèn)題這里不做贅述，要解決POTS傳輸?shù)臄?shù)據(jù)變化問(wèn)題，最相關(guān)的是Content-Type。
首先我們來(lái)了解Content-Type和MIME分別是什么：
Content-Type，內(nèi)容類型，一般是指網(wǎng)頁(yè)中存在的Content-Type，用于定義網(wǎng)絡(luò)文件的類型和網(wǎng)頁(yè)的編碼，決定瀏覽器將以什么形式、什么編碼讀取這個(gè)文件，這就是經(jīng)常看到一些Asp網(wǎng)頁(yè)點(diǎn)擊的結(jié)果卻是下載到的一個(gè)文件或一張圖片的原因。
在POST中常用的Content-Type有application/x-www-form-urlencoded、multipart/form-data和application/json。
1、 application/x-www-form-urlencoded
將需要內(nèi)容提交表單后，內(nèi)容會(huì)按照name1=value1&name2=value2的方式編碼，并且key和valu e都會(huì)進(jìn)行URL轉(zhuǎn)碼。
對(duì)于"\n"和"\r" 會(huì)被轉(zhuǎn)碼為'%0A'和'%0D'，通過(guò)這種傳輸方式，避免了瀏覽器的對(duì)CRLF的修正可以解決以上問(wèn)題。
但是這樣轉(zhuǎn)碼會(huì)增加文本長(zhǎng)度，原本1個(gè)字符變成了3個(gè)，結(jié)果是壓縮的文本又變長(zhǎng)了。
2、multipart/form-data
當(dāng)需要想服務(wù)器提交文件時(shí)，就需要使用這種方式。前面代碼中我們可以看到當(dāng)formData是普通文本是會(huì)被修正，為了解決這個(gè)情況我們可以將string內(nèi)容封裝到Blob中作為文件流傳輸，來(lái)避免修正。
這樣傳輸，服務(wù)端會(huì)以文件方式收到內(nèi)容，直接讀取Stream內(nèi)容；對(duì)于壓縮文本，這種處理方式最優(yōu)。
var formData=new FormData();
formData.append("data", uploadData)
formData.append("data1", new Blob( [uploadData]))
上圖展示了同樣的內(nèi)容，使用不同方式進(jìn)行傳輸。
3、 application/json
Json也是目前比較流行的傳輸方式，json的內(nèi)容在post傳輸中也不會(huì)被改變，如果文本內(nèi)容不長(zhǎng)，也是不錯(cuò)的方式。
fetch("http://localhost.charlesproxy.com:8088/spread/postjson", {
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({data: uploadData}),
method: "POST"
}).then(resp=> resp.text())
.then(text=> {
console.log(JSON.stringify(text));
document.getElementById("result").innerHTML=JSON.stringify(text)
})
作為一個(gè)前端er，除了HTML、CSS和Javascript三大件，熟練使用Axios等類庫(kù)調(diào)用API，更不可忽視的是要了解如何調(diào)試網(wǎng)絡(luò)請(qǐng)求，在項(xiàng)目出現(xiàn)問(wèn)題時(shí)能快速定位到問(wèn)題的所在。
這里提供了在 Angular 框架下動(dòng)態(tài)加載js文件時(shí)返回 Content-Type 為text/html 的Demo，大家感興趣的可以自行下載試試。
本人花費(fèi)2個(gè)月時(shí)間，整理了一套JAVA開(kāi)發(fā)技術(shù)資料，內(nèi)容涵蓋java基礎(chǔ)，分布式、微服務(wù)等主流技術(shù)資料，包含大廠面經(jīng)，學(xué)習(xí)筆記、源碼講義、項(xiàng)目實(shí)戰(zhàn)、講解視頻。
希望可以幫助一些想通過(guò)自學(xué)提升能力的朋友，領(lǐng)取資料，掃碼關(guān)注一下
記得轉(zhuǎn)發(fā)+關(guān)注+私信
私信回復(fù)【2022面試資料】
領(lǐng)取更多學(xué)習(xí)資料
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
