FCC成都社区问答录 2018

转自 FCC 公众号

FCC成都问答录 一月

QA编号 00

**Q:**传统的服务端渲染静态HTML返回,与现在流行的前后端分离相比,谁的效率更高?

提问者:AkagiInc

**A1:**传统渲染包含了查询数据等行为,查询数据可能要访问多个服务器,还要进行计算展示等;而前后端分离,则先传固定的HTML。

解答者:A鸿

**A2:**在许多项目中,需要注重首屏体验;首屏之后,无论是从体验还是技术指标上,接口的优势都非常大。

解答者:贫僧小蓝(G7)

贫僧小蓝(G7)对此问题进行了更深入的补充解答,请点击查看:《详解篇一:浅析前后端分离的效率优势

QA编号 01

**Q:**在阿里云上装了个docker gitlab,然后服务器挂了,如何解决?

提问者:钢铁侠sick

**A:**gitlab需要的东西很多,对硬件的性能要求极高,2G可以跑,4G是建议配置。如果不用ci,建议只做版本控制gitea,在树莓派上可以跑,适合小组内部使用。如果硬件不强大,也可以使用 https://gitea.io/zh-CN/ ,有docker版本,后期再考虑ci。轻量级的git也有很多其他的,比如gogs。

解答者:Wallen Han-318

QA编号 02

**Q:**html5内,video标签中的视频文件,如何防止被下载或盗链?

提问者:sunshine

**A1:**通过origin进行处理。

解答者:蓝浩

**A2:**可以参考防盗链机制。

解答者:Shaoyao·琚

贫僧小蓝(G7)对此问题进行了更深入的补充解答,请点击查看:《详解篇二:如何防止 video 标签内容被下载或盗链

QA编号 03

**Q:**图片加载太慢,是否可以打散再组合,或者进行压缩?

提问者:glowd

**A1:**方法有很多:CDN、异步加载、webp等等。

解答者:何青松

**A2:**压缩、CDN、缓存、lazy懒加载,也可以先加载模糊图,ready之后再加载高清图。

解答者:蓝浩

**A3:**如果对象是jpg图片,可以转成“渐进式加载”编码,浏览器会自动由模糊到清晰。

解答者:水歌

姜姜姜@FCC成都 对此问题进行了整理和完善,参见本次推送的第五条推文:《详解篇三:多维度考虑图片加载优化的问题

QA编号 04

**Q:**便一阶段eval的所谓不优化,是指eval的内容不优化,还是指整个编译都不优化?如果只是eval的内容不优化,那么在eval的内容不影响其他代码的情况下,是否可以忽略性能问题?

提问者:ShoneSingLone

**A:**eval 执行的是代码字符串,不能在 JIT(即时编译)编译期优化自身,其所在函数的其它代码也无法结合 eval 内代码一起优化;而且 eval 创建了一个小的 JS 环境,类似子 shell,相比 new Function() 只创建一个函数对象会有更多资源消耗。

解答者:水歌

FCC成都社区问答录:二月篇

QA编号 00

Q: 如何解决在手机上上传图片时,图片变形的问题?

提问者:石中玉

A1:

有几种方案:

  1. 固定宽度,高度自适应。
  2. 使用固定宽高,然后图片在中间,使用背景图填充。
  3. 使用背景图展示,使用背景图的一些属性控制图片展示,如居中展示,
  4. 在上传的时候就进行裁剪。有平台支持的,如七牛云。

这些都有优缺点,最终根据需求和实现来选择适合的方式。

解答者:鹏程

A2: 可以尝试设置成响应式,用百分比来控制图片。

解答者:蒲公英的告白气球

Helen 对此问题进行了补充回答,点击查看:详解篇一:如何解决图片在手机上变形的问题?

QA编号 01

Q: 有没有vue完美迁移到react的方案?

提问者:那我很棒棒哦

A:

这一问题在群内引发众多小伙伴的讨论,但所涉及的内容细节较为复杂,又由于交流形式的限制,所以暂时没有形成一个定论。Helen 进行了初步地整理,请点击查看:详解篇二:浅析vue迁移到react

这个问题涉及到的细节很多,仅仅靠一片文章,是无法阐述清楚的。

我们将它单独提出来探讨,是看到大家都很关注这一热点问题,也都有各自的想法和实践。

欢迎大家批评指正,对答案进行完善补充。

解答者:卢林 等小伙伴

QA编号 02

Q: 下图中的自定义图表,用什么方法绘制更合理一些?

提问者:吕治易

A1: 请Ui的设计稿直接导出svg,然后使用animei.js做动画。动态数据可以直接填入svg,上图中应该是改变圆的store-dashedArray相关属性。

解答者:那我很棒棒哦

A2: canvas可以实现,svg最好。svg最适合做线条动画,可以直接用ai导出来,再行处理。动态数据部分,可以自己写一个canvas的进度条方法。

解答者:YuTao

A3: canvas和svg都可以,canvas需要自己绘制,svg需要设计师绘制好,具体的业务逻辑应当根据团队或个人的实际情况结合。如果要直接导出path,可以到codepen上查找类似的demo。svgo和mo.js都可以直接绘制svg。

解答者:w3cplus大漠

QA编号 03

Q: emoji在安卓和苹果是否通用?

提问者:钟明珂

A: 在一般情况下,是通用的。

详细解答,请点击:详解篇三:emoji在安卓和苹果是否通用?