all articles

FrontEnd Interview Questions 3

2019-07-22 @sunderls

js interview frontend





开发web应用你最注意什么地方,什么是一个好的web应用

web app和native app在本质上并没有什么区别,我觉得包含三个方面

  1. 服务稳定
  2. 功能可靠
  3. 体验优良

以上也是我看重的优先级

1. 服务稳定

服务稳定是指这个web app需要不出现异常,比如无法访问,白屏等问题。主要通过以下来保障

注:一些是server的工作,我不是很熟悉

  1. load balancer 负载均衡等提供可靠的服务器
  2. CDN
  3. error handling 出错误时提供有效的提示
  4. error tracking 出措时进行有效的收集,包括前端和后端

2. 功能可靠

简单说就是符不符合要求,在实际开发中,我会按照如下优先级排序

  1. test, 复杂逻辑,重要逻辑,容易被改坏的逻辑,一定要test
  2. code review,成员相互实现严格review制度
  3. QA, thorough QA

3. 体验优良

在前述两项要求满足的情况下,如果我们有时间,会进行体验优化。

体验优化不等于性能优化,性能是体验的子集,但是优先度并没有那么高。

什么是好的体验,我觉得有两点:

  1. 符合预期, 这个很大程度上属于UI design的范畴,也就是用户使用起来是否符合直觉,简单易懂。比如一些可点击区域, 用户是否一目了然知道去点,是不是知道如何返回等。 
  2. 流畅, 就是使用起来是否流畅。这个可以用Google的RAIL模型来说明
    • R: response,用户行为产生后尽快给反馈
    • A: Animation, 切换交互动画,避免生硬,突然的切换
    • I: Idle, 充分利用空闲时间(这个我还没怎么利用过)
    • L: Load,提升first paint,first contentful pain, meaningful paint的速度

如何提升web app的体验。

根据上面的定义,我们在实际开发过程中,采用如下方法或者要求

  1. 符合预期: 开发是保持User视野,从user角度来开发,如果有违和感,随时反馈。开发人员也需要基本的UX sense
  2. 流畅:
    • R:
    • 在任何需要较长时间处理的action中,添加loading indicator。注意不是所有都需要。包括局部和全屏
    • 减少用户tap反应时间
    • A: 增加足够的Animation/Transition,比如
    • illustration 提升氛围
    • page transition 让用户感觉到native一般的流畅体验 
    • cloak 页面全部渲染之前避免让用户看到未完成状态,用opacity控制
    • enter leave transition 避免内容突现,比如popup alert等
    • swipe gesture 提供自然交互
    • I:
    • service worker 暂时还没有能利用到
    • L: 这个是比较复杂的地方了,相比之下更难,效果也更难衡量。优化L有很多地方,我们从一个请求发生到页面渲染的全过程来说明
      1. domain 解析
        • CDN
        • https 优化(我也只是听过,不太懂)
      1. server 返回html
        • 压缩(gzip, brottli)
        • Cache-Control
      1. html 解析
        • blocking css
        • non blocking scripts
      1. 请求静态资源
        • https
        • CDN/cache
        • 压缩
        • service worker
        • http2
        • server push
        • 减少bundle size (code splitting)
      1. 执行js
        • code level improvement
        • framework level improvement
        • js engine improvement
      1. 获取 API data
        • 压缩
        • cache
        • output data in html
      1. render
        • skeleton
        • indicator
        • progressive rendering
        • server side rendering


如果觉得有帮助到你的话,
欢迎支付宝donate