整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          原來從輸入網址到瀏覽器顯示的過程這么簡單,一看就懂!

          述從輸入網址到瀏覽器顯示的過程

            • 1.輸入網址URL
            • 2.DNS域名解析
            • 3.建立TCP連接
            • 4.瀏覽器向服務器發送HTTP請求
            • 5.服務器處理HTTP請求
            • 6.頁面渲染
            • 7.斷開TCP連接

          1.輸入網址URL

          在web瀏覽器窗口地址欄輸入想要訪問的網址URL。

          2.DNS域名解析

          以www.baidu.com為例,這是一個主機名也叫域名,而在整個互聯網中,路由器是以IP地址作為識別每個計算機的唯一標識,因此我們想要在互聯網中傳輸數據,就必須知道對方的IP地址。而DNS域名解析則幫助我們將主機名轉換成對應的IP地址。

          1. 一般來說,瀏覽器會首先查看自身緩存有沒有域名對應的IP地址,若有則DNS解析結束,直接返回該IP地址,若沒有,則查看本地硬盤的 hosts 文件,看看其中有沒有和這個域名對應的IP地址,如果有的話就直接使用 hosts 文件里面的 IP地址。
          2. 如果在本地的 hosts 文件沒有能夠找到對應的 IP地址,瀏覽器會發出一個 DNS請求到本地DNS服務器 。本地DNS服務器一般都是你的網絡接入服務器商提供,比如中國電信,中國移動。
          3. 查詢你輸入的網址的DNS請求到達本地DNS服務器之后,本地DNS服務器會首先查詢它的緩存記錄,如果緩存中有此條記錄,就可以直接返回結果,此過程是遞歸的方式進行查詢。如果沒有,本地DNS服務器還要向DNS根服務器進行查詢。
          4. 根DNS服務器沒有記錄具體的域名和IP地址的對應關系,而是告訴本地DNS服務器,你可以到域服務器上去繼續查詢,并給出域服務器的地址。這種過程是迭代的過程。
          5. 本地DNS服務器繼續向域服務器發出請求,在這個例子中,請求的對象是.com域服務器。.com域服務器收到請求之后,也不會直接返回域名和IP地址的對應關系,而是告訴本地DNS服務器,你的域名的解析服務器的地址。
          6. 最后,本地DNS服務器向域名的解析服務器發出請求,這時就能收到一個域名和IP地址對應關系,本地DNS服務器不僅要把IP地址返回給用戶電腦,還要把這個對應關系保存在緩存中,以備下次別的用戶查詢時,可以直接返回結果,加快網絡訪問,此過程是遞歸的過程。

          3.建立TCP連接

          在HTTP工作開始之前,web瀏覽器首先要通過網絡與web服務器建立連接,該連接是通過TCP來完成的。在TCP/IP協議模型中,HTTP屬于應用層協議,TCP屬于傳輸層協議,應用層協議HTTP工作之前首先要在傳輸層建立TCP連接,HTTP建立TCP連接通常使用端口號80。

          4.瀏覽器向服務器發送HTTP請求

          瀏覽器向 Web 服務器發起一個 HTTP 請求,HTTP 協議是建立在 TCP 協議之上的應用層協議,其本質是在建立起的TCP連接中,按照HTTP協議標準發送一個索要網頁的請求。在這一過程中,會涉及到負載均衡等操作。

          拓展:什么是負載均衡?

          負載均衡,英文名為 Load Balance,其含義是指將負載(工作任務)進行平衡、分攤到多個操作單元上進行運行,例如 FTP 服務器、Web 服務器、企業核心服務器和其他主要任務服務器等,從而協同完成工作任務。負載均衡建立在現有的網絡之上,它提供了一種透明且廉價有效的方法擴展服務器和網絡設備的帶寬、增加吞吐量、加強網絡處理能力并提高網絡的靈活性和可用性。

          負載均衡是分布式系統架構設計中必須考慮的因素之一,例如天貓、京東等大型用戶網站中為了處理海量用戶發起的請求,其往往采用分布式服務器,并通過引入反向代理等方式將用戶請求均勻分發到每個服務器上,而這一過程所實現的就是負載均衡。

          5.服務器處理HTTP請求

          服務器獲取到客戶端的 HTTP 請求后,會根據 HTTP 請求中的內容來決定如何獲取相應的文件,并將文件發送給瀏覽器,返回HTTP響應。

          6.頁面渲染

          瀏覽器在接受到服務器的HTTP響應時,開始顯示頁面,首先解析HTML文件構建 DOM 樹,然后解析 CSS 文件構建渲染樹,等到渲染樹構建完成后,瀏覽器開始布局渲染樹并將其繪制到屏幕上。
          在瀏覽器顯示HTML時,它會注意到需要獲取其他地址內容的標簽。這時,瀏覽器會發送一個獲取請求來重新獲得這些文件。比如我要獲取外圖片,CSS,JS文件等,類似于下面的鏈接:

          圖片:http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
          CSS式樣表:http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
          JavaScript 文件:http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js

          這些地址都要經歷一個和HTML讀取類似的過程。所以瀏覽器會在DNS中查找這些域名,發送請求,重定向等等。不像動態頁面,靜態文件會允許瀏覽器對其進行緩存。有的文件可能會不需要與服務器通訊,而從緩存中直接讀取,或者可以放到CDN中。

          7.斷開TCP連接

          客戶端和服務器通過四次揮手終止 TCP 連接。

          著互聯網的發展,我們每天都會接觸到大量的PDF文件。有時候,我們需要將這些PDF文件轉換為圖片或HTML格式,以便更好地在網頁或其他平臺上展示。但是,許多人在面對這個問題時都會感到困惑,不知道應該如何下手。今天,我就來教大家如何快速將PDF轉換為圖片和HTML。

          以Windows系統的電腦和【首助編輯高手】為例,我們可以按照以下步驟進行操作:

          1. 登錄軟件后,點擊“PDF工具箱”。

          1. 來到主界面,軟件界面簡潔明了。在格式轉換中選擇“pdf轉圖片”模式。

          1. 添加pdf文件或文件夾到軟件上。

          1. 設置新文件保存位置后,點擊“開始轉換”后,等待片刻即可。

          1. 打開新文件夾可以看到每個pdf文件轉換的圖片都存放在以原文件名命名的文件夾中。

          1. 打開原pdf文件和圖片查看,可以看到格式轉換成功,文件內容格式沒有任何損壞。

          1. 下面再試試pdf轉html格式,將格式轉換切換之后,后續步驟如上。

          8、打開保存html文件夾,可以看到每個pdf都生成對應的html。

          9、打開原pdf文件和html文件對比,內容格式也一致,說明pdf轉換html也是成功的,并且轉換過程非常簡單快速。

          家好,我是 Echa。

          今天來分享 50 個超實用的 Chrome 瀏覽器擴展!

          JSON

          1. JSON Viewer Pro

          JSON Viewer Pro 用于可視化JSON文件。其核心功能包括:

          • 支持將JSON數據進行格式化,并使用屬性或者圖表進行展示;
          • 使用面包屑深入遍歷 JSON 屬性;
          • 在輸入區寫入自定義 JSON;
          • 導入本地 JSON 文件;
          • 使用上下文菜單下載 JSON 文件;
          • 網址過濾器;
          • 改變主題;
          • 自定義 CSS ;
          • 復制屬性和值;

          輸入界面如下:

          格式化之后:

          2. JSONVue

          JSONVue 是一個JSON數據查看器,主要用來格式化JSON數據:

          網站技術

          3. Library Sniffer

          Library Sniffer 是一款給開發者使用的工具,能夠探測當前網頁所使用的類庫、框架和服務器環境,為開發者提供了方便。

          4. Wappalyzer

          Wappalyzer 擴展可以用來識別網站背后的底層技術。通過此擴展,可以了解特定應用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關 Web 服務器、編程語言、框架、內容管理系統、分析的信息工具、數據庫等。

          5. WhatRuns

          WhatRuns 擴展程序只需單擊一下即可找到任何網站上使用的技術。

          開發調試

          6. PerfectPixel by WellDoneCode

          使用PerfectPixel插件可以將設計圖加載至網頁中,與已成型的網頁進行重疊對比,以幫助開發和設計人員規范網頁像素精度。這是一款可以優化前端頁面顯示的Chrome插件。

          7. Clear Cache

          可以使用此擴展程序快速清除緩存,無需任何確認對話框、彈出窗口等。可以在選項頁面上自定義要清除的數據和數量,包括:應用程序緩存、緩存、Cookie、下載、文件系統、表單數據、歷史記錄、索引數據庫、本地存儲、插件數據、密碼和 WebSQL。

          8. VisBug

          VisBug 是一個使用 JavaScript 構建的開源網頁設計調試工具,它可以讓用戶使用點擊式和拖放式界面來查看網站的元素。

          9. Debug CSS

          Debug CSS 是一個幫助調試CSS的插件。他可以顯示出頁面元素的輪播,按住Ctrl,并將鼠標懸浮在元素上,即可查看其信息:

          10. CSS Viewer

          CSS Viewer 是一款適用于 Web 開發人員的高效 Chrome 擴展。顧名思義,CSS 查看器可以顯示將鼠標懸停在任何網頁上的元素的 CSS 屬性。

          11. EditThisCookie

          EditThisCookie 是一個 cookie 管理器。可以添加,刪除,編輯,搜索,鎖定和屏蔽cookies。

          12. React Developer Tools

          React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發者工具中檢查 React 組件層次結構。安裝此插件之后,將在 Chrome DevTools 中獲得兩個新選項卡:"?? Components" 和 "?? Profiler":

          • Components 選項卡顯示了在頁面上呈現的根 React 組件,以及它們最終呈現的子組件;
          • Profiler 選項卡用來記錄性能信息。

          13. Vue.js devtools

          Vue.js devtools 是一款基于chrome瀏覽器的用于調試Vue.js應用程序的插件,可以使得開發人員大大提高調試效率。支持用戶對DOM結構數據結構進行解析和調試功能。

          14. Augury

          Augury 可以幫助開發人員在 Google Chrome 瀏覽器中調試和分析 Angular 應用程序。

          15. Firebug Lite for Google Chrome

          Firebug Lite是火狐瀏覽器中著名的開發者工具firebug插件移植到Chrome中的插件,在Chrome中安裝了Firebug Lite插件以后,開發人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調試網頁內容,其包含了基本的HTML、CSS以及Javascript的調試功能,用于幫助網頁前端開發工程師快速地調試網頁,以便及時地找到網頁中的BUG并及時修復。

          16. HTML Validator

          HTML Validator 在 Chrome 的開發者工具中添加了 HTML Validator。HTML 頁面的錯誤數通過瀏覽器狀態欄中的圖標顯示,詳細信息可以在瀏覽器的開發者工具中查看。

          17. Web Developer

          Web Developer 擴展為帶有各種 Web 開發工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox,并且可以在這些瀏覽器支持的任何平臺上運行,包括 Windows、macOS 和 Linux。

          18. Requestly

          Requestly 是一款Chrome和Firefox瀏覽器插件,提供URL轉發、修改HTTP請求和結果、插入腳本等功能。

          19. Window Resizer

          Window Resizer 主要用來調整瀏覽器窗口的大小以模擬各種屏幕分辨率。

          20. Responsive Viewer

          Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發人員在開發響應式網站/應用程序時測試多個屏幕。

          21. Moesif Origin & CORS Changer

          此插件允許直接從瀏覽器發送跨域請求,而不會收到跨域錯誤。可以使用此插件覆蓋 Request Origin 標頭,并將 Access-Control-Allow-Origin 設置為 *.

          22. ColorPick Eyedropper

          ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具,可讓從網頁等中選擇顏色值。

          23. CSSPeeper

          CSS Peeper 用于檢查和復制元素樣式的優秀工具,使用 CSSPeeper 可以將鼠標懸停在網頁中的任何元素上,然后單擊鼠標即可復制元素的樣式。

          24. Dimensions

          Dimensions是一款能幫助使用者對網頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件,該插件在點擊啟動插件圖標后,可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量,同時還可以通過使用快捷鍵來快速啟用或關閉該插件的功能,簡單實用。

          25. Site Palette

          Site Palette 用于生成調色板。設計師和前端開發人員必備的工具。可以通過這款插件輕松獲取網站的配色方案。

          26. ColorZilla

          ColorZilla 是一款功能強大地提取網頁色彩的工具;也是個快速的對顏色進行調節的Chrome插件,許多的用戶將這款軟件稱呼為顏色吸取插件,它提取的顏色是非常的多樣化,還可生產css顏色的代碼等。

          • 吸管器-獲取頁面上任何像素或區域的顏色;
          • 一個先進的顏色選擇器類似于可以在Photoshop和Paint Shop Pro中找到的;
          • 網頁顏色分析器-分析任何網頁上的DOM元素顏色,找到相應的元素;
          • 終極CSS梯度發生器;
          • 調色板查看器與7預先安裝調色板;
          • 顏色歷史最近挑選的顏色;
          • 顯示標簽名稱,類別,編號,大小等元素信息;
          • 光標下的輪廓元素;
          • 自動將生成或采樣的顏色復制到CSS RGB,Hex和其他格式的剪貼板;
          • 使用鍵盤快速采樣頁面顏色的鍵盤快捷鍵。

          字體

          27. WhatFont

          當我們想查看網頁中文字的字體時,最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢?WhatFont 就是一個查看網頁字體的Chrome擴展。只需要的點擊擴展圖標,再點需要查看為文字即可:

          28. Fonts Ninja

          Fonts Ninja 可以從任何網站識別字體、添加書簽、試用并購買它們。

          標簽頁

          29. BrowserStack

          使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設置 12 個瀏覽器以實現快速訪問并最大限度地減少切換瀏覽器所花費的時間。

          30. Toby

          Toby 是一款 Chrome 新標簽頁工具,能夠將未讀的標簽頁分組顯示在新標簽頁中,這樣就能把所有未看完的標簽頁都關閉了。分組相當于多個 Chrome 窗口,將你的標簽頁都拖進 Toby 中,就不需要實時開著占地方了。

          31. daily.dev

          該擴展提供了每日熱門開發者新聞,不需要再浪費時間搜索高質量的文章了。

          32. Momentum

          Momentum 擁有漂亮的新標簽頁面,每日更新精彩背景壁紙圖片,可設置每日新鮮事焦點以及跟蹤待辦事項,無廣告,無彈窗。

          33. The Great Suspender

          The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內存占用。如果同時打開許多選項卡,在可配置的時間之后未查看的選項卡將在后臺自動掛起,從而釋放該選項卡消耗的內存和 CPU。

          34. Session Buddy

          Session Buddy是一個可以幫助用戶查看、新增、編輯當前網站Session狀態的Chrome插件。用戶可以利用該插件保存網站當前的狀態以便在關閉Chrome或關閉計算機后恢復,從而達到節省內存的作用。

          Github

          35. Octotree

          Octotree 旨在讓 GitHub 體驗更好。通常,為了檢查 Github 中的子文件夾,需要手動單擊文件夾并導航。Octotree 擴展解決了這個問題。此擴展在項目的左側顯示存儲庫的目錄結構,這有助于更好地理解文件夾結構。

          1_EKF88oqIyX6FzgueCKdtXg.gif

          36. File Icons for GitHub and GitLab

          File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標替換為特定文件類型的圖標。

          網頁測試

          37. axe DevTools

          ax DevTools 是一個快速、輕量級但功能強大的測試工具,由 Deque 開發的世界上最值得信賴的可訪問性測試引擎 axe-core 驅動。使用 ax DevTools 在網站開發過程中查找并修復更多可訪問性問題。

          38. OctoLinker

          OctoLinker 可以將特定語言的語句(如 include、require 或 import)轉換為鏈接。當打開一個包含多個導入語句的文件并且想要快速打開它時,只需將鼠標懸停在鏈接的文件上并單擊即可打開。

          39. Web Developer Checklist

          此擴展可幫助 Web 開發人員分析網頁是否違反最佳實踐。

          40. Check My Links

          Check My Links 是一個鏈接檢查器,它可以抓取網頁并查找損壞的鏈接。

          41. Checkbot

          Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務器上的單個文檔或一組文檔。它會創建一個報告,該報告匯總了引起某種警告或錯誤的所有鏈接。

          42. PageSpeed Insights

          Google Page Speed Insighs 是一款旨在優化所有設備上的網頁、提高網頁加載速度的工具。

          43. Meta SEO Inspector

          META SEO inspector是一款可以幫助用戶分析網頁的meta信息并得到SEO評估的谷歌瀏覽器插件。

          隱私廣告

          44. Ghostery

          Ghostery 是強大的隱私保護擴展程序。其主要有以下功能:

          • 攔截廣告:Ghostery 內置的廣告攔截工具可以移除網頁上的廣告,防止網頁雜亂無章,讓你專注于想看的內容。
          • 保護隱私:利用 Ghostery 可以查看和攔截所瀏覽的網站上的跟蹤器,控制收集數據的跟蹤器。增強反跟蹤功能還能將數據匿名化,進一步保護隱私。
          • 提高瀏覽速度:Ghostery 的智能攔截功能可以自動攔截和取消攔截跟蹤器來滿足網頁質量標準,提高網頁加載速度,優化網頁性能。

          45. AdBlock

          AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網站上攔截廣告和彈窗。

          效率工具

          46. Marinara

          番茄工作法(Pomodoro?)時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標 ? 追蹤Pomodoro歷史和統計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效

          47. Loom

          Loom 可以用來快速錄制視頻,并且能夠將錄制的視頻上傳到指定的網頁中,Loom還支持在用戶點擊啟動插件時,立即捕捉屏幕圖像,同時開始視頻錄制操作,還可以將錄制好的視頻復制到粘貼板中存儲。

          48. GoFullPage

          GoFullPage 是一款全屏截圖插件(整個網頁截圖),完整捕獲您當前頁面的屏幕,進行滾動截圖,而無需任何額外的權限。單擊擴展程序圖標,然后將其傳輸到屏幕快照的新標簽頁中,可以在其中將其下載為圖像或PDF,甚至只需拖動即可,保存到桌面。

          49. BetterViewer

          BetterViewer 可以提供更好的圖像查看體驗,旨在替代基于 Chrome 瀏覽器中內置的圖像查看模式。使用時,只需在頁面右鍵點擊圖片,選擇“在新標簽頁中打開圖片”即可。

          50. svg-grabber

          svg-grabber 是一個快速預覽并從網站獲取所有 svg 的工具。可以用來預覽、下載和復制網站中所有 SVG 圖標和插圖的代碼。


          主站蜘蛛池模板: 日本高清一区二区三区| 一区二区三区在线观看视频| 亚洲无线码在线一区观看| 国产伦理一区二区三区| 午夜视频久久久久一区| 中文字幕精品一区二区精品| 亚洲爆乳无码一区二区三区| 精品人伦一区二区三区潘金莲 | 少妇一晚三次一区二区三区| 一区二区三区在线观看| 日本一区二区高清不卡| 国产在线一区二区三区| 中文字幕无码不卡一区二区三区| 国内精品视频一区二区三区| 亚洲欧洲一区二区三区| 亚洲综合一区二区国产精品| 无码国产精品一区二区高潮| 精品国产香蕉伊思人在线在线亚洲一区二区| 一区二区三区在线| 中文字幕日韩丝袜一区| 加勒比精品久久一区二区三区 | 在线观看国产区亚洲一区成人| 无码一区二区三区免费| 欧洲无码一区二区三区在线观看 | 91无码人妻精品一区二区三区L| 免费一本色道久久一区| 国产一区在线mmai| 婷婷亚洲综合一区二区| 日韩精品一区二区亚洲AV观看| 青娱乐国产官网极品一区| 日本一道一区二区免费看| 无码aⅴ精品一区二区三区浪潮| 亚洲一区二区三区在线观看蜜桃| 无码人妻一区二区三区精品视频| 亚洲综合av一区二区三区 | 国产一区二区三区免费看| 一区二区三区视频在线| 无码人妻精品一区二区在线视频| 人妻体内射精一区二区三四| 亚洲av无码一区二区乱子伦as| 美女福利视频一区|