整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
這是面試過(guò)程中一道高頻考題。
從面試官的角度思考：
基本回答：
如果應(yīng)聘者只回答了上述步驟，很多關(guān)鍵步驟（前端應(yīng)該了解的知識(shí)點(diǎn)）沒(méi)有提及，很有可能達(dá)不到面試官想要的回答效果。
筆者針對(duì)一些關(guān)鍵步驟，具體展開(kāi)說(shuō)明。讓這道題成為我們面試考卷中的加分項(xiàng)。
瀏覽器會(huì)構(gòu)建請(qǐng)求行：
// 請(qǐng)求方法是 GET，路徑為根路徑，HTTP 協(xié)議版本為 1.1
GET / HTTP/1.1
復(fù)制代碼然后根據(jù) Cache-control 和 Expires 字段，檢查強(qiáng)緩存，如果命中直接使用，否則進(jìn)入下一步。關(guān)于強(qiáng)緩存，如果不清楚可以參考下圖：
由于我們輸入的是域名，而數(shù)據(jù)包是通過(guò) IP 地址傳給對(duì)方的。因此我們需要得到域名對(duì)應(yīng)的 IP 地址。這個(gè)過(guò)程需要依賴(lài)一個(gè)服務(wù)系統(tǒng)，這個(gè)系統(tǒng)將域名和 IP 一一映射，我們將這個(gè)系統(tǒng)就叫做 DNS （域名系統(tǒng)）。
DNS 協(xié)議提供通過(guò)域名查找 IP 地址，或逆向從 IP 地址反查域名的服務(wù)。得到具體 IP 的過(guò)程就是 DNS 解析。
DNS 是一個(gè)網(wǎng)絡(luò)服務(wù)器，我們的域名解析簡(jiǎn)單來(lái)說(shuō)就是在 DNS 上記錄一條信息記錄。
例如 baidu.com 220.114.23.56（服務(wù)器外網(wǎng)IP地址）80（服務(wù)器端口號(hào)）
復(fù)制代碼瀏覽器通過(guò)域名去查詢(xún) URL 對(duì)應(yīng)的 IP ：
TCP 三次握手的過(guò)程如下：
謝希仁著《計(jì)算機(jī)網(wǎng)絡(luò)》中講“三次握手”的目的是“為了防止已失效的連接請(qǐng)求報(bào)文段突然又傳送到了服務(wù)端，因而產(chǎn)生錯(cuò)誤”。
現(xiàn)在 TCP 連接建立完畢，瀏覽器可以和服務(wù)器開(kāi)始通信，即開(kāi)始發(fā)送 HTTP 請(qǐng)求。瀏覽器發(fā) HTTP 請(qǐng)求要攜帶三樣?xùn)|西：請(qǐng)求行、請(qǐng)求頭和請(qǐng)求體。
1.請(qǐng)求行包含請(qǐng)求方法、URL、協(xié)議版本
POST /user.html HTTP/1.1
復(fù)制代碼2.請(qǐng)求頭包含請(qǐng)求的附加信息，由關(guān)鍵字/值對(duì)組成，如下
// 服務(wù)器可以接受的文件格式
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng;q=0.8,application/signed-exchange;v=b3
// 指定瀏覽器可以支持的 Web 服務(wù)器返回的內(nèi)容壓縮編碼類(lèi)型
Accept-Encoding: gzip, deflate, br
// 瀏覽器支持的語(yǔ)言
Accept-Language: zh-CN,zh;q=0.9
// 緩存機(jī)制
Cache-Control: no-cache
// 是否需要持久連接
Connection: keep-alive
// 發(fā)送該請(qǐng)求域名下所有 Cookie 值到服務(wù)器
Cookie: /* 省略cookie信息 */
// 指定請(qǐng)求的服務(wù)器的域名和端口號(hào)
Host: www.baidu.com
Pragma: no-cache
Upgrade-Insecure-Requests: 1
// 用戶(hù)代理 UA，包含發(fā)出請(qǐng)求的用戶(hù)信息
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1
復(fù)制代碼3.請(qǐng)求體，可以承載多個(gè)請(qǐng)求參數(shù)的數(shù)據(jù)，包含回車(chē)符、換行符和請(qǐng)求數(shù)據(jù)，一般在 POST 方法下存在。
跟請(qǐng)求部分類(lèi)似，網(wǎng)絡(luò)響應(yīng)具有三個(gè)部分:響應(yīng)行、響應(yīng)頭和響應(yīng)體。
1.響應(yīng)行包含：協(xié)議版本，狀態(tài)碼，狀態(tài)碼描述
HTTP/1.1 200 OK
復(fù)制代碼狀態(tài)碼規(guī)則如下：
2.響應(yīng)頭部包含響應(yīng)報(bào)文的附加信息，由 名/值 對(duì)組成，如下：
// 緩存機(jī)制
Cache-Control: no-cache
Connection: keep-alive
Content-Encoding: gzip
// 表示具體請(qǐng)求中的媒體類(lèi)型信息，決定瀏覽器將以什么形式、什么編碼讀取這個(gè)文件
Content-Type: text/html;charset=utf-8
// 原始服務(wù)器消息發(fā)出的時(shí)間
Date: Wed, 04 Dec 2019 12:29:13 GMT
// Web 服務(wù)器軟件名稱(chēng)
Server: apache
// 由服務(wù)器端向客戶(hù)端發(fā)送 cookie
Set-Cookie: rsv_i=f9a0SIItKqzv7kqgAAgphbGyRts3RwTg%2FLyU3Y5Eh5LwyfOOrAsvdezbay0QqkDqFZ0DfQXby4wXKT8Au8O7ZT9UuMsBq2k; path=/; domain=.baidu.com復(fù)制代碼這里注意下 Set-Cookie 中關(guān)于網(wǎng)絡(luò)安全方面的兩個(gè)值：HttpOnly、SameSite
設(shè)置了 HttpOnly 屬性的 cookie 不能使用 JavaScript 經(jīng)由 Document.cookie 屬性、XMLHttpRequest 和 Request APIs 進(jìn)行訪問(wèn)，以防范跨站腳本攻擊（XSS）。
SameSite=Lax 允許服務(wù)器設(shè)定一則 cookie 不隨著跨域請(qǐng)求一起發(fā)送，這樣可以在一定程度上防范跨站請(qǐng)求偽造攻擊（CSRF）。
3.響應(yīng)主體包含回車(chē)符、換行符和響應(yīng)返回?cái)?shù)據(jù)，并不是所有響應(yīng)報(bào)文都有響應(yīng)數(shù)據(jù)
響應(yīng)完成之后要判斷 Connection 字段，如果請(qǐng)求頭或響應(yīng)頭中包含 Connection: Keep-Alive ，表示建立了持久連接，這樣 TCP 連接會(huì)一直保持，之后請(qǐng)求統(tǒng)一站點(diǎn)的資源會(huì)復(fù)用這個(gè)連接。 否則斷開(kāi) TCP 連接, 請(qǐng)求-響應(yīng)流程結(jié)束。
總結(jié)瀏覽器端的網(wǎng)絡(luò)請(qǐng)求過(guò)程：
瀏覽器解析渲染頁(yè)面分為以下五個(gè)步驟：
回流時(shí)，以上流程會(huì)重新走一遍。重繪時(shí)，會(huì)重新計(jì)算樣式，跳過(guò)中間步驟直接生成繪制列表。可見(jiàn)，重繪不一定導(dǎo)致回流，但回流一定發(fā)生了重繪。
CSS 樣式來(lái)源一般為三種：
瀏覽器無(wú)法直接識(shí)別 CSS 樣式文本，這里渲染引擎接收到 CSS 文本之后將其轉(zhuǎn)化為一個(gè)結(jié)構(gòu)化的對(duì)象，即 styleSheets 。
可以在瀏覽器控制臺(tái)輸入 document.styleSheets 來(lái)查看這個(gè)最終結(jié)構(gòu)（包含上述三種 CSS 來(lái)源）。
有一些渲染引擎不容易直接理解的 CSS 樣式數(shù)值，需要在計(jì)算樣式之前將它們標(biāo)準(zhǔn)化。如：em -> px，red -> #ff0000，bold -> 700 等等。
計(jì)算具體樣式主要遵循兩個(gè)規(guī)則：繼承和層疊
計(jì)算完樣式之后，所有樣式值會(huì)被掛載到 window.getComputedStyle 中，也就是可以通過(guò) JS 獲取計(jì)算后的樣式。
布局樹(shù)生成主要分兩部：
布局樹(shù)只包含可見(jiàn)元素，對(duì)于 head 標(biāo)簽和設(shè)置了 display: none 的元素將不會(huì)被放入其中。
如果想了解布局的細(xì)節(jié)，可以讀一讀人人 FED 團(tuán)隊(duì)的文章從Chrome源碼看瀏覽器如何layout布局。
這里分兩種情況，一種是顯式合成，一種是隱式合成。
一、擁有層疊上下文的節(jié)點(diǎn)
層疊上下文也基本上是有一些特定的 CSS 屬性創(chuàng)建的，一般有以下情況：
二、需要剪裁的地方
比如一個(gè) div，你只給他設(shè)置 100 * 100 像素的大小，而你在里面放了非常多的文字，那么超出的文字部分就需要被剪裁。當(dāng)然如果出現(xiàn)了滾動(dòng)條，那么滾動(dòng)條會(huì)被單獨(dú)提升為一個(gè)圖層。
簡(jiǎn)單說(shuō)就是層疊等級(jí)低的節(jié)點(diǎn)被提升為單獨(dú)的圖層之后，那么所有層疊等級(jí)比它高的節(jié)點(diǎn)都會(huì)成為一個(gè)單獨(dú)的圖層。
這個(gè)隱式合成其實(shí)隱藏著巨大風(fēng)險(xiǎn)，如果在一個(gè)大型應(yīng)用中，當(dāng)一個(gè) z-index 比較低的元素被提升為單獨(dú)圖層之后，層疊在它上面的元素統(tǒng)統(tǒng)會(huì)被提升為單獨(dú)的圖層，可能會(huì)增加上千個(gè)圖層，大大增加內(nèi)存壓力，甚至直接讓頁(yè)面崩潰。這就是層爆炸的原理
當(dāng)需要 repaint 時(shí)，只需要 repaint 本身，而不會(huì)影響到其他層。
渲染引擎會(huì)將圖層的繪制拆分成一個(gè)個(gè)繪制指令，比如先畫(huà)背景、再描繪邊框......然后將這些指令按順序組合成一個(gè)待繪制列表。
大家可以 F12 打開(kāi) Chrome 開(kāi)發(fā)者工具，在設(shè)置欄展開(kāi) more tools ，然后選擇 Layers 面板，就能看到繪制列表了。
后面就是渲染進(jìn)程的主線程把繪制列表提交給合成線程。然后合成線程選擇視口附近的圖塊，把它交給柵格化線程池生成位圖。
柵格化操作完成后，合成線程會(huì)生成一個(gè)繪制指令 DrawQuad，并發(fā)送給瀏覽器進(jìn)程。瀏覽器進(jìn)程中的 viz 組件 接收到命令，把頁(yè)面內(nèi)容繪制到內(nèi)存，也就是生成了頁(yè)面。
當(dāng)數(shù)據(jù)傳送完畢，需要斷開(kāi) TCP 連接，此時(shí)發(fā)起四次揮手。
如果本文對(duì)你有幫助，就點(diǎn)個(gè)贊支持下吧！感謝閱讀。
來(lái)源：掘金-推薦
動(dòng)端應(yīng)用到底需要做SEO嗎？答案很重要。隨著智能手機(jī)的出現(xiàn)，越來(lái)越多的人使用智能手機(jī)進(jìn)行搜索。交通意味著一切。很多人會(huì)在零碎的時(shí)間內(nèi)使用手機(jī)來(lái)滿足他們的搜索和查詢(xún)需求。如果移動(dòng)網(wǎng)站搜索引擎優(yōu)化做得不錯(cuò)，這意味著他們可以分享流量紅利。所以手機(jī)上的seo非常重要。
如何做手機(jī)站SEO？移動(dòng)站定位和頁(yè)面設(shè)計(jì)移動(dòng)站和PC站除了頁(yè)面大小，顯示形式不同，在分析用戶(hù)需求時(shí)都要做。例如，對(duì)于一個(gè)地方裝修網(wǎng)站，PC站是重點(diǎn)展示裝修效果的圖紙案例、裝修報(bào)價(jià)和公司裝修設(shè)計(jì)師的風(fēng)度，所以移動(dòng)站應(yīng)該重點(diǎn)關(guān)注公司的聯(lián)系人、地圖、電話等。移動(dòng)網(wǎng)站需要”及時(shí)、快速“。同時(shí)，考慮到網(wǎng)站的反應(yīng)速度，整個(gè)頁(yè)面應(yīng)該用DIV CSS代碼編寫(xiě)。不要為了方便而使用flash或js，所以搜索引擎很難掌握。還有許多移動(dòng)瀏覽器不支持Flash播放。你需要單獨(dú)安裝手機(jī)falsh插件，但是為什么用戶(hù)有那么多時(shí)間等待呢？
移動(dòng)站應(yīng)簡(jiǎn)潔，用戶(hù)瀏覽量大的手機(jī)內(nèi)容，或者屏幕大一些，在平板電腦上瀏覽，但不大于普通電腦屏幕，所以移動(dòng)站頁(yè)面應(yīng)更簡(jiǎn)潔，特別是對(duì)于有下載需求的網(wǎng)站，移動(dòng)站上的下載按鈕應(yīng)為CLE。Arly放在用戶(hù)面前。用戶(hù)知道在哪里單擊以查找所需的內(nèi)容。還有一點(diǎn)，內(nèi)容頁(yè)面不應(yīng)該太長(zhǎng)，因?yàn)橛檬謾C(jī)瀏覽網(wǎng)站的用戶(hù)，時(shí)間非常緊迫，而且有些還在騎行過(guò)程中，流量和網(wǎng)絡(luò)速度是一個(gè)大問(wèn)題，所以一個(gè)問(wèn)題可以用一句話一張圖來(lái)解決，不要講太長(zhǎng)的故事。
對(duì)于商場(chǎng)的移動(dòng)支付，除了以上幾點(diǎn)之外，最重要的支付頁(yè)面必須簡(jiǎn)單化。這可以參考京東和淘寶，他們的支付頁(yè)面做得很好。移動(dòng)臺(tái)應(yīng)該簡(jiǎn)單大方。
移動(dòng)臺(tái)應(yīng)禁止使用彈窗（必須禁止）彈窗。PC站的用戶(hù)已經(jīng)夠煩躁了。如果在像手機(jī)或平板電腦這樣的地方做了一個(gè)子彈窗，用戶(hù)會(huì)說(shuō)不出話來(lái)：”我們進(jìn)來(lái)吧，但這并不能讓我們輕松地看到它。“哪種網(wǎng)絡(luò)語(yǔ)言更適合移動(dòng)臺(tái)？這一點(diǎn)我在之前的移動(dòng)網(wǎng)站優(yōu)化教程中已經(jīng)討論過(guò)，詳細(xì)分析了HTML4和HTML5作為移動(dòng)站的區(qū)別。
URL路徑必須標(biāo)準(zhǔn)化為移動(dòng)站。不要使用列表頁(yè)面來(lái)節(jié)省空間成本，也不要購(gòu)買(mǎi)新的空間。最好使用單獨(dú)的輔助域名作為移動(dòng)站。表單為m.xxx.com或wap.xx.com。
PC站和移動(dòng)站做開(kāi)放匹配，我的裝修網(wǎng)站，移動(dòng)站，在線后只有針對(duì)性的更新內(nèi)容，一個(gè)外鏈不存在，現(xiàn)在大部分的主要關(guān)鍵字都排在主頁(yè)上，最重要的原因是我的移動(dòng)站做了開(kāi)放匹配。
如果你不知道如何做開(kāi)放匹配，你可以在我的博客的移動(dòng)網(wǎng)站優(yōu)化部分看到如何做開(kāi)放匹配，這是以視頻的形式顯示的，一步一步地教你如何做開(kāi)放匹配。關(guān)于機(jī)器人、地圖、關(guān)鍵字設(shè)置等問(wèn)題，與PC站是一樣的，PC站怎么辦，移動(dòng)站怎么辦。手機(jī)站首頁(yè)的標(biāo)題只能寫(xiě)公司品牌的文字，也可以和PC站的標(biāo)題相同，這是沒(méi)有危害的 。
前幾天看到有同學(xué)問(wèn)“H5和html5是一個(gè)東西嗎？它們有什么區(qū)別？”
有網(wǎng)友回答說(shuō)“H5和html5就像ps和photoshop一樣，h5更厲害一點(diǎn)兒”
這個(gè)機(jī)智的回答我真的是看笑了~
很多人都以為H5是html5的簡(jiǎn)稱(chēng)，符合 HTML5 標(biāo)準(zhǔn)實(shí)現(xiàn)的頁(yè)面，大家為了方便，簡(jiǎn)稱(chēng) H5“。百度和搜狗百科上的答案也似乎是這樣——H5（HTML5）”一般是指“html5，但是真的是這樣的嗎？ 當(dāng)連續(xù)有人問(wèn)相關(guān)的問(wèn)題，并詳細(xì)了解一些業(yè)務(wù)以后，慢慢的發(fā)現(xiàn) H5 已經(jīng)不單單是一個(gè)技術(shù)相關(guān)的詞。
按照百度百科理解來(lái)說(shuō)：“符合 HTML5 標(biāo)準(zhǔn)實(shí)現(xiàn)的頁(yè)面就是 H5頁(yè)面”，那么當(dāng)前互聯(lián)網(wǎng)上的網(wǎng)站基本上都在采用了 HTML5 標(biāo)準(zhǔn)。
但大多數(shù)的客戶(hù)要求是把微信里面那種好友之間，或者朋友圈分享的那種帶有主題性質(zhì)的宣傳頁(yè)面（實(shí)在是不知道怎么描述）和我們平時(shí)電腦上訪問(wèn)的頁(yè)面通過(guò)技術(shù)區(qū)分識(shí)別出來(lái)。所以說(shuō)在業(yè)務(wù)人員和一些客戶(hù)眼里，微信上分享的那種炫酷的頁(yè)面就是H5頁(yè)面。所以 H5 和 HTML5就不是一個(gè)東西了。
如果 H5 不等于 HTML5 了，那 H5 到底是什么呢？
網(wǎng)友猜想可能是這樣的：HTML5 在 2013 年左右就發(fā)布，在 2014 年底宣布標(biāo)準(zhǔn)制定完成，但是市面的瀏覽器的支持主要還是在手機(jī)上，電腦上主要有 IE 的存在導(dǎo)致標(biāo)準(zhǔn)普及緩慢，所以開(kāi)始有開(kāi)發(fā)者在手機(jī)上做很多酷炫的頁(yè)面，當(dāng)這些酷炫的效果在業(yè)務(wù)人員看到了以后，開(kāi)始加以有效的利用，特別是在活動(dòng)宣傳和廣告方面，為了宣傳業(yè)務(wù)人員會(huì)問(wèn)技術(shù)人員：“這種炫酷的效果是怎么實(shí)現(xiàn)的？”
技術(shù)人員說(shuō):“我用的是HTML5的技術(shù)”。業(yè)務(wù)人員的宣傳營(yíng)銷(xiāo)能力那是相當(dāng)厲害，在客戶(hù)面前大量的宣傳：“我們用到了一個(gè)牛逼技術(shù)，讓你的手機(jī)網(wǎng)頁(yè)非常炫酷好看”，慢慢的客戶(hù)都知道了有一種技術(shù)可以把頁(yè)面在手機(jī)上做的非常好看，非常炫酷，然后客戶(hù)又開(kāi)始對(duì)其他人說(shuō)：“我們的這個(gè)網(wǎng)頁(yè)用了現(xiàn)在最新的技術(shù)，叫什么什么5頁(yè)面，對(duì)H5頁(yè)面”。然后客戶(hù)之間口口相傳，當(dāng)以后遇到同樣的業(yè)務(wù)需求的時(shí)候，找另外一家供應(yīng)商說(shuō)：“我要一個(gè)H5頁(yè)面，要長(zhǎng)的類(lèi)似什么..一樣的網(wǎng)頁(yè)”，然后這一家做網(wǎng)站的公司開(kāi)始也把這種網(wǎng)站也開(kāi)始叫著H5頁(yè)面。
最后鋪天蓋地的“H5頁(yè)面”就出來(lái)了。
當(dāng)然，這只是網(wǎng)友的一個(gè)猜想……
最后
為幫助那些往想互聯(lián)網(wǎng)方向轉(zhuǎn)行想學(xué)習(xí)，卻因?yàn)闀r(shí)間不夠，資源不足而放棄的人。我搜集整理了一套完整的IT學(xué)習(xí)資料，包括Java、SEO優(yōu)化、Python入門(mén)書(shū)籍等等等，比自己在網(wǎng)上零散收集的結(jié)構(gòu)性和連貫性更強(qiáng)，只為幫助那些想學(xué)習(xí)的人！需要的同學(xué)可私信！私信！回復(fù)“學(xué)習(xí)”
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
