淺談頁(yè)面裝載js及性能分析方法
一、裝載
先裝載靜態(tài)頁(yè)面的引用js文件，然后查找引用文件中是否包含onload函數(shù)，比如main.js中包含onload函數(shù)，在main.js中查找是否有對(duì)其他js文件的引用，優(yōu)先裝載引用js文件，被引用中文件的裝載順序和main.js的順序一致。
裝載完畢后，開(kāi)始執(zhí)行onload函數(shù)。由于js執(zhí)行順序是順序執(zhí)行的，為提高頁(yè)面相應(yīng)速度，一般做法是在onload中只畫頁(yè)面，一些事件的綁定函數(shù)，ajax方法等可延后書寫。
二、響應(yīng)速度分析
1.借助工具進(jìn)行分析
各大瀏覽器的開(kāi)發(fā)者工具（最喜歡使用火狐）可以方便的查看各個(gè)js文件、html文件、css文件及圖片的裝載及執(zhí)行時(shí)間。
2.硬編碼分析
在第一步中我們基本能定位到瓶頸js文件了，在瓶頸js中，可以使用console.time('test')和console.Endtime('test')語(yǔ)句對(duì)js函數(shù)及代碼塊掐取執(zhí)行時(shí)間。不過(guò)console語(yǔ)句只在非IE瀏覽器中執(zhí)行有效，而在IE下會(huì)報(bào)錯(cuò)。如果你偏愛(ài)使用IE，那就使用時(shí)間戳吧。在掐取時(shí)，比較方便的方法是，直接掐住整個(gè)js文件，然后使用火狐瀏覽器，按F12可以在控制臺(tái)中看到目標(biāo)js中所有函數(shù)及代碼塊的耗時(shí)，即可定位到瓶頸代碼處。
- iframe子頁(yè)面與父頁(yè)面在同域或不同域下的js通信
- jQuery學(xué)習(xí)筆記(1)--用jQuery實(shí)現(xiàn)異步通信(用json傳值)具體思路
- PHP 與 js的通信（via ajax,json）
- JS實(shí)現(xiàn)頁(yè)面超時(shí)后自動(dòng)跳轉(zhuǎn)到登陸頁(yè)面
- js實(shí)現(xiàn)iframe跨頁(yè)面調(diào)用函數(shù)的方法
- 讓html頁(yè)面不緩存js的實(shí)現(xiàn)方法
- js中iframe調(diào)用父頁(yè)面的方法
- js防止頁(yè)面被iframe調(diào)用的方法
- 嵌入式iframe子頁(yè)面與父頁(yè)面js通信的方法
相關(guān)文章
JavaScript數(shù)組及非數(shù)組對(duì)象的深淺克隆詳解原理
JavaScript中數(shù)組的方法種類眾多，在ES3-ES7不同版本時(shí)期都有新方法；并且數(shù)組的方法還有原型方法和從object繼承的方法，本文介紹了JavaScript數(shù)組及非數(shù)組對(duì)象的深淺克隆，希望讀者能從中有所收獲2021-10-10
layui 點(diǎn)擊重置按鈕, select 并沒(méi)有被重置的解決方法
今天小編就為大家分享一篇layui 點(diǎn)擊重置按鈕, select 并沒(méi)有被重置的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
動(dòng)態(tài)加載js、css的實(shí)例代碼
這篇文章主要介紹了動(dòng)態(tài)加載js、css的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-05-05
使用echarts實(shí)現(xiàn)3d柱狀圖+折線圖
這篇文章主要為大家詳細(xì)介紹了如何使用echarts實(shí)現(xiàn)3d柱狀圖和折線圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以了解一下2024-12-12
學(xué)習(xí)js就不得不學(xué)他的數(shù)組，這篇文章是由色拉油整理下，需要學(xué)習(xí)js數(shù)組的朋友可以參考下2013-10-10
在JavaScript中通過(guò)URL傳遞漢字的方法...2007-04-04
這篇文章主要介紹了如何捕獲和分析 JavaScript Error，感興趣的朋友可以參考下2014-03-03
微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼，小程序本身對(duì)http、websocket等連接均有諸多限制，所以這次項(xiàng)目選擇了node.js自帶的ws模塊。感興趣的可以參考一下2019-02-02
JS關(guān)于?replace?取值、替換第幾個(gè)匹配項(xiàng)問(wèn)題小結(jié)
這篇文章主要介紹了JS關(guān)于replace取值、替換第幾個(gè)匹配項(xiàng),本文針對(duì)字符串的替換、截取知識(shí)點(diǎn)做詳細(xì)介紹，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
給label賦值以及取label的值，取值及賦值代碼如下，感興趣的朋友可以參考下2013-11-11