覽器解析HTML文件的過程是網(wǎng)頁呈現(xiàn)的關(guān)鍵步驟之一。具體介紹如下:
HTML文檔的接收和預(yù)處理
解析為DOM樹
CSS解析與CSSOM樹構(gòu)建
JavaScript加載與執(zhí)行
渲染樹的構(gòu)建
布局計算(Layout)
繪制(Paint)
因此,我們開發(fā)中要注意以下幾點:
綜上所述,瀏覽器解析HTML文件是一個復(fù)雜而高度優(yōu)化的過程,涉及從網(wǎng)絡(luò)獲取HTML文檔到最終將其渲染到屏幕上的多個步驟。開發(fā)者需要深入理解這些步驟,以優(yōu)化網(wǎng)頁性能和用戶體驗。通過合理組織HTML結(jié)構(gòu)、優(yōu)化資源加載順序、減少不必要的DOM操作和合理安排CSS和JavaScript的加載與執(zhí)行,可以顯著提升頁面加載速度和運行效率。
ss章節(jié),本文僅列出筆者任務(wù)相對重要的知識點,且介紹上,針對重點。當(dāng)然,遺漏很正常,希望能收到你的意見。
盒子模型,個人的理解,就是一個來裝html標(biāo)簽的容器,包裝的內(nèi)容包括content+padding+border+margin。由這四個組成我們的"盒子"。
我們?nèi)粘?赡軙龅讲煌臑g覽器,元素的高寬不一致。除了可能是瀏覽器內(nèi)置的margin跟padding不同之外,也可能是IE跟w3c的盒子模型組成不同。
以下是兩種不同盒子的分類:
簡單的個人理解,block formatting context,塊級格式化上下文。產(chǎn)生了BFC的,形成了獨立容器,他的特性就是不會在布局中影響到外邊的元素。
他的特性:
觸發(fā)的條件是:
此外,除了BFC,還有IFC、GFC、FFC的概念。我們簡單了解一下。
水平方向上的 margin,border 和 padding在框之間得到保留。框在垂直方向上可以以不同的方式對齊:它們的頂部或底部對齊,或根據(jù)其中文字的基線對齊。包含那些框的長方形區(qū)域,會形成一行,叫做行框。inline-block的元素的內(nèi)部是一個BFC,但是它本身可以和其它inline元素一起形成IFC。
flex,即彈性布局。一個由css3引入,為我們的盒子屬性帶來靈活性的一種布局方式。一旦父級采用了flex布局,里邊的子控件將收flex布局限制,部分原本的樣式(如float:left)也會失效。
基本api不做講解,不熟悉可以看看:www.ruanyifeng.com/blog/2015/0…
特別注意:flex:0 0 30%的意義:等于flex-grow=0(默認(rèn)不放大)+flex-shrink=0(不縮小)+flex-basis=30%( 項目占據(jù)主軸的空間)
前端的圖片分類格式,其實是性能優(yōu)化的很大部分。選擇好圖片的類型,對前端的性能影響非常大。
而前端對圖片的精髓,一方面是對圖片大小的評估,一方面是對圖片的類型選擇。
他的大小可以這樣判斷:
比如一張200*200的圖片大小,這時候,他的像素點有40000個。每個像素有 4 個通道, 所以一共有160000個字節(jié),所以,我們評估該圖片的大小大概為:160000/1024 約等于 156(KB), 如果大很多,說明圖片大小有優(yōu)化控件。如果小很多,說明此時是模糊的。
列舉一下筆者所知道的適配方式:
這個問題本次只列舉了幾個常見的,非全部列出。如需具體,可另查資料。
1)間距差異是否大,導(dǎo)致文本換行,或者間隔太大。原因:每個瀏覽器的margin和padding的默認(rèn)值不同。解決方案:全局文件設(shè)置統(tǒng)一默認(rèn)margin和padding。
2)圖片默認(rèn)有間距 原因:因為img標(biāo)簽是行內(nèi)屬性標(biāo)簽,所以只要不超出容器寬度,img標(biāo)簽都會排在一行里,但是部分瀏覽器的img標(biāo)簽之間會有個間距。去掉這個間距使用float是正道。(我的一個學(xué)生使用負(fù)margin,雖然能解決,但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法,所以我禁止他們使用) 解決方案:使用float屬性為img布局
3)較小的高度(小于10px),時,ie可能會超出高度 原因:IE有一個默認(rèn)的行高的高度 解決方案:給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。
為min-height本身就是一個不兼容的CSS屬性
4)透明度兼容設(shè)置 原因:不同瀏覽器各自透明度關(guān)鍵字不統(tǒng)一。解決方案:filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;
5)IE的hover圖片會閃爍 原因:IE6的每次觸發(fā) hover 的時候都會重新加載 解決方案:提前緩存文件。document.execCommand("BackgroundImageCache", false, true);
該回復(fù)只給予思路,沒有具體寫法。因為我覺得大家都應(yīng)該懂。
已知寬高:1.margin 自己算高寬 2.定位 + margin-top + margin-left 3.定位 + margin:auto
未知寬高:1.transform 但有IE兼容的問題 2.flex 布局 3.display: table-cell
首先你可能需要了解一下物理像素跟獨立像素的區(qū)別。
物理像素:一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元,如:iPhone6上就有7501334個物理像素顆粒。獨立像素:邏輯像素,程序使用的虛擬像素。如:iPhone6上就有375677個獨立像素。
那么如何實現(xiàn)1px呢:1.利用 transfrom 的 scale 縮放來實現(xiàn) 2.利用 background 的 line-gradient 線性漸變來實現(xiàn) 3.meta viewport修改成1比0.5。這樣整個屏幕的大小縮小了0.5。4.利用box-shadow
該回復(fù)只給思路
1.CSS浮動 第一個float:left,第二個float:right,第三個設(shè)置margin-left和margin-right
2.絕對定位法 第一個定位到left,第二個定位到right,第三個設(shè)置margin-left和margin-right
3.flex布局
初步聊聊個人的樣式優(yōu)化方案如下:
1.避免css層級太深。有興趣了解一下css tree如何跟html tree融合成dom tree。2.首屏(特別是緩沖效果圖)可適當(dāng)使用內(nèi)聯(lián)元素。這樣有利于更快的顯示。3.異步加載CSS。非首次重要引入的css文件,不放在head里邊。這樣會引起阻塞。4.減少 回流 的屬性。如display:none可以考慮使用visibility 5.適當(dāng)使用GPU渲染。如tranfrom等。6.css動畫的性能,是遠(yuǎn)遠(yuǎn)的大于js動畫性能。7.利用工具壓縮,去重。
偽類和偽元素的根本區(qū)別在于:它們是否創(chuàng)造了新的元素
偽類,指可以通過元素選擇器,就可以實現(xiàn)的效果,如frist-child,active等。而偽元素,是指需要通過創(chuàng)元素,才可以實現(xiàn)的效果,如first-letter,before,after等。
具體元素跟寫法有興趣,可參考:blog.csdn.net/qq_27674439…
喜歡的老鐵,加個關(guān)注!今后會分享更多的前端干貨,歡迎點贊轉(zhuǎn)發(fā)關(guān)注[比心][比心][比心]
來源 https://juejin.im/post/6867715946941775885
中1, 2, 3, 4 表示優(yōu)先級
選擇器 | 格式 | 優(yōu)先級權(quán)重 |
!important | 10000 | |
內(nèi)聯(lián)樣式 | 1000 | |
id 選擇器 | #id | 100 |
類選擇器 | #classname | 10 |
屬性選擇器 | a[ref=“eee”] | 10 |
偽類選擇器 | li:last-child | 10 |
標(biāo)簽選擇器 | div | 1 |
偽元素選擇器 | li::after | 1 |
相鄰兄弟選擇器 | h1+p | 0 |
子選擇器 | ul>li | 0 |
后代選擇器 | li a | 0 |
通配符選擇器 | * | 0 |
注意事項:
可繼承:
字體系列 font-family font-weight font-size
文本系列 color text-align line-height
可見系列 如 visibility
由于屬性太多,這里只列舉常見的可繼承的屬性
屬性值 | 作用 |
none | 元素不顯示,并且會從文檔流中移除。 |
block | 塊類型。默認(rèn)寬度為父元素寬度,可設(shè)置寬高,換行顯示。 |
inline | 行內(nèi)元素類型。默認(rèn)寬度為內(nèi)容寬度,不可設(shè)置寬高,同行顯示。 |
inline-block | 默認(rèn)寬度為內(nèi)容寬度,可以設(shè)置寬高,同行顯示。 |
list-item | 像塊類型元素一樣顯示,并添加樣式列表標(biāo)記。 |
table | 此元素會作為塊級表格來顯示。 |
inherit | 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。 |
block:
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。