性能优化
- 减少http请求的次数
- 避免使用全局变量，减少DOM操作
- 避免在CSS文件里使用动态属性
- 压缩代码和图片，图片选用合适的格式
- 利用ajax缓存，减少DNS查找
移动端ToC产品性能优化
- 尽可能使用CSS3动画，开启硬件加速
- 尽量避免CSS3的渐变阴影效果
- 适当使用touch事件代替click事件
- 尽量少用float，float在渲染时计算量大
ToC产品VSToB产品
- ToB产品主要对象是企业，后台产品。比如公司内部的平台，主要进行的操作是数据的增删改查，注重逻辑性，用户都是公司内部人员。
- ToC产品用户基本上是个人用户，重视用户的体验感和视觉效果。
深浅拷贝
- 深拷贝：深拷贝会创造一个一模一样的对象
- JSON.parse(JSON.stringify(object))
- lodash的深拷贝函数
- 浅拷贝：浅拷贝只复制指向某个对象的指针而不复制对象本身
- Object.assign
- ...展开运算符
ES6新特性
- let：声明局部变量
- const：声明只读变量
- 解构赋值：从对象或数组中解构出值对变量进行赋值
- 模板字符串：反单引号中${}插值
- 当属性名和属性值相同只需写一个
- 箭头函数，改变this的指向
- for of专门用于遍历数组
- 展开字符串 ...
- 使用class定义类，extends实现类的继承
服务端渲染(SSR)VS客户端渲染(BSR)
- 服务端渲染：由后端直接返回HTML，用nodejs编写
- 优点：
有利于SEO优化
前端耗时少
后端直接生成HTML文件，减少查询数据的时间
- 缺点：
不利于前后端分离，开发效率低
占用服务器资源
- 客户端渲染：由前端使用js语法进行HTML渲染
- 优点：
用户体验好
前后端分离，开发效率高
- 缺点：
前端响应慢
不利于SEO优化
ES5原型链
- 每个函数都有prototype属性，指向了函数的原型
- 每个对象都有proto属性，指向了创建该对象的构造函数的原型。
- 对象可以通过 proto 来寻找不属于该对象的属性，proto 将对象连接起来组成了原型链。
类的写法
- ES5
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function(){
return 'Hi, I am ' + this.name;
}
- ES6
class Person {
constructor(name){
this.name = name;
}
sayHello(){
return 'Hi, I am ' + this.name;
}
}
typeof Person;
HTML5
- 新增语义化标签：
header,nav,footer,aside,article,section
- 新增表单属性
datalist,datetime,date,month,week,number,emailurl等
axios及其封装
- axios是基于promise的http库
- 根据npm官网封装请求拦截器和响应拦截器
XHR手动封装
export function 名字(params/data) {
return fetch({
url: ' ',
method: 'GET/POST',
params/data
})
}
事件委托
- 原理：事件的冒泡机制，将子元素的事件委托给父元素
- 优点：大量减少内存使用，减少事件注册
DOM 0级/2级
- 0级DOM：绑定on...事件，不能同时绑定多个相同的事件，相同的会覆盖
- 2级DOM：事件监听。同时绑定几个事件（相同或不同），然后顺序执行，不会覆盖
防抖与节流
- 防抖：防抖是将多次执行变为最后一次执行
- 如果短时间内大量触发同一事件，只会执行一次函数。
- 定义一个定时器
- 节流：节流是将多次执行变成每隔一段时间执行
- 在函数执行一次之后，该函数在指定的时间期限内不再工作
- 利用时间戳和定时器
获取DOM对象有哪些方法
- getElementById()
- getElementsByName()
- getElementsByTagName()
- getElementsByClassName()
- document.querySelector()
- document.querySelectorAll()
CSS权重
- !import > 行内式 > id选择器 > class选择器 > 标签选择器
CSS3新增属性
- border-color
- border-image
- border-radius
- box-shadow
- background-origin
- transform
- animation动画
- transition过渡
position常用定位
- static
- relative
- absolute
- fixed
常用块级元素
- h1 - h6
- div
- p
- ul,ol ,li
- form
- table
DOM文档流
- 将窗口自上而下分成一行一行，在每行中按从左往右依次排放元素。
BFC
- 块级格式化上下文：新建了一个BFC盒子，盒子里面的元素不会影响外面元素的样式。在垂直方向上margin会重叠。
- BFC作用：
- 避免margin重叠
- 清除浮动
- 自适应两栏布局
- 如何创建BFC
- 有浮动
- position为absolute或fixed
- display为inline-block、table-cell、flex、table-caption或者inline-flex
- overflow不为visible
GETvs.POST
- get时从服务器获取数据，post时向服务器传递数据
- get传送的数据量较小，不能大于2KB。post传送的数据量较大
- get把参数添加到url中，post看不到用户信息
- get安全性非常低，post安全性较高
状态码
- 200：请求成功
- 301：永久重定向
- 302：暂时重定向
- 405：客户端请求中的方法被禁止
- 413：请求的实体过大，拒绝请求
- 415：客户端媒体类型错误
- 504：代理无法连接到服务器
AJAX
- AJAX 是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
同源策略，CORS
- 同源：域名，协议，端口号都相同
- CROS：跨域资源共享，它允许浏览器向跨源服务器发送XHR请求，克服了AJAX只能同源使用的限制
正则表达式
img+span 上下居中有哪些方案
- 给sopan和img添加vertical-align：middle
常用设计模式
- 单例模式：只能创建唯一的实例
- 适配器模式
- 工厂模式
跨域的解决方案
- JSONP跨域
- nodejs中间件代理
- nginx代理
JS常用数据类型
- 基本数据类型：string,number,boolean,null,undefinded
- 复杂数据类型:object
数组去重有哪些方法
undefined和null
- undefinded和null相等但不全等。
- 数据类型转换成number时，null为0，undefined为NaN。
严格模式下的代码规范有哪些
- 变量必须先声明再使用，不存在变量提升
- 不能使用保留字或关键字为变量名
- 函数的参数不能有重复
作用域链
- 在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。
window和document
- window：浏览器中一个打开的窗口
- document：整个HTML文档，可以来访问页面中的所有元素
同步与异步
- 同步：需要有返回结果才能继续执行
- 异步：不需要有返回结果，之后使用回调函数调用结果
阻塞与非阻塞
- 阻塞和非阻塞是在等待调用结果时的状态
- 阻塞调用是指结果返回之前该线程会被挂起，只有得到结果才会返回
- 非阻塞调用指在不能立刻得到结果之前，该调用不会阻塞当前线程。定时查看询问状态
回流与重绘
- 回流：也叫重排。因为规模尺寸、布局等改变时，浏览器重新渲染。
- 重绘：页面元素改变但不影响在文档流中的位置时，浏览器将重新绘制新样式
- 回流必将引起重绘，但是重绘不一定会引起回流
- 减少回流和重绘
- 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流
- 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
- 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
