前言

快要开始面试了，在这里记录各种前端知识点，方便自己复习。每一个问题下不止记录该问题的答案，还会记录所有相关的知识点。欢迎大家一起交流学习。

变量类型和计算

1.typeof能判断哪些类型？

值类型：undifined、string、number、布尔、symbol（ES6） 引用类型：对象、数组、null(特殊，指针指向空地址)、函数 typeof可以识别所有的值类型，识别函数，但是只能判断是否为引用类型object（不可细分） 手写实现深拷贝：

function deepClone(obj){ if(typeof obj != 'object' || obj == null){ return obj; } let result if(obj instanceof Array){ result = [] }else{ result = {} } for(let key in obj){ if(obj.hasOwnProperty(key)){ result[key] = deepClone(obj[key]) } } return result; }

变量计算 1.字符串转换为数字可以用parseInt()，因为在有字符串 + …的式子，会强制把其他变量也转换为字符串 2.‘= =’：能强制转换之后相等的，会判断为true，如：100==‘100’，0==‘ ’，0 = =false ，null = = undifined；那么在什么时候使用= = 呢？一般只有这种情况: if(obj.a == null) 来判断obj.a是否为null或者undifined。 3.if语句判断的是truely变量（!!a = = true）和false变量(!!a = = false),以下为所有的falsely变量：

!!0 === false; !!NaN === false; !!undefined === false; !!null === false; !!'' === false; !!false === false;

判断arr是否是一个数组的方法： 1.Array.isArray(arr) 2.arr instanceof Array

原型和原型链

如何判断一个变量是不是数组？ 手写一个简易的Jquery，考虑插件和扩展性 class的原型本质，怎么理解?

以一个class继承的代码为例

class People{ constructor(name){ this.name = name; } eat(){ console.log(`${this.name} eat rice`); } } class Student extends People{ constructor(name,number){ super(name); this.number = number; } sayHi(){ console.log(`我叫${this.name},我的学号是${this.number}`); } } let xiaoming = new Student('小明', 12345);

instanceof:1. 判断new出来的实例对象是属于某一类（xiaoming instance of People,xiaoming instanceof Student, xiaoming instance of Object都为true ） 2.[] instanceof Array 判断是否为数组 3.{} instanceof Object 判断是否为对象 4.[] instanceof Object 也会返回true 原型 每个class都有显式原型prototype； 每个实例都有隐式原型__proto__； 实例的__proto__指向对应class的prototype； 原型链 当xiaoming instanceof时，就相当于沿着xiaoming的__proto__去查找原型链对应的prototye，如果有那么该prototype对应的类就为true，否则为false.

作用域和闭包

this的不同应用场景，如何取值？ 手写bind函数 实际开发中闭包的应用场景，举例说明

自由变量：当前作用域未定义，但使用了。那么就向上级作用域去查找，如果一直找到全局作用域都没找到，那就报错：xxx is not difined. （闭包中）自由变量的查找

//函数作为返回值 function create(){ const a = 100; return function fn(){ console.log(a); } } const re = create(); const a = 200; re(); // 函数作为传参 function print(fn){ const a = 200; fn(); } const a = 100; function fn(){ console.log(a); } print(fn);

结论：自由变量的查找是在函数定义的地方向上级作用域查找，不是在执行的地方

闭包的影响 变量会常驻内存，得不到释放，所以闭包不要乱用，但是闭包并不一定会造成内存泄漏（因为内存泄漏是指垃圾变量没有被释放，而闭包中的变量不一定无用）

this this取什么值，是在函数执行的时候确认，而不是在函数定义的时候确认。 箭头函数中的this，取它上级作用域的值，它自己没有this 以下是包含this的几种情况

