<head>標簽中的奧秘

Thanatos 發布于2019-08-02 15:58 / 1764人閱讀

摘要：作為一名前端開發，我竟一直不知道標簽中的秘密。告訴瀏覽器使用最新的引擎渲染網頁，而則告訴瀏覽器激活谷歌瀏覽器內嵌框架，是推出的一款免費的專用插件。這一機制使得資源可以更早的被加載并可用，更不易阻塞頁面的初步渲染，進而提升性能。

作為一名前端開發，我竟一直不知道標簽中的秘密。

有幸接觸到這個知識點，覺得不能自己獨享這份喜悅，特此分享給大家。

舉幾個例子：

京東金融的部分剖析

1、
IE=edge告訴IE使用最新的引擎渲染網頁，chrome=1則可以激活Chrome Frame。

詳解：

http-equiv相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。

X-UA-Compatible是IE8以上版本的一個專有屬性，IE8以下的瀏覽器是不識別的,它告訴瀏覽器（IE8+）采用何種版本渲染網頁。

IE=Edge告訴瀏覽器使用最新的引擎渲染網頁，而chrome=1則告訴瀏覽器激活Chrome
Frame（谷歌瀏覽器內嵌框架”，是Google推出的一款免費的IE專用插件。用戶可以通過IE的用戶界
面，以Chrome內核的渲染方式瀏覽網頁。）

2、
在雙核瀏覽器中，讓Webkit內核優先渲染。

詳解：

國內主流瀏覽器，比如360瀏覽器、搜狗瀏覽器、QQ瀏覽器都是雙核瀏覽器，一方面為了兼容IE瀏覽器，另一方面Webkit內核的非IE瀏覽器有著更高的性能和用戶體驗。可以使用以上方法，讓雙核瀏覽器優先以Webkit內核渲染，

3、
DNS預獲取，可以提升網站性能

詳解：

DNS Prefetching 是讓具有此屬性的域名不需要用戶點擊鏈接就在后臺解析。

B站的部分剖析

1、

詳解：name是描述網頁的，對應content（網頁內容），以便于搜索引擎機器人查找分類。

1、keywords關鍵詞，是為搜索引擎提供的關鍵字列表，各關鍵詞之間是用英文","隔開，能夠提高搜索質量。

2、desciption簡介，用來告訴搜索引擎你的網站的主要內容。

2、
把搜索功能放到瀏覽器的快捷工具上,如下圖左下角

3、
通過rel="preload"進行內容預加載， preload屬性可以指明哪些資源是在頁面加載完之后即刻需要的

對于這種即刻需要的資源，你可能希望在頁面加載的生命周期的早期階段就開始獲取，在瀏覽器的主渲染機制介入前就進行預加載。這一機制使得資源可以更早的被加載并可用，更不易阻塞頁面的初步渲染，進而提升性能。

參考鏈接：
http://blog.csdn.net/maoxunxi...
https://www.cnblogs.com/lhm16...

GPU云服務器云服務器 python &lt&gt java &lt=&gt java&lt &gt asp &lt&gt

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54440.html

html之css選擇器學習

相關內容：什么是css選擇器標簽選擇器類選擇器id選擇器并集選擇器（分組選擇器）交集選擇器后代選擇器子標簽選擇器屬性選擇器相鄰兄弟選擇器偽類選擇器偽元素選擇器（偽對象選擇器）首發時間：2018-03-02 修改：2018-04-30：修改了排版，增加了偽類選擇器，偽元素選擇器，在原本簡略的介紹的基礎上增加了描述并修改了某些術語描述。2018-05-05：修改了部分偽類選擇器的注解，由于之前發生了小...

番茄西紅柿 2019-04-23 13:46 評論0 收藏0
前端技術之_CSS詳解第一天

摘要：前端技術之詳解第一天一部分略。。。。中國主要城市北京上海廣州美國主要城市紐約洛杉磯華盛頓西雅圖在瀏覽器中，默認是不會增加任何的效果改變的，但是語義變了，中的所有元素是一個小區域。前端技術之_CSS詳解第一天一html部分略。。。。二、列表列表有3種2.1 無序列表無序列表，用來表示一個列表的語義，并且每個項目和每個項目之間，是不分先后的。ul就是英語unordered list，無序列表的意...

番茄西紅柿 2019-04-23 13:46 評論0 收藏0
前端基礎-CSS的屬性相關設置

摘要：值描述左邊對齊默認值右對齊居中對齊兩端對齊文本裝飾為重點值描述默認。繼承父元素的屬性的值。具體的像素一定要加單位例如，等等第一個值是水平位置，第二個值是垂直位置。單位是像素或任何其他的單位。一字體屬性二文本屬性三背景屬性四盒子模型五盒子模型各部分詳解一、字體屬性1、font-weight：文字粗細（表格中*為重點）取值描述normal默認值，標準粗細bord粗體 *border...

番茄西紅柿 2019-04-23 13:41 評論0 收藏0
01-html介紹和head標簽

摘要：三開發工具的使用使用技巧編輯器四介紹的概述全稱，翻譯為超文本標記語言，它不是一種編程語言，是一種描述性的標記語言，用于描述超文本內容的顯示方式。【轉】01-html介紹和head標簽主要內容web標準瀏覽器介紹開發工具介紹HTML介紹HTML顏色介紹HTML規范HTML結構詳解一、web標準web準備介紹：w3c：萬維網聯盟組織，用來制定web標準的機構（組織）web標準：制作網頁遵循的規范...

番茄西紅柿 2019-04-23 11:51 評論0 收藏0
web前端（10）—— 浮動，清除默認樣式

如果在一行內寫文字，文字過多，那么瀏覽器會自動換行去顯示我們的文字文檔流還有其他現象底部對齊，高矮不管文字還有圖片大小不一，都會讓我們頁面的元素出現高矮不齊的現象，但是在瀏覽器查看我們的頁面總會發現底邊對齊例：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>t...

番茄西紅柿 2019-04-23 13:11 評論0 收藏0