网站多杀流量需要换vps/seo优化方法

总结

1. 分类左侧的点击吸顶
2. 移动端的滑动事件 (重点)
3. 移动端点击事件延迟和解决 (重点)
4. 移动端的zepto框架
5. rem的概念和实现屏幕适配 (重点)
6. rem工具的使用实现jd项目

分类页面左侧的点击吸顶效果

1. 需求

2. 点击了左侧分类的菜单

3. 位移到当前点击的分类菜单 到顶部的位置

4. 位移为 （-当前菜单索引*菜单高度）

5. 位移的时候还需要添加过渡效果 慢慢的上去

6. 当菜单需要位移的距离超过了最小位移的距离 默认为最小位移距离

7. 最小位移距离 父元素高度-子元素高度

8. 思路

9. 给分类左侧添加点击事件

10. 先给所有菜单都添加一个索引的属性

11. 拿到当前点击菜单的索引 和 菜单高度

12. 计算当前点击菜单的位移距离 == - 索引 * 高度

13. 获取swiper-wrapper 给他设置这个位移距离 判断如果没有超过最大位移的距离就设置计算的距离 如果超过最大位移距离 设置为最大的位移距离

14. 设置过渡效果

15. 清除所有li的active位移 给当前点击的li添加active类名

移动端click事件的延迟问题

1. 在移动端手机里面 click事件是有一定延迟的 大概300ms
   延迟的原因是手机端为了兼容双击操作 如果300ms以内点击2次就认为是双击事件
   如果300ms以内只点击了一次就是单击操作
2. 解决方案 就是使用touch系列事件封装一个不延迟的click事件

使用fastclick包解决点击事件延迟问题

1. 引包引入fastclick
2. 给页面的body元素绑定fastclick 间接为所有元素绑定了
   // 绑定fastclick 给body绑定 因为元素都在body里面 间接为所有元素都绑定了fastclick
   window.addEventListener(‘load’, function() {
   new FastClick(document.body);
   }, false);
3. 后续就直接添加click就不会延迟了
   // 绑定了fastclick后 添加事件的方式还是和之前一样加click事件 但是这个click已经不会延迟了
   div.addEventListener(‘click’, function() {
   console.log(‘点击事件’);
   });

移动端一些触摸事件

1. touchstart 手指触摸的时候触发
2. touchmove 手指移动的时候触发
3. touchend 手指触摸离开的时候触发
4. touchcancel 触摸意外中断会触发 触摸的时候遇到了优先级更高的事件

解决延迟的原理使用移动端touch相关事件模拟一个click (也就tap)

1. 因为touch事件在手机里面是不会延迟
2. 只是触发了touchstart和touchend但是没有触发touchmove 就认为是一个单击操作(单击事件)
3. 如果触发touchmove 表示手指不仅单击还触发移动 不是一个单击操作
4. 还可以添加事件判断 记录滑动开始的时间和滑动结束的时间进行相减判断 手指按下的时间有没有超过300ms 不超过才是单击操作

移动端的js库 zepto

1. zepto: 是一个轻量级用来操作DOM元素的JS库 类似于jquery 所有方法用法都和jquery一样 只要会使用jquery就会使用zepto
2. 为什么要使用zepto: 轻量级 对移动端兼容性好一点
3. 但是要注意zepto的版本问题 有些老版本的zepto是分模块的 如果要使用tap之类的事件需要引入touch.js模块
4. 可以把所有模块打包到一个zepto.js里面(使用node编译)
5. 在移动端如果使用了zepto千万不能再使用jquery 都是$会冲突

移动端页面屏幕适配

1. 为什么要适配屏幕： 手机屏幕很小 页面都是全屏 不同的大小的屏幕 展示内容不一样
2. 希望页面在任何屏幕都保持一个等比例 希望每个屏幕看到的效果都是一样的
3. 手机小 页面文字 图片 所有内容 都比较小
4. 手机大 页面文字 图片 所有内容 都比较大

