Popush前端小优化-邹豪风

【实现篇】

实现功能

  实现Popush用户注册后自动登录功能。

实现思路

  阅读Popush代码的前端部分,主要观察了Views中关于注册和登录两个部分向后台传递数据的方式。发现该项目前后端交互的机理是:客户端利用socket.emit发送数据到服务器端,服务器端利用socket.on进行事件响应并处理相关数据。

  客户端发送数据:

1  app.socket.emit(‘register‘, {
2      name: name,
3      password: pass,
4  });

  服务器端响应:

1 socket.on(‘register‘, app.Lock.detach);

  了解这一基本原理对于解决自动登录的问题大有裨益。一个简单的想法是:在注册操作结束后,再次进行一次登录操作,即可达到自动登录的效果。

  具体实现:在原先发送register事件代码后,加一段发送login事件的代码,将之前注册的账号、密码直接作为登录数据向后端传递。

  Popush/static/js/views/register-view.js:   

1 app.socket.emit(‘register‘, {
2     name: name,
3     password: pass,
4 });
5 setTimeout(function(){app.socket.emit(‘login‘, {
6     name: name,
7     password: pass,
8 });},500)

测试

  在Linux配置的Popush中进行相关测试及其结果:

  1 注册账号testuser,实现了自动登录。

  2 登出后登录账号testuser,成功登录。

  3 再次注册testuser,提示用户已存在。

  4 反复进行了多次注册测试,未发现bug。

  由以上测试结果,说明我们在不破坏原有注册登录功能的基础上,基本实现了自动登录的小优化。

【探索篇】

  第一次阅读并修改一个比较长的代码,有些手足无措。虽然加入的只是一句代码,但是,如果不把popush的前端部分仔细阅读并了解一些backbone框架,基本不可能正确实现。

初探Backbone

  最早困扰我的就是,网站究竟是如何进行页面跳转的?阅读了backbone的官网介绍,发现该框架基于MVC——一个之前了解过,但又不完全熟悉的模型。其中心部分是Model,控制了数据的访问、转换、验证等。View不再直接呈现前端网页,而是负责监听页面事件,并传递数据。而最令人困扰的是,MVC中的“C”不再是控制页面跳转的Controller,而是Collection,作为Model的一个集合而存在。Backbone的框架又加入了Router部分,该部分才负责路由配置。

事件监听

  那么,要控制注册后自动跳转到首页,就应该在router的相关代码中研究一番吧。可惜研究之后我认为,router只是设置好了路由,并没有直接设置跳转动作。也就是说,需要找到反映“监听---响应”的机制部分的代码。我由View的register页面部分代码,发现原来是使用了socket来实现这个机制。就像之前所述,socket链接了客户端和服务器端,这厢发送信号、传递数据,另一边就作响应处理,将数据验证、保存,然后更改状态、渲染页面。关于socket,我觉得自己还了解得不够深刻,有必要深入学习一番。

Js的语句执行顺序问题及解决

  Popush/static/js/views/register-view.js:最初的自动登录实现方法:

1 app.socket.emit(‘register‘, {
2     name: name,
3     password: pass,
4 });
5 app.socket.emit(‘login‘, {
6     name: name,
7     password: pass,
8 });

  期待的效果是,先执行前一句话,完成注册操作后,再执行后一句话,完成登录操作。然而天不遂人愿,js中有类似预编译的执行方式,与传统的从上到下顺序执行方式完全不同。这意味着,可能会先登录,后注册,造成了bug。这个bug也是经过测试才发现的。

  我想到的解决办法是加入了setTimeout函数进行流程控制。延时执行登录,从而保证登录时已经完成了注册。这个方法经实际验证,确实能够较好地解决原来的问题。

1 setTimeout(function(){app.socket.emit(‘login‘, {
2     name: name,
3     password: pass,
4 });},500)

  不足:由于存在延时登录,可能会影响用户体验。这里我选择延时0.5秒。我认为可以进行一些测试,确定一个比较理想的延时时间,既能保证注册已经完成,又使用户不感到明显的延迟。或者,利用回调等更好的方法,处理语句执行顺序的问题。这些改进方法有待继续研究。

