如何制作手机商城网站,手机百度怎么翻译网页,零基础做电商从什么做起,南充 网站开发前端八股文 目录 前端八股文1.css选择优先级#xff1f;2.px与rem区别#xff1f;3.重绘与重排的区别#xff1f;4.元素水平垂直居中的方法#xff1f;5.什么是闭包#xff0c;闭包有什么特点#xff1f;6.什么是事件委托#xff1f;7.什么是原型链#xff1f;8.new操作…前端八股文 目录 前端八股文1.css选择优先级2.px与rem区别3.重绘与重排的区别4.元素水平垂直居中的方法5.什么是闭包闭包有什么特点6.什么是事件委托7.什么是原型链8.new操作符具体做了什么9.Js是如何实现继承的10.JS中的this指向的问题11.ES6的新特性有哪些12.call、apply、bind三者有什么区别13.如何实现一个深拷贝14.ajax是什么是怎么实现的15.get和post有什么区别16.promise的原理是什么优缺点是什么17.token登录流程18.url解析/页面渲染的过程是怎么样的 1.css选择优先级
!important 行内样式 id 类/伪类/属性 标签 全局选择器
2.px与rem区别
px是像素每个像素大小是一样的绝对单位长度。 rem相对单位相对于html根节点的font-size的值font-size62.5% 1rem 10px。
3.重绘与重排的区别
重排回流布局引擎会根据所有的样式计算盒模型在页面的位置和大小。 重绘计算盒模型在页面的位置、大小和其他属性后浏览器会根据盒子模型的特性进行绘制。 对DOM的大小、位置进行修改后浏览器需要重新计算元素的几何属性叫作重排 对DOM的样式进行修改比如color和background-color浏览器不需要重新计算几何属性的时候直接绘制了该元素的新样式只触发了重绘。
4.元素水平垂直居中的方法
1.定位margin 2.定位transform 3.flex布局 justify-content:center align-item:center 4.grid布局 5.table布局
5.什么是闭包闭包有什么特点
函数嵌套函数内部函数被外部函数返回并保存下来时候就会产生闭包 特点可以重复利用变量并且这个变量不会污染全局的一种机制这个变量一种保存再内存在不会被垃圾回收机制回收 确定闭包较多时候会消耗内存导致页面性能下降。 使用场景防抖节流函数嵌套函数避免全局污染的时候。
function fn(a){return function(){console.log(a)}
}6.什么是事件委托
又叫事件代理利用了事件冒泡的机制实现也就是说把子元素的事件绑定到了父元素身上。 如果子元素阻止了事件冒泡那么委托也不能成立。 阻止事件冒泡event.stopPropagation() addEventListener(‘click’,‘函数名’,true/false) 默认是false事件冒泡true事件捕获 好处提高性能减少事件的绑定
7.什么是原型链
原型就是一个普通对象他是为了构造函数的实例共享属性和方法所有实例中引用的原型都是同一个对象 使用prototype可以把方法挂在原型上内存只保留一份。 _ proto _可以理解为指针实例对象中的属性指向了构造函数原型prototype 一个实例对象在调用属性和方法的时候会依次从实例本身、构造函数原型、原型的原型上去查找
function Person(){this.say function(){console.log(唱歌)
}
Person.prototype.look function(){console.log(西游)
}
var p1 new Person()
var p2 new Person()
p1.say() // 唱歌
p2.say() // 唱歌
p1.look() // 西游
p2.look() // 西游
console.log( p1._proto_ Person.prototype ) true8.new操作符具体做了什么
1.先创建一个空对象 2.把空对象和构造函数通过原型链进行链接 3.把构造函数的this绑定到新的空对象身上 4.根据构建函数返回的类型如果是值类型则返回对象如果是引用类型就返回引用类型。
9.Js是如何实现继承的
1.原型链继承 2.借用构造函数继承 3.组合式继承 4.ES6的class类继承
10.JS中的this指向的问题
1.全局中的this指向 指向的是window 2.全局作用域或者普通函数中的this 指向的是全局window 3.this永远指向最后调用它的对象 在不是箭头函数的情况下 4.new关键词改变了this的指向 5.apply,call,bind 可以改变this指向不是箭头函数 6.箭头函数中的this它的指向在定义的时候已经确定了箭头函数没有this看外层是否有函数有就是外层函数的this没有就是window 7.匿名函数中的this 永远指向window
11.ES6的新特性有哪些
1.新增块级作用域let,const 2.新增定义类的语法(class) 3.新增了一种基本数据类型(symbol) 4.新增数组API 5.promise async与await 6.新增了set和map数据结构
12.call、apply、bind三者有什么区别
都是改变this的指向和函数的调用call和apply功能类似只是传参的方法不同 call方法传递的是一个参数列表apply传递的是一个数组bind传参后不会立刻执行会返回一个改变了this指向的函数这个函数还是可以传参的。
13.如何实现一个深拷贝
深拷贝就是完全拷贝一份新对象会在堆内存开辟新的空间拷贝对象被修改后原对象不受影响 主要针对的是引用数据类型 1.扩展运算符 缺点只能实现第一层当有多层的时候还是浅拷贝 2.JSON.parseJSON.stringfy()缺点该方法不会拷贝内部函数 3.利用递归函数实现
14.ajax是什么是怎么实现的
创建交互式网页应用的网页开发技术 在不重新加载整个网页的前提下与服务器交换数据并更新部分内容 通过Xmlhttprequest对象向服务器发送异步请求然后从服务器拿到数据最后通过JS操作DOM更新界面 1.创建Xmlhttprequest 对象 2.通过Xml对象里的open()方法和服务器建立连接 3.构建请求所需的数据并通过Xml对象的send()发送给服务器 4.通过Xml对象的onreadystate change 事件监听服务器和你的通信状态 5.接收并处理服务器响应的数据结果 6.把处理的数据更新到HTML页面上。
15.get和post有什么区别
1.get一般是获取数据post一般是提交数据 2.get参数放在url中所以安全性比较差post是放在body中 3.get请求刷新服务器或退回是没有影响的post请求退回是会重新提交数据 4.get请求时会被缓存会保存再浏览器的历史记录中post不会
16.promise的原理是什么优缺点是什么
Promise对象封装了一个异步操作并且还可以获取成功或失败的结果 Promise主要就是解决回调地狱的问题之前如果异步任务比较多同时他们有相互依赖的关系就只能使用回调函数处理这样就容易形成回调地狱代码的可读性差可维护性也很差 有三种状态pending 初始状态 fulfilled 成功状态 reject 失败状态 状态改变会有两种情况 pending - fulfilled ; pending - rejected 一旦发生状态就会凝固不会再变 首先就是无法取消Promise一旦创建他就会立即执行不能中途取消 如果不设回调Promise内部抛出的就无法反馈到外面 若当前处于pending状态时无法得知目前在哪个阶段 原理 构造Promise实例需要传递函数的参数这个函数有两个形参分别都是函数类型一个是resolve一个是rejectresolve 函数的作用是将 Promise 对象的状态从 未完成 变为 成功即从 pending 变为 resolved在异步操作成功时调用并将异步操作的结果作为参数传递出去reject 函数的作用是将 Promise 对象的状态从 未完成 变为 失败即从 pending 变为 rejected在异步操作失败时调用并将异步操作报出的错误作为参数传递出去用then方法分别指定 resolved 状态和 rejected 状态的回调函数。
17.token登录流程
1.客户端用账号密码请求登录 2.服务端收到请求后需要去验证账号密码 3.验证成功后服务端会签发一个token把这个token发送给客户端 4.客户端收到token后保存起来可以放在cookie也可以是localstorage 5.客户端每次向服务端发送请求资源的时候都需要携带这个token 6.服务端收到请求接着去验证客户端里的token验证成功才会返回给客户端请求的数据。
18.url解析/页面渲染的过程是怎么样的
1.DNS解析 2.建立TCP连接 3.发送HTTP请求 4.服务器处理请求 5.渲染页面 浏览器获取HTML和CSS资源构建DOM树和CSS树把DOM和CSS合并成渲染树 6.断开TCP连接