使用相对的单位来实现屏幕适配

1. em : element 相对自身元素的字体大小
   div自身字体大小16 1em=16px
   div自身字体大小20 1em=20px
2. rem : root element 相对根元素的字体大小
   html元素的字体大小16px 1rem = 16px
   html元素的字体大小30px 1rem = 30px
3. 相对单位的概念就这个单位的值不是固定的 而是参照字体大小而变化而变化

rem适配的原理

1. 页面中都把px写成rem相对单位 都相对根元素的字体大小
2. 不同屏幕改变根元素的字体大小的值
3. 使用媒体查询方式改变根元素大小值
   @media(width:750px){
   html{
   font-size:200px;
   }
   }
   @media(width:375px){
   html{
   font-size:100px;
   }
   }
4. 使用JS方式来改变rem的值
   // 假设一个设计稿的宽度 750
   var DesignWidth = 750;
   var DesignFontSize = 200;
   // 获取当前视口的宽度
   var nowWidth = document.documentElement.clientWidth;
   /750 / 200 == 375 / 100
   设计稿 / 设计稿根元素 == 当前屏幕 / 当前屏幕根元素
   375 / (750 / 200) == 100
   当屏幕 / (设计稿 / 设计稿的根元素)
   320 / (750 / 200) == 85.3333px /
   / 4 / 2 == 2 / x
   2 / ( 4 / 2 ) == 1/
   var nowFontSize = nowWidth / (DesignWidth / DesignFontSize);
   document.documentElement.style.fontSize = nowFontSize + ‘px’;

使用rem实现 jd页面的屏幕适配 （注意只有原生移动web才能使用rem 响应式开发不能使用）

1. 原理把页面的px转成rem单位
2. 根元素字体大小要随着屏幕变化而变化（等比例变化）
3. 根元素字体变化 页面使用rem单位的大小也会自动跟着变化

步骤

1. 把页面所有rem单位都写成px base.less里面 默认body的font-size是 1.4rem其实是14px
2. 打开本地的px转rem的工具tool.html
3. 把less代码复制到里面的左边 然后设置设计稿宽度 375 基础字体值100px 因为我们按照375写的代码就写375 在375屏幕下根元素是100px
4. 去掉自动生成rem的复选框
5. 点击转换生成对应的rem单位
6. 在页面中引入更改根元素字体大小的JS代码

今日总结

1. 移动端的触摸事件 touchstart touchmove touchend touchcancel

2. 移动点击事件的延迟： 原因是为了兼容双击 300ms以内点击2次就是双击操作1次就是单击

3. 解决延迟方案

   1. 封装一个tap事件 使用touchstart 和 touchmove touchend事件模拟 如果只触发了touchstart touchend 没有触发touchmove 认为是单击操作
   2. 使用zepto第三方的库里面的tap事件
   3. 使用fastclick包 专门解决问题

4. 移动端到底用什么点击事件： 一般全部使用tap事件

5. zepto库基本使用： 跟jquery一样 只有模块不一样 有些模块没在主包 单独引入一些其他模块

6. 移动端屏幕适配： 主流使用rem

7. rem适配本质：

   1. 把所有单位使用rem这种相对单位 (只有相对单位才能自适应)
   2. 当屏幕变化的时候 让屏幕的字体 随着屏幕变化而变化

8. rem根元素变化公式
   1rem = 根元素字体大小 默认是16px
   假设设计稿的大小750 设计稿 根元素大小是200px 375屏幕刚好是设计稿的一半 那么375根元素大小也是设计稿对应根元素大小一半就是100px
   设计稿宽度 / 设计稿根元素 == 当前屏幕宽度 / 当前屏幕根元素
   375 / (750 / 200) == 100
   当屏幕宽度 / (设计稿宽度 / 设计稿的根元素)
   320 / (750 / 200) == 85.3333px /
   / 4 / 2 == 2 / x
   2 / ( 4 / 2 ) == 1
   公式: 当前屏幕对应的字体大小 = 当屏幕宽度 / (设计稿宽度 / 设计稿的根元素)
   假如将来设计稿大小不一样 就按照公式套就行了

   淘宝的rem适配 当前屏幕的字体大小 = 标准屏幕字体大小100px/标准屏幕宽度375 * 当前屏幕的宽度

