设计、网站、推广
始于2004年
当前位置:首页 > 网站制作

电商网站建设前端优化实践

发表日期:2018-11-4 作者来源:派谷网络 浏览次数:0

  前端性能

  1.模块化

  严格来说,代码模块化并不能带来性能上的提升,但还是将模块化提出来,因为它真的很重要,重要到几乎所有的优化都与它息息相关.
  常见的模块化方案有:AMD、CMD、UMD、ES6

  如何选择?

  团队习惯
  个人偏好
  业务需要

  怎么把业务需要放在后一个考虑?
  因为没有哪一块业务会因为使用了不同的模块化方案而产生不同的结果.
  而且软件开发中的以人为本,用在这里刚好合适,毕竟业务高于一切.

  2.缓存

  缓存一定要加!
  因为CDN真的很贵.
  没有CDN?那就更得加缓存了!
  缓存有很多方式,为常见的就是下面这两种了

  浏览器304缓存
  localstorage本地存储

  业界,一直有关于304缓存与localstorage性能的争议,这里我们不讨论两者的差异,或性能问题.
  以业务导向选择方案,沙漠风选择的是localstorage.

  你可以这么干:

  通过localstorage存储js、css资源;
  资源版本控制;
  只要你愿意,localstorage也可以控制缓存时间!通过写一小段js代码来实现;
  在活动期间可以提前将活动相关资源缓存至localstorage,减轻活动当日的CDN消耗,同时在提升用户访问速度的同时,降低服务器端压力.
  PS:localstorage针对开发环境确实有点不够接地气,不过你可以在框架底层写一小段代码来支持不同环境下的缓存控制,例如:针对开发环境域名,禁止缓存,针对某个URL参数禁止缓存等.当然,你也可以写一个chrome插件来控制缓存,高兴就好!
  所以,沙漠风的建议是能使用localstorage就是尽量使用localstorage.如果你司没事也会搞一搞大促什么的,你就知道CDN有多贵了.

  3.懒加载

  图片懒加载
  如果你是做Hybrid开发,这真的有必要!

  JS懒加载
  模块化带来的其中一个好处就是我们可以针对js资源进行懒加载控制,RequireJS、SeaJS?
  这里我们采用的是RequireJS,要问我为什么,也许是因为我们使用的是AMD方案吧!

  4.前端模板渲染

  相比拼接字符串,jQuery.append,我们有了另一种选择,前端模板.
  前端模板方案有很多.这里我推荐腾讯的tmodjs.他的优势在于可以将前端模板预编译成js文件,同时支持模块加载.

  5.DOM怎么写很重要

  浏览器有个机制叫做重绘,任何改变dom元素位置的操作都会引发浏览器重绘操作,这是无法避免的.重绘是浏览器性能优化的一个重点,特别是针对webview的优化.
  既然我们不能避免,那么我们能够做什么呢?
  虽然我们不能避免浏览器重绘的发生,但是我们可以通过精确的控制dom元素,来达到使浏览器的重绘范围小化的目的,这里我们可以借助浏览器的开发者工具针对页面进行调优.

  客户端性能

  代理webview发送ajax请求,据说这可以省去三次握手的时间?
  iOS中使用WKWebView代替UIWebview,UIWebview是iOS8.0以前的产物,针对iOS8.0以后的系统建议使用WKWebView,经过实际测试,性能大概能够提升40%,同时稳定性有很大程度的提升,几乎是质的提升.

  webview支持加载webp格式图片.

  静态资源预加载,除了localstorage的缓存机制,我们也可以利用客户端针对前端静态资源进行缓存,在WIFI环境下,我们可以预先将静态资源下载至本地.

  服务端性能

  1.服务端渲染

  在一个把前后端分离奉为宝典的时代,提一句服务端渲染显然是不合适的.
  可是如果考虑到客户端弱爆了的Webview,也许这是一个不错的选择,毕竟服务端的性能要好很多.针对已经前后端分离的项目,我们建议可以尝试使用Node.js针对页面进行直出,也是一个不错的选择,Node.js的性能这里就不需要我累述了吧!
  Bytheway,屏数据服务端输出,配上懒加载一起,不要太爽哦.

  2.一个快速响应的接口

  一个快速响应的接口真的很重要!
  你可以通过优化代码,优化sql,优化缓存(redisOrmemcached?),优化Nginx配置?double服务器?
  ComeOn总有点能做的!
  总之,不要局限了自己.

  3.图片转webp

  由于webp格式的图片并不是所有环境都支持,这时候需要配合不同的客户端动态返回相应格式的图片.

本文章系本站编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本站联系,我们将在第一时间删除内容!

相关网站设计案例

相关推荐新闻

