首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

京东 PC 首页 2019 改版前端总结

但秉承着不折腾不凹凸的理念,新版首页不负使命的,进行了基于 TS 的重构。 做 TS 重构并不难,把 js 后缀改成 ts 就好了。完。 当然是开玩笑的啦!显然,这样的 TS 是没有意义的。...项目架构优化 旧版页面的性能优化方案中,包含了部分 js 片段直出,这些代码是项目所依赖的基函数,需要在核心 js 代码执行之前启动。...以新版首页为例,我们通过使用 Nightwatch.js,为新版首页创建了一个自动化测试脚本,对新版的首页的73项用例进行自动化测试。...参考京东购物小程序目前的监控机制,新版首页针对代码报错、接口可用性增加了上报监控。 代码报错监控:BadJS 通过 BadJS 框架捕获页面报错,并分析处理报错信息上报至京东 BadJS 服务。...跳转链接、图片名称; 弹出浮层无法访问; 懒加载内容直接跳过; 为了造福国内一百一十人中的一个视障人士(数据来自这里 https://www.tisi.org/3524_46),本次改版,我们决定在 PC 首页开启京东商城桌面端

67110
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML+CSS+PS 编写京东商城首页

    需求 前面铺垫写了不少HTML、CSS、Photoshop的文章,那么本篇章就是要结合起来挑战写写京东的商城首页了。 ? 好了,本次的目标就是实现这样的大概页面,让我们一步步来开始编写。...文档结构 首页创建好本次编写的文件结构,如下: ? 好了,文件夹目录都准备好了,那么先按照从上到下,从左到右的原则一步步开始编写吧。 编写头部横栏部分 ?...DOCTYPE html> 京东商城 <link rel...编写京东图标 ? 准备好京东图标 ? 编写HTML以及CSS 可以从图标显示来看,图标可以使用绝对定位来解决。 首先写一个div来显示看看,如下: ? 浏览器显示如下: ?...幻灯片的话单纯HTML + CSS 只能展示出一张图片的,需要后面加上js代码,写动画效果才是完整的。 编写 HTML + CSS 做幻灯片这里要讲一下技巧,先看看效果。 ?

    3.5K50

    京东微信购物首页性能优化实践

    京东微信购物首页(以下简称微信首页)曾经作为微信购物一级入口(目前替换为京喜小程序)一直对性能有着极高的要求,本文将介绍微信首页的一些优化经验。...京东监控系统简介 京东前端监控涉及的系统主要有两个:测速系统和智能监控平台。...我们在微信首页 CSS 加载完成、HTML 加载完成、JS 加载完成、首屏图片加载完成、第一张图片加载完成等关键节点插入测速点,并根据业务特点对关键内容上报智能监控平台,如查询首屏 DOM 节点是否存在上报首屏可用率...2.2、减少关键路径长度,减少请求次数 关键渲染路径长度是指获取关键资源网络请求次数 对于这块的优化,我们采取了一下措施: 首屏样式和 JS 内联 合并 JS 文件到一个 JS 首屏 ICON 图片内联处理...1、进一步深化关键渲染路径的优化 我们站在用户的角度,结合京东微信购物首页流量转化情况,分析认为首页除了首屏广告 banner,搜索框和底部导航作为用户使用频率最高的几个模块应该提前渲染。

    1.2K20

    京东微信购物首页性能优化实践

    京东微信购物首页(以下简称微信首页)曾经作为微信购物一级入口(目前替换为京喜小程序)一直对性能有着极高的要求,本文将介绍微信首页的一些优化经验。...京东监控系统简介 京东前端监控涉及的系统主要有两个:测速系统和智能监控平台。...我们在微信首页 CSS 加载完成、HTML 加载完成、JS 加载完成、首屏图片加载完成、第一张图片加载完成等关键节点插入测速点,并根据业务特点对关键内容上报智能监控平台,如查询首屏 DOM 节点是否存在上报首屏可用率...2.2、减少关键路径长度,减少请求次数 关键渲染路径长度是指获取关键资源网络请求次数 对于这块的优化,我们采取了一下措施: 首屏样式和 JS 内联 合并 JS 文件到一个 JS 首屏 ICON 图片内联处理...1、进一步深化关键渲染路径的优化 我们站在用户的角度,结合京东微信购物首页流量转化情况,分析认为首页除了首屏广告 banner,搜索框和底部导航作为用户使用频率最高的几个模块应该提前渲染。

    1.6K20

    你看到的京东首页是如何出炉的?

    一.京东面临哪些“面子问题”? 京东首页改版之前,通过大量的用户调查与反馈,对目前京东所呈现的调性及问题进行了分析。通过调查发现,在消费者的感知层面上,3C卖场依旧是对京东的固有观念。...调研是改版的第一步,京东此次调研可以说是从里到外,不仅要对用户的需求进行分析,同时还对内部的采销部门收集反馈意见。从而使首页改版,成为整个生态系统优化的一个入口。 ?...竞争机制:首页版块效能客观评估,引入准入和退出机制。 特别要指出的是,竞争机制的引入,由于京东内部对首页位置的诉求很高,如何更为合理地进行更替,需要有一个良好的替换机制。...五.对症下药效果显著 新版首页有“面儿” ? ? 经过60多天的灰度测试,京东首页的改版还是效果显著的。日均点击率提升了30%,各项指标也均有所提升。 ?...当然可以,在未来京东会将自己的DNN(深度学习)技术引入到推荐排序当中。要知道这项技术是被用于京东智能机器人上的,相信有这项技术的加入,在未来,京东首页上的猜你喜欢能够给你带来惊喜。

    1K30

    【小程序项目开发-- 京东商城】uni-app之首页商品楼层

    该文章收录专栏 ✨-- 2022微信小程序京东商城实战 --✨ 专栏内容 ✨-- 京东商城uni-app项目搭建 --✨ ✨-- 京东商城uni-app 配置tabBar & 窗口样式 -...-✨ ✨-- 京东商城uni-app开发之分包配置 --✨ ✨-- 京东商城uni-app开发之轮播图 --✨ ✨-- 京东商城uni-app之分类导航区域 --✨ ✨-- 京东商城uni-app...首页楼层商品 --✨ ✨-- 京东商城uni-app 商品分类页面(上) --✨ ✨-- 京东商城uni-app 商品分类页面(下) --✨ ✨-- 京东商城uni-app之自定义搜索组件(上)...--✨ ✨-- 京东商城uni-app之自定义搜索组件(中) --✨ 文章目录 一、效果图: 二、数据获取: 三、UI 界面渲染 四、跳转到商品页 4.1、处理接口URL地址 五、配置页面组件...注释:添加所有文件到暂存区 git commit -m “完成了首页功能的开发” 注释:提交到本地仓库 git push -u origin home 注释: -u是配置 upstream,提交本地仓库到远程仓库的分支

    75610

    Android开发笔记(一百六十四)仿京东首页的下拉刷新

    上一篇文章介绍了高仿京东的沉浸式状态栏,可是跟京东首页的头部轮播图相比,依然有三处缺憾: 1、京东的头部Banner上方,除了有悬浮着的状态栏,状态栏下面还有一行悬浮工具栏...因此若想呈现完全仿照京东的下拉刷新特效,只能由开发者编写一个自定义的布局控件了。 自定义的下拉刷新布局,首先要能够区分是页面的正常下滚,还是拉伸头部要求刷新。...鉴于App首页基本采用滚动视图ScrollView实现页面滚动功能,故而该问题就变成了如何监听该视图滚到顶部或者滚到底部。...一方面是整个页面已经拉到顶了,造成ScrollView已经无可再拉;另一方面,用户在京东首页看到的下拉头部,其实并不属于ScrollView管辖,即使ScrollView想拉这个头部兄弟一把,也只能有心无力...现在有了新定义的下拉上层布局,搭配自定义的滚动视图,就能很方便地实现高仿京东首页的下拉刷新效果了。

    2.9K40
    领券