资讯专栏INFORMATION COLUMN

搜索结果页优化

Shimmer / 2067人阅读

摘要:业务场景在里面,输入一个关键词,得到一个搜索结果,这是一个很常见的一个功能场景。滑动页面的时候,就不会存在卡顿的情况方案二让客户端提前预取数据,预取的时机可以根据自己的业务场景判断共享数据业务场景搜索结果页面,点击每一个,可以进入详情页面。

业务场景
在App里面,输入一个关键词,得到一个搜索结果,这是一个很常见的一个功能场景。对于前端而言,有很多事情可以尝试和实践。
优化方案 1. 首屏服务端渲染
   第一页可以使用服务端渲染,减少页面的请求量,可快速渲染
方案一:node+ejs
  适用的场景:页面的复杂度低,不存在大量的组件或者模块间信息的同步。
方案二:node+vue+vuex

适用的场景:页面的复杂程度高,含有大量的组件和组件间的信息流通或者同步。使用node+vue+vuex,方便团队成员间的协作开发和后期维护。

2. 预先加载数据:接下来几屏数据
    业务场景:搜索出来的结果,滑动时,显示更多的结果

方案一:请求第一屏幕的数据时,同时也会预请求第二屏幕的据,以此类推。滑动页面的时候,就不会存在卡顿的情况
方案二:让客户端提前预取数据,预取的时机可以根据自己的业务场景判断

3. 共享数据:
    业务场景:搜索结果页面,点击每一个Item,可以进入详情页面。

方案:一级页面和二级页面可以进,行共享数据

4. 客户端提前预取通用库
      前端一般都会使用一些通用库,一般情况都不会改变,比如说zepto.js,可以让客户端提前预取缓存
5. 服务端推送包

服务端推送相关的信息包

后记
 尝试使用http2.0

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50788.html

相关文章

  • UCloud控制台产品升级!

    摘要:主机接入新表格组件支持拖拽调整表头列宽背景现状客户对于主机名称的命名规则厂商地域可用区产品业务服务内网,名称较长,无法在列表页直观展示,只能手动上去显示全部。如有关于控制台产品的前端及视觉优化建议也欢迎和我们部门同学反馈。2月份根据用户反馈、用户调研以及自身使用产品体验,将主机列为重点体验优化目标产品,主要针对如下业务场景进行了优化:主机创建页可用区售罄地域切换优化主机列表页主机接入新表格组...

    ernest.wang 评论0 收藏0
  • 搜索结果优化

    摘要:业务场景在里面,输入一个关键词,得到一个搜索结果,这是一个很常见的一个功能场景。滑动页面的时候,就不会存在卡顿的情况方案二让客户端提前预取数据,预取的时机可以根据自己的业务场景判断共享数据业务场景搜索结果页面,点击每一个,可以进入详情页面。 业务场景 在App里面,输入一个关键词,得到一个搜索结果,这是一个很常见的一个功能场景。对于前端而言,有很多事情可以尝试和实践。 优化方案 1. ...

    econi 评论0 收藏0
  • 搜索结果优化

    摘要:业务场景在里面,输入一个关键词,得到一个搜索结果,这是一个很常见的一个功能场景。滑动页面的时候,就不会存在卡顿的情况方案二让客户端提前预取数据,预取的时机可以根据自己的业务场景判断共享数据业务场景搜索结果页面,点击每一个,可以进入详情页面。 业务场景 在App里面,输入一个关键词,得到一个搜索结果,这是一个很常见的一个功能场景。对于前端而言,有很多事情可以尝试和实践。 优化方案 1. ...

    MiracleWong 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<