闂佸憡绻傜粔瀵歌姳閹绘帩鍤曢煫鍥ㄥ嚬閸熷酣鎮规笟濠勭瘈婵炴挸澧庨幉鐗堟媴鐟欙絽浜鹃柛鎰靛幗椤庢岸鏌涘┑鎰胺缂侇煉鎷�...

闂佸憡绻傜粔瀵歌姳閹绘帩鍤曢煫鍥ㄥ嚬閸熷酣鎮规担鎻掑⒉婵☆偒鍓熷畷鐑藉Ω椤垵鏁ょ紓鍌氬暞閸ㄥ綊鎮甸鐐叉嵍闁靛ǹ鍊楅悷婵嬫煕濮橆剛鐒锋い鏃€娲樺鍕炊瑜庣€氭煡鎮橀悙鑼缂佺娀顥撴禍鎼佸传閸曢潧娈舵繛鎴炴尭閿曨亪宕楀鈧幊妤呮嚍閵夈儳鍊掓繛鎾寸缁嬫劗绮╅幘顔藉殜缂傚牏濮烽悷顒€霉閸忚鐟邦啅閿燂拷...

闂佸搫鍟ㄩ崕鎻掞耿閿熺姵鏅柨鐕傛嫹2025-4-2

闂佸憡绻傜粔瀵歌姳閹绘帩鍤曢煫鍥ㄥ嚬閸熷酣鎮规笟濠勭?婵炲牊鍨剁€电厧螣閻撳簼鍖栭梺鍝勭墕椤︻垶骞楅姀锛勵洸闁跨噦鎷�...

闂佸憡绻傜粔瀵歌姳閹绘帩鍤曢煫鍥ㄥ嚬閸熷酣鎮规担鎻掑⒉婵℃彃鎲$粙澶愬焵椤掑倻鐭撶€广儱鐗嗛崢鏉戭熆閸撲礁鏋欐い鏂哄亾缂傚倸鍟崹褰掓偟椤栫偛鎹堕柕濞垮€楅悷婵嬫煕濮橆剛鐒锋い鏃€娲樺鍕炊妞嬪海顦╂繝纰樷偓鍐测偓褰掋€侀幋锔筋棃闁靛繈鍨洪弳鈺呮煠鐎涙ê鐏熼柍褜鍏涚粈渚€鏌﹂埡鍛骇閻犳亽鍔嶉弳鈺呮煠鐎涙ê鐏熼柍褜鍓ㄩ幏锟�...

闂佸搫鍟ㄩ崕鎻掞耿閿熺姵鏅柨鐕傛嫹2025-4-2

闂佸湱绮崝鏇炵暦瀹€鈧槐鏃堝箣閻橀潧璁叉繛杈剧稻閹瑰洭鎮板▎鎰劅闁挎梻鍋撻悾杈╃磽閸愨晛鐏╅柣婵愬灣閹峰鏁撻敓锟�...

缂傚倸鍟崹褰掓偟椤栨稒濯撮柟鎹愬吹瀹曪綁骞栨潏鍓х暠妞ゆ洦鍠楃粋宥嗘償閿濆棙娈㈤梺瑙勬尦閺€鍗炍i幖浣歌Е闁挎棁妫勬慨浠嬫煙閺夎法绠板ù鐘靛█閹儳鈻庡浣镐壕濞达絿枪閺呮瑦绻涢崰掳鍊ら崯蹇涙⒒閸屻倕鏋欏ù婊勫浮瀹曪絾绻濋崨顖滎啋闁荤偞绋戦惌浣该归崱娑樼闁哄稁鍓欏▓楣冩煕韫囨柨鈻曢柛锝呮憸閹蹭即鏁撻敓锟�...

闂佸搫鍟ㄩ崕鎻掞耿閿熺姵鏅柨鐕傛嫹2025-4-2

婵犵鈧啿鈧绱炲鍡楊嚤婵☆垰鎼褏绱撻崘鈺佺仼闁绘繍鍨辩粋鎺楀Ψ閿曗偓缁茬懓銆掑顓犫槈闁圭儵鏅犻弻鍛存晸閿燂拷...

婵炴潙鍚嬮敋閻庝絻灏欑槐鏃堝箣閻橀潧璁叉繛瀵稿О閸庤尪銇愭担鍦懝婵炴垶蓱瑜般儵姊洪銈呮灁婵炲牊鍨垮畷婵嬫偐閻戞ḿ銈伴梻渚囧亞閸犲海鈧濞婂浼搭敍濞戞ḿ鍊掗梺鍛婎殔濞层劑寮妶澶婄闁炬艾鍊荤粔鐓幬旈悩鑼跺闁硅渹鍗抽獮鏍р堪閸涱厼浜堕悗娈垮枟濞叉﹢骞栭幖浣哥闁圭儤鍨堕崐鎶芥煟閵娿儱顏╅柛娆欐嫹...

