前端学习笔记（问题总结）(1)

1.css元素居中方式
(1)水平居中，margin:0 auto.
(2)垂直居中 margin:auto
2.px.em,rem,%
px:指像素
em:继承父级元素字体大小
rem:是根据html调整字体大小
%指百分比
3.display的值和作用
1.none:元素不会显示，而且现实空间不会保留
2.inline:内联元素，无法设置宽高
3.block:块级元素，独占一行
4.inline-block:行内块元素，可以设置宽高也不用独占一行
4.路由跳转的方式
1.router-link带参数
2.router-link不带参数
3.params传参
4.query传参
5.vue生命周期的理解
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
6.vue数据双向绑定的原理，用了什么设计模式(web高级)
实现mvvm主要包含两个方面，数据变化更新视图，视图变化更新数据： v-model
view<–>data相互更新
7.数组去重
利用key值，先找到每一个数字出现的次数，然后将key值加入到数组
8.统计字符串中出现最多的字符
字符串中从一个值与下一个值进行比较，如果第二个值比较大，再与第二个字符比较，如果第二个值比较小，将第一个值改成第二个值再与下一个字符比较
9.js垃圾回收机制
工作原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。
10.原型、原型链
js中每一个函数中都有一个prototype属性，这个属性指向这个函数的原型，每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。
原型链：原型对象等于另一个类型的实例，原型对象包含一个指向另一个原型的指针，另一个原型又是另一个原型的指针，层层递进
11.作用域链
在某个作用域内使用变量的时候，首先会在该作用域内寻找该变量，如果没有
会一直向上寻找。这样的一种链式关系就是作用域链。其实指的就是变量的就近原则。
12.购物车的实现过程（包括怎么布局，可以用vue、react、jq等）
购物清单：全选、商品、数量、单价、金额、操作
删除所选商品、继续购物、去结算、绑定跟单员

Js实现淘宝购物车类似功能：
主要有添加商品
增加和减少商品数量
根据增加、减少或选择的商品获取金额
实现商品价格的计算

13.购物车详情页优化（用户商品加入太多导致页面卡顿）（懒加载、分页）
初始第一屏图片>获取滚动条的滚动距离和目录对象离 document 文档顶部的距离>若前者大于后者，滚动时执行加载图片的方法>按需加载图片

13.购物车详情页优化（用户商品加入太多导致页面卡顿）（懒加载、分页）
window.onload = function () {

var lazyImg = document.getElementsByTagName(“img”);

var lazyImgLen = lazyImg.length;

var lazyImgArray = [];

var winowBroswerHeight = document.documentElement.clientHeight;

// 初始第一屏图片

loadImg();

// 滚动时执行加载图片的方法

window.onscroll = loadImg;

// 按需加载图片

function loadImg() {

for (var i = 0; i < lazyImgLen; i++) {

var getTD = getTopDistance(lazyImg[i]);

var getST = getScrollTop();

if (!lazyImg[i].loaded && getST < getTD && getTD < (getST + winowBroswerHeight)) {

lazyImg[i].src = lazyImg[i].getAttribute("_src");

lazyImg[i].classList.add(“animated”, “fadeIn”);

lazyImg[i].loaded = true; // 标记为已加载

}

}

}

// 获取目录对象离 document 文档顶部的距离

function getTopDistance(obj) {

var TopDistance = 0;

while (obj) {

TopDistance += obj.offsetTop;

obj = obj.offsetParent;

}

return TopDistance;

}

// 获取滚动条的滚动距离

function getScrollTop() {

return document.documentElement.scrollTop || document.body.scrollTop;

}

}
14.页面渲染过程
渲染的流程大体是这样的：（解析html以构建dom树->解析CSS，得到CSSOM树->构建render树->布局render树->绘制render树）

详细的过程：

1：浏览器会将HTML解析成一个DOM树，DOM树的构建过程是一个深度遍历过程， 当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点，

2：将CSS解析成CSS规则树；

3：根据DOM树和CSS来构造render树，渲染树不等于DOM树，像header和display：none； 这种没有具体内容的东西就不在渲染树中；

4：根据render树，浏览器可以计算出网页中有哪些节点，各节点的CSS以及从属关系， 然后可以计算出每个节点在屏幕中的位置；

5：遍历render树进行绘制页面中的各元素。

页面发生重排（回流）的话，会重新加载DOM树，影响页面加载速度。会导致页面重排的原因如下：

1：页面初始化；

2：操作DOM时；

3：某些元素的尺寸变了；

