美文网首页
搜索结果页优化

搜索结果页优化

作者: CristicMei | 来源:发表于2017-05-21 16:00 被阅读0次

业务场景

在App里面,输入一个关键词,得到一个搜索结果,这是一个很常见的一个功能场景。对于前端而言,有很多事情可以尝试和实践。

优化方案

1. 首屏服务端渲染

   第一页可以使用服务端渲染,减少页面的请求量,可快速渲染
方案一:node+ejs
  适用的场景:页面的复杂度低,不存在大量的组件或者模块间信息的同步。
方案二:node+vue+vuex

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

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

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

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

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

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

服务端推送相关的信息包

后记
 尝试使用http2.0

相关文章

  • 搜索结果页优化

    搜索就像是用户和系统之间的对话:用户键入他们的信息需求作为问询关键词,系统则展现出它的回答作为一组结果。搜索结果页...

  • 搜索结果页优化

    业务场景 优化方案 1. 首屏服务端渲染 方案一:node+ejs 方案二:node+vue+vuex 适用的场景...

  • PPC和SEO的不同差异

    搜索引擎优化(SEO)就是优化网站和网页以在搜索引擎中进行搜索的做法,从而在搜索引擎搜索结果页上显示更多的可见位置...

  • 图像搜索app结果页优化记录

    前言 这个产品的入口在:百度App-相机icon 这个产品的功能是:图像搜索,用一张图片做为“关键字(query)...

  • vue页面问题分享

    项目介绍 这是一个微信端的搜索页面,主要包括三部分:搜索tag页,搜索结果页、搜素筛选页。 搜索结果页有几种交互:...

  • ES搜索结果优化

    默认匹配查询 按照ES的默认分词计算匹配度的结果 权重查询 提升某些字段的权重,但是这样会导致完全匹配的被排在后面...

  • 小程序入口分析

    1001 发现栏小程序主入口 1005 顶部搜索框的搜索结果页 1006 发现栏小程序主入口搜索框的搜索结果页 1...

  • 2019-01-29推广方案步骤+营销漏斗+算法+分配模式出价

    推广方案 产品定位 用户分析 搭建账户 推广测试 后期维护,不断优化 营销漏斗 展现 即推广信息被展现在搜索结果页...

  • 自用几个浏览器脚本推荐

    自用浏览器脚本 积累了一段时间的自用脚本, 记录一下. 1. AC-baidu 各大搜索结果页优化, 可将结果多栏...

  • 提升SEO效果的方向有哪些?

    SEO又叫搜索引擎优化,是一种提高网页在搜索引擎排名的技术,在搜索结果里,第一页往往会占据至少50%的流量,而排名...

网友评论

      本文标题:搜索结果页优化

      本文链接:https://www.haomeiwen.com/subject/uzzmxxtx.html