2022-06-04 分類: 網(wǎng)站建設(shè)
如果你問(wèn)我網(wǎng)站中最影響網(wǎng)站打開(kāi)速度的是什么?我會(huì)告訴是網(wǎng)站中的javascript,簡(jiǎn)稱JS。網(wǎng)站中引用的JS文件越多,打開(kāi)速度越慢,這點(diǎn)我深有體會(huì)。細(xì)讀完這篇文章,夠你優(yōu)化大半天的了,關(guān)于JS優(yōu)化方法大都脫離不了這三種方法。
關(guān)于JS優(yōu)化的文章已經(jīng)很多了,大多技術(shù)性很強(qiáng),像什么變量、字符串、類型,就不做介紹了,也不需要介紹,我也不懂,你知道了也沒(méi)用。大多數(shù)站長(zhǎng)都是“拿來(lái)主義”,我只需要告訴JS怎么放,刪那里就可以了。
現(xiàn)在的網(wǎng)站都加的有統(tǒng)計(jì)代碼、分享工具、評(píng)論列表、相關(guān)文章插件等工具,而要實(shí)現(xiàn)強(qiáng)大的功能,必須使用JS文件,正是這些JS插件,再增強(qiáng)了網(wǎng)站功能的同時(shí),也給影響了網(wǎng)站速度。
通過(guò)網(wǎng)站調(diào)用JS來(lái)看,目前最影響速度的為無(wú)覓插件(952ms),拿福能廣告(434ms)。如果確實(shí)要用可以保留,適當(dāng)?shù)母鶕?jù)官方教材做做優(yōu)化,下面盧松松介紹幾個(gè)最常用的JS優(yōu)化方法。
方法一:把不重要的JS放在頁(yè)面最底部
這是最簡(jiǎn)單,也是效果最好的優(yōu)化方法,把不重要的JS通通放到頁(yè)面的最下面body的上面,實(shí)現(xiàn)異步加載,也就是等網(wǎng)頁(yè)都加載完了,最后在加載這些不重要的JS,這樣就不影響網(wǎng)頁(yè)速度了。
如網(wǎng)站中util.js公共文件,默認(rèn)效果為,瀏覽網(wǎng)頁(yè)時(shí)會(huì)在網(wǎng)頁(yè)中出現(xiàn)“回頂部、寫(xiě)評(píng)論”特效?,F(xiàn)在把wumii(無(wú)覓插件JS)和jiathis(分享工具JS)統(tǒng)一整合到util.js文件中了。
然,其他網(wǎng)站也需要這樣做:把不重要的JS通通放到頁(yè)面最底部。
方法二:合并JS文件
合并JS,也就是減少HTTP請(qǐng)求(如何減少http請(qǐng)求數(shù)?),少給服務(wù)器請(qǐng)求一次就加快一點(diǎn)速度,而合并兩個(gè)原本獨(dú)立的JS就需要點(diǎn)技術(shù)了,但這難不倒我們,告訴大家一個(gè)最簡(jiǎn)單的方法:
不管三七二十一,先把A文件直接粘貼到B文件中,合并后刪除網(wǎng)頁(yè)中的A文件,如果網(wǎng)頁(yè)運(yùn)行正常,就OK;如果一些特效失效,那就還原,換C文件合并??倳?huì)有兩個(gè)不沖突的JS文件的。
在項(xiàng)目開(kāi)發(fā)環(huán)境下,我們會(huì)把 JS 代碼盡可能模塊化,方便管理和修改,這就避免不了會(huì)出現(xiàn)一個(gè)項(xiàng)目自身 JS 文件數(shù)量達(dá)到 10 個(gè)或者更多。
而項(xiàng)目上線后,會(huì)要求將所有 JS 文件合并為 1 個(gè)或者幾個(gè),手動(dòng)的操作雖然也不是問(wèn)題,但每次修改更新都要手動(dòng)操作合并一遍,這就肯定是個(gè)噩夢(mèng)了。
這種情況下,一些工具也就隨之產(chǎn)生,比如在線合并,一些網(wǎng)站提供js文件上傳,然后合并,但這還是很麻煩,如果開(kāi)發(fā)環(huán)境沒(méi)有網(wǎng)絡(luò)呢?
這會(huì)我就想到了 windows 系統(tǒng)下的 cmd 里的 copy 命令,它雖然是個(gè)復(fù)制的功能,但實(shí)則也是可以實(shí)現(xiàn)合并文件的需求,對(duì)于這點(diǎn)大家也可以去嘗試一下。
方法三:給JS文件減肥
咱不討論什么三目運(yùn)算符、減少對(duì)象查找、如何讓JS簡(jiǎn)潔,咱就用“JS減肥工具”。通常這類工具會(huì)把JS文件中幾百行的代碼壓縮成一行,使體積變小。
因?yàn)榭招械葐?wèn)題,有時(shí)候使用這類工具會(huì)使JS功能失效,而最簡(jiǎn)單的辦法是用Dreamweaver,把壓縮后的JS放入DW中,DW會(huì)自動(dòng)提示你那里有誤,把錯(cuò)誤的地方另起一行,或還原回去即可。
當(dāng)你的站點(diǎn)隨著時(shí)間的推移慢慢地做大的時(shí)候,你就會(huì)發(fā)現(xiàn)很多問(wèn)題出來(lái)的,其中一個(gè)就是越來(lái)越臃腫龐大,因此運(yùn)行的速度也就會(huì)慢了下來(lái)。優(yōu)化,盡力去優(yōu)化站點(diǎn),就變得非常重要了。
當(dāng)然了,除了手動(dòng)還有些在線自動(dòng)工具,大家找找看,適合自己的才是最好的工具。
新聞標(biāo)題:JS代碼優(yōu)化技巧,讓你可以快速掌握的優(yōu)化技能
網(wǎng)頁(yè)地址:http://www.rwnh.cn/news26/163276.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站改版、微信小程序、網(wǎng)站內(nèi)鏈、網(wǎng)站維護(hù)、自適應(yīng)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容