【感想】

  通过本次试验,我算是又一次学习了MVC模型,当然,只是一点皮毛。如何正确利用MVC,达到各层次很好的分离,这是网站在搭建前,必须思考、设计的。

  阅读他人的代码是一件比写代码更加痛苦的事情。但阅读代码能够发现自身的诸多不足,体会到他人设计模式、代码风格的精妙之处。

  Backbone据说是一种轻量级的框架,它很好的完成了前端后端的逐层分离,而且还是用JS实现的——我之前一直以为JS就是前端的语言。这些发现令我惊讶无比。

【参考文献】

https://github.com/the5fire/backbonejs-learning-note

http://backbonejs.org/docs/todos.html

时间: 2024-10-15 20:31:36

Popush前端小优化-邹豪风的相关文章

新产品为了效果,做的比较炫,用了很多的图片和JS,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。

第一篇:HTTP服务器 因tomcat处理静态资源的速度比较慢,所以首先想到的就是把所有静态资源(JS,CSS,image,swf) 提到单独的服务器,用更加快速的HTTP服务器,这里选择了nginx了,nginx相比apache,更加轻量级, 配置更加简单,而且nginx不仅仅是高性能的HTTP服务器,还是高性能的反向代理服务器. 目前很多大型网站都使用了nginx,新浪.网易.QQ等都使用了nginx,说明nginx的稳定性和性能还是非常不错的. 1. nginx 安装(linux) htt

web前端性能优化

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决

前端性能优化之优化图片

前端图片优化一直以来都是热门话题,从需求上来看,很多站点往往是图片体积大于代码体积, 图片请求多余代码文件请求, 给前端的性能带来了很大的困扰,那么应该如何解决呢? 零. 认识图片 我们通常使用的图片就是gif.png和jpg了. 其中,gif格式是比较老的图片格式,它的色彩效果最低(就是不清楚!!!),如果想要使用gif保存鲜艳图片会让你的网站看上去非常可怕. 但是gif有着不可忽视的优点:体积小.有着极好的压缩效果,支持动画,并且支持透明效果,虽然这个透明没有PNG格式图片支持的强大... 

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

WebPack实例与前端性能优化

[前端构建]WebPack实例与前端性能优化 计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几何时,我们是如上图的方式引入JS资源的,相信现在很少遇见了.近年来Web前端开发领域朝着规范开发的方向演进.体现在以下两点: MVC研发构架.多多益处(逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题...) 构建工具层出不穷.多多益处(提

前端性能优化

前端性能优化的方法? content方面 1,减少HTTP请求:合并文件.CSS精灵.inline Image 2,减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件.方法:DNS缓存.将资源分布到恰当数量的主机名,平衡并行下载和DNS查询 3,避免重定向:多余的中间访问 4,使Ajax可缓存 5,非必须组件延迟加载 6,未来所需组件预加载 7,减少DOM元素数量 8,将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量 9,减少iframe数

2017前端性能优化清单

https://github.com/Findow-team/Blog/issues/11?utm_source=tuicool&utm_medium=referral 2017前端性能优化清单 你开始使用渐进启动了么?是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具?有没有用过Brotli.Zofli和HPACK这几种压缩技术,或者OCSP协议(在线证书状态协议)?知不知道资源提醒,客户端提醒和CSS containment一类的技术?

前端性能优化分析

说道性能优化,相信大家都看过网页的源代码,和我们平常写的可能有些不同,在审查元素里面看到的代码都是经过压缩过的,这也是我们前端优化的一种,在一些比较大的公司会使用到grunt来进行代码的压缩或者是合并,在一些小的公司就会使用一些别的方法,下面我就简单介绍一下比较常见的前端优化. 在这里我们主要分为三个方向来介绍,首先我们要介绍的就是网络方面的,这个主要分为DNS的解析,CDN的加速,和延迟加载以及预加载在这里的cdn主要是借助于一些大型公司的服务器,进行加载,这样会提升加载的效率. 第二个就是我

【前端构建】WebPack实例与前端性能优化

计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几何时,我们是如上图的方式引入JS资源的,相信现在很少遇见了.近年来Web前端开发领域朝着规范开发的方向演进.体现在以下两点: MVC研发构架.多多益处(逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题...) 构建工具层出不穷.多多益处(提升团队协作,以及工程运维,避免人工处理琐碎而重