```javascript //情况一 function fn1(){ console.log(this); } fn1(); //window fn1.call({x:100}); //{x:100} fn2 = fn1.bind({x:200}); fn2();//{x:200} //情况二 const zhangsan = { name: '张三', sayHi(){ console.log(this); //zhangsan这个对象 }, wait(){ setTimeout(function(){ console.log(this)//window },1000) } } //情况三 const lisi = { name: '李四', sayHi(){ console.log(this); //lisi这个对象 }, wait(){ setTimeout(() => {console.log(this)},1000)//lisi这个对象 } }

this的使用场景及取值： 1.当做普通函数被调用——全局 2.使用call apply bind——指向传入的参数 3.作为对象方法调用——指向上级对象，函数属于谁就指向谁 4.在class的对象中调用——实例本身 5.箭头函数中——找上级作用域中this的值来确定 手写bind函数

Function.prototype.myBind = function(){ const args = Array.prototype.slice.call(arguments); const a = args.shift(); const self = this; return function(){ return self.call(a, args); } }

异步和单线程

同步和异步的区别是什么？ 手写用promise加载一张图片 前端使用异步的场景

JS是单线程语言，只能同时做一件事儿 浏览器和nodejs支持JS启动进程，如web worker JS和DOM渲染共用同一个线程，因为JS可以修改DOM结构

同步和异步的区别： 1.同步会阻塞代码执行，异步不会阻塞代码执行

前端使用异步的场景： 1.网络请求：如ajax图片加载 2.定时，如setTimeout

手写promise加载图片

const url1 = 'https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png'; const url2 = 'https://pics5.baidu.com/feed/eac4b74543a98226dbbad777b05f51074b90eb4f.jpeg?token=27a371d8135063b0f0b46b46bfe244b6'; function loadImg(src){ return new Promise((resolve, reject) => { const img = document.createElement('img'); img.onload = () =>{ resolve(img); } img.onerror = () =>{ const err = new Error(`图片加载失败${src}`); reject(err) } img.src = src; }) } // loadImg(url1).then((img) => // {console.log(img.width) // return img}).then((img) => { // console.log(img.height) // }).catch((err) => console.error(err)) loadImg(url1).then((img) => {console.log(img.width) return img//返回一个普通对象 }).then((img) => { console.log(img.height); return loadImg(url2); //返回promise对象 }).then(img2 =>{ console.log(img2.width); return img2; }).then( img2 => { console.log(img2.height); }).catch((err) => console.error(err))

以下开始过渡到js的web api

DOM(Document Object Model)

DOM是哪种数据结构？ DOM操作常用API attribute和property的区别 一次性插入多个DOM节点，考虑优化

DOM的本质：从html文件解析出来的树 获取DOM节点的方法： 1.document.getElementById( ) //元素 2.document.getElementsByTagName() //集合 3.document.getElementsByClassName() //集合 4.document.querySelectorAll(）//集合

attribute和property的区别:

let plist = document.querySelectorAll('p'); let p = plist[0]; // propety是通过获取属性开改变页面样式的一种形式 p.style.width = '100px'; p.className = 'red'; console.log(p.style.width); console.log(p.className); console.log(p.nodeName); console.log(p.nodeType); //attribute p.setAttribute('data-name', 'jiang'); console.log(p.getAttribute('data-name')) p.setAttribute('style', 'font-size:50px')

1.property：修改对象属性，不会修改到对象属性中； 2.attribute：修改html属性，修改html结构； 3.两者都可能会引起DOM的重新渲染（所以建议使用property） 以上三点为看mooc视频时的总结，根据我自己的理解来讲，我认为这两者之间的区别还在于property只能修改DOM自带的属性，而attribute不仅可以修改dom自带的属性，还可以修改和创建一些自定义属性；

DOM结构操作：

const div1 = document.getElementById('div1'); const div2 = document.getElementById('div2'); //创建节点 const newP = document.createElement('p'); newP.innerHTML = 'this is newP'; //插入节点 div1.appendChild(newP); //移动节点 const p1 = document.getElementById('p1'); div2.appendChild(p1); //获取父元素 console.log(p1.parentNode); //获取子元素 console.log(div1.childNodes); const div1ChildsNodeP = Array.prototype.slice.call(div1.childNodes).filter(child =>{ if(child.nodeType === 1){ return true; }else{ return false; } }) console.log(div1ChildsNodeP);//仅为标签的子元素 //删除子元素 div1.removeChild(div1ChildsNodeP[0]);

DOM性能： 1.缓存DOM查询结果 2.将频繁操作改成一次操作

const list = document.getElementById('list'); //创建一个文档片段，此时还没有插入DOM中，可以避免多次DOM操作 const frag = document.createDocumentFragment(); for(let i =0;i<10;i++){ const li = document.createElement('li'); li.innerHTML = `this is li${i}`; frag.appendChild(li);//此处没有操作DOM } list.appendChild(frag);//此处操作了一次DOM

DOM的数据结构：树

BOM(Browser Object Model)

如何识别浏览器类型 分析拆解url的各个部分

//navigator const ua = navigator.userAgent;//拿到浏览器的信息（包括类型） const isChrome = ua.indexOf('Chrome'); console.log(isChrome) //screen console.log(screen.width); console.log(screen.height); //location console.log(location.herf);//取网址 console.log(location.protocol); //取协议（http或https） console.log(location.host)//取域名 console.log(location.search)//取参数 console.log(location.hash);//取hash console.log(location.pathname)//取路径 //history history.back(); history.forward();//网页前进或后退

事件绑定和事件冒泡

编写一个通用的事件监听函数 描述事件冒泡的流程 无限下拉的图片列表，如何监听每个图片的点击

通用的事件监听函数

function bindEvent(item, type,selector,fn){ if(fn == null){ fn = selector; selector = null } item.addEventListener(type,event =>{ let targrt = event.target; if(selector){//事件代理绑定 if(targrt.maches(selector)){ fn.call(target,event); } }else{//普通绑定 fn.call(target,event); } }); }

ajax

手写一个简易的ajax 跨域的常用实现方式

手写ajax

function ajax({body,headers,url,method}) { return new Promise((resolve,reject) =>{ let request = new XMLHttpRequest(); request.open(method,url); for(let key in headers){ let value = headers[key]; request.setRequestHeaders(key,value); } request.send(body); request.onreadystatechange = () =>{ if(request.readyState === 4){ if(request.status === 200){ resolve( JOSN.parse(request.responseText) ) }else if(request.status === 400){ reject(new Error('request failed')) } } } }) }

xhr.readyState: 1.0-(未初始化）还没有调用send（）方法； 2.1-（已调用send（）方法）还在发送请求； 3.2-（载入完成）send（）方法执行完成，已经接收到全部响应内容； 4.3-（交互）正在解析响应内容； 5.4-（完成）响应内容解析完成，可以在客户端调用

xhr.status(状态码）: 2xx:表示成功处理请求，如200 3xx:需要重定向，浏览器重新跳转，301（永久重定向），302（临时重定向），304（资源未改变） 4xx:客户端请求错误，404（服务端找不到，请求错误），403（客户端没有权限） 5xx：服务端出错

同源策略： ajax请求时，浏览器要求当前网页和server必须同源(安全） 同源：协议、域名、端口号三者都相同 img、link、script三个标签不受同源策略限制 img标签可用于统计打点，可使用第三方统计服务 link和script可使用CDN，CDN一般都是外域 script可以实现JSONP，后端也可以根据前端传来的拼接地址进行数据选择来传给前端 所有的跨域，都必须经过server端的允许和配合 cors–设置服务端http header也可以实现跨域： 待补充…

axios作为ajax插件，本质是对XMLHttpRequest进行了封装，它支持promise

存储

cookie localstorage sessionstorage的区别 cookie本身用于浏览器和server通讯，可以通过document.cookie修改，也用于本地存储。cookie的值是添加形式的，每次赋值只要没有对cookie中的同一变量就行重赋值，此次赋值不会覆盖之前的值，会直接添加在后面 cookie的特点： 存储大小，最大4KB http请求时需要发送到服务端，增加请求数据量 只能用document.cookie = ‘…’，太过简陋 localstorage 和sessionstorage： 存储大小最大为5M API简单易用，setItem ,getItem 不会随着http请求被发出去 localstorage数据会永久存储，除非代码手动删除，sessionstorage只存在于当前会话，浏览器关闭则清空。

开发环境

git 抓包 webpack babel linux的常用命令

git常用命令（按实际项目中使用顺序来写） git branch（检查当前状况下代码分支） git checkout -d xxx （创建一个新的分支） git status（检查当前的修改文件有哪些） git show（检查修改内容） git add . xxx（提交修改） git checkout（撤销上一步修改） git push origin xxx（推送到服务端） git pull origin xxx （从服务端下载） git merge（合并分支） 抓包 chales实现代理网站，手机连接电脑进行抓包，以及下载证书来获取https的信息 webpack和babel 使用原因： 1.ES6模块化，浏览器暂不支持 2.ES6语法，浏览器并不完全支持 3.压缩代码、整合代码，以让网页加载更快

webpack基础配置 1.仅执行打包（webpack.config.js)

const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', //production 开发/线上模式 entry: path.join(__dirname, 'src', 'index.js'), //找到当前目录下的src的index.js output:{ filename: 'bundle.js', path: path.join(__dirname, 'dist') }, plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, 'src', 'index.html'), filename: 'index.html', //产出文件名，放在dist中 }) ], devServer:{ port: 3000, contentBase: path.join(__dirname, 'dist') } }

2.将ES6转换为ES5 需要安装babel，配置如下 添加.babelrc文件

{ "presets": ["@babel/preset-env"] }

在webpack.config.js中添加

module:{ rules:[ { test: /\.js$/, loader:['babel-loader'], include: path.join(__dirname, 'src'), exclude: /node_modules/ } ] },

3.ES6模块化 如果需要导出多个模块，用export一次性导出，或者挨个导出，然后用解构赋值的方法来获取这些模块 如果只导出一个模块，那就要用export default 但是导出多个的时候如果用了default，就不能再用解构赋值获取了，只能单个导出之后，采用属性的方法来获取模块中的内容

export function fn(){ console.log(fn); } export const age = 10; export const obj = { name: 'zhangsan' } function fn(){ console.log(fn); } const age = 10; const obj = { name: 'lisi' } export { fn, age, obj, } const xxx = { nema: 'xxx' } export default xxx

4.webpack配置生产环境 需要修改的部分：

mode: 'production', //这里改了 entry: path.join(__dirname, 'src', 'index.js'), //找到当前目录下的src的index.js output:{ filename: 'bundle.[contenthash].js',//这里改了 path: path.join(__dirname, 'dist') },

有需要的话还可以配置一下package中的build命令 这里在bundle文件名后面加的cotenthash可以随机生成一个乱码，当文件被修改后，它就会改变，有利于性能优化和缓存，后面还会说到 Linux常用命令 ssh 用户名@IP地址 （登录线上机） ls/li（查看文件夹） clear （清屏） mkdir xxx （创建文件夹） rm -rf xxx (删除文件夹） cd xxxxxx （进入某目录） mv xxx yyy (把文件名xxx改为yyy） mv xxx …/…/…/xxx (修改文件路径） cp xxx xxx1(把xxx拷贝到xxx1) touch xxx(新建文件） vi/vim xxx(新建文件并打开，打开之后可以写入内容，i进入编辑模式，esc后退，：w保存, :q退出，：q!强制退出） cat xxx（查看文件内容） grep “关键字” xxx (在文件xxx中查找关键字）

运行环境

网页加载过程 性能优化 安全

从输入url到渲染出页面的整个过程 要加载html代码，媒体文件，如图片、视频等，javajscript css 1.DNS解析：域名 -> ip地址 2.浏览器根据IP地址向服务器发起http请求（包括TCP连接） 3.服务器处理http请求，并返回给浏览器 4.网页根据HTML代码生成DOM Tree，根据CSS代码生成CSSOM 5.将DOM Tree 和CSSOM 整合形成 Render Tree 6.浏览器根据Render Tree渲染页面 7.遇到script标签则暂停渲染，优先加载并执行JS代码，完成再继续 8.直至把 Render Tree渲染完成

为什么要把CSS放在head里，把JS放在body最后呢？ 因为CSS里包含的样式最好是在DOM加载时就加载完，然后和DOM Tree一起渲染，否则每次改变样式都造成重新渲染，很麻烦 JS放在不放在最后，会因为JS导致渲染卡住

图片加载不会阻塞渲染

window.onload和DOMContentLoaded的区别: window.onload页面的全部资源加载完才会执行，包括图片、视频 DOMContentLoaded在DOM渲染完即可执行，此时图片、视频可能还没有加载完

性能优化 1.原则 多使用内存、缓存等方法，减少CPU计算量，减少网络加载耗时（空间换时间） 2.从何入手 一、让加载更快（1）减少资源体积：压缩代码（如webpack打包压缩） （2）减少访问次数：合并代码。SSR服务器渲染，缓存 （如CSS精灵图、webpack打包时给出口文件名加上contenthash） （3）使用更快的网络：CDN 二、让渲染更快：（1）css放在head，JS放在body最下面 （2）尽早执行JS，用DOMContentLoaded触发 （3）懒加载（图片懒加载，上滑加载更多） （4）对DOM查询进行缓存（见前面） （5）频繁操作DOM，合并到一起插入DOM结构（见前面） （6）节流throttle，防抖debounce

contenthash的原理： 静态资源加hash后缀，根据文件内容计算hash 文件内容不变，则hash不变，则url不变 Url和文件不变，则会自动触发http缓存机制，返回304

CDN：用来配置静态文件，CDN不变的话也会返回304

SSR：服务端渲染——将网页和数据一起加载，一起渲染 如果是非SSR（前后端分离）——先加载网页，再加载数据，再渲染数据

懒加载（待补充） 给图片的src设置为preview.png，然后将真正的图片地址赋值给一个自定义属性，当屏幕滑动到图片的位置时，再显示图片

防抖debounce 监听一个输入框，文字变化后触发change事件 直接用keyup事件，则会频繁触发chenge事件 防抖：用户输入结束或暂停时，才会触发change事件 手写防抖：

function debounce (fn, delay = 500){ let timer = null; return function (){ if(timer){ clearTimeout(timer); } timer = setTimeout(() =>{ fn(this,arguments) timer = null; },delay) } } input1.addEventListener('keyup', debounce(() => { console.log(input1.value) }),600)

节流throttle（用于比防抖更频繁的触发） 拖拽一个元素时，要随时拿到该元素被拖拽的 位置 直接用drag事件，则会频繁触发，很容易导致卡顿 节流：无论拖拽速度多快，都会每隔一定时间触发一次

function throttle(fn,delay){ let timer = null; return function(){ if(timer){ return } timer = setTimeout(() =>{ fn.apply(this,arguments); timer = null; },delay) } }

安全

常见的web前端攻击方式有哪些？ XSS跨站脚本攻击 CSRF 跨站请求伪造

XSS跨站脚本攻击 如：一个网站，我在其中写了一个script标签，里面包含获取用户cookie的代码，当用户点入网站时,即可获取用户的cookie,发送到服务端

XSS预防： 1.替换特殊字符，如<变为< >变为>