頁面裝載js及性能分析方法介紹

2019-11-20 20:55:24

字體：大中小

供稿：網(wǎng)友

一、裝載

先裝載靜態(tài)頁面的引用js文件，然后查找引用文件中是否包含onload函數(shù)，比如main.js中包含onload函數(shù)，在main.js中查找是否有對(duì)其他js文件的引用，優(yōu)先裝載引用js文件，被引用中文件的裝載順序和main.js的順序一致。
裝載完畢后，開始執(zhí)行onload函數(shù)。由于js執(zhí)行順序是順序執(zhí)行的，為提高頁面相應(yīng)速度，一般做法是在onload中只畫頁面，一些事件的綁定函數(shù)，ajax方法等可延后書寫。

二、響應(yīng)速度分析

1.借助工具進(jìn)行分析
各大瀏覽器的開發(fā)者工具（最喜歡使用火狐）可以方便的查看各個(gè)js文件、html文件、css文件及圖片的裝載及執(zhí)行時(shí)間。

2.硬編碼分析
在第一步中我們基本能定位到瓶頸js文件了，在瓶頸js中，可以使用console.time('test')和console.Endtime('test')語句對(duì)js函數(shù)及代碼塊掐取執(zhí)行時(shí)間。不過console語句只在非IE瀏覽器中執(zhí)行有效，而在IE下會(huì)報(bào)錯(cuò)。如果你偏愛使用IE，那就使用時(shí)間戳吧。在掐取時(shí)，比較方便的方法是，直接掐住整個(gè)js文件，然后使用火狐瀏覽器，按F12可以在控制臺(tái)中看到目標(biāo)js中所有函數(shù)及代碼塊的耗時(shí)，即可定位到瓶頸代碼處。

上一篇：js獲得網(wǎng)頁背景色和字體色的方法

下一篇：Js冒泡事件詳解及阻止示例