標簽目錄：瀏覽器

2019
01-03

你真的了解回流和重繪嗎？

回流和重繪可以說是每一個web開發者都經常聽到的兩個詞語，我也不例外，可是我之前一直不是很清楚這兩步具體做了什么事情。最近由于部門內部要做分享，所以對其進行了一些研究，看了一些博客和書籍，整理了一些內容并且結合一些例子，寫了這篇文章，希望可以幫助到大家。瀏覽器的渲染過程本文先從瀏覽器的渲染過程來從頭到尾的講解一下回流重繪，如果大家想直接看如何減少回流和重繪，可以跳到后面。（這個渲染過程來... 繼續閱讀 >

2019
01-03

2018 年瀏覽器混戰：為什么技術救不了 Edge？

隨著微軟正式確認放棄Edge，并基于Chromium引擎重啟新的瀏覽器，我想借此機會分享一些有關當前Web瀏覽器格局的想法。Edge：注定要失敗在推出3年之后，從市場份額來看，Edge無疑是失敗的。根據用戶的使用數據來看，它的份額僅為4-5％。這個數字居然是來自一家半壟斷運營桌面操作系統的公司，而它曾經擁有80-90％的市場份額，幾乎是完全壟斷的。更糟糕的是，如果再算上移動市場，市場份額急劇下降至2％... 繼續閱讀 >

2018
12-07

微軟正在構建一個基于 Chromium 的瀏覽器并計劃取代 Microsoft Edge

微軟終于在瀏覽器上認輸了？在用Edge取代多年的IE之后，如今Edge也低下了頭顱，承認了Chrome的勝利。MicrosoftEdge瀏覽器在2015年1月21日公布，并在3月30日發布了第一個預覽版，并在之后成為Windows10的默認瀏覽器，采用EdgeHTML渲染引擎并在體驗上相比IE有著多項改進。但現在 Edge默認瀏覽器的地位已經岌岌可危，根據windowscentral的報道，微軟將放棄自家的EdgeHTML渲染引... 繼續閱讀 >

2017
05-19

WebView 緩存原理分析和應用

一、背景現在的App開發，或多或少都會用到Hybrid模式，到了WebView這邊，經常會加載一些js文件(例如和WebView用來Native通信的bridge.js)，而這些js文件不會經常發生變化，所以我們希望js在WebView里面加載一次之后，如果js沒有發生變化，下次就不用再發起網絡請求去加載，從而減少流量和資源的占用。那么有什么方式可以達到這個目的呢?先得從WebView的緩存原理入手。二、WebView的緩存類型WebView主要包括兩類... 繼續閱讀 >

2017
05-06

探討判斷橫豎屏的最佳實現

