介紹一些最近整理的優(yōu)化細(xì)節(jié)。圖片壓縮什么的就不說了，這是優(yōu)化必須做的。今天就說一下大家寫代碼時(shí)可以培養(yǎng)的優(yōu)化的細(xì)節(jié)點(diǎn)。

不濫用float。不濫用web字體。

Float在渲染時(shí)計(jì)算量比較大，并且會脫標(biāo)、塌陷。我們可以用flex布局來代替。web字體引入需要不小的消耗，最好跟設(shè)計(jì)提一下不要太多。

css中避免多余的樣式設(shè)置。

color、font、line-height等都是可以繼承的，所以他們的子元素如果屬性一樣就要重復(fù)寫了，特別是font-family。

復(fù)雜的一個(gè)方法，可以緩存函數(shù)的返回值。

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 stepcacheFk( ui ) //2 stepcacheFk( ui )

這是我看vue源碼時(shí)發(fā)現(xiàn)的一段代碼，作用就是可以緩存一個(gè)復(fù)雜函數(shù)的值，如果參數(shù)一樣就不重復(fù)計(jì)算。但這里要注意的是，這個(gè)緩存函數(shù)是通過閉包來做的，所以要做一些權(quán)衡。

盡量減少layout。

// 觸發(fā)兩次 layoutvar newWidth = p.offsetWidth + 50;p.style.width = newWidth + px var newHeight = p.offsetHeight + 50;p.style.height = newHeight + px // 只觸發(fā)一次 layoutvar newWidth = p.offsetWidth + 50;var newHeight = p.offsetHeight + 50;p.style.width = newWidth + px p.style.height = newHeight + px 

所有可觸發(fā)layout的操作都會被暫時(shí)放入 layout-queue 中，等到必須更新的時(shí)候，再計(jì)算整個(gè)隊(duì)列中所有操作影響的結(jié)果，如此就可只進(jìn)行一次的layout，從而提升性能。

動畫元素最好脫標(biāo)，不影響其他模塊。這樣也是為了不影響其他元素。

transform代替position。

做一些css位移效果，最好用transform而不要用定位。我剛?cè)腴T的時(shí)候用position做動畫卡的一匹~~~

選擇dom元素使用id，但不要為設(shè)置css而定義id。

如果用id選擇器，就不要加其他html' target='_blank'>class約束。定義過多id會使重用性降低，維護(hù)更困難，所以css中不建議多用id。

多次使用length的時(shí)候，要用變量保存。

var len = dom.length;for(var i = 0;i len;i++){}；

這樣好處就是每次循環(huán)，不用都計(jì)算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);返回值是一個(gè) long 整數(shù)，請求 ID ，是回調(diào)列表中唯一的標(biāo)識。是個(gè)非零值，沒別的意義。你可以傳這個(gè)值給 window.cancelAnimationFrame() 以取消回調(diào)函數(shù)。

requestAnimationFrame就是不用設(shè)置時(shí)間的定時(shí)器，每1/60s運(yùn)行一次，這是根據(jù)瀏覽器刷新幀數(shù)來定的。但兼容是個(gè)問題，用的話需要寫好兼容。

如果可以，盡量避免全局查找。

//dom = document.querySelector( #id function test() { dom = document.querySelector( #id }

比如上面的，如果只做test內(nèi)使用dom 就不要在全局定義，因?yàn)閳?zhí)行的時(shí)候會現(xiàn)在test函數(shù)內(nèi)部作用域查找，速度會快。

除非不知道遍歷的長度或者遍歷對象 不要用for in

 function t1(){ //20ms var i = 0; for(item in anObj) { 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++){ if( i === 100000){ console.log( for ok ) }

這是我自己試驗(yàn)循環(huán)100000個(gè)元素的數(shù)組，得出的執(zhí)行時(shí)間（看代碼）。所以最好別用，一般實(shí)際也不會用到遍歷對象。如果真有特殊情況遍歷對象，也要注意 ！！！遍歷出來的東西是不是自己。以為for in是會遍歷其原型鏈的。

骨架屏

這個(gè)是增強(qiáng)用戶體驗(yàn)，類似增強(qiáng)版loading。有自動化生成方案。感興趣可以看看。

ios禁止頁面識別手機(jī)號。Android禁止識別郵箱。

 meta name= format-detection content= telephone=no /  meta name= format-detection content= email=no / 

頭部css 底部js。

這個(gè)大家都知道，js將阻塞解析dom,增加白屏?xí)r間。所以一定要注意啊。

其實(shí)優(yōu)化的細(xì)節(jié)很多，所以要好好培養(yǎng)自己的編碼習(xí)慣，積少成多，慢慢的不斷積累，代碼的質(zhì)量肯定就不同了。

以上就是HTML5中一些可以優(yōu)化的細(xì)節(jié)介紹的詳細(xì)內(nèi)容，其它編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。