腾讯微信系产品—手游宝论坛前端优化的血与汗
IMWeb前端社区
”关注我们哦！
一款产品从成长进化到成熟，需要在满足了有用的前提下，慢慢变得好用。
怎么算有用？
可能各位产品经理有更多的话语权，包括通过用户调研、市场分析等方法去挖掘用户的需求，从而设计出满足痛点的产品。
而怎样才算好用？
除了产品的交互流程可以体现好用之外，其实开发同学也是可以在这方面大大地作出贡献的。
本文的主要内容就是，如何从技术角度去思考，把一款社区论坛类的产品做得更好用。
手游宝论坛移动端从去年低开始打造，功能经过半年多的不断迭代，已经日趋完善。初期由于功能的不断快速变化，所以也没花太多时间在优化上。
非常庆幸的是，我们收到越来越多的用户质疑，“你们的APP太耗流量了”、“你们的APP在2G网络下根本没法用啊，慢得要死”......
用户的声音永远是最宝贵的，先满足最真实存在的问题才是最重要的，于是在在这种背景下，我们启动了一轮论坛优化。
这一轮优化的重点可以总结为两个字：快、省。也就是速度要更快、流量要更省！
1、善用缓存
移动网络没有传统有线网络稳定，特别在3G及更低网络下，延时普遍比较长。用户打开页面白屏等待的时间过长将直接导致大批没耐心的用户流失。善用缓存，可以加快用户看到页面内容的时间。
下面看下论坛板块页优化前后的对比：
wifi网络，优化前：
wifi网络，优化后：
啥？没看出来变化？
的确，在wifi环境下可能差别不是太大，肉眼无法感知区别。
接下来让我们看看在2G网络环境下二者又有什么区别：
2G网络，优化前：
2G网络，优化后：
这下看就比较明显了，在2G环境下，从首页中点击打开一款游戏的论坛板块页，有明显的长时间白屏，而利用了缓存之后，板块之前缓存的内容能瞬间显示出来，而在请求收到之后，再替换掉缓存内容。
具体的用户数据来证明效果：
上图是8月20日后的按日统计的平均首屏时间，可以明显看到，在利用缓存之后，首屏时间从原先的约1.8s下降到到1s左右，速度提高约45%！
论坛板块页的缓存策略很简单，只要用户访问过一次某论坛，就将该论坛的首屏内容缓存下来，提供给下一次访问时候使用。
接下来我想要在帖子详情页也使用一定的缓存策略来提高体验，但是由于帖子数量太多，我们不能将所有帖子内容都缓存下来，而且同一个用户多次访问同一个帖子的概率是相对比较低的，那该怎样利用缓存策略呢？
接下来请看优化前后的动态图：
2G网络，优化前：
2G网络，优化后：
相信大家已经看到区别了，优化后的详情页，用帖子的一些基本信息替换掉了优化前的白屏。而这些基本信息，其实是在列表页的时候就加载了的，我们在列表页时候将帖子概要简单整理后存入本地缓存，从而在打开帖子详情的时候能将对应的缓存内容显示出来，提高体验。
数据的表现情况，从原先的约1.7s下降到1s，速度提高约41%。当然，这个首屏时间定义得可能并不很严禁，但是总体来说，还是提高了体验呀。
以上所说的本地缓存，指的是web容器的localStorage，而浏览器对其大小是有不同的限制的，所以大家使用的时候一定要有自己一套缓存维护的策略，不能出现让其不断自然增长最后装满并崩溃的情况。
最简单的方法是，捕获存储的异常，如果是满了，进行一定的清理：
上面例子只是最简单的方案，但最好根据自身业务进行对应的缓存管理策略。
比如针对手游宝论坛，我自己判断的是用户经常访问的游戏板块不会超过3个，所以我只会缓存3个游戏板块的内容，一旦出现第4个，会把前面的较旧的删除掉；而在帖子详情层面，只会缓存50个帖子的基本概要，每次进行存储前，都会判断如果内容即将超标，则将较旧的进行删除。
当然，最优的缓存策略方案绝对不是拍脑袋就可以出来的，所以基于这点，后续还需要根据反馈数据，去平衡用户的缓存命中率和缓存使用空间的关系，以达到效率最优。
2、图片优化
众所周知，在web领域，图片往往是消耗流量的资源。论坛的帖子内容出现图片的情况还不算非常多，而且也已经有做一定的优化，但是之前一直遗漏了一个问题，那就是“用户头像”。
由于历史原因，手游宝用户在注册时候，后台会去拉取用户的QQ或者微信的基本资料，并将其作为用户的初始信息来注册一个手游宝用户。问题在于头像这一属性，初期选择了直接保存了QQ或者微信头像的url，而并没有将头像重新存储一份成为手游宝的图片。因此问题就来了，我们保存的是第三方的头像原图url，且没经过处理（选择对应的尺寸）就直接进行了显示，导致了很多流量的浪费。目前经过整改，头像都选择了对应比较合适的尺寸进行显示，但是由于整个系统现存在3种形态的url，QQ的、微信的和手游宝的，而每个平台都有不同的缩略图尺寸配置，因此对后面的优化带来了一定的麻烦（此处后续安排进一步优化）。
粗略估算一下，一个正常的用户从论坛首页，进入到某游戏板块列表页，再进入一个帖子详情页，访问到的头像绝不少于10个（如上图所示），而头像的原图往往能达到20KB，如若我们将所有头像都统一使用100*100的尺寸，每张图片将能节省大概18KB的流量。我们就按每个用户访问10个头像来算，能为我们的图片CDN每天节省近103GB！
3、网络请求优化
先来看下目前帖子详情页，用于获取一个帖子的回复的接口请求参数：
我将其中的主要参数param整理下方便大家看：
这里的意思是，前端合并调用了后台的两个接口，分别是获取帖子的评论数据QueryReply和获取热门评论数据ForumTopReply，而每个接口又需要单独的param参数。大家明显能看到，这里面有非常多重复和没必要的数据进行了传输。
由于历史原因，最早时候的接口都是以后端的思路来设计的，用module和method来区分了每一个子功能，而这样的接口在没有任何业务逻辑的包装下，直接暴漏给了前端来调用。另一方面，从返回给前端的数据来看，后端由于考虑每个子功能的复用，所以也常常出现返回一些没用的数据给前端，导致了更多的网络流量浪费。
因此针对这一问题，我们打算在前端和基础业务之间再搭建一层业务逻辑层，这一层针对页面的具体业务来组装数据并返回，从而解决这一问题。
比如上述的请求可以从：
而且只返回页面需要的数据，多余的删减掉，按照目前每天6000W左右的接口调用量，若每个接口能节省0.5kb左右，那么能每天节省近29GB的流量！
4、整理不同环境下、不同版本间的功能
手游宝论坛由于使用环境非常多，除了要考虑普通浏览器访问的情况下，还需要考虑手游宝APP里的hybird内嵌情况、被游戏APP内嵌的情况等等。为了提高体验，手游宝论坛在APP的环境下借助Native进行了很多优化，而APP也一直在不断迭代中，从我当时接手论坛时候的1.5版本，到现在的3.8版本，于是我们经常能看到类似这样的代码：
这种情况多了不仅降低了页面效率，更关键的也使得代码的维护成本越来越高。
但是其实随着版本不断地迭代，低版本的使用用户会越来越少，而且产品同学也会根据策略不断强制一些低版本用户进行升级（如低版本存在初期的漏洞风险、功能大改要兼容低版本成本太高、旧版本体验实在太差已被时代抛弃等等）。
通过整合代码，整体JS文件瘦身了5KB，虽然量非常小，但是就这个举动，却可以为我们的CDN每天节省近3GB的流量。而更关键的是，删掉没用代码的感觉太爽了！代码更加简洁清晰了，为日后的继续迭代做好了充分的准备。
听过很多道理，却依然过不好这一生。
知道很多web优化的原则，站点依然各种缺陷。
项目持续的快速迭代，很多时候没法做到完美的长远计划，坦然接受不完美的存在，竭力地发现它们，有节奏地优化它们，才能让一款优秀的产品持续健康地成长下去。
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
今日搜狐热点大家都在找：
当前位置：&&&腾讯手游宝iPhone版
腾讯手游宝，腾讯出品，来发现手游高手吧。
腾讯手游宝iPhone版更新说明
V5.1.4版本正式发布，欢迎大家使用，提出反馈意见！1、游戏启动器- 显示剩余电量续航时间、可用内存、网络延迟- 自动优化游戏环境，并计算出游戏环境分2、适配了iPhone X3、玩友页卡内测结束- 玩友功能内测结束，待功能优化完善后会重新上线
腾讯手游宝iPhone版官方介绍
&&&&腾讯手游宝，腾讯官方唯一手游社区。&&&&抢先豪礼：一键为您匹配游戏福利，海量腾讯精品手游礼包任您挑选。&&&&游戏：男神女神小鲜肉，主播在线陪你玩，还可以送花哦!&&&&游戏专区：提供定制化游戏服务，独家游戏数据，更有精彩话题嗨翻天。&&&&游戏：实用录屏工具助你记录超神全过程！&&&&游戏论坛：腾讯官方手游论坛，发现兴趣相投的小伙伴。
腾讯手游宝iPhone版截图
腾讯手游宝下载地址
安卓手机版
官网版本：5.1.4APP大小：86.35 MB
腾讯手游宝iPhone版评论
越来越垃圾了省钱优选联盟的优惠券真的很多哦，抵扣后购物很划算”省钱优选联盟“让我省了很多钱，里面有好多优惠券京东购物还不错的，用“省钱优选联盟”下单还有返利可以拿哦“省钱优选联盟”是我用过很好的app，不仅有优惠券可以领，还可以赚钱的app
发现该APP下载安装使用错误或恶意扣费携带病毒，请
腾讯手游宝app相关搜索
版权所有 京ICP备号-5
京公网安备 50 备大话西游手游宝图任务怎么过_宝图任务玩法技巧详解
日来源：游迅网编辑：
& &大话西游手游中有玩家对于宝图任务的玩法还不太了解，下面小编就给大家介绍宝图任务的玩法技巧，一起来了解下吧。
& &宝图：宝图任务(挂机完成)
& &与前面任务一样进入活动选择最下面的宝图任务，自动寻路与NPC店小二手中接受任务!每日可完成一次!共完成15场战斗!(不增加经验值)此任务可以当做官方给予大家的免费的福利!
& &接受任务后，点击左边任务提示进行寻路之后，就可以挂机了，这个任务怪能力都很弱,所以不会导致角色死亡，那么这期间只要等着15场战斗结束后，进行挖宝就可以了!
& &宝图任务每场战斗都会随机给予普通藏宝图当然有的时候一场战斗下来会无任何收获!所以此任务就是看脸看人品了!(童话我人品最差的一次，15场就出了1张藏宝图，当时就哭晕厕所里了~(&_&)~)
& &战斗结束后就可以开始我们的大宝藏之旅了!点击包裹我们就可以看自己当天收获的藏宝图，点击藏宝图使用开始自动寻路，到达坐标后自动弹出背包提示使用这个坐标的藏宝图!
& &挖掘后我们可以随机获得召唤兽经验丹.银两.技能书残卷.装备可镶嵌的宝石等物品!(童话我曾经挖到了神兽丹~嗷~嗷!2000万召唤兽经验呢)祝愿大家也能挖到好宝贝呦!
声明：游迅网登载此文出于传递信息之目的，绝不意味着游迅网赞同其观点或证实其描述，若侵权请来信告知，我们将及时处理。
《仙境传说RO：守护永恒的爱》万众期待的赠送功能终于上线了！今天你收到姜饼快递员的礼物轰炸了吗？还没有收到的冒险者也不要着急，说不定你的好友正为你准备小惊喜呢。不如试着在RO手游中多多结识新朋友吧！
- 25日，Com2uS“魔灵召唤世界竞技场锦标赛”总决赛在美拉开帷幕
不知不觉，QQ飞车已经伴随玩家走过了十个春秋，成为了很多飞车铁粉青春里不得不说的一款游戏，里面藏有懵懂的爱情、心贴心的友情、青出于蓝的师徒情和年少张扬的漂移梦想。时光匆匆一走，但青春还未散场，QQ飞车手游即将上线开启新征程！
由刘亦菲代言的3D魔幻MMOARPG手游《天使纪元》荣耀内测已圆满结束，值得期待的是公测将会在12月6日全面开启。在内测中，最令人难忘的就是丰富的打宝玩法，让我们领略到《天使纪元》游戏中各大Boss“首领”的风采。这些精彩和刺激的挑战跟随小编一起先睹为快吧！
《龙王传说》手游由掌趣科技和大神圈联合发行、唐家三少和炫世唐门共同监制。随着游戏全新资料片的开启，除了激烈异常的宗门战之外，最炽手可热的宗门boss玩法也让玩家大呼过瘾，下面请一起来看看宗门boss到底是啥。
腾讯首款百人战术竞技手游《光荣使命》继创下“首次对外测试开始前预约人数突破3000万”的佳绩后，全网话题热度持续升温。11月21日开启限号光荣测试之后，玩家的热情更是达至新一轮顶峰，截至11月23日，参与《光荣使命》不删档预约的人数已成功突破3500万！
近日，由番糖网络独立研发的二次元美食拟人新游《食之契约》，曝光了一张其世界背景设定的完整概念图。此前，虽然已经有不少玩家接触到这款游戏，但游戏中“缇尔菈世界”的起源、独特地形地貌、整个世界的面积和维持系统等，一直让很多玩家捉摸不透，如今，这些问题，都能在这张宏大的世界背景图中得到解答。
三国题材战争策略卡牌手游大作《血染征袍》11月24日11:00燃情开测！海量内容震撼揭晓——美颜版三国人物颠覆传统审美，畅享运筹帷幄之中决胜快感，特色武将战力爆棚，带你体验战场上的风云变幻。更有万人国战浪潮来袭，诚邀各路英雄前来一决高下!
时光如梭，《啪啪三国》已与各位玩家走过四载征程。今日，《啪啪三国》四周年庆典盛大开启，精彩玩法联袂更新，多重福利接踵而至，全新五星鬼才郭嘉神秘来袭，少年天子汉武帝震撼登场，全新挑战地图花式送福利，惊喜彩蛋任性送大奖，最嗨的周年庆典，尽在《啪啪三国》！
在众玩家的翘首以盼下，距离国民级热血手游《魔域口袋版》全新资料片上线时间只剩3天！
安卓游戏榜单
1全民泡泡大战最新版益智休闲
2英雄杀腾讯版策略塔防
3传奇世界正版H5私服角色扮演
4梦幻宠物联盟角色扮演
5阿拉德之怒角色扮演
6穿越火线枪战王者体验服射击枪战
7吉格斯电玩爆破动作闯关
8沙滩挖挖乐儿童教育
9宝宝爱洗澡儿童教育
10自由式足球3D体育竞技
最新安卓游戏谁玩（腾讯应用宝里下载的）手游花千骨啊，我从昨天中午开始就一直进不去，每次都是正在加载中，卸载重装_百度知道
谁玩（腾讯应用宝里下载的）手游花千骨啊，我从昨天中午开始就一直进不去，每次都是正在加载中，卸载重装
谁玩（腾讯应用宝里下载的）手游花千骨啊，我从昨天中午开始就一直进不去，每次都是正在加载中，卸载重装也不行，还是一样。下载别的版本的花千骨可以进，就腾讯的不行。到底怎么能进去腾讯版的啊？
我有更好的答案
要么是游戏在维护要么是网络环境不好也可能是你手机内存不够了哟，你可以跟我一起在电脑上玩嘛，下个手游部落模拟器就能畅玩
你没看截图吗？不管是手机内存，还是运行内存都多着
你这个百度版本的花千骨我也进的去，我说的是应用宝那个版进不去
还是可以用模拟器玩
采纳率：65%
我也下了一个花千骨 总是程序未安装 是不是手机不兼容啊
不是不兼容，我之前玩的好好的，昨天中午突然进不去了。昨天下午试了下去别的平台下的花千骨，可以进，就是在腾讯应用宝下载的进不了
卸载再下一次应用宝
你就下载其他版本的花千骨就好了，我就是这样的
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。大话西游手游宝宝学习技能时存在的误区解析攻略_齐齐乐大话西游手游专区
当前位置： &>&&>&&>& > 大话西游手游宝宝学习技能时存在的误区解析攻略
大话西游手游宝宝学习技能时存在的误区解析攻略
编辑：&&来源：&&发表时间：日10:02&&
编辑导读：大话西游手游宝宝学习技能时有哪些误区?齐齐乐小编已经整理好了,现将这篇大话西游手游宝宝学习技能时存在的误区解析攻略分享给大家,来看看吧。
大话西游手游宝宝学习技能时有哪些误区?这是一款回合经典MMORPG手游。现在就和齐齐乐小编一起来看看大话西游手游宝宝学习技能时存在的误区解析攻略吧。
【召唤兽技能-技能格】
1.刚获得的原始召唤兽，除天生技能外，其他技能格都处于锁定状态!
误区：刚获得的原始召唤兽，无论有天生技能还是么有天生技能，都是没有空格子!
纠正：我们刚获得召唤兽，有天生技能时其他技能格锁定状态，对于有些没有天生技能格的召唤兽，会保留一个空格!
2.有空余技能格子时，且技能数小于3，才能领悟技能
误区：有空格子时，有俩个技能还可以领悟一次，有三个技能时是不是就不能领悟了?
纠正：带有天生技能时，天生技能不算领悟要求之内。也就说天生技能+两个技能=三个技能，这个时候还是可以领悟一个技能哒!同时针对没有天生技能的召唤兽，可自行领悟四个技能!大家万不可看到上面的这句话误认为最多可领悟三个技能的错误思想!
3.不同种类召唤兽拥有技能格子数不一样
这一个一般不存在什么误区。普通召唤兽共4个技能格，高级召唤兽的共6个技能格，特殊召唤兽8个技能格，神兽召唤兽11个技能格。
【召唤兽技能-技能格开启】
1.每一场明雷战斗结束，参加召唤兽几率开启锁定的技能格
误区：可以无限刷格子，把召唤兽技能格全开启
纠正：召唤兽只能通过明雷战斗开启到第4个技能格，而且包括天生技能!但是传说有人通过明雷开启了第五个技能格子，不过至今没有看到实图，到底是真假，这一直是一个谜底!不过值得肯定的是，纵使可以开，几率也是跟彩票一样吧
2.使用一定数量聚魄丹可以开启锁定的技能栏
误区：在只有一个技能的召唤兽情况下，玩家点击开启技能格，无论第二个还是第六个，统统显示花费1个就可以开启!
纠正：事实表明，在您没有开启下一个技能格时，后面的技能格您是无法看到需要花费几个聚魄丹的。
【召唤兽技能-学习技能】
1.召唤兽可以通过学习技能书来掌握技能，但是学习时由一定几率顶替原有技能!
误区：没有额外的空格子会顶替现有技能，有了空格子就会学习在空格子上!
纠正：事实很残酷，无论有多少个空格子，只要原本有技能存在，除天生技能外，都是有概率被顶替哒，而且被顶替的概率还不小!
2.天生技能可以被遗忘和恢复!
误区：我想让第一个技能格不是天生技能，先遗忘了，等学习新技能后，我再把天生技能恢复了就可以吧!
纠正：对于有天生技能的召唤兽而言，第一个技能格子是固定给天生技能哒。哪怕是您遗忘后学习了新技能，当您恢复后，它还会跑到第一个技能格，把您学习的技能给顶替掉!
3.锁定技能可以避免学习技能时被顶替掉该技能，解封8个技能格可锁定两个技能!
说明：如果锁定新技能，原来锁定将自动清除;
神兽技能栏不能被锁定和遗忘;
天生技能不能被锁定;
锁定状态的技能格中的技能，仍然可以被遗忘;遗忘则清除锁定效果;
手机扫一扫马上下载
状态：公测&&&&&大小：259MB
网易耗时三年打造西游类回合制手游
以上就是齐齐乐小编分享关于大话西游手游宝宝学习技能时存在的误区解析攻略。想要了解更多关于大话西游手游资讯，请关注齐齐乐大话西游手游专区。
小编推荐：
免责声明：文章来自厂商 齐齐乐手游网发布此文仅为传递信息，不代表齐齐乐认同其观点或证实其描述；如有侵权请和齐齐乐联系删除。
欢迎大家下载，新游大作第一时间下载体验，更多好玩的游戏全在随时随地查看开服、开测动态!礼包福利大把大把滴，更能享受到首充送红包，续充优惠、每天登陆拿红包等福利。让你做手游的VIP巅峰玩家，心动的玩家要赶快拿起手机扫一扫下载吧!
期待你加入齐齐乐手游+APP群：
2017 年最后一个月已经过了大半，为了答谢这一年里付出了时间和金钱的玩家们，网易游戏在上海举办了一场「游戏热爱者盛典」。
在齐齐乐推荐已经进行到了第四十四期，那么在接下来的文章中就将给大家带来齐齐乐推荐第四十四期：女装鞋代码效率更高的全部内容，一起来看看吧。
2017春节长假后的第一个周四就迎来了各种降温，有些地方甚至下起了大雪。元宵节和情人节就快到了，单身狗们找到自己的另一半吗?或者可以定制这么一套衣服，绝对高能的电灯泡~
齐齐乐手游+APP具有更多好玩的游戏,随时查看游戏开测,开服动态,更多礼包福利、充值优惠等；欢迎大家前来咨询!
类型：角色扮演
专区：http://wy.77l.com/15833/