在移動端，判斷橫豎屏的場景并不少見，比如根據橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。判斷橫豎屏的實現方法多種多樣，本文就此來探討下目前有哪些實現方法以及其中的優缺點。CSSMediaQueries通過媒體查詢的方式，我們可以通過以下方法來實現根據橫豎屏不同的情況來適配樣式：1.內聯樣式@mediascreenand(orientation:portrait){    //豎屏}@... 繼續閱讀 >

2017
04-27

寫好循環也不容易--8種遍歷方法執行速度深度°對比

關于數組或對象遍歷，相信很多人都沒有深入觀察過執行效率。這是一個曾在群里吵翻天的話題，讀懂后你將成為遍歷效率話題的大師。導讀遍歷數組或對象是一名程序員的基本素養之一.然而遍歷卻不是一件簡單的事,優秀的程序員知道怎么去選擇合適的遍歷方法,優化遍歷效率.本篇將帶你走進JavaScript遍歷的世界,享受分析JS循環的快感.本篇所有代碼都可以直接運行,希望您通讀本篇后,不止是瀏覽,最好是親手去實踐下.... 繼續閱讀 >

2017
03-30

淺析前端頁面渲染機制

作為一個前端開發，最常見的運行環境應該是瀏覽器吧，為了更好的通過瀏覽器把優秀的產品帶給用戶，也為了更好的發展自己的前端職業之路，有必要了解從我們在瀏覽器地址欄輸入網址到看到頁面這期間瀏覽器是如何進行工作的,進而了解如何更好的優化實踐，本篇主要圍繞這兩點展開闡述。前端頁面渲染機制可謂是老生常談，但又很有必要再談的話題，于是還是決定寫一篇，即是對知識的回顧總結，又能與大家分享，何樂而不為。網上相關類型... 繼續閱讀 >

2016
03-28

瀏覽器與服務器的消息通信

最近工作中遇到一個場景，商家在商家后臺需要實時的獲取到有沒有新訂單，有的話是幾個；這個需求類似與日常中使用QQ或者微信時的新信息提醒一樣，只要有新信息就需要提醒；商家基本在PC上使用，各式瀏覽器都有:如IE系列（7.0，8.0，9.0及以上），chrome內核，firefox等；功能所屬的部署在Tomcat6.0上，如果技術需要可以部署到Tomcat7.0上;我們先做做技術調研，這種瀏覽器與服務器實時通信的方式有哪些方式。AJA... 繼續閱讀 >

2016
01-22

瀏覽器緩存知識小結及應用

瀏覽器緩存，也就是客戶端緩存，既是網頁性能優化里面靜態資源相關優化的一大利器，也是無數web開發人員在工作過程不可避免的一大問題，所以在產品開發的時候我們總是想辦法避免緩存產生，而在產品發布之時又在想策略管理緩存提升網頁的訪問速度。了解瀏覽器的緩存命中原理，是開發web應用的基礎，本文著眼于此，學習瀏覽器緩存的相關知識，總結緩存避免和緩存管理的方法，結合具體的場景說明緩存的相關問題。希望能對有需要的人... 繼續閱讀 >

2015
12-07

瀏覽器 HTTP 緩存原理分析

以前項目中遇到了很多瀏覽器緩存相關的問題，也在網上查過資料，搞過服務器的配置，來確?？蛻舳思虞d服務器資源的速度和資源有效性。最近仔細看了下http協議中和緩存相關的一些屬性，總結一下。瀏覽器緩存原理文字版描述①瀏覽器第一次訪問服務器資源/index.html在瀏覽器中沒有緩存文件，直接向服務器發送請求。服務器返回 200OK，實體中返回index.html文件內容，并設置一個緩存過期時間，一個文件修改時間，一個根... 繼續閱讀 >

2015
11-17

當你輸入一個網址后按回車，實際會發生什么?

英文原文：WhatreallyhappenswhenyounavigatetoaURL，編譯：寒冬星空作為一個軟件開發者，你一定會對網絡應用如何工作有一個完整的層次化的認知，同樣這里也包括這些應用所用到的技術：像瀏覽器，HTTP，HTML，網絡服務器，需求處理等等。本文將更深入的研究當你輸入一個網址的時候，后臺到底發生了一件件什么樣的事～1.首先嘛，你得在瀏覽器里輸入要網址: 2.瀏覽器查找域名的IP地址導航的第一步是通過訪問... 繼續閱讀 >

2015
08-26

瀏覽器可以有多快？

React.js以高效的UI渲染著稱，其中一個很重要的原因是它維護了一個虛擬DOM，用戶可以直接在虛擬DOM上進行操作，React.js用diff算法得出需要對瀏覽器DOM進行的最小操作，這樣就避免了手動大量修改DOM的時候造成的性能損失。等等，明明是在中間加了一層，為什么結果反而變快了呢？React.js的核心思想是認為DOM操作是緩慢的，因此可以需要最小化DOM操作，以換取整體的性能提升。DOM操作慢是有目共睹的，而其... 繼續閱讀 >

2015
08-01

Edge瀏覽器能為微軟贏回Web開發者的心嗎？

最新的Windows10操作系統帶來了一個新的瀏覽器Edge，新的瀏覽器快速、穩定，而且長得也比之前的IE好看。但web開發者可能不會在意這些，它們在意的是，Edge對其站點支持和渲染情況如何。在過去十多年的時間里，web網頁世界一直在發生著轉變，IE曾經一統世界，但后來又被谷歌的Chrome趕超——因為Chrome更快也更可靠。通過Edge瀏覽器，微軟期望重新贏得開發者的心，而且也看得出來的確下了功夫。... 繼續閱讀 >

2015
07-31

32種谷歌瀏覽器插件，程序員的福音

對于網頁設計人員或網站開發者來說，更喜歡使用像FF的此類瀏覽器，原因是其具有強大的輔助插件，可以幫助網頁制作與開發提高效率，那么同樣對于GoogleCchrome瀏覽器來說也是具有大量的此類插件，本文收集了一些針對GoogleCchrome瀏覽器進行網頁制作開發的插件工具?？梢杂行岣呔W頁設計師或前端開發者的工作效率。無論是Firefox還是GoogleChrome，其強大的擴展都是吸引我們最大的原因之一。下面介紹的是網頁設計和... 繼續閱讀 >

2015
05-27

憑這5點你應該放棄IE ！改用微軟Edge瀏覽器

很多 Windows 用戶可能還不知道微軟的 Edge 瀏覽器是什么，該瀏覽器在公布初期，曾稱之為 Project Spartan，直到接近內測登場才更名為 Microsoft Edge，再接下來按照微軟的計劃，Edge 將成為未來 Windows 10 的默認瀏覽器。按照微軟的說法，Microsoft Edge 不支持老版本的 Windows 系統，這也是與 Internet Explorer ... 繼續閱讀 >

2015
05-23

漲姿勢！為什么Chrome瀏覽器特愛吃內存

微軟用慣用的手法——改名——給IE被黑的一生畫上了句號。還好，它在技術段子圈里早就有了接班人：Chrome。Chrome很好很強大，速度極快、功能很多。但同時它也是你的電腦內存不足或者耗電太快的罪魁禍首。沒辦法，Chrome太愛吃內存了（如頭圖）。為什么？我們找到了4個最關鍵的答案，不需要特別懂技術也可以理解。1.Chrome把你在瀏覽器上做的每件事都拆成獨立的進程在大多... 繼續閱讀 >