摘要:前言還有幾天就到國慶中秋了,快要放假了,先祝大家節日快樂之前寫過的寫作建議和技巧,那么今天就來聊聊吧說到,每一個網頁都離不開,但是對于,很多開發者的想法就是,只要能用來布局,把效果圖排出來就可以了,其它的細節或者優化,不需要怎么考慮。
1.前言
還有幾天就到國慶中秋了,快要放假了,先祝大家節日快樂!之前寫過js的寫作建議和技巧,那么今天就來聊聊css吧!說到css,每一個網頁都離不開css,但是對于css,很多開發者的想法就是,css只要能用來布局,把效果圖排出來就可以了,其它的細節或者優化,不需要怎么考慮。但是我覺得css可不只是把頁面的布局完成就是完事的,還需要考慮很多細節有優化,更不會像大家想得那么簡單,在學習當中,如果發現什么技巧或者優化的點,我也會學以致用!那么今天,就分享下我總結的css寫作建議和性能優化的一些問題!希望能幫讓大家對神奇的css有一個新認識,當然,如果大家覺得還有什么其它的建議。歡迎指點!
2.css渲染規則首選,關于css渲染的規則,大家可能都知道,是從右到左的渲染!如下栗子
.nav h3 a{font-size: 14px;}
渲染過程大概是:首先找到所有的a,沿著a的父元素查找h3,然后再沿著h3,查找.nav。中途找到了符合匹配規則的節點就加入結果集。如果找到根元素html都沒有匹配,則不再遍歷這條路徑,從下一個a開始重復這個查找匹配(只要頁面上有多個最右節點為a)。
參考:CSS選擇器從右向左的匹配規則
一般情況下,元素的嵌套層級不能超過3級,過度的嵌套會導致代碼變得臃腫,沉余,復雜。導致css文件體積變大,造成性能浪費,影響渲染的速度!而且過于依賴HTML文檔結構。這樣的css樣式,維護起來,極度麻煩,如果以后要修改樣式,可能要使用!important覆蓋。
4.樣式重置這個我目前保持中立意見,因為看著網上的文章,有些人支持使用樣式重置,有些人不支持使用,誰也說服不了誰。我自己的情況,我有使用樣式重置,但是是比較簡單的一個總結,代碼如下!
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } ol, ul { list-style: none; } h1{ font-size: 24px; } h2{ font-size: 20px; } h3{ font-size: 18px; } h4 { font-size: 16px; } h5{ font-size: 14px; } h6{ font-size: 12px; }5.樣式級別
首先,css樣式級別整理如下
!important>行內樣式 >id樣式>class樣式>標簽名樣式。
然后有一點要提一下就是,組合選擇器使用權值會疊加的。比如id的權值是100,class是10,標簽名是1(其它不清楚了)!那么div.test-class權值就是11,div#test就是101
比如有一個div
那么樣式權值方面就是
div {color: red !improtant;}(大于下面的一切)
(大于111)
div#test.test-class(111)
#id.test-class(110)
div#test(101)
#test(100)
div.test-class(11)
.test-class(10)
div(1)
*(小于1)
不解釋,看圖
上面幾個p元素margin和padding都為0,但是還有邊距。這個的解決方案有兩種
1.刪除代碼之前的空行空格
帶display:inline-block的元素之前的空行都刪除掉,如下寫法
2.父元素font-size設置為0,這個直接看圖
7.圖片要設置width和height如果頁面有使用img標簽,那么img很建議設置width和height。目的是為了在網速差或者其它原因加載不出圖片的時候,保證布局不會亂。
如下栗子,一個很普通的布局。
但是萬一出現什么情況,圖片加載不出來的話,建議的處理方式是第一種,顯示一張默認圖片,即使不顯示默認圖片,也讓圖片有一個占位的作用,保證布局不會亂!
如果圖片加載不出,img又沒有設置width和height的話,就會像下面這樣,布局亂了!
關于設置width和height,我順便說幾點
1.PC站,建議在img標簽的屬性設置width和height。這樣避免加載不出css而錯位
2.手機站,建議用css設置img的width和height,因為手機站要做適配,在屬性設置width和height不靈活,比如使用rem布局,在屬性那里設置不了width和height。
3.如果圖片不固定,但是有一個max-width和max-height,那么建議在img的父元素設置width和height。img根據父元素的width和height設置max-width和max-height。
這里只放圖,不解釋
8-1.table-cell 8-2.flex 8-3.position,transform 8-4.position,margin這個方式不推薦使用,因為這個寫法,.div2的寬高必須要設置,否則就是100%;比如設置了top:0;bottom:0;效果和設置height:100%;是一樣的。如果想要避免,就必須要設置height。
9.圖片預加載這里說的預加載,不是懶加載。首先根據我個人理解科普下,懶加載和預加載的區別。
懶加載:頁面加載的時候,先加載一部分內容(一般是先加載首屏內容),其它內容等到需要加載的時候再進行加載!
預加載:頁面加載的時候,先加載一部分內容(一般是先加載首屏內容),其它內容等到先加載的一部分內容(一般是首屏內容)加載完了,再進行加載。
兩種方式,都是為了減少用戶進入網站的時候,更快的看到首屏的內容!
下面栗子,將這#preloader這個元素加入到到html中,就可以實現通過CSS的background屬性將圖片預加載到屏幕外的背景上。只要這些圖片的路徑保持不變,當它們在web頁面的其他地方被調用時,瀏覽器就會在渲染過程中使用預加載(緩存)的圖片。簡單、高效,不需要任何JavaScript。
#preloader { /*需要預加載的圖片*/ background: url(image1.jpg) no-repeat,url(image2.jpg) no-repeat,url(image3.jpg) no-repeat; width: 0px; height: 0px; display: inline; }
但是這樣會有一個問題,因為#preloader預加載的圖片,會和頁面上的其他內容一起加載,增加了頁面的整體加載時間。所以需要用js控制
function preloader(urlArr,obj) { var bgText=""; for(var i=0,len=urlArr.length;i原理也很簡單,就是先讓首屏的圖片加載完,然后再加載其它的圖片。通過給#preloader設置背景圖片,加載所需要的圖片,然后頁面上需要加載這些圖片的時候,就直接從緩存里面拿圖片,不需要通過http請求獲取圖片,這樣加載就很快。
10.慎用*通配符在做網頁的時候經常會使用下面兩種方式重置樣式,以此來消除標簽的默認布局和不同瀏覽器對于同一個標簽的渲染。
*{margin:0;padding:0;}上面這種方式,代碼少,但是性能差,因為渲染的時候,要匹配頁面上所有的元素!很多基礎樣式沒有margin和padding的元素,比如div,li等。都被匹配,完全沒必要!
下面看另一種方式。body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul{margin:0;padding:0;}這種方式,代碼稍微多,但是性能比上面的方式好,在渲染的時候,只匹配body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul這里面的元素,這些元素帶有margin和padding,需要重置!
再看例子:.test * {color: red;}匹配文檔中所有的元素,然后分別向上逐級匹配class為test的元素,直到文檔的根節點
.test a {color: red;}匹配文檔中所有a的元素,然后分別向上逐級匹配class為test的元素,直到文檔的根節點
兩種方式,哪種更好不言而喻,所以在開發的時候,建議避免使用通配選擇器。
11.合并,壓縮css這個沒什么好解釋的,就是壓縮和合并css。
首先壓縮css,除了使用工具,比如gulp,webpack等把代碼壓縮,把空格和換行都去掉。還有一個建議就是屬性簡寫。
比如
margin-top:0; margin-right:10px; margin-bottom:10px; margin-left:10px; background-image: url("test.jpg"); background-position: top center; background-repeat: no-repeat; border-width:1px; border-style:solid; border-color:#000; color:#0099FF;可以換成下面的
margin:0 10px 10px 10px; background: url("test.jpg") no-repeat top center; border:1px solid #000; color:#09F;至于合并的時候,我按照自己的開發習慣給幾個建議:
12.css在head引入
1.合并公用的樣式,比如項目的頭部,底部,側邊欄這些,一般都是公用的,這些可以寫在一個公用樣式表上,比如main.css。
2.上面所說的main.css是每一個頁面都需要引入,而樣式重置表reset.css也是每一個頁面都需要用到的,那么建議main.css和reset.css合并成一個文件,給頁面引入!減少請求!
3.每個頁面對應的樣式為獨立的文件,比如首頁對應的是index.css。產品列表頁對應的樣式是product-list.css。那么index.css就只在首頁引入,其它頁面不引入,因為引入純屬浪費請求資源!其他頁面對應的樣式也是這個處理方式!index.css,product-list.css等其它頁面的樣式就保留多帶帶的文件,不作合并處理!瀏覽器在所有的 stylesheets 加載完成之后,才會開始渲染整個頁面,在此之前,瀏覽器不會渲染頁面里的任何內容,頁面會一直呈現空白。這也是為什么要把 stylesheet 放在頭部的原因。如果放在 HTML 頁面底部,頁面渲染就不僅僅是在等待 stylesheet 的加載,還要等待 html 內容加載完成,這樣一來,用戶看到頁面的時間會更晚。
13.避免使用@importcss樣式文件有兩種引入方式,一種是link元素,另一種是@import。在這里,我建議就是避免使用@import。因為@import會影響瀏覽器的并行下載,使得頁面在加載時增加額外的延遲,增添了額外的往返耗時。而且多個@import可能會導致下載順序紊亂。比如一個css文件index.css包含了以下內容:@import url("reset.css")。那么瀏覽器就必須先把index.css下載、解析和執行后,才下載、解析和執行第二個文件reset.css。簡單的解決方法是使用替代@import。
14.從PSD文件思考怎么寫代碼接到效果圖,先不用著急切圖,先看下psd文件。思考下怎么排版,那些模塊可以做成公用的模塊,模塊應該怎么命名,寫樣式等!
15.小圖標的處理方案
當我們拿到設計師給的PSD時,首先不要急于寫CSS代碼,首先對整個頁面進行分析,先思考下面幾點:
(1)分析頁面有哪些模塊是公用的,常見公用模塊有頭部,底部,菜單欄,懸浮按鈕等等
(2)分析模塊有什么樣式,把公用的樣式提取出來,公用樣式包括公用的狀態樣式,比如按鈕,輸入框,下拉框等公用的選中狀態,禁用狀態的樣式等等。一個網站,肯定會有很多個小圖標,對于這些小圖標,目前的解決方案有兩個,cssSprite(雪碧圖),字體圖標,把圖片轉成base64。下面對比一下這兩種方式!
16.不要在ID選擇器前面進行嵌套或寫標簽
cssSprite:把所有icon圖片合成一張png圖片,使用的是在,對節點設置寬高,加上bacgroud-position。以背景圖方式顯展示需要的icon,如果一個網站有20圖標,那么就要請求20次,使用cssSprite,只需要請求一次,大大的減少了http請求。缺點就是管理不靈活,如果需要新增一個圖標,都需要改合并圖片的源文件,圖標定位也要規范,不然容易干擾圖片之間的定位!
字體圖標:簡單粗暴的理解就是把所有的圖標當成一個字體處理!這樣不用去請求圖片。一般是使用class來定義圖標,要替換圖標時,只需更換樣式名,管理方便,語意明確,靈活放大縮小,并且不會造成失真。但是只支持單色的圖片。
base64:另一種方案就是把小的icon圖片轉成base64編碼,這樣可以不用去請求圖片,把base64編碼直接整合到js或者css里面,可以防止因為一些相對路徑,或者圖片被不小刪除了等問題導致圖片404錯誤。但是找個方式會生成一大串的base64編碼。一般來說,8K以下的圖片才轉換成base64編碼。如果把一張50K的圖片轉成base64編碼,那么會生成超過65000個字符的base64編碼,字符的大小就已經是將近70K了!建議就是:8K以下的圖片才轉換成base64編碼。1.ID在頁面上本來就是唯一的而且人家權值那么大,前方嵌套(.content #test)完全是浪費性能。以及多寫一些沒有意義的代碼!這個雖然是一句話,但是還是有人犯這樣的錯!
17.把常用樣式抽封裝成公用樣式
2.除了嵌套,在id的前面也不需要加標簽或者其它選擇器。比如 div#test或者.test#test。這兩種方式完全是多余的,理由就是ID在頁面就是唯一的。前面加任何東西都是多余的!把長段相同樣式提取出來作為公用樣式使用,比如常用的清除浮動,單行超出顯示省略號,多行超出省略號等等。
如下栗子
/*超出省略號*/ /**/ .text-ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*清除浮動*/ /**/ .clearfix:after { display: block; content: ""; clear: both; height:0; }18.css3動畫的優化在我之前一篇文章(移動web開發問題和優化小結),也有寫過關于這個的優化建議,之前說的兩個建議是:
1.CSS3動畫或者過渡盡量使用transform和opacity來實現動畫,不要使用left和top。
2.動畫和過渡能用css3解決的,就不要使用js。如果是復雜的動畫可以使用css3+js(或者html5+css3+js)配合開發,效果只有想不到,沒有做不到。下面補充一個:動畫不宜過多,尤其是手機網站,否則會出現性能的問題,比如cpu一下子就被占用滿了,掉幀等。而且,不建議給每一個元素都使用硬件加速。
參考鏈接:
19.body設置最小寬度
CSS Animation性能優化
css3動畫性能優化
CSS動畫之硬件加速
Web動畫這個是在PC站會出現的問題,應該大家都知道。下面簡單說一下!
比如下面的栗子,一個網站,頁面內容寬度是1200px。看著很正常,沒什么特別如果這個時候,把頁面窗口縮小。小于1200px,頁面出現滾動條,然后把滾動條拖到最右邊
這樣是不是就發現,頂部的圖片和背景有一部分是斷層了!解決這個問題也很簡單,就是給body加上min-width。值就是頁面寬度的值。body{min-width:1200px;}
重復上一步操作,無論怎么改變瀏覽器窗口大小,都是正常的
之所以會出現這樣的問題,是因為,比如窗口縮小到900px的時候,小于內容寬度的1200px。就是出現橫向的滾動條,但是body的寬度是900px。這個時候,如果有元素(比如圖片的灰色區域和粉紅色的圖片)是相對body的width設置100%,那么實際上這些元素的寬度也就是900px。所以會出現斷層那些的視覺!解決方式就是給body加上min-width。讓body的寬度最小不會小于內容的寬度!
20.小結關于我對css寫作建議和性能優化的一個總結,就到這里了。css,絕對不是那種只要能用就行,或者只要能用css把布局弄好就行的一門語言。css給我的感覺,就是上手很簡單,但是如果想用好css,還是得花時間去研究。css或者css3,能夠優化的東西還有很多,用好css或者css3能夠少寫很多js代碼,做出來的東西也是很神奇,大家還是得繼續學習當中的知識!
如果大家覺得我文章有哪個地方寫得不好,寫錯了,歡迎指正。如果有什么其它的建議,歡迎指點,讓大家互相交流,互相學習,一起進步!最后,祝大家節日快樂!-------------------------華麗的分割線--------------------
想了解更多,關注關注我的微信公眾號:守候書閣
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51308.html
摘要:前言還有幾天就到國慶中秋了,快要放假了,先祝大家節日快樂之前寫過的寫作建議和技巧,那么今天就來聊聊吧說到,每一個網頁都離不開,但是對于,很多開發者的想法就是,只要能用來布局,把效果圖排出來就可以了,其它的細節或者優化,不需要怎么考慮。 1.前言 還有幾天就到國慶中秋了,快要放假了,先祝大家節日快樂!之前寫過js的寫作建議和技巧,那么今天就來聊聊css吧!說到css,每一個網頁都離不開c...
摘要:前端日報精選等新方法簡介寫作建議和性能優化小結前端面試之篇第期關于雪碧圖預處理和后處理方案的討論你的網站可以一鍵變色嗎中文譯內存管理碰撞課程掘金阿里前端面試點目標,想成為一名好的前端工程師那些事函數能干啥如何在日常搬磚中使用最全, 2017-09-28 前端日報 精選 before(),after(),prepend(),append()等新DOM方法簡介css寫作建議和性能優化小結前...
閱讀 1870·2021-11-25 09:43
閱讀 3161·2021-11-15 11:38
閱讀 2708·2019-08-30 13:04
閱讀 483·2019-08-29 11:07
閱讀 1492·2019-08-26 18:37
閱讀 2697·2019-08-26 14:07
閱讀 582·2019-08-26 13:52
閱讀 2278·2019-08-26 12:09