時(shí)間：2023-04-23 01:54:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-04-23 01:54:02 來源：網(wǎng)站運(yùn)營
網(wǎng)站性能優(yōu)化 —— HTTP/HTML/CSS/JS：12.28-2017更新 //部分說明及代碼示例修改01.1 本書14條精湛的優(yōu)化技巧，作為一個(gè)能自稱“前端工程師”的角色，你，必需擁有。?? 有點(diǎn)長，單獨(dú)立文章說明，晚點(diǎn)會上傳筆記或我的「讀書腦圖」專欄中查閱。
02.1 設(shè)計(jì)實(shí)現(xiàn)層面 - 簡化頁面盡量精簡業(yè)務(wù)展示數(shù)量，減少頁面、代碼、圖片、文章視頻… (減少資源的使用)
02.2 合理設(shè)置 HTTP緩存盡可能的讓資源能夠在緩存中待得更久
02.3 資源合并與壓縮外部腳本、樣式 的文件進(jìn)行合并：CSS、 JS、IMG、視頻 … 資源壓縮；
02.4 CSS Sprites合并 CSS圖片（定位顯示圖片位置），減少請求數(shù)
02.5 Inline Images使用 data: URL scheme的方式將圖片嵌入到頁面或 CSS中
02.6 懶加載使用沒瀏覽過的資源？懶得加載唄。
02.7 需要加載的時(shí)候加載在一般情況下并不加載信息內(nèi)容，如不點(diǎn)擊視頻、不點(diǎn)擊按鈕的彈窗、… 等觸發(fā)事件不加載。
02.8 將外部腳本置底一般將js置底到。
02.9 將 CSS放在 head中如放入body中，則還未下載和解析到 CSS，就已經(jīng)開始渲染頁面了，主次分明些好。
02.10 異步請求 Callback將一些行為樣式提取出來，慢慢的加載信息的內(nèi)容。
02.11 減少不必要的 HTTP跳轉(zhuǎn)注：鏈接以 ’/‘結(jié)尾，有些服務(wù)器很可能隱藏 301跳轉(zhuǎn)，增加多余請求。
02.10 避免重復(fù)的資源請求疏忽或頁面由多個(gè)模塊拼接而成，每個(gè)模塊中請求了同樣的資源。習(xí)慣性養(yǎng)成合理搭建公共資源庫。
02.13 其它
03.1 DOM 最耗性能的一類操作HTML收集器，返回的是一個(gè)數(shù)組內(nèi)容信息，減少瀏覽器的repaint和reflow。
03.2 慎用 withwith(obj){ p = 1}; 實(shí)際上修改了代碼塊中的執(zhí)行環(huán)境。
03.3 避免使用 eval和 Function涉及的安全性極差不說，舊的瀏覽器性能呈倍數(shù)下跌，效率低等等，不推薦。
03.4 減少作用域鏈查找這方面涉及到一些內(nèi)容的相關(guān)問題，不過可以來 [點(diǎn)擊這個(gè)鏈接]。
03.5 數(shù)據(jù)訪問
03.6 字符串拼接"+" 號來拼接字符串效率是比較低，使用數(shù)組的 join方法
優(yōu)先1: 匹配唯一該名字的ID元素
在線咨詢
#toc{...}優(yōu)先2: 類選擇符，匹配所有類屬性包含該名字的元素
.toc{…} 優(yōu)先3: 類型選擇符，應(yīng)用于指定元素類型的所有元素
a{…}優(yōu)先4: 相鄰兄弟元素選擇符，即h1元素的同級且ID為toc的元素（該屬性IE6不支持）
h1 + #toc{…} 優(yōu)先5: 子元素選擇符，匹配父元素ID為toc的所有l(wèi)i元素（該屬性IE6不支持）
#toc > li{…} 優(yōu)先6: 后代選擇符，當(dāng)?shù)?個(gè)選擇符是第1個(gè)選擇符的后代（子，子孫等）時(shí)，后代選擇符規(guī)則會進(jìn)行匹配
.toc#toc a{…} 優(yōu)先7: 通配選擇符，匹配文檔中的每一個(gè)元素
*{…} 優(yōu)先8: 屬性選擇符，根據(jù)元素的屬性是否存在或其屬性值進(jìn)行匹配，該規(guī)則匹配href屬性值等于#index的元素，該選擇符有4個(gè)變體。
[href=“#index”{…}優(yōu)先9: 偽類和偽元素選擇符
.a:hover，:link、:visited、:active、:focus、:lang、:before、:after、…{…} 其它說明
.gloves p span{...}慣性思維的你會想，讀取順序是從右向左才對吧？CSS選擇符優(yōu)化順便花了點(diǎn)時(shí)間梳理了下「CSS選擇符減少性能損耗的技巧」。以表格的形式畫了出來。這樣會更清晰些；
可重復(fù)性例如：OOCSS（一種書寫方法）關(guān)于這塊，有很多網(wǎng)友說人家是框架。。。不過個(gè)人感覺它不是框架哈，更像是一種方法。想學(xué)精的同學(xué)可以去 [點(diǎn)擊看看這個(gè)]
頁面引入CSS注意事項(xiàng)少用：
05.1 <!DOCTYPE> 聲明
必須HTML 第一行，HTML 4.01 中有三種聲明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><!DOCTYPE html>05.2 Head
<!-- 編碼／charset（HTML5） //如需兼容IE9以下不建議用 --><meta http-equiv="charset" content="UTF-8"> --><!-- 新手注意，有時(shí)候utf-8也可這么可用： --><script charset="UTF-8"></script><a charset="UTF-8"></a><meta http-equiv="refresh" content="5" /><!-- 5秒之后刷新本頁面:</a> --><meta http-equiv="refresh" content="5; url=http://www.baidu.com/“ /><!-- 5秒之后轉(zhuǎn)到 baidu 首頁:</a> --><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" > 樣式／stylesheet<link rel="stylesheet" type="text/css" href="public.css" /><script type="text/javascript" src=“public.js"></script><div></div><p></p><a href="" target="" ></a><span></span><strong></strong><b></b><i></i><em></em><ul> <li></li></ul><ol> <li></li></ol><dl> <dt></dt> <dd></dd></dl><table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody></table><form> <label></label> <input type="text"> <textarea></textarea> <button type="button"></button></form><article><!-- 都支持/// 定義文章。 --> <hgroup><!-- 把兩個(gè)h標(biāo)簽組合起來時(shí)用, HTML5.1 版中被廢除了--> <h1</h1> <h2></h2> </hgroup> <section><!-- 文檔中的區(qū)段 --> <h1></h1> <p></p> </section> <address>聯(lián)系方式、地址、電話、...</address></article><input list="cars" /><datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"></datalist><img src="" /><h1></h1> <!-- h1~h6 --><time></time> <!-- 時(shí)間標(biāo)簽 --><small></small> <!-- 小號字標(biāo)簽 --><big></big> <!-- 大號字標(biāo)簽 --><frame></frame><iframe></iframe>......關(guān)鍵詞：性能
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
