2021-07前端跳槽面试课程笔记

1、2-6 面试准备技术栈准备jQuery，核心架构是么，事件委托是怎么做的，插件机制是么，（兼容性）；博客文章按照文章捋顺一次代码即可vue，React，Angular， 准备一到两个，要全都准备，精心准备一个最好要求全都会但是要对其中一个原吃透吃深才好阿对Vue的源码经常会问网上看vue源码，1.0较为简洁懂找一篇有代码有图的博客文章好好看一下node，尽要提，除非有要求如果说，要说好才等包括环境搭建，预编译，构建，打包等等，具体有sass，less，gulp， browserify， 等sass和less要准备一下，gulp要准备，npm常用命令，npm的scripts公司通用webpack

2、，须准备有一份中文webpack文档非常好2-7面试准备自我介绍基本信息，龄也要写，照片其实需学历，写最高的一个即自我陈述把我面试的沟通方向；学会引导面试官，并且要适可而止，该收住的时候一豁达自信的适度发挥；要自信，有气场，要膨胀，亢实自如谈兴趣，巧妙示实，适时讨疑问；兴趣要和前端相关，要瞎谈，官拉到某个方向，说半半，让面试官来问聪明的说法是，当问题回答一大部分但是最后的会，应该说我得回去思考一下，我这方面确实没有经验，能能指导一下，去再深入学习节奏要适宜，切忌小聪明；要努认真的把所有能想到的解决方法都摆出来，得很简单，即使有些方法优缺点，太好，常用等等就去想，去写，去思考的写完每一种解法实战

3、方向要对，过程要细；问题的方向要把握好，要答非所问，要围绕面试官的出题点去回答要瞎答胆子要大，心态要和；能看到题目难就放弃，能去想就放弃，要怕出错，一定要想如果问的问题确实解，要自，容导致面试提前终止，也就是能问么都知道一点儿都要灰心，要想办法在这个面试中收获点儿么可以多向面试官请教一些问题，以正好找面试官要一些资去学习，问面试官补完是是还可以去面试是可以再次面试的3-1页面布局一面/二面准备要充分；基础一定要准备充知识要系统；前端知识很碎，知识系统才能答沟通要简洁；简明扼要，直接针对考察点知识点作答，要拖带水，一语中的即可态度要谦虚；要把面试官放在眼，技术实再强也，要谦虚回答要灵活；很多候选

4、人会根据自己的认知，自己的经验来下结论，这样很好技术本身没有好坏，要自己随下结论自己掌握多少就回答多少，要说xxx就是这样的，或者xxx是这样的面试模拟DOM事件；校招必原型链通信；跨域，前后页面布局题目假设高度已知，请写出三栏布局，其中左栏，右栏宽度各为300px，中间自适基础部分是要写出五种解决方法oat，absolute，exbox，table（版本），grid（新技术，会让面试官有好印象这种题目看起来简单，但是一定要尽可能多的写出答案才（至少三种才算及格）拔高延伸部分写完之后还要分析各个方法的优缺点，进比较；浮动的兼容性好，但是会脱离文档流，如果处好会导致其他问题绝对定位最快捷，缺点是

5、脱离文档流，会导致后续元素全部脱离文档流，会导致这个方案的可使用性较差ex是移动端最完美的方案，但是ie8以下支持分析如果高度已知，哪种依然可以适用；浮动，绝对定位，ex和table都撑开边的高度，能继续使用，grid内容超出（这都是改变代码的情况下）扩展问题有可能问到浮动的解决，BFC等等知识点每种解决方案的兼容性如何，哪个最实用（要去学习exbox，table和grid的知识页面布局小结：语义化掌握到位；要一div，要使用语义化标签，学会使用section，article等页面布局解深刻；清楚的写出代CSS基础扎实；table，grid，ex等等知识思维灵活且积极上进；gird是最新的技术

6、，如果没有写出来的话体现积极上进，活，知道每个方案的优缺点和对比，方案要多才能体现代码书写规范；缩进，类名等左右固定，中间自适应下固定，上自适应（这些全都要做一遍，要眼高手低3-4 CSS盒模型一面/二题目：谈谈你对CSS盒模型的认 基本概念：标准模型+IE模 标准模型和IE模型的区CSS如何设置这两种模 JS如何获取和设置盒模型对应的宽 实题（根据盒模型解释边距重叠）（拔高题 BFC（边距重叠解决方案前面，第4个问题，获取宽高dom.style.width/height：这种方法只能获得内联的style，（另外还有style式，通过link链入样式）dom.currentStyle.widt

