整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SS 是用于網(wǎng)頁設(shè)計(jì)可用的最強(qiáng)大的工具之一。使用它我們可以在幾分鐘內(nèi)改變一個(gè)網(wǎng)站的界面，而不用改變頁面的標(biāo)簽。
好一段時(shí)間不用 CSS ，有一些基礎(chǔ)知識的記憶有點(diǎn)模糊了，今天再做一次總結(jié)記錄，方便日后回顧復(fù)習(xí)。
在 CSS 中，選擇器可分為以下幾類：
基本選擇器比較好記，這里就不浪費(fèi)篇幅，主要是記錄一下后三、幾種選擇器。
選擇器 | 類型 | 功能描述 |
E F | 后代選擇器（包含選擇器） | 選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內(nèi) |
E>F | 子元素選擇器 | 選擇匹配的F元素，且匹配的F元素所匹配的E元素的子元素 |
E+F | 相鄰兄弟選擇器 | 選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素的后面 |
E~F | 通用選擇器 | 選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
選擇器 | 功能描述 |
[attribute] | 用于選取帶有指定屬性的元素。 |
[attribute=value] | 用于選取帶有指定屬性和值的元素。 |
[attribute~=value] | 用于選取屬性值中包含指定詞匯的元素。 |
[attribute|=value] | 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個(gè)單詞。 |
[attribute^=value] | 匹配屬性值以指定值開頭的每個(gè)元素。 |
[attribute$=value] | 匹配屬性值以指定值結(jié)尾的每個(gè)元素。 |
[attribute*=value] | 匹配屬性值中包含指定值的每個(gè)元素。 |
如果希望選擇有某個(gè)屬性的元素，而不論屬性值是什么，可以使用簡單屬性選擇器：
a[href] {}
還可以根據(jù)多個(gè)屬性進(jìn)行選擇，只需將屬性選擇器鏈接在一起即可:
a[href][title] {}
除了選擇擁有某些屬性的元素，還可以進(jìn)一步縮小選擇范圍，只選擇有特定屬性值的元素:
a[href='www.abc.com'] {}
也可以把多個(gè)屬性-值選擇器鏈接在一起來選擇一個(gè)文檔：
a[href="www.abc.com"][title="abc"] {}
選擇器 | 類型 | 功能描述 |
E:link | 鏈接偽類選擇器 | 選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接錨點(diǎn)上 |
E:visited | 鏈接偽類選擇器 | 選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接錨點(diǎn)上 |
E:active | 用戶行為選擇器 | 選擇匹配的E元素，且匹配元素被激活。常用于鏈接錨點(diǎn)和按鈕上 |
E:hover | 用戶行為選擇器 | 選擇匹配的E元素，且用戶鼠標(biāo)停留在元素E上。 |
E:focus | 用戶行為選擇器 | 選擇匹配的E元素，而且匹配元素獲取焦點(diǎn) |
選擇器 | 功能描述 |
E:target | 選擇匹配E的所有元素，且匹配元素被相關(guān)URL指向 |
選擇器 | 類型 | 功能描述 |
E:checked | 選中狀態(tài)偽類選擇器 | 匹配選中的復(fù)選按鈕或者單選按鈕表單元素 |
E:enabled | 啟用狀態(tài)偽類選擇器 | 匹配所有啟用的表單元素 |
E:disabled | 不可用狀態(tài)偽類選擇器 | 匹配所有禁用的表單元素 |
選擇器 | 功能描述 |
E:first-child | 作為父元素的第一個(gè)子元素的元素E。與E:nth-child(1)等同 |
E:last-child | 作為父元素的最后一個(gè)子元素的元素E。與E:nth-last-child(1)等同 |
E:root | 選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html，此時(shí)該選擇器與html類型選擇器匹配的內(nèi)容相同 |
E F:nth-child(n) | 選擇父元素E的第n個(gè)子元素F。其中n可以是整數(shù)（1，2，3）、關(guān)鍵字（even，odd）、可以是公式（2n+1）,而且n值起始值為1，而不是0. |
E F:nth-last-child(n) | 選擇父元素E的倒數(shù)第n個(gè)子元素F。此選擇器與E:nth-child(n)選擇器計(jì)算順序剛好相反，但使用方法都是一樣的，其中：nth-last-child(1)始終匹配最后一個(gè)元素，與last-child等同 |
E:nth-of-type(n) | 選擇父元素內(nèi)具有指定類型的第n個(gè)E元素 |
E:nth-last-of-type(n) | 選擇父元素內(nèi)具有指定類型的倒數(shù)第n個(gè)E元素 |
E:first-of-type | 選擇父元素內(nèi)具有指定類型的第一個(gè)E元素，與E:nth-of-type(1)等同 |
E:last-of-type | 選擇父元素內(nèi)具有指定類型的最后一個(gè)E元素，與E:nth-last-of-type(1)等同 |
E:only-child | 選擇父元素只包含一個(gè)子元素，且該子元素匹配E元素 |
E:only-of-type | 選擇父元素只包含一個(gè)同類型子元素，且該子元素匹配E元素 |
E:empty | 選擇沒有子元素的元素，而且該元素也不包含任何文本節(jié)點(diǎn) |
選擇器 | 功能描述 |
E:not(F) | 匹配所有除元素F外的E元素 |
CSS 可以說是前端的基本技能，希望我們都能夠通過 CSS 為自己繪制色彩繽紛的前端生涯！
~
~
~ 本文完
學(xué)習(xí)有趣的知識，結(jié)識有趣的朋友，塑造有趣的靈魂！
大家好！我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關(guān)注，希望大家多多指教！
知識與技能并重，內(nèi)力和外功兼修，理論和實(shí)踐兩手都要抓、兩手都要硬！
章目錄
一 bootstrap 時(shí)間日期日歷控件datetimepicker
應(yīng)用
涉及的樣式
圖片樣式展示
pc
手機(jī)
屬性及使用示例
可用屬性列表
示例1:2017-03-30 上午 09:50
示例2：2017-03-30
示例3：僅選擇時(shí)間
2.3 weekStart 一周從那一天開始
2.4 startDate 開始時(shí)間
2.5 endDate 結(jié)束時(shí)間
2.6 daysOfWeekDisabled 一周禁用的日期
2.7 autoclose 是否自動關(guān)閉日期選擇器
2.8 startView 日期時(shí)間選擇器打開之后首先顯示的視圖。
2.9 minView 日期時(shí)間選擇器所能提供的最精確的時(shí)間選擇視圖
2.10 maxView 日期選擇器最高能展示的范圍視圖
2.11 todayBtn 是否顯示'today'按鈕
2.12 todayHighlight 當(dāng)天日期高亮
2.13 keyboardNavigation 方向鍵改變?nèi)掌?/p>
2.14 language 語言
2.15 forceParse 強(qiáng)制解析
2.16 minuteStep 步進(jìn)值
2.17 pickerPosition 選擇框的位置
2.18 showMeridian 是否顯示上午/下午
2.19 initialDate 初始化日期時(shí)間
3.1綁定輸入框，并設(shè)置format選項(xiàng)
3.2作為組件使用：
3.3時(shí)間范圍選擇聯(lián)動
具體屬性展示
一 bootstrap 時(shí)間日期日歷控件datetimepicker
應(yīng)用
手機(jī)
pc
涉及的樣式
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="static/js/moment-with-locales.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
1
2
3
4
5
6
7
圖片樣式展示
pc
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">開始日期</span>
<a class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" id="startDate" readonly/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</a>
<span class="input-group-addon">~</span>
<span class="input-group-addon">結(jié)束日期</span>
<a class='input-group date' id='datetimepicker4'>
<input type='text' class="form-control" id="endDate" readonly/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</a>
</div>
</div>
<div class="form-group col-lg-6">
<div class="input-group">
<span class="input-group-addon">活動結(jié)束日期</span>
<a class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" id="activityEnd" name="activityEnd"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<span class="input-group-addon" style="color:#F00">*</span>
</a>
</div>
</div>
手機(jī)
<div class="form-group">
<div class="input-group date form_date" id="datepicker" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="width:92%;">
<input class="form-control" size="16" type="text" value="${initialDate}" name="PARAM9" readonly="readonly" id="PARAM9">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" />
</div>
1
2
3
4
5
6
7
屬性及使用示例
<input type="text" readonly class="date" data-link-field="date" />
<input type="hidden" id="date" />
$('.date').datetimepicker();
1
2
3
選中的日期會被存放在id為date的input里。
//設(shè)置日期時(shí)間控件
$('#datetimepicker1').datetimepicker({
language: 'zh-CN',//顯示中文
format: 'yyyy-mm-dd hh:ii:ss',//顯示格式
minView: 0,//設(shè)置只顯示到月份
initialDate: new Date(),
autoclose: true,//選中自動關(guān)閉
todayBtn: true,//顯示今日按鈕
locale: moment.locale('zh-cn')
});
要：在本文中，將重點(diǎn)關(guān)注網(wǎng)頁的初始渲染，即它從解析 HTML 開始。 我將探索可能導(dǎo)致高渲染時(shí)間的問題，以及如何解決它們。
本文分享自華為云社區(qū)《頁面首屏渲染性能指南-云社區(qū)-華為云》，作者：Ocean2022。
我們知道渲染頁面是一個(gè)將服務(wù)器的響應(yīng)內(nèi)容翻譯成圖片的過程。但是，如果你頁面的渲染性能比較糟糕的話，可能會帶來相對較高的跳出率。
在本文中，我將重點(diǎn)關(guān)注網(wǎng)頁的初始渲染，即它從解析 HTML 開始。 我將探索可能導(dǎo)致高渲染時(shí)間的問題，以及如何解決它們。
關(guān)鍵渲染路徑 (CRP) 是瀏覽器將代碼轉(zhuǎn)換為屏幕上可顯示像素的過程。 它有幾個(gè)階段，其中一些可以并行執(zhí)行以節(jié)省時(shí)間，但有些部分必須依次完成。 如下圖所示：
首先，一旦瀏覽器得到響應(yīng)，它就會開始解析它。 當(dāng)它遇到依賴項(xiàng)時(shí)，它會嘗試下載它。 如果它是一個(gè)樣式表文件，瀏覽器必須在渲染頁面之前完全解析它，這就是為什么 CSS 會阻塞渲染的原因。
如果是腳本，瀏覽器必須：停止解析，下載腳本，然后運(yùn)行。 只有在那之后它才能繼續(xù)解析，因?yàn)?JavaScript 程序可以改變網(wǎng)頁的內(nèi)容（尤其是 HTML）。 這就是為什么 JS 會阻塞解析的原因。
完成所有解析后，瀏覽器將構(gòu)建文檔對象模型 (DOM) 和級聯(lián)樣式表對象模型 (CSSOM)。 將它們組合在一起得到渲染樹。 頁面的不顯示部分不會進(jìn)入渲染樹，因?yàn)樗话L制頁面所需的數(shù)據(jù)。
倒數(shù)第二步是將渲染樹進(jìn)行布局， 這個(gè)階段也稱為回流：就是計(jì)算每個(gè)渲染樹節(jié)點(diǎn)的每個(gè)位置及其大小的地方。
最后一步是繪制。 它會根據(jù)瀏覽器在前一階段計(jì)算得到的數(shù)據(jù)對像素進(jìn)行著色。
因此，根據(jù)這一過程，我們在優(yōu)化性能方面，得出了一些結(jié)論。如果你要提升頁面初始化渲染的性能，你需要：
同時(shí)，我們會根據(jù)下面 3 個(gè)指標(biāo)來衡量優(yōu)化的效率：
除了渲染時(shí)間之外，還有其他一些因素也需要考慮。例如，你的頁面使用了多少阻塞資源以及下載它們需要多長時(shí)間。
鑒于我們在上面得出的結(jié)論，我們得出網(wǎng)站性能優(yōu)化有三種主要策略：
首先，移除所有未使用的部分，例如 JavaScript 中無法訪問的函數(shù)、帶有從不匹配任何元素的選擇器的樣式以及被 CSS 永遠(yuǎn)隱藏的 HTML 標(biāo)簽。 其次，刪除所有重復(fù)項(xiàng)。
然后，我建議建立一個(gè)自動壓縮過程。 例如，它應(yīng)該從你的后端服務(wù)中刪除所有注釋（但不是源代碼）以及每個(gè)不包含附加信息的字符（例如 JS 中的空白字符）。
完成后，我們剩下的可以是文本字符串。 這意味著我們可以安全地應(yīng)用諸如 GZIP（大多數(shù)瀏覽器都理解）之類的壓縮算法。
最后，還有緩存。 瀏覽器第一次呈現(xiàn)頁面時(shí)它不會有幫助，但它會在以后的訪問中節(jié)省很多。 但是，記住兩點(diǎn)至關(guān)重要：
當(dāng)然，應(yīng)該為每個(gè)資源定義緩存策略。 有些可能很少改變或根本不會改變，有的則是變化的很快，還有些文件包含敏感的信息（可以使用 “private” 防止 CDN 緩存私有數(shù)據(jù)）。
“關(guān)鍵”僅指網(wǎng)頁正確呈現(xiàn)所需的資源。 因此，我們可以直接跳過所有流程中沒有涉及的樣式以及腳本文件。
為了告訴瀏覽器不需要特定的 CSS 文件，我們應(yīng)該為所有引用樣式表的鏈接設(shè)置媒體屬性。 使用這種方法，瀏覽器將只根據(jù)需要處理與當(dāng)前媒體（設(shè)備類型、屏幕尺寸）匹配的資源，同時(shí)降低所有其他樣式表的優(yōu)先級。 例如，如果你將 media=“print” 屬性添加到引用樣式以打印頁面的樣式標(biāo)記，則這些樣式不會在不打印媒體時(shí)干擾你的關(guān)鍵渲染路徑。
為了進(jìn)一步改進(jìn)該過程，你還可以將一些樣式內(nèi)聯(lián)，這可以為我們節(jié)省了至少一次到服務(wù)器的往返行程。
如上所述，腳本會阻塞解析，因?yàn)樗鼈兛梢愿淖?DOM 和 CSSOM。 為了避免這一點(diǎn)，所有腳本標(biāo)簽都必須用屬性標(biāo)記——異步或延遲。
標(biāo)有 async 的腳本不會阻塞 DOM 構(gòu)建或 CSSOM，因?yàn)樗鼈兛梢栽?CSSOM 構(gòu)建之前執(zhí)行。 但請記住，內(nèi)聯(lián)腳本無論如何都會阻止 CSSOM，除非你將它們放在 CSS 之上。
相比之下，標(biāo)有 defer 的腳本將在頁面加載結(jié)束時(shí)進(jìn)行執(zhí)行。
換句話說，使用 defer，腳本直到頁面加載事件被觸發(fā)后才會執(zhí)行，而 async 讓腳本在文檔被解析時(shí)就會在后臺運(yùn)行。
最后，應(yīng)將 CRP 長度縮短到可能的最小值。
作為樣式標(biāo)簽屬性的媒體查詢將減少必須下載的資源總數(shù)。 script 標(biāo)簽屬性 defer 和 async 將防止相應(yīng)的腳本阻塞解析。
使用 GZIP 壓縮、壓縮和歸檔資源將減少傳輸數(shù)據(jù)的大小（從而也減少數(shù)據(jù)傳輸時(shí)間）。
內(nèi)聯(lián)一些樣式和腳本也可以減少瀏覽器和服務(wù)器之間的往返次數(shù)。
按照最新的最佳性能實(shí)踐理念，一個(gè)網(wǎng)站應(yīng)該做的最快的第一件事就是展示 ATF 內(nèi)容。 ATF 代表首屏。 這是立即可見的區(qū)域，無需滾動。 因此，最好以首先加載所需樣式和腳本的方式重新排列與渲染相關(guān)的所有內(nèi)容，而其他所有內(nèi)容都停止（既不解析也不渲染）。
總而言之，網(wǎng)站性能優(yōu)化包含了網(wǎng)站響應(yīng)的各個(gè)方面，例如緩存、設(shè)置 CDN、重構(gòu)、資源優(yōu)化等，但是所有這些都可以逐步完成。 作為 Web 開發(fā)人員，你可以將本文作為參考，并始終記住在實(shí)驗(yàn)之前和之后測量性能。
瀏覽器開發(fā)人員盡最大努力優(yōu)化你訪問的每個(gè)頁面的網(wǎng)站性能，這就是瀏覽器通常實(shí)現(xiàn)所謂的“預(yù)加載器”的原因。 這部分程序會在你以 HTML 格式請求的資源之前進(jìn)行掃描，以便一次發(fā)出多個(gè)請求并讓它們并行運(yùn)行。 這就是為什么在 HTML（逐行）以及腳本標(biāo)簽中保持樣式標(biāo)簽彼此靠近的原因。
此外，嘗試批量更新 HTML 以避免多個(gè)布局事件，這些事件不僅由 DOM 或 CSSOM 中的更改觸發(fā)，而且在設(shè)備方向更改和窗口大小調(diào)整時(shí)也會觸發(fā)。
點(diǎn)擊下方，第一時(shí)間了解華為云新鮮技術(shù)~
華為云博客_大數(shù)據(jù)博客_AI博客_云計(jì)算博客_開發(fā)者中心-華為云
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
