閱讀本文您將收獲：

• 性能優化的整體思路
• 在HTML、CSS、JavaScript層級的性能優化

為什么要進行性能優化

• 用戶: 提升用戶體驗，改善頁面性能
• 開發者: 體現公司意志和開發人員技能

性能優化的總體方向

• 高效 ：合理安排資源
• 快速 ：減少等待時間
• 標準 ：
  • 首次有效繪制（First Meaningful Paint，簡稱FMP，當主要內容呈現在頁面上）
  • 英雄渲染時間（Hero Rendering Times，度量用戶體驗的新指標，當用戶最關心的內容渲染完成）
  • 可交互時間（Time to Interactive，簡稱TTI，指頁面布局已經穩定，關鍵的頁面字體是可見的，并且主進程可用于處理用戶輸入，基本上用戶可以點擊UI并與其交互）
  • 輸入響應（Input responsiveness，界面響應用戶輸入所需的時間）
  • 感知速度指數（Perceptual Speed Index，簡稱PSI，測量頁面在加載過程中視覺上的變化速度，分數越低越好）

優化方向

HTML/CSS優化

• 能用html/css解決的問題就不要用js
  • 更快的開發速度，更小的維護成本
  • 適用場景

//導航高亮 nav li {opacity: 0.5; } nav li:hover {opacity: 1; } //鼠標懸停顯示模塊 .menu {display: none; } .nav:hover + .menu {display: inline-block; } .menu:before {content: '';position: absolute;top: -20px;left: 0px;width: 100%;height: 20px; }

自定義radio/checkbox樣式

input[type=checkbox]{} input[type=checkbox]:checked{}

• • 巧用css偽類，合理使用原生選擇器，如：:focus、@media、input[type=email]:invalid
  • 使用sass、scss等預編譯器

優化HTML標簽

• 文字<p><h1>減少css代碼
• 表單<form>
• 列表<ol><ul>
• 圖片<img><picture>
• 鏈接<a><button>
• 根據情況使用input type值
• 使用HTML5語義化標簽

//一個語義化的網頁布局 <nav></nav> <header></header> <main><section></section><section></section> </main> <footer></footer>

• 不濫用高消耗的樣式
  • box-shadow、border-radius、float需要瀏覽器進行大量的計算，應減少使用
• 選擇器合并
  • 把有共同的屬性內容的一系列選擇器組合到一起，能壓縮空間和資源開銷
• 0值去單位
  • 對于值為0的屬性，盡量不要加單位，增加兼容性

JS優化

• 減少前端代碼耦合
  • 使用傳參的方法減少耦合
  • 利用策略模式抽離公共組件、參數、封裝請求
• JS書寫優化
  • 按照強類型風格去寫代碼，指明變量類型和返回類型
  • 字面量與局部變量的訪問速度最快，數組元素和對象成員相對較慢

//bad let num,str,obj; //good let num = 0;str = '',obj = null;//bad getPrice:function(price){if (price < 0) {return false;}else {return price * 10} } //good getPrice:function(price){if (price < 0) {return -1;}else {return price * 10} } //類型確定，解析器不會去做一些額外的的工作，類型不確定的情況下回發生優化回滾 //優化回滾：編譯器已經編譯完成函數，類型變化導致回滾到通用狀態，重新生成函數

減少作用域查找

• 盡量少的不要讓代碼暴露在全局作用域下，變量從局部作用域到全局作用域的搜索過程越長速度越慢

//bad <script>var map = document.querySelector('#imap');map.style.height = '10px'; </script> //good <script>!function() {var map = document.querySelector('#imap');map.style.height = '10px';} </script>

• • 對象嵌套的越深，讀取速度就越慢
  • 無意義的對象嵌套拖累讀取速度
• 避免 == 的使用
  • 確定類型的情況下直接使用 ===
• 合并表達式
  • 用三目運算符代替簡單的if-else

//bad function getPrice(count){if(count < 0){return -1;}else {return count * 100;} } //good function getPrice(count){return count <0 ? return -1 : count * 100; } //在進行代碼壓縮的時候，即時書寫的是if-else，壓縮工具也會幫你把它改成三目運算符的形式

使用ES6簡化代碼

• 使用箭頭函數取代小函數

var num = [4,6,8,3,1,0] //bad num.sort(function (a,b){return a-b; }) //good num.sort(a,b => a-b);

字符串拼接

let url = `/list.html?page=${page}&type=${type}`;

• • 塊級作用域變量，使用let代替var

如有問題，請評論指正。碼字不易，點個贊再走唄！

web的前端：一篇總結得超全的前端進階文章！入門、技巧、方法、書籍、網站...?zhuanlan.zhihu.com作者：全棧道路
鏈接：https://juejin.im/post/6844904065688666119
來源：掘金

總結

以上是生活随笔為你收集整理的html修改原生checkbox选中的颜色_[三分钟小文]前端性能优化-HTML、CSS、JS部分的全部內容，希望文章能夠幫你解決所遇到的問題。

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