400-0628-117

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

2019-03-29 17:38 soyikj.com
  前端性能

  1.模块化
  严格来说,代码模块化并不能带来性能上的提升,但还是将模块化提出来,因为它真的很重要,重要到几乎所有的优化都与它息息相关(related).
  常见的模块化方案有:AM
  D、CM
  D、UM
  D、ES6
  如何选择(xuanze)?
  团队习惯
  个人偏好
  业务需要
  怎么把业务需要放在后一个考虑?
  因为没有哪一块业务会因为使用了不同的模块化方案而产生不同的结果.
  而且软件开发中的以人为本,用在这里刚好合适,毕竟业务高于一切.
  2.缓存
  缓存一定要加!
  因为CDN真的很贵.
  没有CDN?那就更得加缓存(cache)了!
  缓存有很多方式,为常见的就是下面这两种了
  浏览器304缓存(cache)
  localstorage本地存储
  业界,一直有关于304缓存(cache)与localstorage性能的争议,这里我们不讨论两者的差异,或性能问题.
  以业务导向选择方案(fāng àn),选择的是localstorage.
  你可以这么干:
  通过localstorage存储j
  S、css资源;
  资源版本控制;
  只要你愿意,localstorage也可以控制缓存(cache)时间!通过写一小段js代码来实现;
  在活动期间可以提前将活动相关资源缓存至localstorage,减轻活动当日的CDN消耗(consume),同时在提升用户访问速度的同时,降低服务器端压力.
  PHOTOSHOP:localstorage针对开发环境确实有点不够接地气,不过你可以在框架底层写一小段代码来支持不同环境下的缓存控制(control),例如:针对开发环境域名(Domain Name),禁止缓存,针对某个URL参数禁止缓存等.当然,你也可以写一个chrome插件来控制缓存,高兴就好!
  所以,的建议是能使用localstorage就是尽量使用localstorage.如果你司没事也会搞一搞大促什么的,你就知道CDN有多贵了.
  3.懒加载
  图片懒加载
  如果你是做Hybrid开发,这真的有必要!
  JS懒加载
  模块化带来的其中一个好处就是我们可以针对js资源进行懒加载控制,RequireJ
  S、SeaJS?
  这里我们采用的是RequireJS,要问我为什么,也许是因为我们使用的是AMD方案吧!
  4.前端模板渲染
  相比拼接字符串,jQuery.append,我们有了另一种选择,前端模板.
  前端模板方案有很多.这里我推荐腾讯的tmodjs.他的优势在于可以将前端模板预编译成js文件,同时支持模块加载.
  5.DOM怎么写很重要
  浏览器有个机制叫做重绘,任何改变dom元素位置的操作都会引发浏览器重绘操作,这是无法避免的.重绘是浏览器性能优化(optimalize)的一个重点(zhòng diǎn),特别是针对webview的优化.
  既然我们不能避免,那么我们可以做什么呢?
  虽然我们不能避免浏览器重绘的发生,但是我们可以通过精确的控制(control)dom元素,来达到使浏览器的重绘范围小化的目的,这里我们可以借助浏览器的开发者工具针对页面进行调优.
  客户端性能
  代理webview发送ajax请求,据说这可以省去三次握手的时间?
  iOS中使用WKWebView代替UIWebview,UIWebview是iOS8.0以前的产物,针对iOS8.0以后的系统(system)建议使用WKWebView,经过实际测试,性能大概能够提升40%,同时稳定性(The stability of)有很大程度的提升,几乎是质的提升.
  webview支持加载webp格式图片.
  静态资源预加载,除了localstorage的缓存机制,我们也可以利用客户端针对前端静态资源进行缓存,在WIFI环境下,我们可以预先将静态资源下载至本地.
  服务(fú wù)端性能
  1.服务端渲染
  在一个把前后端分离奉为宝典的时代,提一句服务端渲染显然是不合适的.
  可是如果考虑到客户端弱爆了的Webview,也许这是一个不错的选择,毕竟服务端的性能要好很多.针对已经前后端分离的项目,我们建议可以尝试使用Node.js针对页面进行直出,也是一个不错的选择,Node.js的性能这里就不需要我累述了吧!
  Bytheway,屏数据服务(fú wù)端输出,配上懒加载一起,不要太爽哦.
  2.一个快速响应的接口
  一个快速响应的接口真的很重要!
  你可以通过优化代码,优化sql,优化缓存(redisOrmemcached?),优化Nginx配置?double服务器?
  ComeOn总有点能做的!
  总之,不要局限了自己.
  3.图片转webp
  由于webp格式的图片并不是所有环境都支持,这时候需要配合不同的用户端动态返回相应格式的图片.
上一篇:电商网站导航如何设计——网站建设公司为你支
下一篇:电商网站建设如何提高用户体验

声明:本页内容由搜易科技有限公司通过网络收集编辑所得,所有资料仅供用户参考;本站不拥有所有权,也不承认相关法律责任。如您认为本网页中有涉嫌抄写的内容,请及时与我们联系进行举报,并提供相关证据,工作人员会在5个工作日内联系您,一经查实,本站将立刻删除涉嫌侵权内容。如果您对SEO优化核心技术文章感兴趣,请点击查看seo教程网站建设的相关文章,请关注搜易科技公司官网(www.soyikj.com)

相关资讯 Releva ntnews
服务推荐 Hot sale ltem
  1. 我们的承诺
  2. 我们的实力
  3. 我们的未来
服务热线

400-0628-117

公司地址: 佛山市禅城区南庄镇紫洞南路106号南庄商业广场4座8楼801

佛山市禅城、南海、顺德、高明、三水五区均可提供上门洽谈服务

搜易科技- - 网站建设SEO网站优化网络营销专业服务商

粤ICP备16046293号

Copyright © 2007-2019 佛山市搜易科技有限公司 All Rights Reserved‬

QQ咨询
在线咨询
微信咨询
扫码咨询
联系电话
搜易科技联系电话 400-0628-117
预约上门
返回顶部
  • 搜易科技在线QQ咨询
    QQ咨询
  • 网站建设联系电话
    联系电话
  • 返回网站建设公司首页
    首页
  • 预约搜易科技上门服务
    预约上门
  • 返回网页顶部
    返回顶部