讯易前端问题

技术场景
前端获取数据通过Socket IO与Node.js交互,其交互过程基于异步,前端页面将要获取的数据通过指令发给Node
Server,Node再将根据指令去调用Gearman相应的接口,
当Gearman执行结束,会将数据发送给Node,Node再将数据发给前端页面。

下面是开发中遇到的一些问题

1 一个业务操作进行了多次IO交互
对于前端页面来说,每发一次指令就是一次原子操作,而要完成一次业务场景,就会产生多次的原子操作,比如下面用户加房间的过程

获取用户名片
-> 加入房间 -> 创建卡片 -> 获取房间信息 ->
加入房间

上述场景是在有房间无名片的用户加入房间整个原子操作,先获取用户的名片信息,如果是一张系统生成的默认名片,就将用户加入到房间,并弹窗要求用户创建名片,
当名片创建成功,获取该房间的信息(有可能房间已经结束),而后加入房间,客户端发送的网络指令如下:

get_card_info->join_room->create_card->get_room_info->join_room

共进行了5次网络IO,多次的网络IO操作会造成页面数据延迟加载,而每一个原子操作都是异步的,因此会在回调函数里进行回调,出现多层回调嵌套的代码。

解决:提出了复合命令的方式向服务器请求(初定)

2 接口定义
项目开始定义了后台需要实现的接口,但是在实际进行中才发现,最初定义的接口往往不够,开发中还会增加或修改接口

3 单页&多页
本次开发是一个多页应用,在实际体验中,多页的应用会加载每一个链接的js、css、html文件,因此页面之间的切换会有一个延时等待的过程,降低了产品的流畅度。
计划在下次改版及下个项目中去使用单页开发

4 UI
因为项目开始我们还没有专门的人来做UI,而我们由没有太多的时间花费在UI设计上,导致页面看起来不够美观,色彩搭配不是很合理;另外,项目中采用了ionic框架,
但是由于缺乏专业UI的设计,以至大量的css代码需要手动完成(自适应能力兼容性也不敢保证),ionic也没发挥出它的功能。

解决:确定好使用某一套UI框架的时候,前端美工人员的界面要基于这套UI来做。

5 页面交互
现阶段的页面交互是比较生硬的,如弹窗之间的动画效果没有,用户触摸时背景切换,在网络延迟的情况下,用户可以对一个提交按钮进行多次提交,导致后台数据冗余等等。

解决:此类的js特效可以采用某个前端框架的交互效果;也可以自己实现这些交互效果,并逐步将其抽取出来,形成公司移动端的固定的交互模式。

6 代码结构
因为js语言的灵活性及语法的特点,如何组织代码提高可维护度,这还需要一定的时间来提高,我想对于前端的压力,经过2个月左右的锻炼和学习,能达到一个专业的水平,胜任
前端任务。

总结:现在前端的压力主要集中于对js代码的熟练以及对渲染性能的把控,因为移动设备渲染DOM元素能力并不是很好,当元素存在阴影、滤镜及css3的一些高级特性的时候,渲染很慢,
在后续的开发中,将逐步提取形成一些模块化、框架化的可复用代码。

时间: 2024-10-12 20:59:13

讯易前端问题的相关文章

腾讯web前端开发工程师笔试题及答案

1. 如何实现事件委托? 首先要知道什么是事件委托. 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少遇到这么多li的情况),为每个li添加事件侦听就会对页面性能产生很大的影响. 就像下面这段代码: <!DOCTYPE HTML><html><head><meta charset="utf-8" /><ti

腾讯Web前端开发框架JX(Javascript eXtension tools)

转自:Web前端开发-Web前端工程师 » 腾讯Web前端开发框架JX(Javascript eXtension tools) JX – Javascript eXtension tools 一个类似 Google Closure Library 的 Web 前端开发框架,服役于 WebQQ 等大规模的 WebApp简介JX 是模块化的非侵入式Web前端框架,最新开源地址:https://github.com/AlloyTeam/JX. JX 框架同时适用于 Web Page 和 Web App

腾讯web前端一面

今天参加了腾讯的web前端一面,虽然被面试官虐成狗了,但是收获也是蛮大的.下面是面试的一些基本情况:我是被安排在下午四点二十左右的面试时间,三点多久到了,结果等到了5点左右就开始正式面试,在酒店面试之前,感觉学技术还是蛮幸运的,因为像面试产品之类的,都是好多人,而且都是群面,而研发的面试是一对一面试的.总的来说,面试官人很和谐,开始的时候就花了几分钟看我们交上去的简历,然后下面就开始正式的面试了,首先是基本的自我介绍,介绍完之后就开始问你问题了,我被问到的问题有一下这些,jquery中数组和对象

亲历腾讯WEB前端开发三轮面试经历及面试题

[一面]~=110分钟  2014/09/24 11:20  星期三 进门静坐30分钟做题. 填空题+大题+问答题 >>填空题何时接触电脑 何时接触前端运算符 字符串处理        延时 display        position        XMLHttpRequest        正则Jquery绑定事件        cookie >>大题BOM浏览器信息浏览器兼容性举例闭包作用与举例新闻ul列表,插入3个,获取index全文单词首字母大写ajax过程 >&

腾讯WEB前端开发面试经历,一面二面HR面,面面不到!

[一面]~=110分钟  2014/09/24 11:20  星期三 进门静坐30分钟做题. 填空题+大题+问答题 >>填空题何时接触电脑 何时接触前端运算符 字符串处理        延时 display        position        XMLHttpRequest        正则Jquery绑定事件        cookie >>大题BOM浏览器信息浏览器兼容性举例闭包作用与举例新闻ul列表,插入3个,获取index全文单词首字母大写ajax过程 >&

2015腾讯web前端笔试题

  1 请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性) 2 请指出一下代码的性能问题,并经行优化. var info="腾讯拍拍网(www.paipai.com)是腾讯旗下知名电子商务网站."; info +="拍拍网于2005年9月12日上线发布,"; info +="2006年3月13日宣布正式运营,"; info +="是目前国内第二大电子商务平台."; info=info.split(&quo

腾讯IVWEB前端工程化工具feflow思考与实践

本篇文章主要介绍腾讯IVWEB团队从0到1在工程化的思考和实践.feflow的全称是Front-end flow(前端工作流),致力于提升研发效率和规范的工程化解决方案.愿景是通过feflow,可以使项目创建.开发.构建.规范检查到最终项目上线的整个过程更加自动化和标准化. 要解决的问题 项目的目录结构按约定生成 团队有一套开发规范进行约束 支持多种类型的构建,包括Fis构建和webpack构建 团队内部的代码贡献统计.离线包内置App等 为了解决上述问题,我们于17年2月底开始投入工程化fef

(转)腾讯web前端开发的笔试题(记忆版)

面试职位的是web前端开发工程师.一小时的笔试题,一看全傻眼了.全都是网页设计和javascript的东西,悲剧了.做java的几百年不搞那东东了.现在凭记忆记录一些笔试题,本人亲面,拒绝网上的各种假题. 1.js中“5”+4=? 答案:54 2.js中void(0)=? 答案:undefined 3.js中NaN*4=? 答案:NaN 4.js中null*4.5=? 答案:0 5.js中alert(5*015===5.075)结果?原因? 6.js中13>>2=? -13>>2=

【腾讯IMWeb前端训练营】 Vuejs select下拉框demo

第二次作业:用vuejs 封装一个下拉框组件 效果图: HTML: 1 <div id="app"> 2 <custom-select btn="查询" :list="list1"></custom-select> 3 <custom-select btn="搜索" :list="list2"></custom-select> 4 </div