浏览器原理分析以及项目简介

浏览器的原理

浏览器工作过程大概分为:加载、解析、渲染

项目介绍:

惠家友是一个p2c类型的电商网站

项目主要模块有:

首页主要是商品分类展示,商品快速搜索,商品详情页展示,购物车结算下单,以及个人信息设置。

前端js是基于jquery开发,后端是使用asp.net开发(也可以说php,他们估计也不会看)
 
考虑到性能,商品展示使用了图片懒加载

绑定滚动条监听事件,判断img元素在距离显示到页面中100px时加载实际内容

为什么要使用懒加载?

比如一个页面中有很多图片，如淘宝、京东首页等等,如果一上来就发送这么多请求，页面加载就会很漫长，懒加载不仅可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好。

图片懒加载实现原理:

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，一旦通过js设置了图片路径，浏览器才会送请求。有点按需分配的意思，你不想看，就不给你看，你想看了就给你看~
2、如何获取正真的路径，这个简单，现在正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；

3.绑定滚动条监听事件.判断滚动到一定位置将data-url的数据设置到img的src属性上面这样就可以了


首页商品类别菜单:商品列表菜单数据有后台返回,展示到页面

首页轮播图切换,使用插件开发:superSlide.js这个插件(或者找用过的一个熟悉的轮播插件swiper比较常用)

首页限时抢购功能:

前端使用了定时器倒计时,如果倒计时时间结束，那么需要重新请求服务端数据展示最新的抢购商品。

首页用户商品推荐功能:

根据用户搜索习惯向用户推荐喜欢的商品,前端负责展示后端返回的推荐商品

首页楼层信息: 这一块简单主要是让用户可以快速定位到有意向的商品类别,监听滚动条事件根据滚动条位置，判断当前位置是哪一层,当前楼层状态灯高亮显示。

首页搜索功能：用户搜索后,用户返回商品信息后,前端根据商品类别使用js进行页面跳转，跳转到商品列表展示页面。

在商品列表页面加载时:

 使用ajax异步请求后端产品列表,将不同的商品关键字传给后端返回不同的商品列表信息,前端根据服务端返回的信息，将返回的json数据解析并展示到页面上。
 
 用户可以点击选择不同的条件,提交到服务器查询,对商品列表进行排序展示(比如按价位,人气,销量等等)对商品进行细分类，根据返回数据使用js更新页面数据。
 
 用户在商品详情页选择商品规格后点击加入购物车,提交数据到服务器,购物车点击结算时,
 前端判断用户是否已经登录,如果用户未登录立即跳转至登录界面,并进行登录验证
 
 商品下单页面:  
 
 用户可以使用优惠券以及优惠码兑换优惠券来抵消价格,输入优惠码点击兑换进行后台查询,如果优惠码未过期,按优惠券价格进行重新计算商品总金额。 
 点击添加收货地址时,页面弹出模态框填写收货地址信息保存至后台。
 
 选择支付方式,提交商品订单信息后台,后台完成下单功能,返回下单状态信息给前端。如果下单成功,提示用户成功,下单失败弹出信息,展示失败原因给用户。
 
 个人中心页面比较简单:

 主要是用户个人信息的展示修改,用户可以编辑修改自己的头像 上传至服务器。  
 使用js判断如果用户没有登录,个人信息模块隐藏。
 
 
 所有功能模块完成后,实现了页面埋点功能(如果能讲明白,肯定会加分)。
 
 页面埋点说白了就是用来采集用户行为的、
 
 具体实现:
 
 做数据埋点的方法有很多
 
 第一类是预先设定好想要获取的目标数据，让程序员撰写代码把“采集器”埋到相应的页面上，用于追踪和记录的用户的行为，并把实时数据传送到后台数据库或者客户端。
 
 第二类方法是利用第三方统计工具插件（友盟、talking data、百度魔方等）获得想要的用户行为数据，但是这样的话你的数据就可能会被第三方掌握了。
 
 这个项目是采用了第一种方法,我们自己简单的封装了采集器,并埋点到了用户首页。
 
  
 我们首先按功能将页面分好模块,并且分配模块号,注册一个模块列表信息(包含模块编号,模块功能名称,埋点id)  
 遍历页面所有的需要埋点的标签进行分类,并绑定click事件,在页面加载后的一段时间内当用户触发事件,就将该操作保存起来,最后ajax提交到后台服务器进行分析. 
  

转载于:https://my.oschina.net/u/2958786/blog/1541314