簡(jiǎn)單總結(jié)
1.DNS解析
2.TCP鏈接
3.發(fā)送HTTP請(qǐng)求
4.服務(wù)器處理請(qǐng)求并返回HTTP報(bào)文
5.瀏覽器解析渲染頁(yè)面
6.連接結(jié)束
具體過(guò)程
DNS解析的過(guò)程就是尋找哪臺(tái)機(jī)器上有我們需要資源的過(guò)程。當(dāng)我們?cè)跒g覽器中輸入地址時(shí)辜梳，例如www.baidu.com粱甫，其實(shí)這不是百度網(wǎng)站的真正意義上的地址∽髅椋互聯(lián)網(wǎng)上每一臺(tái)計(jì)算機(jī)的唯一標(biāo)識(shí)是它的IP地址茶宵，但是IP不好記憶，用戶傾向于用好想的方式來(lái)尋找互聯(lián)網(wǎng)上的其他計(jì)算機(jī)粉洼，也就是上面說(shuō)的百度網(wǎng)址节预。所以互聯(lián)網(wǎng)設(shè)計(jì)者需要在用戶的方便性與可用性上做權(quán)衡，這個(gè)權(quán)衡就是做網(wǎng)址到ip地址的轉(zhuǎn)換属韧，這個(gè)過(guò)程就是DNS解析安拟。它實(shí)際上充當(dāng)了一個(gè)翻譯的角色，實(shí)現(xiàn)了網(wǎng)址到IP地址的轉(zhuǎn)換宵喂。
轉(zhuǎn)換過(guò)程
DNS解析是一個(gè)遞歸查詢的過(guò)程
上圖是查找www.google.com的IP地址過(guò)程糠赦。首先在本地域名服務(wù)器中查詢IP地址，如果沒(méi)有锅棕，本地域名服務(wù)器會(huì)向根域名服務(wù)器發(fā)送一個(gè)請(qǐng)求拙泽，如果根域名服務(wù)器也不存在該域名，本地域名會(huì)向com頂級(jí)域名服務(wù)器發(fā)送一個(gè)請(qǐng)求裸燎，依次類推下去顾瞻。直到最后本地域名服務(wù)器得到google的IP地址并把它緩存到本地，供下次查詢使用德绿。因此網(wǎng)址的解析是一個(gè)從右向左的過(guò)程：. -> .com -> google.com. -> www.google.com.荷荤。根域名服務(wù)器是一個(gè)點(diǎn).。事實(shí)上移稳，真正的網(wǎng)址是www.google.com.蕴纳，這個(gè).對(duì)應(yīng)的就是根域名服務(wù)器，默認(rèn)情況下所有的網(wǎng)址的最后一位都是.个粱，既然是默認(rèn)情況下古毛，為了方便用戶，通常都會(huì)省略都许，瀏覽器在請(qǐng)求DNS的時(shí)候會(huì)自動(dòng)加上
DNS優(yōu)化
上述請(qǐng)求google的ip地址經(jīng)歷了8個(gè)步驟稻薇，如果每次請(qǐng)求都經(jīng)歷這么多步驟嫂冻，太耗時(shí)，減少步驟的過(guò)程就是DNS緩存颖低。
DNS緩存
DNS存在著多級(jí)緩存絮吵，從離瀏覽器的距離排序的話弧烤，有以下幾種: 瀏覽器緩存忱屑，系統(tǒng)緩存，路由器緩存暇昂，IPS服務(wù)器緩存莺戒，根域名服務(wù)器緩存，頂級(jí)域名服務(wù)器緩存急波，主域名服務(wù)器緩存从铲。
- 在你的chrome瀏覽器中輸入:chrome://dns/，你可以看到chrome瀏覽器的DNS緩存澄暮。
- 系統(tǒng)緩存主要存在/etc/hosts(Linux系統(tǒng))中:
...
DNS負(fù)載均衡
真實(shí)的互聯(lián)網(wǎng)世界背后存在成千上百臺(tái)服務(wù)器名段，大型的網(wǎng)站甚至更多。但是在用戶的眼中泣懊，它需要的只是處理他的請(qǐng)求伸辟，哪臺(tái)機(jī)器處理請(qǐng)求并不重要。DNS可以返回一個(gè)合適的機(jī)器的IP給用戶馍刮，例如可以根據(jù)每臺(tái)機(jī)器的負(fù)載量信夫，該機(jī)器離用戶地理位置的距離等等，這種過(guò)程就是DNS負(fù)載均衡卡啰，又叫做DNS重定向静稻。大家耳熟能詳?shù)腃DN(Content Delivery Network)就是利用DNS的重定向技術(shù)，DNS服務(wù)器會(huì)返回一個(gè)跟用戶最接近的點(diǎn)的IP地址給用戶匈辱，CDN節(jié)點(diǎn)的服務(wù)器負(fù)責(zé)響應(yīng)用戶的請(qǐng)求振湾，提供所需的內(nèi)容。
TCP鏈接
HTTPs協(xié)議
HTTP報(bào)文是包裹在TCP報(bào)文中發(fā)送的亡脸，服務(wù)器端收到TCP報(bào)文時(shí)會(huì)解包提取出HTTP報(bào)文押搪。但是這個(gè)過(guò)程中存在一定的風(fēng)險(xiǎn)，HTTP報(bào)文是明文梗掰，如果中間被截取的話會(huì)存在一些信息泄露的風(fēng)險(xiǎn)嵌言。那么在進(jìn)入TCP報(bào)文之前對(duì)HTTP做一次加密就可以解決這個(gè)問(wèn)題了。HTTPS協(xié)議的本質(zhì)就是HTTP + SSL(or TLS)及穗。在HTTP報(bào)文進(jìn)入TCP報(bào)文之前摧茴，先使用SSL對(duì)HTTP報(bào)文進(jìn)行加密。從網(wǎng)絡(luò)的層級(jí)結(jié)構(gòu)看它位于HTTP協(xié)議與TCP協(xié)議之間埂陆。
HTTPS過(guò)程
HTTPS在傳輸數(shù)據(jù)之前需要客戶端與服務(wù)器進(jìn)行一個(gè)握手(TLS/SSL握手)苛白，在握手過(guò)程中將確立雙方加密傳輸數(shù)據(jù)的密碼信息娃豹。TLS/SSL使用了非對(duì)稱加密，對(duì)稱加密以及hash等购裙。具體過(guò)程請(qǐng)參考經(jīng)典的阮一峰先生的博客TLS/SSL握手過(guò)程懂版。
HTTPS相比于HTTP，雖然提供了安全保證躏率，但是勢(shì)必會(huì)帶來(lái)一些時(shí)間上的損耗躯畴，如握手和加密等過(guò)程，是否使用HTTPS需要根據(jù)具體情況在安全和性能方面做出權(quán)衡薇芝。
HTTP請(qǐng)求
它主要發(fā)生在客戶端蓬抄。發(fā)送HTTP請(qǐng)求的過(guò)程就是構(gòu)建HTTP請(qǐng)求報(bào)文并通過(guò)TCP協(xié)議發(fā)送到服務(wù)器指定端口(HTTP協(xié)議80/8080, HTTPS協(xié)議443)。HTTP請(qǐng)求報(bào)文是由三部分組成: 請(qǐng)求行, 請(qǐng)求報(bào)頭和請(qǐng)求正文夯到。
請(qǐng)求行：格式：Method Request-URL HTTP-Version CRLF
例如：GET demo.html HTTP/1.1 (回車+換行)
常用的方法有: GET, POST, PUT, DELETE, OPTIONS, HEAD嚷缭。
請(qǐng)求頭：請(qǐng)求頭允許客戶端向服務(wù)器傳遞請(qǐng)求的附加信息和客戶端自身信息。常見(jiàn)的請(qǐng)求報(bào)頭有: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent等耍贾。請(qǐng)求頭和請(qǐng)求正文之間有回車和換行
請(qǐng)求正文：客戶端向服務(wù)器傳遞的數(shù)據(jù)
服務(wù)器處理請(qǐng)求并返回HTTP報(bào)文
后端從固定的接口收到TCP報(bào)文阅爽，對(duì)TCP連接處理，對(duì)HTTP協(xié)議解析荐开，并按照?qǐng)?bào)文格式進(jìn)一步封裝成HTTP Response對(duì)象付翁，供上層使用。
HTTP響應(yīng)報(bào)文組成：響應(yīng)行誓焦、響應(yīng)報(bào)頭和響應(yīng)報(bào)文
服務(wù)器返回給瀏覽器的文本信息胆敞，通常THML,CSS,JS,圖片等文件放在響應(yīng)報(bào)文。
瀏覽器解析渲染頁(yè)面
1杂伟、什么是DOCTYPE及作用
<!DOCTYPE> informs the browser which version of HTML (or XML) you used to write the document. Doctype is a declaration, not a tag; you can also refer to it as "document type declaration", or "DTD" for short.
大致意思是移层，它是一個(gè)聲明，通知瀏覽器使用哪個(gè)版本的html來(lái)解析document赫粥」刍埃縮寫(xiě)DTD
2、常用的DOCTYPE聲明
HTML5
<!DOCTYPE html>越平，這樣寫(xiě)表示使用標(biāo)準(zhǔn)模式HTML4.01嚴(yán)格模式频蛔，包含所有HTML元素和屬性，但不包括展示性的和棄用的元素例如（font）秦叛。不允許框架集（Framesets）晦溪。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）挣跋。不允許框架集（Framesets）三圆。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-HTML 4.01 Frameset該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內(nèi)容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
3舟肉、回流Reflow和重繪Repaint
Reflow
回流簡(jiǎn)單講就是瀏覽器需要去計(jì)算元素的位置大小的過(guò)程
觸發(fā)回流
- 增加修噪、刪除、修改DOM節(jié)點(diǎn)會(huì)導(dǎo)致回流和重繪
- 移動(dòng)DOM位置路媚，例如動(dòng)畫(huà)
- 修改CSS樣式的大小
- 修改字體
- Resize窗口（有可能引發(fā)回流）
重繪
重新繪制黄琼，顯示在屏幕上。等到位置大小顏色字體等確定下來(lái)之后整慎，瀏覽器開(kāi)始繪制內(nèi)容脏款，這就是repaint。
觸發(fā)重繪
- 回流發(fā)生
- 顏色改變等
注意：回流必將引起重繪，而重繪不一定會(huì)引起回流。
減少回流和重繪的一個(gè)場(chǎng)景郭卫，添加多個(gè)dom節(jié)點(diǎn)的時(shí)候囤攀，將幾個(gè)節(jié)點(diǎn)先添加到一個(gè)總的節(jié)點(diǎn)上，然后一次性在加入dom中周循。
瀏覽器邊解析邊渲染强法。首先解析HTML文件，構(gòu)建DOM數(shù)湾笛，同時(shí)解析CSS文件構(gòu)建樣式樹(shù)饮怯，DOM樹(shù)和樣式樹(shù)合并構(gòu)成渲染樹(shù)后，開(kāi)始布局渲染樹(shù)并將其繪制到屏幕上嚎研。此過(guò)程中涉及到reflow（回流）和repaint（重繪）蓖墅。DOM節(jié)點(diǎn)的各個(gè)元素都是以盒模型的形式存在，在寫(xiě)都需要瀏覽器去計(jì)算位置和大小等临扮，這個(gè)過(guò)程就是reflow论矾，等到位置大小顏色字體等確定下來(lái)之后，瀏覽器開(kāi)始繪制內(nèi)容杆勇，這就是repaint贪壳。回流和重繪非常耗性能蚜退，有時(shí)會(huì)造成頁(yè)面卡頓闰靴，破會(huì)用戶體驗(yàn)，因此要盡可能減少回流和重繪钻注。
JS的解析由瀏覽器中的JS解析引擎完成蚂且。JS是單線程運(yùn)行，同一時(shí)間內(nèi)只能做一件事幅恋，所有的任務(wù)需要排隊(duì)杏死，前一個(gè)任務(wù)結(jié)束才能執(zhí)行后一個(gè)任務(wù)。但是又存在有些任務(wù)很耗時(shí)识埋，例如IO操作凡伊，所以得要一種機(jī)制可以先執(zhí)行排在后面的任務(wù)窒舟，這就是同步任務(wù)和異步任務(wù)银还。JS的執(zhí)行機(jī)制可以看做是一個(gè)主線程加一個(gè)任務(wù)隊(duì)列洁墙。同步任務(wù)放在主線程上執(zhí)行蛹疯，異步任務(wù)放在隊(duì)列中。所有的同步任務(wù)在主線程上執(zhí)行热监，形成一個(gè)執(zhí)行棧捺弦，異步任務(wù)有了運(yùn)行結(jié)果就會(huì)在任務(wù)隊(duì)列中放置一個(gè)事件。腳本運(yùn)行時(shí)先依次運(yùn)行執(zhí)行棧孝扛，然后從任務(wù)隊(duì)列中提取事件列吼，運(yùn)行任務(wù)隊(duì)列中的任務(wù)，這個(gè)過(guò)程不斷重復(fù)苦始，形成一個(gè)事件循環(huán)寞钥。
瀏覽器在解析過(guò)程中，異步請(qǐng)求外部資源陌选，像圖片理郑，js等。異步請(qǐng)求不影響HTML文檔加載咨油，但是當(dāng)文檔加載時(shí)遇見(jiàn)JS文件您炉，HTML文檔會(huì)掛起渲染，要等到j(luò)s文件加載完畢解析執(zhí)行完畢臼勉，才繼續(xù)渲染HTML邻吭。因?yàn)闉g覽器單線程，GUI渲染和js解析引擎互斥宴霸，不能同時(shí)處理囱晴。還有，JS有可能修改DOM結(jié)構(gòu)瓢谢，這就意味著JS執(zhí)行完成前畸写，后續(xù)所有資源的下載是沒(méi)有必要的，這就是JS阻塞后續(xù)資源下載的根本原因氓扛。CSS文件的加載不影響JS文件的加載枯芬，但是卻影響JS文件的執(zhí)行论笔。JS代碼執(zhí)行前瀏覽器必須保證CSS文件已經(jīng)下載并加載完畢。
ps：加載渲染慢千所，提高性能就要web優(yōu)化狂魔。
前端優(yōu)化的目的是什么 ?
1. 從用戶角度而言，優(yōu)化能夠讓頁(yè)面加載得更快淫痰、對(duì)用戶的操作響應(yīng)得更及時(shí)最楷，能夠給用戶提供更為友好的體驗(yàn)。
2. 從服務(wù)商角度而言待错，優(yōu)化能夠減少頁(yè)面請(qǐng)求數(shù)籽孙、或者減小請(qǐng)求所占帶寬，能夠節(jié)省可觀的資源火俄。
總之犯建，恰當(dāng)?shù)膬?yōu)化不僅能夠改善站點(diǎn)的用戶體驗(yàn)并且能夠節(jié)省相當(dāng)?shù)馁Y源利用。
前端優(yōu)化的途徑有很多瓜客，按粒度大致可以分為兩類适瓦，第一類是頁(yè)面級(jí)別的優(yōu)化，例如 HTTP請(qǐng)求數(shù)忆家、腳本的無(wú)阻塞加載犹菇、內(nèi)聯(lián)腳本的位置優(yōu)化等 ;第二類則是代碼級(jí)別的優(yōu)化，例如 Javascript中的DOM 操作優(yōu)化芽卿、CSS選擇符優(yōu)化、圖片優(yōu)化以及 HTML結(jié)構(gòu)優(yōu)化等等胳搞。
提高頁(yè)面性能
(1)頁(yè)面內(nèi)容
減少HTTP請(qǐng)求
- 合并js卸例、css等文件
- 使用css雪碧圖將背景圖合成一個(gè)文件
減少DNS查詢
用戶輸入 URL 以后，瀏覽器首先要查詢域名（hostname）對(duì)應(yīng)服務(wù)器的 IP 地址肌毅，一般需要耗費(fèi) 20-120 毫秒 時(shí)間筷转。DNS 查詢完成之前，瀏覽器無(wú)法從服務(wù)器下載任何數(shù)據(jù)悬而。
基于性能考慮呜舒，ISP、局域網(wǎng)笨奠、操作系統(tǒng)袭蝗、瀏覽器都會(huì)有相應(yīng)的 DNS 緩存機(jī)制。- IE 緩存 30 分鐘般婆，可以通過(guò)注冊(cè)表中 DnsCacheTimeout 項(xiàng)設(shè)置到腥；
- Firefox 混存 1 分鐘，通過(guò) network.dnsCacheExpiration 配置蔚袍；
首次訪問(wèn)乡范、沒(méi)有相應(yīng)的 DNS 緩存時(shí)，域名越多，查詢時(shí)間越長(zhǎng)晋辆。所以應(yīng)盡量減少域名數(shù)量渠脉。但基于并行下載考慮，把資源分布到 2 個(gè)域名上（最多不超過(guò) 4 個(gè)）瓶佳。這是減少 DNS 查詢同時(shí)保證并行下載的折衷方案连舍。
避免重定向
HTTP 重定向通過(guò)301/302狀態(tài)碼實(shí)現(xiàn)。HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html客戶端收到服務(wù)器的重定向響應(yīng)后涩哟，會(huì)根據(jù)響應(yīng)頭中
Location的地址再次發(fā)送請(qǐng)求索赏。重定向會(huì)影響用戶體驗(yàn)，尤其是多次重定向時(shí)贴彼，用戶在一段時(shí)間內(nèi)看不到任何內(nèi)容潜腻，只看到瀏覽器進(jìn)度條一直在刷新。
有時(shí)重定向無(wú)法避免器仗，在糟糕也比拋出 404 好融涣。雖然通過(guò) HTML meta refresh 和 JavaScript 也能實(shí)現(xiàn)，但首選 HTTP3xx跳轉(zhuǎn)精钮，以保證瀏覽器「后退」功能正常工作（也利于 SEO）威鹿。
- 最浪費(fèi)的重定向經(jīng)常發(fā)生、而且很容易被忽略：URL 末尾應(yīng)該添加
/但未添加轨香。比如忽你，訪問(wèn)http://astrology.yahoo.com/astrology將被 301 重定向到http://astrology.yahoo.com/astrology/（注意末尾的/）。如果使用 Apache臂容，可以通過(guò)Alias或mod_rewrite或DirectorySlash解決這個(gè)問(wèn)題科雳。- 網(wǎng)站域名變更：CNAME 結(jié)合
Alias或mod_rewrite或者其他服務(wù)器類似功能實(shí)現(xiàn)跳轉(zhuǎn)。
避免404錯(cuò)誤脓杉，404比301/302還嚴(yán)重
非核心內(nèi)容異步加載
js異步加載方式：動(dòng)態(tài)腳本加載糟秘、defer、async
js異步加載區(qū)別：（1）defer是在HTML解析完之后才執(zhí)行球散，如果是多個(gè)尿赚，按照加載的順序依次執(zhí)行
（2）async是在加載完成之后立即執(zhí)行，如果是多個(gè)蕉堰，執(zhí)行順序和加載順序無(wú)關(guān)
CSS異步加載
動(dòng)態(tài)創(chuàng)建link標(biāo)簽// 創(chuàng)建link標(biāo)簽` `const myCSS = document.createElement( "link" );` `myCSS.rel = "stylesheet";` myCSS.href = "mystyles.css"; // 插入到header的最后位置 document.head.insertBefore( myCSS,document.head.childNodes[document.head.childNodes.length - 1 ].nextSibling );第二種方式是將link元素的media屬性設(shè)置為用戶瀏覽器不匹配的媒體類型（或媒體查詢）凌净，如media="print"，甚至可以是完全不存在的類型media="noexist"嘁灯。對(duì)瀏覽器來(lái)說(shuō)泻蚊，如果樣式表不適用于當(dāng)前媒體類型，其優(yōu)先級(jí)會(huì)被放低丑婿，會(huì)在不阻塞頁(yè)面渲染的情況下再進(jìn)行下載性雄。
當(dāng)然没卸，這么做只是為了實(shí)現(xiàn)CSS的異步加載，別忘了在文件加載完成之后秒旋，將media的值設(shè)為screen或all约计，從而讓瀏覽器開(kāi)始解析CSS。
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">
第三通過(guò)rel屬性將link元素標(biāo)記為alternate可選樣式表迁筛，也能實(shí)現(xiàn)瀏覽器異步加載煤蚌。同樣別忘了加載完成之后，將rel改回去细卧。
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
四使用rel=“preload”<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">as必須
http協(xié)商緩存VS強(qiáng)緩存
使用緩存
服務(wù)器返回的HTTP頭部尉桩，有兩種定義緩存的保質(zhì)期方式
Expires:一個(gè)絕對(duì)日期Cache-Control:max-age=相對(duì)時(shí)間，單位秒
在過(guò)期前贪庙，緩存可以被任意使用蜘犁，如果沒(méi)過(guò)期，服務(wù)器端的文件改了止邮，只能更改請(qǐng)求地址这橙，強(qiáng)制下載。當(dāng)過(guò)期時(shí)間到了导披，需要在驗(yàn)證屈扎。驗(yàn)證方式有2種。- 添加If-Modified-Since首部
- 添加If-None-Match首部（在服務(wù)器返回的頭部中含有ETag時(shí)使用）
如果內(nèi)容改變撩匕，那么返回200鹰晨，否則返回304
注意，服務(wù)器的緩存有別于cookies滑沧，cookie并村、localStorage是客戶端數(shù)據(jù)存儲(chǔ)
使用CDN
CONTENT DELIVERY NETWORK，即內(nèi)容分發(fā)網(wǎng)絡(luò)滓技。其基本思路是盡可能避開(kāi)互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母炫锪省⒏€(wěn)定令漂。舉例：京東物流
（3）Cookie
減少cookie大小
Cookie 被用于身份認(rèn)證、個(gè)性化設(shè)置等諸多用途丸边。Cookie 通過(guò) HTTP 頭在服務(wù)器和瀏覽器間來(lái)回傳送叠必，減少 Cookie 大小可以降低其對(duì)響應(yīng)速度的影響。
%去除不必要的 Cookie妹窖；
%盡量壓縮 Cookie 大形吵；
%注意設(shè)置 Cookie 的 domain 級(jí)別骄呼，如無(wú)必要共苛，不要影響到 sub-domain判没；
%設(shè)置合適的過(guò)期時(shí)間。
（4）CSS
異步加載css隅茎，不要使用@import 引入css澄峰，減少css嵌套，使用gpu加速動(dòng)畫(huà)辟犀。gpu支持的css屬性：transform俏竞、opacity、filter.
.ball-running {
animation: run-around 4s infinite;
}
//開(kāi)啟gpu速堂竟，在gpu中渲染
@keyframes run-around {
0%: {
transform: translate(0, 0);
}
25% {
transform: translate(200px, 0);
}
50% {
transform: translate(200px, 200px);
}
75% {
transform: translate(0, 200px);
}
}
(5)JS
異步加載js腳本魂毁，將js腳本放在底部。
（6）DOM
避免回流和重繪
（7）圖片
1出嘹、合成雪碧圖席楚，也就是前面說(shuō)的壓縮，減少http請(qǐng)求
2疚漆、圖片懶加載酣胀，及非重要信息延遲加載。
懶加載的原理
將頁(yè)面中的一張小圖片指向一張固定小圖娶聘，然后定義data-src(自定義屬性data-*)闻镶，屬性指向真正的圖片地址，當(dāng)需要圖片顯示的時(shí)候丸升，把src的鏈接替換成data-src的地址即可铆农。
圖片要指定寬高
//css
.img{
width:40px;
height:40px;
}
//html
<img class='img' src="F:\HTML\LIANXI\imge\hot.gif" alt="" data-src="F:\HTML\LIANXI\imge\vip.gif">
//js
var img=document.querySelector('.img')
window.onscroll=function(e){
var ViewHeight=document.documentElement.clientHeight,
imgTop=img.getBoundingClientRect().top
if(imgTop<ViewHeight){
img.src=img.getAttribute('data-src');
}
}
上面這段代碼，在監(jiān)聽(tīng)滾輪事件是狡耻，會(huì)頻繁的觸發(fā)事件處理程序墩剖，不斷的計(jì)算元素到可視區(qū)的top距離，可以使用函數(shù)節(jié)流來(lái)控制請(qǐng)求執(zhí)行次數(shù)夷狰。實(shí)現(xiàn)起來(lái)很簡(jiǎn)單岭皂，就是第一次調(diào)用函數(shù)，設(shè)置定時(shí)器沼头，以后每次調(diào)用函數(shù)先清理計(jì)時(shí)器在定義計(jì)時(shí)器爷绘。真正需要做的部分在定時(shí)器的回掉函數(shù)中執(zhí)行。
var img=document.querySelector('.img'),ViewHeight=document.documentElement.clientHeight
function throttle(method,context){
var timer=null
clearTimeout(timer)
timer=setTimeout(function(){
method.call(context)
},100)
}
function getTop(){
var imgTop=img.getBoundingClientRect().top
if(imgTop<ViewHeight){
img.src=img.getAttribute('data-src');
}
}
window.onscroll=function(e){
throttle(getTop)
}
參考資料：CSS性能優(yōu)化的8個(gè)技巧
前端性能優(yōu)化最佳實(shí)踐
HTTP權(quán)威指南
