從前端來(lái)看頁(yè)面的卡頓是最為影響用戶體驗(yàn)的，而好的代碼是保證頁(yè)面平穩(wěn)高性能運(yùn)行的基石，前端頁(yè)面卡頓的原因有很多，可以從渲染機(jī)制和運(yùn)行分成兩大類：
（1）渲染不及時(shí)，頁(yè)面掉幀
（2）網(wǎng)頁(yè)內(nèi)存占用過(guò)高，運(yùn)行卡頓
兩大類又細(xì)分為：
渲染不及時(shí)，頁(yè)面掉幀
長(zhǎng)時(shí)間占用js線程
Js是單線程語(yǔ)言，瀏覽器只分配給 JS 一個(gè)主線程，每次從任務(wù)隊(duì)列中執(zhí)行一個(gè)任務(wù)，直到任務(wù)隊(duì)列為空為止。當(dāng)計(jì)算時(shí)間過(guò)長(zhǎng)時(shí)，這樣必然會(huì)出現(xiàn)渲染不及時(shí)。
?渲染不及時(shí)的原因：
瀏覽器的渲染頻率一般是60HZ，即要求1幀的時(shí)間為1s / 60 = 16.67ms，瀏覽器顯示頁(yè)面的時(shí)候，要處理js邏輯，還要做渲染，每個(gè)執(zhí)行片段不能超過(guò)16.67ms。實(shí)際上，瀏覽器內(nèi)核自身支撐體系運(yùn)行也需要消耗一些時(shí)間，所以留給我們的時(shí)間差不多只有10ms。
常見(jiàn)的優(yōu)化方式：
??? 采用requestIdleCallback和requestAnimationFrame，任務(wù)分片
頁(yè)面回流和重繪較多
解決：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-428621.html
1.盡量使用css屬性簡(jiǎn)寫:如：用boder代替boder-width，boder-style，boder-color
2.批量修改元素樣式 elem.className
3.盡量避免用table布局(table元素一旦觸發(fā)回流就會(huì)導(dǎo)致table里所有的其它元素回流)
4.需要?jiǎng)?chuàng)建多個(gè)DOM節(jié)點(diǎn)時(shí),使用DocumentFragment創(chuàng)建。
因?yàn)?每次創(chuàng)建一個(gè)頁(yè)面就會(huì)發(fā)生回流，所以采用DocumentFragment批量創(chuàng)建
5.盡量去寫css表達(dá)式。因?yàn)槊看握{(diào)用都會(huì)重新計(jì)算值(包括加載頁(yè)面
資源加載阻塞
解決：
（1）優(yōu)化資源加載，代碼拆分，按需加載，降低CSS對(duì)渲染的阻塞，盡早的加載CSS，降低加載的大小
網(wǎng)頁(yè)內(nèi)存占用過(guò)高，運(yùn)行卡頓【這里需要注意下js的內(nèi)存回收機(jī)制】
意外的全局變量引起的內(nèi)存泄漏
解決：
（1）使用嚴(yán)格模式避免
閉包引起的內(nèi)存泄漏
解決：
（1）對(duì)于共享變量設(shè)置null
遺忘的定時(shí)器
解決：
（1）及時(shí)回收定時(shí)器
循環(huán)引用
解決：
（1）循環(huán)引用就是對(duì)象A中包含另一個(gè)指向?qū)ο驜的指針，B中也包含一個(gè)指向A的引用。
因?yàn)镮E中的BOM、DOM的實(shí)現(xiàn)使用了COM，而COM對(duì)象使用的垃圾收集機(jī)制是引用計(jì)數(shù)策略。所以會(huì)存在循環(huán)引用的問(wèn)題
方法：手工斷開(kāi)js對(duì)象和DOM之間的鏈接，賦值為null。
例如：
function handle () {
??? var element = document.getElementById(“testId”);
??? element.onclick = function (){
??????? alert(element.id)
??? }
}
解決：
function handle () {
??? var element = document.getElementById(“testId”);
??? element.onclick = function (){
??????? alert(element.id)
??? }
??? element = null
DOM刪除時(shí)沒(méi)有解綁事件
解決：
（1）比如刪除一個(gè)button，但是并沒(méi)有解除button上的事件
沒(méi)有清理的DOM元素引用
dom節(jié)點(diǎn)或事件占用內(nèi)存過(guò)大
解決：
（1）采用虛擬列表和事件委托文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-428621.html
到了這里，關(guān)于在前端開(kāi)發(fā)中，什么樣的代碼會(huì)導(dǎo)致性能很低？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
