性能優(yōu)化之代碼優(yōu)化頁面加載速度

更新時(shí)間：2017年03月01日 14:39:28 作者：ikeyoo

本文主要介紹了代碼優(yōu)化頁面加載速度的方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧

頁面代碼的優(yōu)化對(duì)于頁面加載速度也有不小的影響，最廣為人知的：

HTML頭部的JavaScript和寫在HTML標(biāo)簽中的Style會(huì)阻塞頁面的渲染，因此CSS放在頁面頭部并使用Link方式引入，JavaScript的引入放在頁面尾。

其次還有：

1.按需加載，把統(tǒng)計(jì)、分享等 JS 在頁面 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)求；

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

js+div+css下拉導(dǎo)航菜單完整代碼分享
本文主要分享了js+div+css下拉導(dǎo)航菜單的完整代碼?？芍苯訌?fù)制保存到HTML文件就可以體驗(yàn)效果。下面跟著小編一起來看下吧
2016-12-12
javascript密碼強(qiáng)度校驗(yàn)代碼（兩種方法）
為了保證網(wǎng)站個(gè)人信息的安全，很多網(wǎng)站在注冊(cè)頁面都設(shè)置密碼強(qiáng)度這項(xiàng)，用javascript如何實(shí)現(xiàn)密碼強(qiáng)度校驗(yàn)代碼呢？下面小編給大家整理了兩種方法使用javascript密碼強(qiáng)度校驗(yàn)代碼，有需要的朋友可以參考下
2015-08-08
layui 富文本編輯器和textarea值的相互傳遞方法
今天小編就為大家分享一篇layui 富文本編輯器和textarea值的相互傳遞方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
js實(shí)現(xiàn)多張圖片打包成zip
圖片下載是前端常見的需求，如果一張一張下載未免太影響體驗(yàn)了，于是寫下了這個(gè)多張圖片打包成zip的demo
2021-05-05
用iframe實(shí)現(xiàn)不刷新整個(gè)頁面上傳圖片的實(shí)例
下面小編就為大家?guī)硪黄胕frame實(shí)現(xiàn)不刷新整個(gè)頁面上傳圖片的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
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è)參考。一起跟隨小編過來看看吧
2019-03-03
JavaScript使用setInterval()函數(shù)實(shí)現(xiàn)簡單輪詢操作的方法
這篇文章主要介紹了JavaScript使用setInterval()函數(shù)實(shí)現(xià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