localhost、本地IP下頁面渲染不同原理解析

zhangwang 發(fā)布于2019-08-29 16:35 / 1131人閱讀

摘要：一這是頁面顯示二這是本地配置的頁面顯示三經(jīng)過多方資料查詢，有三種解釋不符合標(biāo)準(zhǔn)解析不同導(dǎo)致。不同版本的瀏覽器或者同一瀏覽器的解析方式不同。從而導(dǎo)致頁面渲染不同。以免導(dǎo)致后來的重新渲染問題。

一、這是localhost頁面顯示：

二、這是本地IP配置的頁面顯示

三、經(jīng)過多方資料查詢，有三種解釋：

1、css不符合W3C標(biāo)準(zhǔn),RFC解析不同導(dǎo)致。
2、瀏覽器的兼容性問題。不同版本的瀏覽器或者同一瀏覽器的解析方式不同。
3、防火墻設(shè)置問題。

四、最終解釋：

經(jīng)過親自驗(yàn)證，我更傾向于瀏覽器問題。
瀏覽器有個(gè)功能是記住縮放配置，就是說如果你之前有意或者無意縮放過瀏覽器的頁面百分比，比如80%，它會(huì)記住這一ip下的系統(tǒng)百分比顯示。當(dāng)你將本地localhost切換為本地ip或者測(cè)試環(huán)境IP或者生辰環(huán)境IP，或其他的不同于localhost的ip時(shí)，就會(huì)自動(dòng)默認(rèn)100%百分比縮放。這樣，之前l(fā)ocalhost配置的css渲染是在80%的百分比之下渲染的，導(dǎo)致頁面的div大小和現(xiàn)在的ip下的100%div寬度width會(huì)差很多。從而導(dǎo)致頁面渲染不同。

五、良言：

切記：在開發(fā)時(shí)，首先要確定頁面的縮放百分比，也不要隨意改變縮放，要嚴(yán)格按照瀏覽器的默認(rèn)100%縮放比進(jìn)行開發(fā)。以免導(dǎo)致后來的重新渲染問題。

GPU云服務(wù)器云服務(wù)器二級(jí)域名解析不同ip 備案解析域名下的所有ip linux下解析ip數(shù)據(jù)包 linux下怎么解析ip數(shù)據(jù)包

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113840.html

相關(guān)文章

前端面試題：從url到頁面展現(xiàn)，這之中發(fā)生了什么？

摘要：比如對(duì)于的，瀏覽器實(shí)際上不知道到底是什么東西，需要查找網(wǎng)站所在服務(wù)器的地址，才能找到目標(biāo)，這就是下文要說的域名解析。二域名解析當(dāng)用戶在瀏覽器中輸入后你使用的電腦會(huì)發(fā)出一個(gè)請(qǐng)求到本地服務(wù)器。 showImg(https://segmentfault.com/img/remote/1460000009317499?w=700&h=466); 這里markdown格式跟簡書不太一樣，排版可能...

wdzgege 2019-08-06 13:21 評(píng)論0 收藏0
從輸入U(xiǎn)RL到頁面加載的過程？如何由一道題完善自己的前端知識(shí)體系！

摘要：前言見解有限，如有描述不當(dāng)之處，請(qǐng)幫忙指出，如有錯(cuò)誤，會(huì)及時(shí)修正。為什么要梳理這篇文章最近恰好被問到這方面的問題，嘗試整理后發(fā)現(xiàn)，這道題的覆蓋面可以非常廣，很適合作為一道承載知識(shí)體系的題目。前言見解有限，如有描述不當(dāng)之處，請(qǐng)幫忙指出，如有錯(cuò)誤，會(huì)及時(shí)修正。為什么要梳理這篇文章？最近恰好被問到這方面的問題，嘗試整理后發(fā)現(xiàn)，這道題的覆蓋面可以非常廣，很適合作為一道承載知識(shí)體系的題目...

kel 2019-08-22 15:18 評(píng)論0 收藏0
輸入一個(gè)url發(fā)生什么

摘要：服務(wù)器處理請(qǐng)求返回報(bào)文響應(yīng)報(bào)文由相響應(yīng)行響應(yīng)頭響應(yīng)主體三個(gè)部分組成，如下圖響應(yīng)行包含協(xié)議版本狀態(tài)碼狀態(tài)碼描述協(xié)議版本狀態(tài)碼請(qǐng)求成功以創(chuàng)建，成功請(qǐng)求并創(chuàng)建了新的資源非授權(quán)信息。輸入一個(gè)url發(fā)生了什么 DNS解析 TCP連接發(fā)送http請(qǐng)求服務(wù)器處理請(qǐng)求瀏覽器解析渲染頁面連接結(jié)束 DNS解析什么是DNS? DNS是一種組織成域?qū)哟谓Y(jié)構(gòu)的計(jì)算機(jī)和網(wǎng)絡(luò)服務(wù)命名系統(tǒng)，他用于TC...

NeverSayNever 2019-08-26 10:33 評(píng)論0 收藏0
徹底理解從輸入U(xiǎn)RL與頁面展現(xiàn)

摘要：五瀏覽器繪制網(wǎng)頁繪制過程主要是結(jié)構(gòu)與樣式的結(jié)合，以及行為動(dòng)態(tài)效果的展現(xiàn)。之后會(huì)寫系列文章，歡迎圍觀主要參考文章基礎(chǔ)進(jìn)階詳解與編碼前端面試題從到頁面展現(xiàn)，這之中發(fā)生了什么圖解流程概述：地址欄輸入U(xiǎn)RL ——> 域名解析 ——> 服務(wù)器處理請(qǐng)求 ——> 瀏覽器處理響應(yīng) ——> 瀏覽器繪制網(wǎng)頁一.地址欄輸入U(xiǎn)RL 認(rèn)識(shí)URL showImg(https://segmentfault....

abson 2019-08-21 11:41 評(píng)論0 收藏0
輸入 url 到頁面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么？

摘要：在上述過程再細(xì)化為瀏覽器搜索自己的緩存。至此，瀏覽器已經(jīng)得到了域名對(duì)應(yīng)的地址。具體過程如下在中這一過程如下首先是字節(jié)流，經(jīng)過解碼之后是字符流，然后通過詞法分析器會(huì)被解釋成詞語，之后經(jīng)過語法分析器構(gòu)建成節(jié)點(diǎn)，最后這些節(jié)點(diǎn)被組建成一棵樹。面試的時(shí)候，我們經(jīng)常會(huì)被問從在瀏覽器地址欄中輸入 url 到頁面展現(xiàn)的短短幾秒內(nèi)瀏覽器究竟做了什么？那么瀏覽器到底做了啥？瀏覽器的多進(jìn)程架構(gòu)一個(gè)好的程...

dackel 2019-08-23 13:43 評(píng)論0 收藏0