4：CSS的属性发生改变。
15.闭包
函数和对其周围状态的引用捆绑在一起构成闭包。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。
闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于面向对象编程。因此，通常你使用只有一个方法的对象的地方，都可以使用闭包。
16.http协议
http（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议，常基于TCP的连接方式
http请求由三部分组成，分别是：请求行、消息报头、请求正文
HTTP消息报头包括普通报头、请求报头、响应报头、实体报头。
200 OK //客户端请求成功

400 Bad Request //客户端请求有语法错误，不能被服务器所理解

401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用

403 Forbidden //服务器收到请求，但是拒绝提供服务

404 Not Found //请求资源不存在，eg：输入了错误的URL

500 Internal Server Error //服务器发生不可预期的错误

503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常
17.http中的方法，除了get方法、post方法
请求方法（所有方法全为大写）有多种，各个方法的解释如下：

GET 请求获取Request-URI所标识的资源 POST 在Request-URI所标识的资源后附加新的数据

HEAD 请求获取由Request-URI所标识的资源的响应消息报头

PUT 请求服务器存储一个资源，并用Request-URI作为其标识 DELETE 请求服务器删除Request-URI所标识的资源

TRACE 请求服务器回送收到的请求信息，主要用于测试或诊断

CONNECT 保留将来使用

OPTIONS 请求查询服务器的性能，或者查询与资源相关的选项和需求
18.数据结构（排序算法，冒泡以外的）
数据结构是指相互之间存在着一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成 。常用的数据结构有：数组，栈，链表，队列，树，图，堆，散列表（哈希表）
19.vue和react的区别，用法区别
React与Vue存在很多相似之处，例如他们都是JavaScript的UI框架，专注于创造前端的富应用。最大的相似之处是虚拟DOM。Reat与Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。

1、监听数据变化的实现原理不同

Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能。 React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的VDOM的重新渲染。

2、数据流的不同

Vue中默认是支持双向绑定的。在Vue1.0中我们可以实现两种双向绑定：
1.父子组件之间，props 可以双向绑定（Vue2.x 中去掉了第一种）
2.组件与DOM之间可以通过 v-model 双向绑定
React 从诞生之初就不支持双向绑定，React一直提倡的是单向数据流，他称之为 onChange/setState()模式。
3、mixins 和 HoC

