search

Home  >  Q&A  >  body text

angular.js - vue/react 渲染内容抖动

vue/react/angular框架等 渲染数据时,页面产生抖动,给用户一种不太友好的感觉,怎样消除这种抖动呢?

滿天的星座滿天的星座2744 days ago675

reply all(3)I'll reply

  • 巴扎黑

    巴扎黑2017-05-15 17:08:43

    The first method is to place a loading prompt in the rendered area in advance, hide/delete the loading after rendering, and display normal content.

    The second method is to give the data an initial value, which can support the page style, and then replace it after obtaining it.

    The transformation of the second method starts from CSS, so that the unrendered part can be displayed and the structure is consistent with that after rendering. After rendering is completed, only the corresponding data is changed, and the page structure is not changed.

    reply
    0
  • 迷茫

    迷茫2017-05-15 17:08:43

    Using ng-cloakv-cloak, I have never been exposed to React so I don’t know.

    reply
    0
  • 漂亮男人

    漂亮男人2017-05-15 17:08:43

    In addition to the solution in the first answer, you can also consider isomorphism. Reactjs provides such a solution. The output of nodejs is the formed page. There is no need for the client to rerender once, and there is no problem of flashing.

    reply
    0
  • Cancelreply