一：可以參考?雅虎34條軍規?? 這里不做解釋，可以去百度

下面是詳細的前端頁面的優化

?1.合并圖片?? 雪碧圖?? ?
??? css-backgroud-position 調整圖片的顯示位置? ?
??? <img src="">? 換成 data:url ?
??? <img src="https://img-blog.csdnimg.cn/2022010611520361569.jpeg"> 渲染圖片無需額外的http請求
??? img {
????? background-image:url("https://img-blog.csdnimg.cn/2022010611520361569.jpeg")
??? }
?? ?
? 2.css? js? 合并 并壓縮? ?
??? js放到最后
?? ?
?? ?
? 3.充分利用瀏覽器的緩存? ?
? ?? ?強制緩存?? 協商緩存? ?
? ?? ?
? ?? ?強制緩存? ?
? ?? ??? ?Catch-Control：max-age=365d
? ?? ?協商緩存? ?
? ?? ???? E-Tag（response/request header ）? If-None-Match? 決定資源是否過期?? ?
? 4.動態的請求腳本和樣式? ?
???? <script type="" src=""></script>
???? var flag = true;
??? ?
???? if(flag){
?????? loadScript("*.js");
???? }
??? ?
??? function loadScript(url){
??? var script? =? document.createElement('script');
??? script.type = 'text/javascript';
??? script.src = url;
?? ?
??? document.getElementsByTagName('head')[0].appendChild(script);
??? }
?? ?
?? ?
??? IE瀏覽器? w3c瀏覽器?? ?
??? <link> 0
??? <style> 1
?? ?
??? .box{
?????? font-size:16px;
??? }
??? 內聯?? document.styleSheet
??? 外鏈
?? ?
?? ?
??? 行內 ?
?? ?
??? 1.目標對象 style 還是link 第幾個 ?
??? 2.選擇器
??? 3.樣式
??? 4.位置 ?
?? ?
?? ?
??? insertRule（）?? 非IE瀏覽器
??? 目標對象.insertRule(.box{font-size:16px},2);
?? ?
??? addRule()? IE瀏覽器 ?
??? 目標對象.addRule(box,font-size:16px,1);
??? var flag = true;
??? ?
???? if(flag){
??????? loadCss($sheet,"#box","font-size:16px",4);
???? }
?? ?
??? $sheet = document.styleSheet[0];
?? ?
?? ?
??? function loadCss(sheet,selectorText,cssText,position){
??????? //判定是哪個瀏覽器
??????? if(sheet.insertRule){? //非IE瀏覽器
???????? ??? ? sheet.insertRule(selectorText+"{"+cssText+"}",position);
??????? }else if(sheet.addRule){
???????? ??? ? sheet.addRule(selectorText,cssText,position); //IE瀏覽器
??????? }
??? }
?? ?
???

總結

以上是生活随笔為你收集整理的前端框架优化方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。