7、h/height：三种方式的都可以，获得的是渲染之后的页面元素的属性但是只有IE支持window.getComputedStyle(dom).width/height：三种都可以，兼容性好 dom.getBoundingClientRect().width/height：计算一个元素的绝对位置，计算一个窗中的绝对位置，以及宽高（即x，y，width，height四个属性）第5个问题父子之间，兄弟之第6个问题：BFC（边距重叠解决方案）块级格式化上下 BFC的基本概念（BFC比IFC常问 BFC的原（就是渲染规则：1，BFC元素的垂直方向会发生重叠；2，BFC的区域会与响；4， 计算BFC高度时

8、，浮动元素也会参与计算 如何创建BFC（1，oat值为none，只要设置浮动，就创建BFC；position值为static和relative就创建BFC；3，display属性inline-block, table-cell, table等等都可以 overow: hidden/auto（为visible即可） BFC的使用场编程演示给元素创建一个父元素，创建一个BFC，就可以解决垂直方向边距重叠父级元素创建BFC，可以解决由于浮动元素导致父级元素高度为0的情况创建方法可以是父级也oat，或者父级overow:hidden/auto3-6 DOM事件一面/二基本概念：DOM事件的级 DOM事

9、件模 DOM事件 描述DOM事件捕获的具体流Event对象的常见应自定义事第1个问题element.onclick = element.addEventListener(click, ()=, false) 第2个问题捕获阶段，目标阶段，冒泡阶段第3个问题描述DOM事件捕获的具体流window-documenthtmlbody document.documentElement = 获取第4个问题第5个问题创建自定义事var eve = new Event(custome); ev.addEventListener(custome,()=)/ 触发自定义事件 也可以使用CustomEvent创建

10、自定义实验，并且可以指定一些参3-8 HTTP协议类一面/二么是管线第1个问题灵活：通过一个http协议就可以完成同数据类型的传输，无连接：连接一次就断掉，会保持连接无状态：一次连接之后，服务端是无法记住客户端的状态的（通过session等手段才能实现第2个问题请求报文：请求，请求头，空，请求请求：http方法，页面地址，http协议，版本（example： GET /home/xxx HTTP/1.1）相应报文：状态，响应头，空，响应状态：（example：HTTP/1.1 200 OK）GET获取资POST 传输资源 PUT 新资源 DELETE 删除资源 HEAD 获取报文首第4个问题：

11、（记住三四个即可对参数的数据类型，GET只接受ASCII字符，而POST没有限 GET参数通过URL传递，POST放在Request body中第5个问题4xx：客户端错5xx：服务端错第6个问题HTTP协议采用“请求-应答”模式，当使用普通模式，即非keep-alive模式时，建立持久连接只有在1.1版本才支持第7个问题管线化是指，将请求和响应都进打包进发送请求1，2，3响应1，2，3管线化机制是通过持久连接完成的，至少1.1版 1.1要求服务支持管线化，但并要求服务端一定能进管线化处，只需要失败即开启管线化很可能会带来大幅度的性能提升，而且并好，因此现代浏览，如Chrome和Firefox

12、是默认关闭管线化的3-9 原型链一面/二 创建对象有几种方 原型，构造函数，对象实，原型 instanceof的原new运算var01=name:var011=newObject(name:构造函数varM=function() = varo2=newvarP=name:varo3=构造函数 么是同源策及限前后端如何通如何创建 跨域通信的几种方限制：是一个源的文档没有权去操作另一个源的文档，包括Cookie, LocalStorage, DOM无法获取， Ajax无法发同源策限制同的源的文档之间进交互前后端如何通信CORS：支持同源，也支持非同源（新的通信协议标准如何创建Ajax：有以下几个要

13、事件的触发顺var xhr = XMLHttpRequest ? new XMLHttpRequest() : vardata=opt.data; var url = opt.url;var type = opt.type.toUpperCase(); var dataArr = ;for(k in dataArr.push(k+= +if(type = GET) url=url+? +xhr.open(type,url.replace(/?$/g,),true);/如果以？结尾，则将问号去掉 if(type = POST) xhr.open(type,url,true);xhr.setReq

14、uestHeader(content-type, application/x-www-form-urlencoded); xhr.onload = function() If(xhr.status = 200 | xhr.status = 304) 304是使用的本地缓/ 206也可以，媒体资源 var res;if(opt.success & opt.success instanceof Function) res = xhr.responseText;if(typeof res = string) Res=JSON.parse(res); opt.success.call(xhr,res)

15、;elseif(opt.error&ope.errorinstanceofFunction) opt.error.cal(xhr, res);跨域通信的几种方式 JSONP的原用script标签的可以同源加载实现的在window全局注册一个函给服务端传递这个函数的名字，同时可以有参服务端返回这个函数，内部填充有数据，就可以拿到数删除全局注册的那个函Hash的原页面A中通过iframe或frame嵌入B窗口目标是A给B发消息拿到B的url地改变其hash在B中接收WebSocket的原varws=newonopen,onmessage,fetch(/some/url, method:加一些配置就可以实现跨域的通信，这可以参考一篇