1、css選擇器的權重問題，讀書筆記如何進行web前端性能優化？

提起Web前端性能優化的問題，前端開發人員非常熟悉，對于一個網站而言，即使內容和功能再優秀，如果用戶需要花費很久的時間才能打開，這樣遲早會消耗用戶的耐心，并最終失去用戶。

那如何才能優化前端性能？歸納為三步

字節數也就是通常說的減少資源文件（js、css、image、video...）的大小。

1、壓縮

前端使用uglify混淆壓縮

后端開啟gzip

對圖片進行壓縮，使用壓縮比例更高的格式（WebP）

2、緩存

強緩存（http狀態碼：200），不用請求服務器直接使用本地緩存，協商緩存（http狀態碼：304），使用時先請求服務器若被告知緩存沒過期則使用本地緩存，不用下載資源，使用localstorage對數據進行存儲。

3、針對首屏優化

對非關鍵資源延遲加載、異步加載，減少首屏資源大小

1、合并請求

使用http2.0的多路復用合并請求配置combo，在無法使用http2.0的情況下作為一種合并資源請求的手段。

2、減少圖片請求數

使用spite圖，使用svg-symbol。

3、針對一些場景采用css、js內聯的方式。

4、使用強緩存減少了一次服務器請求。

5、非關鍵資源延遲、異步加載，減少了首屏資源連接數。

1、bigpipe分塊輸出

這里主要是因為要完成一整個頁面的輸出后端需要處理很多個任務，我們可以將這些多個任務進行分塊，誰先完成誰就先輸出，最終通過JS回填的方式輸出DOM節點，這種方式主要解決了直出頁面阻塞的問題。

2、bigrender分塊渲染

常規的手段就是采用前端模板渲染頁面，針對首屏時間主要減少了首次構建DOM樹時的節點數

3、針對reflow，repaint，composit路徑處理。

4、涉及到動畫時關于layer的概念render layer、graphics layer。

5、css放在頭部、js放底部避免阻塞DOM樹的構建，關于css、js的位置對于頁面渲染的影響大家可以關注下相關的文章。核心：css資源不會阻塞DOM樹的構建但會阻塞DOM的渲染，JS會阻塞DOM樹的構建，CSS會阻塞JS的執行。

以上就是針對Web前端性能優化歸納出的解決方案。更多Web前端學習資料，關注“武漢千鋒”微信公眾號領取。

2、js這些目錄的命名用關鍵詞全拼對排名有多大影響？

1.JS對于權重一般的網站來說影響是很大的。

2.因為JS對搜索引擎是不友好的，搜索引擎的蜘蛛是抓取不到JS里面的內容，除了JS，flash也是同樣的。

3.建議JS生成的效果用div+css完全可以取代JS，如果非用不可，就將JS代碼寫在另一個文件中來調用。

4.交換友情鏈接的時候要小心，如果對方在你的友情鏈接html標簽中加了no follow標簽，那么他網站上的權重是傳不過來的。

使用div+css設計網站對seo影響是非常大的，所以要引起足夠的重視，由于結構簡單，符合標準，所以深受搜索引擎的喜歡，要合理的利用div+css正確的布局網站，來達到自己網站長期更好的發展。

div+css對seo影響在哪里：

1、 代碼精簡：

利用div+css代碼比較規范整齊，好處有兩點：一、是提高了spider爬行速度，能在較短的時間內完成整個頁面，對收錄質量比較有好處;二是能高效爬行的頁面，就會受到spider的喜歡，這樣低收錄數量很有效。

2、 表格的鑲嵌問題：

目前來說大部分的網站都用table來布局，遇到多層表格鑲嵌時候，會跳過鑲嵌的內容或者直接放棄整個頁面。

網站中過多的相似頁面會直接影響到排名和域名信任度。

而div+css是通過代碼來控制，就不會出現這樣的問題，對seo好處多多，要從根本上認識到這個。

3、 速度問題：

Div+css相對于表格table來說少了很多垃圾代碼，加載速度提高對spider爬行是比較有利的，過多的代碼會讓頁面無法訪問，影響收錄和權重，真正的網站不只是為了追求收錄，排名，快速的響應速度也是提高用戶體驗的基礎，如果網站都難以打開，更不要提排名等問題了。

4、 修改設計時更有效率

Div+css只需要修改響應的定義和id，更方便快捷而且不會破壞頁面的布局形式。省時省力。

5、 保持視覺的一致性

以往的表格布局總是造成在不同的瀏覽器或者頁面造成顯示效果有偏差或者錯位，而css+div則統一使用css文件控制，就避免了這種情況的出現。

6、 對排名的影響

Div+css布局，一般在設計完后會盡可能完善到能通過w3c驗證，與普通表格布局比，使用xtml架構的網站排名狀況一般都是要好很多的。

3、css復合選擇器有哪三種？

1、元素選擇器 標簽名{ }

2、id選擇器 #id屬性值{ }

3、類選擇器 .class屬性值{ }

4、選擇器分組(并集選擇器)

作用：通過它可以同時選中多個選擇器對應的元素(通常用于集體聲明)

語法：選擇器1，選擇器2，選擇器n{ }

5、復合選擇器(交集選擇器)

作用：選擇更準確更精細的目標元素并為其設置屬性

語法：選擇器1選擇器2選擇器n{ }

!注意選擇器之間不能有空格，要緊挨在一起

6、通配選擇器

作用：用來選中頁面中所有的元素

語法：*{ }

7、后代元素選擇器

作用：選中指定元素的指定后代元素

語法：祖先元素 后代元素{ }

8、子元素選擇器

作用：選中指定父元素的子元素

語法：父元素>子元素

9、偽類選擇器

偽類表示元素的一種特殊狀態

:hover 移入時元素的狀態

:visited 已被訪問過后的元素的狀態

:active 被點擊時元素的狀態

10、 屬性選擇器

作用：根據元素中的屬性或屬性值來選取指定元素

語法：[屬性名]選取含有指定屬性的元素

? [屬性名=“屬性值”]選取含指定屬性值的元素

? [屬性名^="屬性值"] 選取屬性值以指定內容開頭的元素

? [屬性名$="屬性值"] 選取屬性值以指定內容結尾的元素

? [屬性名*="屬性值"] 選取屬性值包含指定內容的元素

11、兄弟元素選擇器

+選擇器

作用：選中一個元素后緊挨著的指定的兄弟元素

語法：前一個+后一個(作用在后一個)

~選擇器

作用：選中后邊所有的制定兄弟元素

語法：前一個~后邊所有

4、css類選擇器用什么做前綴表示？

>10 CSS類選擇器也就是選擇html編碼中標明為特定Class(類)的元素.如<p Class="mytest">這是我要編輯的段落</p>，在CSS文件中可用 .mytest{ }來表達想要顯示的樣式。簡單地說，CSS類選擇器用" . "做前綴。