隨著云計算的發展,越來越多的應用都已經遷移到云上,那么一款好用的瀏覽器就顯得格外重要。Chrome瀏覽器從發布以來一直在吞噬瀏覽器市場,直到今日一直穩坐瀏覽器榜首的位置,無人能撼動。的確,Chrome瀏覽器在速度、擴展等方面非常出色,但在國內真的適合使用Chrome瀏覽器嗎?我又是為什么從Chrome遷移到Firefox?
老樣子,本文思維導圖如下:
Chrome瀏覽器曾是我最主要的瀏覽器,沒有之一,但隨著Google撤出中國,Chrome與我漸行漸遠。眾所周知的原因,Chrome在國內不能使用Google服務,這就導致出現了以下問題:
雖然還有很多別的辦法可以間接的實現同步、安裝擴展的功能,但對于小白用戶和懶人(例如我)十分不友好,即使找到教程一步一步安裝還是會出現新的問題,這樣你又要搜索新出問題,一直反復,直到我開始思考是否需要換個新的瀏覽器!
在選擇新的瀏覽器有兩個原則必須滿足:
能滿足這兩點的瀏覽器真的很多,最先使用的微軟新推出的Edge瀏覽器。因為Edge現在也開始使用Chromium內核(和Chrome內核一致),這樣能保證速度。Edge已經發布正式版,現在正在體驗中,不過目前看來Edge的擴展商店應用有限,還待完善。
國內的獵豹、QQ等瀏覽器現在也都開始使用Chromium內核,但擴展性不強。再看看瀏覽器市場份額,Firefox映入眼簾。
2019年桌面端瀏覽器市場份額
相比于Chrome的限制,更加推薦小白用戶使用Firefox,下面我們從移動端和桌面端分別談談Firefox的表現。先說移動端,把重點放在桌面端,最后推薦一下個人使用頻率超高的插件,供值友參看。
因為蘋果的限制,所有在App Store上架的瀏覽器必須采用和Safari相同的WebKit內核,火狐為了能加入移動市場大戰妥協了。
所以在iPhone、iPad上的瀏覽器也就談不上性能的區分了,主要還是看瀏覽體驗上是否能和桌面端保持一致,這點火狐做的還不錯。Firefox iOS端加入了本地門戶網站,支持書簽、歷史記錄、登錄信息的同步。
界面設計和桌面端保持一致,通過賬號能多設備聯動。
支持發送到設備,支持桌面版網站
手機端支持書簽、歷史記錄以及登錄信息同步。
Firefox設置界面
支持Siri快捷操作。
總之,一款手機端該有的功能它都有,而且能實現多設備之間的互動,這點體驗很好!
Firefox和Chrome瀏覽器在內核上有本質的不同,隨著Chrome一直在搶占桌面端瀏覽器的市場,Firefox背水一戰,推出Firefox Quantum(全新渲染)。至于火狐是如何革自己的命感興趣的可以搜索一下。
Firefox Quantum:
設計上:向扁平化設計靠攏,界面更加簡潔。現在默認的界面就已經非常漂亮,甚至不需要安裝主題擴展。如果你想讓瀏覽器更加個性化可以通過擴展實現。
性能上:速度提升,效率提升。采用全新編寫的渲染方式,讓網站的加載、打開速度都較過去有很大的提升。下圖是Firefox和Chrome對比。
Firefox和Chrome在常用網站打開速度對比(圖片來自網絡)
擴展上:經過這兩年的發展,擴展數量上已經很多,最重要的是你常用的擴展它都有。
安裝擴展不費勁
最后再說兩點需要注意的地方:
為什么有國際版和中國版,火狐官方給出的答復:
Because the great wall in China, we need to provide local service as default sync service in China. And users can switch between local service and global service by enable/disable a preference.
國際版與國內版瀏覽器本身沒有太大的區別,只是在功能和擴展上更加符合中國上網習慣。但是國際版國內版的賬號是不通用的,如果想多設備聯動你需要登錄同一版本。我在初次安裝時沒有注意這一點還在納悶為什么不能同步,提醒大家一下。
非常簡單,如果你想切換,只需退出登錄,在同步選項卡中選擇“切換至全球服務”即為國際版,“切換至本地服務”即為中國版
切換全球服務
如果你想從Chrome遷移到Firefox非常方便,瀏覽器內置的數據遷移非常好用。選擇Chrome中想要遷移的數據,不僅僅是書簽、歷史記錄,還支持網站登錄信息的遷移,一步到位,減少你在重新設置的煩惱。
從Chrome到Firefox遷移很簡單
多設備同步這個功能真的很喜歡,可以實現類似于Apple生態圈中的同步功能。在Windows、Mac、iPhone、iPad上可以發送網頁信息,方便在多設備上切換使用。
網頁端發送
客戶端接收
把書簽、歷史信息放在側邊欄,方便管理,非常喜歡這個功能。
書簽側邊欄
外觀類插件
重新設計的界面已經非常簡單,但如果你還想根據自己的喜好更換,可以試一試Firefox官方插件Color,設置非常簡單,所見即所得,幾部就能完成瀏覽器的個性化。
Firefox Color
想瀏覽器變得更加生動,試試這款插件,Tab顏色隨著網頁主題顏色變換,非常炫酷。
標簽變色
如果上述還是不能滿足你,還想要更加專業的修改,可以試一試Stylus,這款插件的專業性就要強很多。
Stylus
黑暗模式,雖然現在部分網站已經支持黑暗模式,但是大部分還是不支持。通過Dark Reader插件能將網頁轉換為黑暗模式,更加適合在晚上觀看。
可以自己設定
實用工具類插件
簡閱這款有名的閱讀類插件已經登錄Firefox了,點擊一下,讓你更加專注的內容本身上,提供更好的沉浸式閱讀體驗。
提供更好的閱讀體驗
定義自己的閱讀模式
大名鼎鼎的屏蔽廣告類插件,不解釋了。
喜歡Markdown的值友可以試試這款插件,通過自定義CSS,可以讓你的內容在不同平臺都有統一的樣式,非常方便。
Markdown Here
電腦看時間長了,眼睛酸了,可以試試這款文字轉音頻插件,聽聽也不錯。
將網頁文字內容轉換為音頻
我是OneNote的重度用戶,一鍵將網頁內容粘貼到OneNote。
截圖軟件,提供多種選擇,截圖完成后保存可以選擇為圖片或者PDF文件。
提供多種截圖模式,保存可以是圖片或PDF文件。
鼠標的手勢操作,通過自定義可以快速實現功能。
官方提供的“小號“神器,可以在一個瀏覽器中通過不同的Containers實現登錄不同的賬號,通過顏色區分,是真正的小號神器。非常推薦!
腳本管理插件,各種小功能走起來,用腳本行天下,哈哈!
主要是針對百度云盤,自動復制云盤分享的鏈接和密碼,自動填充,直接打開分享內容,特別是一些沒有密碼的也可使用。
自動提取秘鑰
邊刷微博,邊學習(上網)。
這個不是插件,而是一個網站,Firefox Send,文件最大上傳支持1G,上傳后下載一次或者24小時無下載即刪除,臨時大文件可以試一試,速度還可以。
前面便是我從Chrome遷移到Firefox的新路歷程,如果你和我一樣,想實現多設備同步,插件安裝方便,可以給Firefox一個機會。
隨著微軟的Edge正式發布,相信瀏覽器市場還會有變動。目前Edge使用起來還是比較方便的,但是能不能撼動Chrome瀏覽器大哥的位置,還需要時間和深度體驗,關于Edge我會在以后的文章中詳細介紹。
以上!我是麥豆爸爸!
#頭條數碼潛力作者#
實很復雜,因為瀏覽器的主要功能是通過向服務器請求并在瀏覽器窗口中顯示它來顯示您選擇的Web資源。但瀏覽器從“界面”到“渲染”,已經做了非常多的步驟,最終呈現在我們面前就是很簡單的網頁內容,下面我會詳細敘述下瀏覽器內核的功能。
瀏覽器的核心部分應該是瀏覽器核心的“渲染引擎”,其主要作用是解釋頁面語法并渲染頁面。因此,“渲染引擎”確定瀏覽器如何顯示網頁的內容和格式信息。不同的瀏覽器內核對網頁編寫的語法的解釋不同,從而導致呈現效果不同,從而導致兼容性問題。
1.Trident
Trident(IE內核):該內核程序于1997年在IE4中首次采用。它是由Microsoft在Mosaic代碼的基礎上進行修改的,并在IE11中使用。也通常稱為“ IE內核”。由于IE本身的“壟斷”,Trident內核很長時間沒有更新,這導致與W3C標準的脫節并暴露了安全性問題。
在2011年,Trident開始從IE 9支持HTML5和CSS3。自版本11起,IE最初已支持WebGL技術。IE8的JavaScript引擎是Jscript,IE9開始使用Chakra。Trident內核的常見瀏覽器是:
2. Webkit
Webkit(Safari內核,Chrome內核原型,開放源代碼):它是Apple自己的內核,也是Apple Safari瀏覽器使用的內核。Webkit引擎包括WebCode排版引擎和JavaScript代碼解析引擎。
它們分別來自KDE的KHTML和KJS。它們是GPL條約授權的免費軟件,并支持BSD系統開發。Chrome,360 Extreme Speed Browser和Sogou High Speed Browser也使用Webkit作為內核(Chorome使用其自己的V8引擎來理解腳本)。
3. Blink
這是由Google和Opera Software開發的瀏覽器排版引擎,谷歌將其作為Chromium計劃的一部分進行計算,并于2013年4月發布。
此渲染引擎是開源引擎Webkit中WebCore組件的一個分支,用于Chrome(28和更高版本),Opera(15和更高版本)和Yandex瀏覽器。
瀏覽器的主要組件是:
呈現引擎將開始從網絡層獲取請求的文檔的內容。通常以8kB的塊完成。
之后,這是渲染引擎的基本流程:
渲染引擎將開始解析HTML文檔,并將元素轉換為稱為“內容樹”的樹中的DOM節點。引擎將解析外部CSS文件和樣式元素中的樣式數據。樣式信息以及HTML中的視覺指令將用于創建另一棵樹:渲染樹。
渲染樹包含具有視覺屬性(如顏色和尺寸)的矩形。矩形按正確的順序顯示在屏幕上。
構建渲染樹后,它將經歷“ 布局 ”過程。這意味著為每個節點提供應在屏幕上顯示的確切坐標。下一階段是繪畫,將遍歷渲染樹,并使用UI后端層繪畫每個節點。
重要的是要了解這是一個循序漸進的過程。為了獲得更好的用戶體驗,渲染引擎將嘗試盡快在屏幕上顯示內容。它不會等到所有HTML解析完畢后才開始構建和布局渲染樹。部分內容將被解析并顯示,而該過程將繼續處理其余部分內容,這些其余內容始終來自網絡。
簡單來說,目前瀏覽器大致已經趨向于Webkit系,Webkit系的代碼量還是很大的。加上Chrome的使用頻率在PC市場中有著絕對市場,而且現在Win10的Edge也加入了Webkit體系,速度加快了不少。所以在不久的將來我們可以預見的是瀏覽器會以Webkit系為主,然后百花齊放。
、定義
<meta> 標簽提供關于 HTML 文檔的元數據。它不會顯示在頁面上,但是對于機器是可讀的。可用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他 web 服務。
2、作用
meta里的數據是供機器解讀的,告訴機器該如何解析這個頁面,還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容,例如我們為頁面中添加如下meta標簽:
瀏覽器的頭部就會包括這些:
只有瀏覽器可以接受這些附加的頭部字段,并能以適當的方式使用它們時,這些字段才有意義。
3、meta的必需屬性和可選屬性
meta的必需屬性是content,當然并不是說meta標簽里一定要有content,而是當有http-equiv或name屬性的時候,一定要有content屬性對其進行說明。例如:
必需屬性
<meta name="keywords" content="HTML,ASP,PHP,SQL">
這里面content里的屬性就是對keywords進行的說明,所以呢也可以理解成一個鍵值對吧,就是{keywords:"HTML,ASP,PHP,SQL"}。
可選屬性
在W3school中,對于meta的可選屬性說到了三個,分別是http-equiv、name和scheme。考慮到scheme不是很常用,所以就只說下前兩個屬性吧。
http-equiv
http-equiv屬性是添加http頭部內容,對一些自定義的,或者需要額外添加的http頭部內容,需要發送到瀏覽器中,我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明,那么現在再舉個例子。例如我們不想使用js來重定向,用http頭部內容控制,那么就可以這樣控制:
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在頁面中加入這個后,5秒鐘后就會跳轉到指定頁面啦,效果可看W3school的例子
name
第二個可選屬性是name,這個屬性是供瀏覽器進行解析,對于一些瀏覽器兼容性問題,name屬性是最常用的,當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以,不然就是沒有意義的。還是舉個例子吧:
<meta name="renderer" content="webkit">
這個meta標簽的意思就是告訴瀏覽器,用webkit內核進行解析,當然前提是瀏覽器有webkit內核才可以,不然就是沒有意義的啦。當然看到這個你可能會有疑問,這個renderer是從哪里冒出來的,我要怎么知道呢?這個就是在對應的瀏覽器的開發文檔里就會有表明的,例如這個renderer是在360瀏覽器里說明的。360瀏覽器內核控制Meta標簽說明文檔
常用meta標簽大總結
接下來就是常用的meta標簽大總結啦,我會盡可能的做到全
charset
charset是聲明文檔使用的字符編碼,解決亂碼問題主要用的就是它,值得一提的是,這個charset一定要寫第一行,不然就可能會產生亂碼了。
charset有兩種寫法
兩個都是等效的。
百度禁止轉碼
百度會自動對網頁進行轉碼,這個標簽是禁止百度的自動轉碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 優化部分
viewport
viewport主要是影響移動端頁面布局的,例如:
content 參數:
各瀏覽器平臺
Microsoft Internet Explorer
Google Chrome
360瀏覽器
UC手機瀏覽器
UCBrowser_U3_API
QQ手機瀏覽器
Apple iOS
Google Android
App Links
最后——移動端常用的meta
*請認真填寫需求信息,我們會在24小時內與您取得聯系。