摘要:介紹一些最近整理的優化細節。今天就說一下大家寫代碼時可以培養的優化的細節點。有自動化生成方案。其實優化的細節很多,所以要好好培養自己的編碼習慣,積少成多,慢慢的不斷積累,代碼的質量肯定就不同了。
介紹一些最近整理的優化細節。圖片壓縮什么的就不說了,這是優化必須做的。今天就說一下大家寫代碼時可以培養的優化的細節點。
不濫用float。不濫用web字體。
Float在渲染時計算量比較大,并且會脫標、塌陷。我們可以用flex布局來代替。web字體引入需要不小的消耗,最好跟設計提一下不要太多。
css中避免多余的樣式設置。
color、font、line-height等都是可以繼承的,所以他們的子元素如果屬性一樣就要重復寫了,特別是font-family。
復雜的一個方法,可以緩存函數的返回值。
function cached (fn) { var cache = Object.create(null); return (function cachedFn (str) { var hit = cache[str]; return hit || (cache[str] = fn(str)) }) }; var fk = function (str) { return str.charAt(0).toUpperCase() + str.slice(1) } var cacheFk = cached(fk) // 1 step cacheFk("ui") //2 step cacheFk("ui")
這是我看vue源碼時發現的一段代碼,作用就是可以緩存一個復雜函數的值,如果參數一樣就不重復計算。但這里要注意的是,這個緩存函數是通過閉包來做的,所以要做一些權衡。
盡量減少layout。
// 觸發兩次 layout var newWidth = Div.offsetWidth + 50; Div.style.width = newWidth + "px"; var newHeight = Div.offsetHeight + 50; Div.style.height = newHeight + "px"; // 只觸發一次 layout var newWidth = Div.offsetWidth + 50; var newHeight = Div.offsetHeight + 50; Div.style.width = newWidth + "px"; Div.style.height = newHeight + "px";
所有可觸發layout的操作都會被暫時放入 layout-queue 中,等到必須更新的時候,再計算整個隊列中所有操作影響的結果,如此就可只進行一次的layout,從而提升性能。
動畫元素最好脫標,不影響其他模塊。這樣也是為了不影響其他元素。
transform代替position。
做一些css位移效果,最好用transform而不要用定位。我剛入門的時候用position做動畫卡的一匹~~~
選擇dom元素使用id,但不要為設置css而定義id。
如果用id選擇器,就不要加其他class約束。定義過多id會使重用性降低,維護更困難,所以css中不建議多用id。
多次使用length的時候,要用變量保存。
var len = dom.length; for(var i = 0;i < len;i++){};
這樣好處就是每次循環,不用都計算dom的長度了。
requestAnimationFrame代替setTimeout
var start = null; var element = document.getElementById("SomeElementYouWantToAnimate"); element.style.position = "absolute"; function step(timestamp) { if (!start) start = timestamp; var progress = timestamp - start; element.style.left = Math.min(progress / 10, 200) + "px"; if (progress < 2000) { window.requestAnimationFrame(step); } } window.requestAnimationFrame(step); //window.requestAnimationFrame(callback); 返回值是一個 long 整數,請求 ID ,是回調列表中唯一的標識。是個非零值,沒別的意義。你可以傳這個值給 window.cancelAnimationFrame() 以取消回調函數。
requestAnimationFrame就是不用設置時間的定時器,每1/60s運行一次,這是根據瀏覽器刷新幀數來定的。但兼容是個問題,用的話需要寫好兼容。
如果可以,盡量避免全局查找。
//dom = document.querySelector("#id"); function test() { dom = document.querySelector("#id"); }
比如上面的,如果只做test內使用dom 就不要在全局定義,因為執行的時候會現在test函數內部作用域查找,速度會快。
除非不知道遍歷的長度或者遍歷對象 不要用for in
function t1(){ //20ms var i = 0; for(item in anObj) { i++ } if( i === 100000){ console.log("for in ok") } } function t2(){ //4ms var len = anObj.length; var i = 0; for(var i = 0 ;i < len;i++){ i++ } if( i === 100000){ console.log("for ok") } }
這是我自己試驗循環100000個元素的數組,得出的執行時間(看代碼)。所以最好別用,一般實際也不會用到遍歷對象。如果真有特殊情況遍歷對象,也要注意 !!!遍歷出來的東西是不是自己。以為for in是會遍歷其原型鏈的。
骨架屏
這個是增強用戶體驗,類似增強版loading。有自動化生成方案。感興趣可以看看。
ios禁止頁面識別手機號。Android禁止識別郵箱。
頭部css 底部js。
這個大家都知道,js將阻塞解析dom,增加白屏時間。所以一定要注意啊。
其實優化的細節很多,所以要好好培養自己的編碼習慣,積少成多,慢慢的不斷積累,代碼的質量肯定就不同了。 最后祝大家身體健康。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114105.html
摘要:介紹一些最近整理的優化細節。今天就說一下大家寫代碼時可以培養的優化的細節點。有自動化生成方案。其實優化的細節很多,所以要好好培養自己的編碼習慣,積少成多,慢慢的不斷積累,代碼的質量肯定就不同了。 介紹一些最近整理的優化細節。圖片壓縮什么的就不說了,這是優化必須做的。今天就說一下大家寫代碼時可以培養的優化的細節點。 不濫用float。不濫用web字體。 Float在渲染時計算量比較大,并...
摘要:介紹一些最近整理的優化細節。今天就說一下大家寫代碼時可以培養的優化的細節點。有自動化生成方案。其實優化的細節很多,所以要好好培養自己的編碼習慣,積少成多,慢慢的不斷積累,代碼的質量肯定就不同了。 介紹一些最近整理的優化細節。圖片壓縮什么的就不說了,這是優化必須做的。今天就說一下大家寫代碼時可以培養的優化的細節點。 不濫用float。不濫用web字體。 Float在渲染時計算量比較大,并...
摘要:三性能優化處理做工具類的項目,性能是非常大的挑戰,我總結了以下幾個常見的性能優化點數據緩存。防抖,節流,事件委托內存釋放。 內容大綱: 1、功能介紹 2、技術架構 3、性能優化 4、細節分享 5、開源說明 一、項目功能介紹 很久沒寫過技術類的文章了,這次給大家分享一個近期的項目,采用react+mobx+jquery構建的大型工具類項目。查看項目網址。 如果用過易企秀,maka或者...
閱讀 919·2023-04-25 23:40
閱讀 3706·2021-11-22 15:22
閱讀 3541·2021-10-09 09:44
閱讀 3399·2021-09-23 11:52
閱讀 1251·2021-09-22 15:43
閱讀 780·2021-09-10 10:51
閱讀 2202·2021-09-06 15:02
閱讀 3185·2021-09-06 15:02