9. rem工具的使用

   1. 你要知道你当前设计稿宽度是多少比如750 (但是写代码如果缩小了一倍)工具设计稿和你写代码的真实宽度一样是375
   2. 基础字体值(当前写代码屏幕比如375对应的根元素大小100)
   3. 左边放写px代码 点击pxtorem转换成rem
   4. 在页面中引入能够动态改变根元素字体大小的JS(放在前面引入要优先让html有字体大小跟页面渲染有关系的优先执行)

找bug技巧

1. 多看bug(见多识广)

2. 会找bug

3. 页面结构bug 标签是否有结束 标签是否会多加结束 标签单词错误 标签嵌套错误

4. 页面样式bug

   1. 样式没出来
   2. 样式文件没引入
   3. 样式生效没有（审查元素找到要设置样式的元素） 如果看不到 选择器选错 类名或者id写错
   4. 样式有但没有效果
   5. 样式属性是否写 属性前有感叹号属性错了 或者值
   6. 样式属性是否被覆盖或者继承 样式属性有没有中划线
   7. 自己不知道怎么写样式 居中（内容居中text-align:center）块居中margin:0 auto;
   8. 引入bootstrap会出的样式问题
   9. 没有引入包
   10. 类名错误
   11. 发现覆盖不了bootstrap选择器优先级不够

5. 页面功能bug

6. 功能没生效

7. 文件没引入

8. 依赖的文件没引入（jquery zepto ）

9. 是否定义函数 有没有被调用

10. 代码是否报错 （单词错 赋值错 变量名。。）

11. 看代码是否执行 （断点调试看看代码是否执行（事件没被触发 事件名错误 元素没获取到））

12. 一些获取值的方式错误（兼容性问题 单词错误）

13. 逻辑错误 (代码执行顺序是否符合你写的顺序 )

14. 变量名重复 全局已经有变量 局部又用var

15. 环境系统bug

16. 善于总结

17. 出了bug记录下来 bug现象 bug原因 解决方案

移动web总结

1. 移动web开发的现状： 前端最热门的开发 市场大 需求大 工资高 代码少 兼容性少 容易学

2. 移动web的开发方式

   1. 响应式开发方式 一个页面适配多个终端
   2. 原生开发方式 单独PC和移动端都写一套代码

3. 响应式开发的原理： 媒体查询
   @media(width:值){
   //条件成立执行的代码
   }
   判断有3种
   width:值 等于这个值
   min-width:值 大于等于这个值 从小到大写 向下覆盖
   max-width:值 小于等于这个 从大到小写 向上覆盖

4. 响应式的开发框架
   bootstrap 最常用的
   MUI
   AmazeUI

5. bootstrap的使用

   1. 下载包
   2. 看懂文档 全局CSS样式（一些简单类名） 组件 （标签类名组合在一起的效果但是没有交互） 插件 （组件并带有交互）
   3. 找到需要的样式或者组件插件 复制结构
   4. 需要修改样式 审查元素找到样式对应的类名 覆盖 推荐外面使用id 方便覆盖

6. 容器 container 布局容器 居中 栅格系统 行和 列 row放到container里面 col放到行里面
   列有4个档次 xs sm md lg
   一行最多分为12列 col-xs-1 col-xs-12

7. 导航条 轮播图 折叠菜单collapse 标签页 表单表格 媒体对象 弹出框 提示工具 模态框 按钮 响应式工具

8. 字体图标上传svg图标下载代码引入css使用类名 原理是使用CSS3 web字体 引入对应字体文件 使用图标对应的编码