在 Vue 中我们组合不同功能的方式是通过 mixin，而在React中我们通过 HoC (高阶组件）。
4、组件通信的区别

在Vue 中有三种方式可以实现组件通信：

1.父组件通过 props 向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据，而通过 事件的机制来处理子组件向父组件的通信
2.子组件通过 事件 向父组件发送消息
3.通过 V2.2.0 中新增的 provide/inject 来实现父组件向子组件注入数据，可以跨越多个层级。
在 React 中，也有对应的两种方式：

1.父组件通过 props 可以向子组件传递数据或者回调
2.可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多。

可以看到，React 本身并不支持自定义事件，Vue中子组件向父组件传递消息有两种方式：事件和回调函数，而且Vue更倾向于使用事件。但是在 React 中我们都是使用回调函数的，这可能是他们二者最大的区别。

5、模板渲染方式的不同

在表层上， 模板的语法不同

Vue是通过一种拓展的HTML语法进行渲染。
React 是通过JSX渲染模板（表面现象，毕竟React并不必须依赖JSX。）；

在深层上，模板的原理不同，这才是他们的本质区别：

Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，
比如条件语句就需要 v-if 来实现。
React是在组件JS代码中，通过原生JS实现模板中的常见语法，
比如插值，条件，循环等，都是通过JS语法实现的；

React的好处：
react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。

6、Vuex 和 Redux 的区别

从表面上来说，store 注入和使用方式有一些区别。

在 Vuex 中，$store 被直接注入到了组件实例中，因此可以比较灵活的使用：

使用 dispatch 和 commit 提交更新；
通过 mapState 或者直接通过 this.$store 来读取数据。

在 Redux 中，我们每一个组件都需要显示的用 connect 把需要的 props 和 dispatch 连接起来。另外 Vuex 更加灵活一些，组件中既可以 dispatch action 也可以 commit updates，而 Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。
从实现原理上来说，最大的区别是两点：

1.Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改
2.Vuex其实和Vue的原理一样，是通过 getter/setter来比较的（如果看Vuex源码会知道，其实他内部直接创建一个Vue实例用来跟踪数据变化）Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而相比之下，Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。因此也会给人一种大型项目用React，小型项目用 Vue 的感觉。
20.网页上哪里可以看到请求的所有信息
审查元素>network
21.继承方法

1. 原型链继承
2. 构造函数继承（经典继承）
3. 组合方式继承（构造函数 + 原型链）
4. es6方法继承
   22.团队合作的经验
   23.通宵经历
   24.课外项目
   官方首页，京东网页，360首页
   25.为什么学前端？
   我想学习一门拿手的技术，将来向计算机技术方向发展
   26.有没有参赛或者除了学校课程内容外的经验？
   27.辗转相除法
   辗转相除法， 又名欧几里德算法（Euclidean algorithm），是求最大公约数的一种方法。它的具体做法是：用较小数除较大数，再用出现的余数（第一余数）去除除数，再用出现的余数（第二余数）去除第一余数，如此反复，直到最后余数是0为止。如果是求两个数的最大公约数，那么最后的除数就是这两个数的最大公约数。
   28.数组转字符串
   使用 toString() 方法读取数组的值。
   29、二级下拉菜单

• 菜单项1
• 菜单测试1

  菜单测试1

  菜单测试1

• 菜单项2
• 菜单测试2

  菜单测试2

  菜单测试2

• 菜单项3
• 菜单测试3

  菜单测试3

  菜单测试3

  菜单测试3

  菜单测试3

• 菜单项4
• 菜单测试4

  菜单测试4

  菜单测试4

• 菜单项5
• 菜单测试5

  菜单测试5

  菜单测试5

  菜单测试5

• 菜单项6
• 菜单测试6

  菜单测试6

  菜单测试6

  **30.bind() apply()** call()、apply()、bind() 都是用来重定义 this 这个对象的

  call

  fn.call(所要指向的对象,参数1,参数2,…) 调用fn函数并修改this指向
  apply

  fn.apply(所要指向的对象,[参数1,参数2,…]) 调用fn函数。修改this指向
  bind

  bind不会直接调用函数 返回一个新的函数 修改了this指向，传参和call一样
  31.const用法
  声明的是常量，值是不可以改变的(不能重新赋值)，其余语法和let一样
  32.Utf-8编码汉字占多少个字节
  英文字母：

  ·字节数 : 1;编码：GB2312

  字节数 : 1;编码：GBK

  字节数 : 1;编码：GB18030

  字节数 : 1;编码：ISO-8859-1

  字节数 : 1;编码：UTF-8

  字节数 : 4;编码：UTF-16

  字节数 : 2;编码：UTF-16BE

  字节数 : 2;编码：UTF-16LE

  中文汉字：

  字节数 : 2;编码：GB2312

  字节数 : 2;编码：GBK

  字节数 : 2;编码：GB18030

  字节数 : 1;编码：ISO-8859-1

  字节数 : 3;编码：UTF-8

  字节数 : 4;编码：UTF-16

  字节数 : 2;编码：UTF-16BE

  字节数 : 2;编码：UTF-16LE
  33.Vue的钩子函数
  1.computed 计算属性
  2.methods 方法
  3.watcher
  常用的钩子函数

  beforeCreate
  created
  mounted
  computed
  34、http和https的区别
  HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

  http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl/tls加密传输协议。
  http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
  35、前端开发工具webstorm
  WebStorm是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
  36、Vue基于什么语言
  JavaScript
  37、Vue的第三方组件库view
  View 是一套基于 Vue.js 的 UI 组件库，主要服务于 PC 界面的中后台产品。
  38、HTML5的新特性
  (1)语义标签
  　　语义化标签使得页面的内容结构化，见名知义
  　(2)增强型表单
  　(3)视频和音频
  　39、ajax
  　Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
  　40.js对数组的操作，包括向数组中插入删除数据
  　push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
  　splice() 方法用于插入、删除或替换数组的元素。
  　41.组件之间的传参（例如子组件和父组件之间的传参）
  　父组件可以使用props把数据传给子组件
  　42.css3的新特性
  　css3选择器、css边框、css3背景、css3渐变、css3文本效果、CSS3 字体、CSS3 转换和变形、CSS3 过渡、CSS3 动画、CSS3 多列、CSS3 盒模型、CSS3伸缩布局盒模型(弹性盒)、CSS3 多媒体查询
  　43.localStorage和sessionStorage区别
  　localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
  localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
  sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
  44.盒子模型（怪异模型）
  内容(content)，也就是元素的 width、height
  内边距(padding)
  边框(border)
  外边距(margin)
  45.-static、relative、absolute、fixed四种定位的区别
  1.静态定位
  静态定位（position：static）是HTML中的默认定位，符合常规文档流，这里没太多内容。
  2.相对定位
  相对定位（position：relative），对象相对于本身位置而言，进行上下左右的偏移，但注意，它不脱离文档流！
  3.绝对定位
  绝对定位（position：absolute），相对于父级而言进行位置偏移，如果没有父级或者父级没有进行定位，则继续往上一级寻找参照物，直至最终的浏览器窗口。请注意，区别于相对定位的还有一点，绝对定位脱离常规文档流！
  4.固定定位
  固定定位（position：fixed），可理解为绝对定位中的一种特殊情况，即absolute包含fixed。它的特殊之处在于它不用像absolute疯狂“找爸爸”，它天生参照于浏览器窗口！当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动
  46.js的选择器
  getElementById(ID): 返回对指定ID的第一个对象的引用，如果在文档中查找一个特定的元素，最有效的方法是getElementById()
  getElementsByName(name): 返回文档中name属性为name值的元素，因为name属性值不是唯一的，所以查询到的结果有可能返回的是一个数组，而不是一个元素。
  getElementsByTagName(tagname): 返回文档中指定标签的元素
  getElementsByClassName():返回文档中所有指定类名的元素
  querySelector():返回文档中匹配指定css选择器的第一个元素
  querySelectorAll():返回文档中匹配指定css选择器的所有元素
  47.js的两种定时器(setTimeout和setInterval的区别)
  setTimeout只在指定时间后执行一次
  setInterval以指定时间为周期循环执行
  48.bootstrap实现响应式的原理
  使用bootstrap必须加入下面的代码

  视口的 meta 标签，重写了默认的视口，并帮助加载与特定视口相关的样式。

  width 属性设置屏幕宽度。它包含一个值，比如 320，表示 320 像素，或者值为 ‘device-width’，用来告诉浏览器使用原始的分辨率。

  initial-scale 属性是视口最初的比例。当设置为 1.0 时，将呈现设备的原始宽度。
  49.js的数据类型
  原始类型:number\string\boolean\null\undefined
  对象：array\date
  50.JS内存泄露
  内存泄漏指任何对象在不再拥有或不需要它之后依然存在，即这部分内存用完之后并没有返回到内存池。

  setTimeout第一个参数是字符串而不是函数的时候就会造成内存泄漏
  闭包
  控制台日志
  循环（两个对象彼此引用且彼此保留）
  全局变量
  如果你不断的创建全局变量，不管有没有用到他们，他们都将滞留在程序的整个执行过程中。
  事件监听器
  在页面中创建事件监听器，但是在页面跳转时，又忘记移除这些监听器，那么也可能导致内存泄漏。
  51.ES6----Promise
  异步，操作之间没有关系，同时执行多个操作， 代码复杂
  同步，同时只能做一件事，代码简单
  Promise 也是一个构造函数
  接受一个回调函数作为参数，回调函数里面是异步操作的代码
  返回的p就是一个 Promise 实例对象
  所有异步任务都返回一个 Promise 实例对象
  Promise 实例对象有一个then方法，用来指定下一步的回调函数
  52.float和absolute有什么区别？
  使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
  而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
  53.Session和Cookie的区别与联系
  Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端会把Cookie保存起来。
  在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。
  54.图片预加载与懒加载
  图片预加载：顾名思义，图片预加载就是在网页全部加载之前，提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，这样浏览者可能以为图片预览慢而没兴趣浏览，把网页关掉，这时，就需要图片预加载。当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。
  图片懒加载（缓载）：延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数，因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
  55MVVM和MVC区别？
  MVC:模型（Model）：程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)；
  控制器（Controller）：负责转发请求，对请求进行处理；
  视图（View）：界面设计人员进行图形界面设计。
  MVVM:把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
  56.实现连接两个数组并返回
  concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组
  57.实现冒泡排序
  比较相邻的元素。如果第一个比第二个大，就交换他们两个。

  对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。

  针对所有的元素重复以上的步骤，除了最后一个。

  持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比比较
  58.创建新数组，向数组插入数据
  push以及unshift即可向数组插入元素
  如果要在指定的位置插入元素则可以用splice
  splice接收多个参数，分别是索引，要删除的元素个数，新加的元素(可多个，用逗号隔开)；
  59.ES6部分知识点总结
  01.变量:let、const
  02.解构赋值
  03.参数扩展
  04.字符串的扩展
  05.数组的扩展
  06.箭头函数
  07.JSON
  08.get和set
  09.class
  10.继承
  11.继承相关的一些问题
  12.静态方法
  13.Promise
  14.generator
  60.js对数组的操作
  1.数组方法
  2.join() 连接
  3.push()和pop() 末尾添加和移除
  4.shift() 和 unshift() 开头添加和移除
  5.sort() 排序
  6.reverse() 反转
  7.concat() 连接/添加
  8.slice() 截取
  9.splice() 删除、插入和替换
  10.indexOf()和 lastIndexOf() 查找项
  11.forEach() 遍历循环
  12.map() 映射
  13.filter() 过滤
  14.every() 全部判断
  15.some() 部分判断
  16.reduce()和 reduceRight() 迭代求和
  17.find()和findIndex() 查找符合条件的值和下标
  18.copyWithin() 替换
  61.ajax
  AJAX 是一种用于创建快速动态网页的技术。
  通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  62.实现轮播图的思路
  图片轮播：

  设定两个类 .active{opacity:1} .opacity{opacity:0}
  将第一张图片添加class=‘active’
  设定一个定时器，每隔一段时间拿到当前轮播图片的index
  将此index图片移除类名active，添加类名opacity
  将下一张图片添加类名active
  轮播到最后一张图通过判断将index=0，跳转会第一张图
  上/下一张切换按钮

  绑定点击事件
  拿到当前正在轮播图片的index
  将本张图片移除类名active，添加类名opacity
  如果是上一张将index-1的图片添加类名active
  如果是下一张将index+1的图片添加类名active
  第一张图片左切，设定index=最后一张图的index
  最后一张图右切，设定index=第一张图的index
  圆点轮播(圆点和图片对应)

  设定两个类.red{background-color: red} .white{background-color: white}
  将第一张图片添加class=‘red’
  设定一个定时器，每隔一段时间拿到当前有颜色圆点的index
  将此index圆点移除类名white，添加类名red
  将下个圆点添加类名red
  轮播到最后一个圆点通过判断将index=0，跳转会第一张圆点
  圆点按钮点击跳转到对应图片

  绑定点击事件
  点击哪个圆点就拿到哪个圆点的index
  将所有图片移除类名active，添加类名opacity
  将此index图片移除类名opacity，添加类名active
  将所有圆点移除类名red，添加类名white
  将此index圆点移除类名white，添加类名red
  63.http协议
  HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。
  64.css选择器的权重
  第一等：代表内联样式，如: style=’’，权值为1000。
  第二等：代表ID选择器，如：#content，权值为0100。
  第三等：代表类，伪类和属性选择器，如.content，权值为0010。
  第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
  通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
  继承的样式没有权值。
  !important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)
  65.减少页面加载时间的方法
  1.重复的HTTP请求数量应尽量减少
  2. 压缩Javascript、CSS代码
  3. 在文件头部放置css样式的定义
  4. 在文件末尾放Javascript脚本
  5. css、javascript改由外部调用
  6. 尽可能减少DCOM元素
  7. 避免使用CSS脚本(CSS Expressions)
  8. 服务器启用gzip压缩功能
  9. Ajax采用缓存调用
  10. Ajax调用尽量采用GET方法调用
  11. 养成良好的开发维护习惯，尽量避免脚本重复调用
  12. 缩减iframe的使用，如无必要，尽量不要使用
  66.怎么理解模块化开发
  所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数
  67.transition transform translate 之间的区别
  transform的中文翻译是变换、变形，是css3的一个属性，和其他width，height属性一样
  translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少
  transition(过渡)
  transition 在一定时间之内，一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果，css3的属性
  68.页面之间是怎么传参数的?
  01.cookie传参
  书写cookie：res.cookie(‘cookie名字’,cookie值(传递的参数),{maxAge:100000})
  获取cookie：req.cookies.cookie名字
  02.session传参
  书写session：req.session.session名字=‘session的值(传递的参数)’
  获取session：res.send(req.session.session名字)
  03.ejs传参
  res.render(‘页面’,{“name”:“传递的参数”})
  04.get(url)传参
  69.手机号的正则表达式(以1开头的11位数字)
  let reg=/^1[3|4|5|7|8][0-9]{9}$/;
  70.css动画
  用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画
  71.清除浮动的方法
  给父元素加height——有局限性
  给父元素加overflow:hidden——有副作用
  给父元素加子元素 clear:both——语义有问题
  给父元素添加后置的内容生成" ",显示样式为table，清除浮动clear:both——无任何副作用
  72.原生js实现获取li的索引

  • 11
  • 22
  • 33
  • 44
  • 55
  **73.将json字符串转为对象** let jstr='{"name":"张三","age":"18"}' console.log(jstr) console.log(typeof jstr) let jobj=JSON.parse(jstr) console.log(jobj instanceof Object)