性能優(yōu)化之代碼優(yōu)化頁(yè)面加載速度
頁(yè)面代碼的優(yōu)化對(duì)于頁(yè)面加載速度也有不小的影響，最廣為人知的：
HTML頭部的JavaScript和寫在HTML標(biāo)簽中的Style會(huì)阻塞頁(yè)面的渲染，因此CSS放在頁(yè)面頭部并使用Link方式引入，JavaScript的引入放在頁(yè)面尾。
其次還有：
1.按需加載，把統(tǒng)計(jì)、分享等 JS 在頁(yè)面 onload 后再進(jìn)行加載，可以提高訪問速度；
2.優(yōu)化 Cookie ，減少 Cookie 體積；
3.避免 []() 的 src 為空；
4.盡量避免設(shè)置圖片大小，多次重設(shè)圖片大小會(huì)引發(fā)圖片的多次重繪，影響性能；
5.合理使用display屬性：
- display:inline后不應(yīng)該再使用width、height、margin、padding以及float
- display:inline-block后不應(yīng)該再使用float
- display:block后不應(yīng)該再使用vertical-align
- display:table-*后不應(yīng)該再使用margin或者float
6.不濫用Float 和 Web 字體；
7.盡量使用CSS3動(dòng)畫；
8.使用 AJAX 異步加載部分請(qǐng)求；
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
本文主要分享了js+div+css下拉導(dǎo)航菜單的完整代碼?？芍苯訌?fù)制保存到HTML文件就可以體驗(yàn)效果。下面跟著小編一起來(lái)看下吧2016-12-12
javascript密碼強(qiáng)度校驗(yàn)代碼（兩種方法）
為了保證網(wǎng)站個(gè)人信息的安全，很多網(wǎng)站在注冊(cè)頁(yè)面都設(shè)置密碼強(qiáng)度這項(xiàng)，用javascript如何實(shí)現(xiàn)密碼強(qiáng)度校驗(yàn)代碼呢？下面小編給大家整理了兩種方法使用javascript密碼強(qiáng)度校驗(yàn)代碼，有需要的朋友可以參考下2015-08-08
今天小編就為大家分享一篇layui 富文本編輯器和textarea值的相互傳遞方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09
圖片下載是前端常見的需求，如果一張一張下載未免太影響體驗(yàn)了，于是寫下了這個(gè)多張圖片打包成zip的demo2021-05-05
用iframe實(shí)現(xiàn)不刷新整個(gè)頁(yè)面上傳圖片的實(shí)例
下面小編就為大家?guī)?lái)一篇用iframe實(shí)現(xiàn)不刷新整個(gè)頁(yè)面上傳圖片的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-11-11
JavaScrip如何安全使用Payment Request API詳解
這篇文章主要為大家介紹了JavaScrip如何安全使用Payment Request API詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
使用ESLint禁止項(xiàng)目導(dǎo)入特定模塊的方法步驟
這篇文章主要介紹了使用ESLint禁止項(xiàng)目導(dǎo)入特定模塊的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-03-03
JavaScript使用setInterval()函數(shù)實(shí)現(xiàn)簡(jiǎn)單輪詢操作的方法
這篇文章主要介紹了JavaScript使用setInterval()函數(shù)實(shí)現(xiàn)簡(jiǎn)單輪詢操作的方法,以實(shí)例形式分析了輪詢操作的原理與javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-02-02
基于js實(shí)現(xiàn)checkbox批量選中操作
這篇文章主要為大家詳細(xì)介紹了基于js實(shí)現(xiàn)checkbox批量選中操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
console.log()的作用與實(shí)現(xiàn)方式
這篇文章主要介紹了console.log()的作用與實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01