9. 移动端基本概念 手机分辨率通常比真实宽高大2倍 图片都是按照分辨率来设计 页面CSS宽高是按照真实的宽高设置 使用图片和背景图要缩小一半来写

10. 搭建jd首页布局 百分比布局 + flex布局

11. 顶部渐变效果 获取滚动条高度

12. 倒计时JS 获取时间计算 分别计算时分秒十位个位来显示倒计时

13. 轮播图使用swiper轮播图

14. 背景图背景图定位原点和背景图裁切

15. 分类左右2侧 flex布局

16. 分类左右2侧滑动使用swiper滑动

17. swiper插件的使用

18. 引入包 css

19. 引入js

20. 写页面结构

<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">内容或者图片</div></div>
</div>
4. 如果滚动还需要设置样式.swiper-container{height:100%;} body,html父元素等都要设置100%高度.swiper-slide 高度自动
5. 对轮播图插件去初始化// 3. 初始化swiper的滑动var swiper = new Swiper('.swiper-container', {// 控制轮播图滚动的方向 horizontal水平 vertical 垂直direction: 'vertical',//可以支持多个swiper-slide 可以有多个轮播图slidesPerView: 'auto',//支持弹簧freeMode: true,//控制轮播图动画切换的速度  轮播图动画的时间speed: 300,//添加一个小手grabCursor: true,// 添加循环 无缝轮播图 loop: true,//添加自动轮播图 delay自动轮播的间隔时间autoplay: {delay: 1000,//到最后一张停止自动轮播图 但是loop了后就停不下来了stopOnLastSlide: true,// 是否要当触摸的时候禁止自动轮播图  ture就禁止 false不禁止disableOnInteraction: false,},// 给图片直接添加间距// spaceBetween : 100,// 如果需要分页器  小圆点pagination: {el: '.swiper-pagination',},// 如果需要前进后退按钮  左右箭头navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},//支持鼠标滚轮  只有PC能用mousewheel: true,});

18. 移动端点击事件 有300ms延迟 可以使用touch事件模拟click 也可以使用第三方包fastclick解决
19. 常见移动端滑动事件 touchstart touchmove touchend e事件源对象 e.touches所有手指
    e.touches[0].clientX 手指在页面上水平位置 e.touches[0].clientY 垂直位置
20. 移动端zepto库 类似jquery 有jquery就不要使用zepto 不要同时引入2个包 $ 会冲突
21. rem: root element根元素 参照根元素html元素的字体大小 1html的字体大小16px 1rem=16px
22. rem的好处 相对html字体大小html字体大小不会随意变化 统一所有使用rem的大小 实现宽度和高度的和内容都自适应
23. 使用rem实现网页自适应的原理是通过媒体查询 或者JS来不断改变html的字体大小html字体大小改变 那么使用rem单位大小都会被改变
24. rem工具 http://alurk.com/ 使用
    1. 打开工具 输入设计稿宽度(写代码屏幕的宽度375)
       输入基础字体值(写代码屏幕的宽度375根元素的字体大小100)
    2. 去掉后面的生成媒体查询等勾(因为我们已经使用JS改变根元素了)
    3. 点击转换把代码粘贴回来

找网站和扒网站

1. bootstrap官网的案例 http://expo.bootcss.com/
2. 妹子UI的官网的案例 http://amazeui.org/showcase/
3. 无忧网络官网的案例 http://www.cnitc.net
4. 招聘网站上的一些项目
5. 扒网站
   1. 打开 TeleportUltraPortable.exe 程序
   2. 点击左上角的file > new project wizard
   3. 点击第二个单选按钮 Duplicate
   4. 点击下下一步 输入要扒的网址 up里面是扒几层
   5. 一路下一步 保存到一个目录
   6. 点击中间上方的蓝色开始箭头开始扒
   7. 扒完了在目录旁边出一个文件夹 就是网站的文件夹

前端学习路线

1. https://zwxs.github.io/FrontEndMaterial/synthesis.html