High Performance JavaScript(高性能JavaScript)讀書筆記分析
更新時(shí)間:2011年05月05日 22:15:56 作者:
High Performance JavaScript(高性能JavaScript)讀書筆記,讓你的js代碼更有效率。
第一章:加載和執(zhí)行
瀏覽器的JavaScript的引擎是編譯器層的優(yōu)化;
當(dāng)瀏覽器執(zhí)行JavaScript代碼時(shí),不能同時(shí)做其他任何事情(單一進(jìn)程),意味著<script>標(biāo)簽每次出現(xiàn)都霸道地讓頁面等帶腳本的解析和執(zhí)行(每個(gè)文件必須等到前一個(gè)文件下載并執(zhí)行完成才會(huì)開始下載),所以頭部的JS和CSS用來渲染頁面,交互行為(幾乎所有)的JS放在<body>底部;
主流瀏覽器都允許并行下載JS。
減少外鏈腳本數(shù)量將會(huì)改善性能(合并JS)
任何網(wǎng)站都可以使用一個(gè)把制定文件合并處理后的URL來獲取任意數(shù)量的文件。
defer屬性可延遲腳本(只有IE4 和FF3.5 支持)
第二章:數(shù)據(jù)訪問
JavaScript中有四種基本的數(shù)據(jù)存取位置: 直接量,變量,數(shù)組元素(以數(shù)字作為索引),對象成員(以字符床作為索引)。
訪問直接量和局部變量的速度最快,相反,訪問數(shù)組元素和對象成員相對較慢。
屬性或方法在原型鏈中的位置越深,訪問它的速度也越慢。
通常來說,可以通過吧常用的對象,數(shù)組元素,跨越變量保存在局部變量中來改善JavaScript性能。
第三章:DOM編程
DOM操作在webkit內(nèi)核的瀏覽器速度快,其他的瀏覽器innerHTML執(zhí)行快。
訪問和操作DOM是現(xiàn)代WEB應(yīng)用的重要部分。但每次穿越鏈接ECMAScript和DOM兩個(gè)島嶼之間的橋梁都會(huì)被收取‘過橋費(fèi)'.
要留意重回和重排。
在IE中:hover會(huì)降低響應(yīng)速度。
第四章:算法和流程控制
避免使用for-in循環(huán),除非需要遍歷一個(gè)屬性數(shù)量位置的對象。
了解棧溢出錯(cuò)誤。
第五章:字符串和正則表達(dá)式
回溯既是正則表達(dá)式匹配功能的基本組成部分,也是正則表達(dá)式的低效之源。
第六章:快速響應(yīng)的用戶界面
任何JavaScript任務(wù)都不應(yīng)當(dāng)執(zhí)行超過100毫秒。
Web workers是新版瀏覽器支持的特性。
沒有什么JavaScript代碼會(huì)重要到可以影響用戶體驗(yàn)的程度.
第七章:Ajax
JSON是輕量級的數(shù)據(jù)格式,解析速度快。
減少請求數(shù),可通過合并JS和CSS,還有IMG。
縮短頁面加載時(shí)間,頁面主要內(nèi)容加載完成后,用Ajax獲取那些次要的文件。
第八章:編程實(shí)踐
大多數(shù)的時(shí)候,沒必要使用eval()和Function(),因此最好避免使用它們。至于setTimeout()和setInterval(),建議傳入函數(shù)而不是字符串來作為第一個(gè)參數(shù)。
在JavaScript中創(chuàng)建對象和數(shù)組的方法有多種,但使用對象和數(shù)組直接量是最快的方式(對象屬性和數(shù)組項(xiàng)越多,使用直接量的好處就越明顯)。
不要重復(fù)工作:延遲加載;條件預(yù)加載.
多使用原生方法,因?yàn)楦臁?
第九章:構(gòu)建并部署高性能JavaScript應(yīng)用
PV(page view)即頁面瀏覽量或點(diǎn)擊量。
減少頁面渲染所需的HTTP請求數(shù),特別是針對那些首次訪問網(wǎng)站的用戶。
JavaScript壓縮。
JavaScript緩存。
使用內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)
第十章主要介紹工具:如firebug,YSlow,和一些性能分析.
瀏覽器的JavaScript的引擎是編譯器層的優(yōu)化;
當(dāng)瀏覽器執(zhí)行JavaScript代碼時(shí),不能同時(shí)做其他任何事情(單一進(jìn)程),意味著<script>標(biāo)簽每次出現(xiàn)都霸道地讓頁面等帶腳本的解析和執(zhí)行(每個(gè)文件必須等到前一個(gè)文件下載并執(zhí)行完成才會(huì)開始下載),所以頭部的JS和CSS用來渲染頁面,交互行為(幾乎所有)的JS放在<body>底部;
主流瀏覽器都允許并行下載JS。
減少外鏈腳本數(shù)量將會(huì)改善性能(合并JS)
任何網(wǎng)站都可以使用一個(gè)把制定文件合并處理后的URL來獲取任意數(shù)量的文件。
defer屬性可延遲腳本(只有IE4 和FF3.5 支持)
第二章:數(shù)據(jù)訪問
JavaScript中有四種基本的數(shù)據(jù)存取位置: 直接量,變量,數(shù)組元素(以數(shù)字作為索引),對象成員(以字符床作為索引)。
訪問直接量和局部變量的速度最快,相反,訪問數(shù)組元素和對象成員相對較慢。
屬性或方法在原型鏈中的位置越深,訪問它的速度也越慢。
通常來說,可以通過吧常用的對象,數(shù)組元素,跨越變量保存在局部變量中來改善JavaScript性能。
第三章:DOM編程
DOM操作在webkit內(nèi)核的瀏覽器速度快,其他的瀏覽器innerHTML執(zhí)行快。
訪問和操作DOM是現(xiàn)代WEB應(yīng)用的重要部分。但每次穿越鏈接ECMAScript和DOM兩個(gè)島嶼之間的橋梁都會(huì)被收取‘過橋費(fèi)'.
要留意重回和重排。
在IE中:hover會(huì)降低響應(yīng)速度。
第四章:算法和流程控制
避免使用for-in循環(huán),除非需要遍歷一個(gè)屬性數(shù)量位置的對象。
了解棧溢出錯(cuò)誤。
第五章:字符串和正則表達(dá)式
回溯既是正則表達(dá)式匹配功能的基本組成部分,也是正則表達(dá)式的低效之源。
第六章:快速響應(yīng)的用戶界面
任何JavaScript任務(wù)都不應(yīng)當(dāng)執(zhí)行超過100毫秒。
Web workers是新版瀏覽器支持的特性。
沒有什么JavaScript代碼會(huì)重要到可以影響用戶體驗(yàn)的程度.
第七章:Ajax
JSON是輕量級的數(shù)據(jù)格式,解析速度快。
減少請求數(shù),可通過合并JS和CSS,還有IMG。
縮短頁面加載時(shí)間,頁面主要內(nèi)容加載完成后,用Ajax獲取那些次要的文件。
第八章:編程實(shí)踐
大多數(shù)的時(shí)候,沒必要使用eval()和Function(),因此最好避免使用它們。至于setTimeout()和setInterval(),建議傳入函數(shù)而不是字符串來作為第一個(gè)參數(shù)。
在JavaScript中創(chuàng)建對象和數(shù)組的方法有多種,但使用對象和數(shù)組直接量是最快的方式(對象屬性和數(shù)組項(xiàng)越多,使用直接量的好處就越明顯)。
不要重復(fù)工作:延遲加載;條件預(yù)加載.
多使用原生方法,因?yàn)楦臁?
第九章:構(gòu)建并部署高性能JavaScript應(yīng)用
PV(page view)即頁面瀏覽量或點(diǎn)擊量。
減少頁面渲染所需的HTTP請求數(shù),特別是針對那些首次訪問網(wǎng)站的用戶。
JavaScript壓縮。
JavaScript緩存。
使用內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)
第十章主要介紹工具:如firebug,YSlow,和一些性能分析.
相關(guān)文章
微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴栵@示功能的處理方法
大家都知道在canvas中沒有提供方法來處理文字的多行問題,只有通過截取指定字符串來達(dá)到目的。接下來通過本文給大家介紹微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴栵@示功能 ,需要的朋友可以參考下2018-11-11Echarts直角坐標(biāo)系x軸y軸屬性設(shè)置整理大全
直角坐標(biāo)系的設(shè)置指的是網(wǎng)格,坐標(biāo)軸和區(qū)域縮放的配置,下面這篇文章主要給大家介紹了關(guān)于Echarts直角坐標(biāo)系x軸y軸屬性設(shè)置的相關(guān)資料,需要的朋友可以參考下2022-11-11javascript ES6 Template String模板字符串使用方法
這篇文章主要介紹了javascript ES6 模板字符串(Template String)是增強(qiáng)版的字符串,用反引號(`)標(biāo)識,它可以當(dāng)作普通字符串使用,也可以用來定義多行字符串,或者在字符串中嵌入變量,需要的朋友可以參考下2023-06-06js如何實(shí)現(xiàn)設(shè)計(jì)模式中的模板方法
都知道在js中如果定義兩個(gè)相同名稱的方法,前一個(gè)方法就會(huì)被后一個(gè)方法覆蓋掉,使用此特點(diǎn)就可以實(shí)現(xiàn)模板方法,感興趣的朋友可以了解下本文哈2013-07-07JavaScript 自動(dòng)完成腳本整理(33個(gè))
所謂的提升用戶體驗(yàn),其實(shí)就是把所有用戶視為極度弱智和超級懶鬼。比如JavaScript自動(dòng)完成(Autocomplete)腳本, 常用于表單,用戶只需輸入一兩個(gè)字母,就為你擴(kuò)展、聯(lián)想、匹配和供君選擇。2009-10-10