中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

電商網(wǎng)站建設前端優(yōu)化實踐

2022-11-05    分類: 網(wǎng)站建設

網(wǎng)站建設 - 建站教程 - 網(wǎng)頁設計- 電商網(wǎng)站建設前端優(yōu)化實踐
前端性能

1.模塊化

嚴格來說,代碼模塊化并不能帶來性能上的提升,但還是將模塊化提出來,因為它真的很重要,重要到幾乎所有的優(yōu)化都與它息息相關.
常見的模塊化方案有:AMD、CMD、UMD、ES6

如何選擇?

團隊習慣
個人偏好
業(yè)務需要

怎么把業(yè)務需要放在后一個考慮?
因為沒有哪一塊業(yè)務會因為使用了不同的模塊化方案而產(chǎn)生不同的結(jié)果.
而且軟件開發(fā)中的以人為本,用在這里剛好合適,畢竟業(yè)務高于一切.

2.緩存

緩存一定要加!
因為CDN真的很貴.
沒有CDN?那就更得加緩存了!
緩存有很多方式,為常見的就是下面這兩種了

瀏覽器304緩存
localstorage本地存儲

業(yè)界,一直有關于304緩存與localstorage性能的爭議,這里我們不討論兩者的差異,或性能問題.
以業(yè)務導向選擇方案,創(chuàng)新互聯(lián)選擇的是localstorage.

你可以這么干:

通過localstorage存儲js、css資源;
資源版本控制;
只要你愿意,localstorage也可以控制緩存時間!通過寫一小段js代碼來實現(xiàn);
在活動期間可以提前將活動相關資源緩存至localstorage,減輕活動當日的CDN消耗,同時在提升用戶訪問速度的同時,降低服務器端壓力.
PS:localstorage針對開發(fā)環(huán)境確實有點不夠接地氣,不過你可以在框架底層寫一小段代碼來支持不同環(huán)境下的緩存控制,例如:針對開發(fā)環(huán)境域名,禁止緩存,針對某個URL參數(shù)禁止緩存等.當然,你也可以寫一個chrome插件來控制緩存,高興就好!
所以,創(chuàng)新互聯(lián)的建議是能使用localstorage就是盡量使用localstorage.如果你司沒事也會搞一搞大促什么的,你就知道CDN有多貴了.

3.懶加載

圖片懶加載
如果你是做Hybrid開發(fā),這真的有必要!

JS懶加載
模塊化帶來的其中一個好處就是我們可以針對js資源進行懶加載控制,RequireJS、SeaJS?
這里我們采用的是RequireJS,要問我為什么,也許是因為我們使用的是AMD方案吧!

4.前端模板渲染

相比拼接字符串,jQuery.append,我們有了另一種選擇,前端模板.
前端模板方案有很多.這里我推薦騰訊的tmodjs.他的優(yōu)勢在于可以將前端模板預編譯成js文件,同時支持模塊加載.

5.DOM怎么寫很重要

瀏覽器有個機制叫做重繪,任何改變dom元素位置的操作都會引發(fā)瀏覽器重繪操作,這是無法避免的.重繪是瀏覽器性能優(yōu)化的一個重點,特別是針對webview的優(yōu)化.
既然我們不能避免,那么我們能夠做什么呢?
雖然我們不能避免瀏覽器重繪的發(fā)生,但是我們可以通過精確的控制dom元素,來達到使瀏覽器的重繪范圍小化的目的,這里我們可以借助瀏覽器的開發(fā)者工具針對頁面進行調(diào)優(yōu).

客戶端性能

代理webview發(fā)送ajax請求,據(jù)說這可以省去三次握手的時間?
iOS中使用WKWebView代替UIWebview,UIWebview是iOS8.0以前的產(chǎn)物,針對iOS8.0以后的系統(tǒng)建議使用WKWebView,經(jīng)過實際測試,性能大概能夠提升40%,同時穩(wěn)定性有很大程度的提升,幾乎是質(zhì)的提升.

webview支持加載webp格式圖片.

靜態(tài)資源預加載,除了localstorage的緩存機制,我們也可以利用客戶端針對前端靜態(tài)資源進行緩存,在WIFI環(huán)境下,我們可以預先將靜態(tài)資源下載至本地.

服務端性能

1.服務端渲染

在一個把前后端分離奉為寶典的時代,提一句服務端渲染顯然是不合適的.
可是如果考慮到客戶端弱爆了的Webview,也許這是一個不錯的選擇,畢竟服務端的性能要好很多.針對已經(jīng)前后端分離的項目,我們建議可以嘗試使用Node.js針對頁面進行直出,也是一個不錯的選擇,Node.js的性能這里就不需要我累述了吧!
Bytheway,屏數(shù)據(jù)服務端輸出,配上懶加載一起,不要太爽哦.

2.一個快速響應的接口

一個快速響應的接口真的很重要!
你可以通過優(yōu)化代碼,優(yōu)化sql,優(yōu)化緩存(redisOrmemcached?),優(yōu)化Nginx配置?double服務器?
ComeOn總有點能做的!
總之,不要局限了自己.

3.圖片轉(zhuǎn)webp

由于webp格式的圖片并不是所有環(huán)境都支持,這時候需要配合不同的客戶端動態(tài)返回相應格式的圖片.

本文題目:電商網(wǎng)站建設前端優(yōu)化實踐
轉(zhuǎn)載源于:http://m.rwnh.cn/news31/210931.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡營銷seo公司;服務項目有網(wǎng)站建設

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設計
江门市| 西林县| 邹平县| 奇台县| 宁德市| 集贤县| 繁昌县| 玉溪市| 英吉沙县| 三台县| 防城港市| 新河县| 荣昌县| 兴安县| 甘肃省| 墨竹工卡县| 吴桥县| 平泉县| 大连市| 会昌县| 中江县| 商城县| 灵璧县| 渝北区| 武功县| 香格里拉县| 无为县| 武清区| 上蔡县| 康定县| 盐津县| 绿春县| 光泽县| 万安县| 邵武市| 辽阳县| 民县| 永仁县| 梅州市| 盘锦市| 鹤庆县|