闂佸搫鍟ㄩ崕鎻掞耿閿熺姵鏅柨鐕傛嫹2025-4-1

缂傚倸鍟崹褰掓偟椤栨凹鍤堝Δ锔筋儥閸熷骸鈽夐幙鍐ㄥ箺婵犫偓娓氣偓瀹曨偊顢旈崘顏呮闂佺硶鏅濋崕銈咃耿閺夊簱鏋栭柨鐕傛嫹...

婵炲濮伴崕鎵箔閸涙潙鍙婃い鏍ㄧ矌缁夊湱绱掗弮鈧悷銉х磽閹捐埖濯奸柛娆嶅劥閸橆剟鏌i妸銉ヮ仹缂佹柨鐡ㄧ粋宥呪槈濡厧鏁ら梺鍝勭墱閸撴氨娑甸崼鏇炵婵炲棙鐟х粣妤€霉閻橆喖鍔ら柡浣靛€濋獮瀣憥閸屾繄顦版繛鎴炴惄閸樿偐缂撴ィ鍐╂櫖婵﹩鍘剧粻鎺楁煕韫囧鍔欑紒顭掔磿閹叉挳鏁愰崶銊х崶闂佸搫绉村ú銈堛亹閿燂拷...

闂佸搫鍟ㄩ崕鎻掞耿閿熺姵鏅柨鐕傛嫹2025-4-1

网站建设解决方案
缂傚倸鍟崹褰掓偟椤栨粎纾奸悗娑櫭闁荤喐鐟辩徊浠嬪窗閸涙潙妫橀悷娆忓閺€锟� 婵炴挳妫垮鎺旂箔閻斿吋鈷掗柕濠忕畱閻撴洜绱撻崘鈺佺仼闁绘繍鍨跺鍧楀幢濞嗗浚鍞洪梺鍛婄墬閻楃偠顣鹃梺鍛婂姌濞呮洟寮婚悢濂夋禆闁跨噦鎷� 闂佽В鍋撻柕澶嗘櫆閺佹﹢鏌涢妸銉剳缂傚秴顦辩划鈺佲枎閹诡偅甯″畷姗€鎼归锝囧幍濠碘剝顨愰幏锟� 闂佺ǹ绻戝Σ鎺楀焵椤戣法绐旀繛鍛灱閹壆浠﹂懖鈺冩嚌缂傚倸鍟崹褰掓偟椤栨凹鍤堝Δ锔筋儥閸熷酣鎮峰▎娆戝埌闁哥姴鎳樺顒傛喆閸曞灚鏁� 闂佸憡鐗曢…宄扳枍瀹€鈧幏鐘崇節閸愵煈鏆$紓鍌氬暞閸ㄥ綊鎮甸姘煎殘濡わ附顑欓崯搴ㄦ偡濞嗘瑧鍒伴柛鐘叉嚇瀵剛鎲撮崟鍨暤 闂佸綊娼ч鍡椻攦閳ь剟鏌℃担鐟邦棆闁绘牗绮庨幃鎵沪閼测晝鎳濈紓鍌氬暞閸ㄥ綊鎮甸姘煎殘濡わ附顑欓崯搴ㄦ煛閸屾繍娼愭い顫嫹 婵犮垼鍩栭悧鐐烘煥閵堝绀傛い鎺嗗亾鐎垫澘鍟扮槐鏃堝箣閻橀潧璁查悗鐐瑰€濈紓姘额敊閺囩姵鍠嗛柨婵嗘噹閺嬧偓闂佸搫鍊介~澶愩€侀敓锟� 闂備礁寮堕崹濂告倵閾忓湱纾鹃柟瀵稿Х瑜拌尙鈧偣鍊濈紓姘额敊閺囩姵鍠嗛柨婵嗘噹閺嬧偓闂佸搫鍊介~澶愩€侀敓锟� 闁荤偞绋戞總鏃傜箔閻旂厧纭€闊洤娴风粣妤冪磼椤愩儱鍚圭紓宥咁槺缁晛鈻庤箛鏇犲闁荤姳鐒﹀畷妯款暰闂佸憡鍔樺▍鏇㈠蓟閻斿娴栭柨鐕傛嫹 闂佸憡绻€閼宠埖鏅跺┑鍫氬亾鐟欏嫥缂氱紓宥咁槺缁辨棃骞嬮悩闈涜閻庣偣鍊濈紓姘额敊閺囥垹妫橀悷娆忓閺€锟