HTML5技术

前后端渲染 - 空一座旧城,守一个旧人(2)

字号+ 作者:H5之家 来源:H5之家 2017-12-11 10:04 我要评论( )

有什么感受,非常自然,打开渲染并没有白屏,有两段加载动画,第一段像是加载资源,第二段是一个加载占位器,过去我们会用 loading 效果,但过渡性不好。近年流行 Skeleton Screen 效果。其实就是在白屏无法避免的

有什么感受,非常自然,打开渲染并没有白屏,有两段加载动画,第一段像是加载资源,第二段是一个加载占位器,过去我们会用 loading 效果,但过渡性不好。近年流行 Skeleton Screen 效果。其实就是在白屏无法避免的时候,为了解决等待加载过程中白屏或者界面闪烁造成的割裂感带来的解决方案。

  • 部分同构
    部分同构可以降低成功同时利用同构的优点,如把核心的部分如菜单通过同构的方式优先渲染出来。我们现在的做法就是使用同构把菜单和页面骨架渲染出来。给用户提示信息,减少无端的等待时间。
  • 相信有了以上三步之后,首屏问题已经能有很大改观。相对来说体验提升和同构不分伯仲,而且相对来说对原来架构破坏性小,入侵性小。是我比较推崇的方案。

    总结

    我们赞成客户端渲染是未来的主要方向,服务端则会专注于在数据和业务处理上的优势。但由于日趋复杂的软硬件环境和用户体验更高的追求,也不能只拘泥于完全的客户端渲染。同构渲染看似美好,但以目前的发展程度来看,在大型项目中还不具有足够的应用价值,但不妨碍部分使用来优化首屏性能。做同构之前 ,一定要考虑到浏览器和服务器的环境差异,站在更高层面考虑。

    posted on

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • ES6模块化 - 空一座旧城,守一个旧人

      ES6模块化 - 空一座旧城,守一个旧人

      2017-12-11 08:02

    • 移动端经常出现的兼容问题 - 空一座旧城,守一个旧人

      移动端经常出现的兼容问题 - 空一座旧城,守一个旧人

      2017-12-09 08:01

    • 关于跨域请求 - 空一座旧城,守一个旧人

      关于跨域请求 - 空一座旧城,守一个旧人

      2017-12-09 08:01

    • 2.sass变量、嵌套、混合(mixin)、继承拓展、@import、comment - 空一座旧城,守一个旧人

      2.sass变量、嵌套、混合(mixin)、继承拓展、@import、comment - 空

      2017-12-08 16:01

    网友点评