2020-前端⼀年经验⾯试题整理
1,canvas (可忽略)
<canvas id="tes" h w ></canvas>
function draw(){
var canvas =ElementById( tes)
}
fillrect 创建矩形，参数分别是x,y  width,height
fillStyle ：颜⾊  strokeRect绘制边框;
beginPath 绘制路径,
绘制线段  moveTo 1起点(x,y)
lineTo  终点  lineWidth  宽度
2，原型链(实现继承)
3，深浅拷贝
浅拷贝：使⽤for key in 语法糖assign，只实现了基本数据类型的拷贝，引⽤类型只是对内存地址的引⽤, 修改后会影响到被拷贝的数据深拷贝：实现对数据和地址的拷贝，相当于重新开辟内存空间存储数据;
法1：递归实现,
法2：现将对象通过json.stringfy转化为字符串，赋值给新变量，再将该新变量通过json.parse转为对象;
4，闭包
由⼀个封闭在函数内部的函数和他所使⽤的变量构成;
能让函数外界访问得到函数内部的数据
作⽤，在循环任务中记录每次循环的数据
this指向
普通函数:window
构造函数: 实例对象
对象⽅法: 所属对象
事件绑定：事件对象
定时器:window
⽴即执⾏函数:window
匿名函数:window
箭头函数：上⼀级函数作⽤域中的this
5,ajax/axios
分四步
1，创建xhr实例 new
2,xhr.open(url,method)
3，判断get/post
post: 设置请求头字段Content-Type xhr.setHeaders({
‘Content-Type’: ‘application/x-www-form-urlencoded’,
})
4,xhr.send
状态码:0,1,2,3,4
// 状态0, 创建了xhr
// 状态1, xhr 调⽤了open⽅法
// 状态2, xhr 调⽤send⽅法 发送数据了
/
/ 状态3, xhr 数据接收中，但是数据还没有解析
// 状态4, xhr 数据接收完成并解析完毕可以直接使⽤
特殊点:axios的get请求请求体在params:{}⾥⾯;post请求体直接放在{}⾥⾯
promese
6，什么是mvvm?
mvc设计模式的改进版，将view的状态和⾏为抽象化，将视图和逻辑分开, ⼆者的联系由viewmodel控制
优点：低耦合，具有重⽤性，独⽴开发
7，浏览器缓存
缓存机制:
1，强制缓存，返回时携带⼀个有效期cache-control: max-age=60 (单位为秒），和⼀个md5指纹;
2，协商缓存，协商缓存时看状态码,，如果资源没有变化则返回304，如果资源发⽣了变化则返回200及新的资源内容3，按下ctrl+f5等于在开发者⼯具下勾选禁⽤缓存,
4,f5刷新时，如果在有效期内，则使⽤缓存,
问: f5与ctrl+f5的区分? 200和304的区分？200和304类型的请求是否达到了服务器？
1. 强制缓存
1. 第⼀次请求资源，服务器返回资源，此时返回的状态码是200，并且设置了这份资源的缓存有效期，同时返回了这个资源的最后
⼀次修改时间和这个资源的etag值（md5指纹）
2. 在缓存有效期内，如果这个页⾯页签没有关闭，刷新页⾯，此时资源的状态码还是200，但是是从内存缓存中加载的；如果这个
页⾯页签关闭后⼜打开页⾯，此时资源的状态码还是200，但是是从磁盘缓存中加载的；
3. 缓存有效期的定义
1. http1.1版本通过cache-control头来定义
1. cache-control: public 表⽰⽹络中的任何节点都可以缓存这份资源
2. cache-control: max-age=60 (单位为秒）表⽰这份资源的有效时间段。从服务器返回那⼀刻的服务器时间 + 这个
时间段，这个时间内是有效的。到了过期的时间点缓存就⽆效。max-age的值为0，说明缓存⽴即过期
3. cache-control: no-store 表⽰⽹络中的任何节点都不可以缓存这份资源
4. cache-control: no-cache 表⽰不使⽤强制缓存的内容，看协商缓存的结果
2. http1.0版本 Param: no-cache不使⽤强制缓存，expires定义缓存的有效期，它的值是⼀个过期的时间点，这种⽅式可以
通过修改客户端的时间让资源⼀直处于不过期的状态，所以http1.1对过期时间的字段定义做了修改。
2. 协商缓存：在强制缓存⽆效时，⾛协商缓存的结果，如果资源没有变化则返回304，如果资源发⽣了变化则返回200及新的资源内
容。
1. 机制1：客户端发起请求时带上if-modified-since头，这个请求头字段的值是上次服务器返回该资源时返回的⽂件最后修改时
间，服务器收到这个时间，再和磁盘上这个⽂件的修改时间进⾏⽐对，如果⼆者⼀致说明资源在 上次返回给客户端后没有修改过，此时返回给客户端304状态码，告诉客户端继续使⽤缓存⽂件即可。如果⽂件有变化，那就返回200和新的⽂件内容。
2. 上述的时间⽐对机制有⼀定的问题：如果我们仅仅打开⽂件，按下保存关闭⽂件，⽂件的修改时间也会发⽣变化，那么在时间⽐
对的机制下就会返回200和⽂件内容
3. 机制2：客户端发起请求时带上if-none-match头，这个请求头字段的值是上次服务器返回该资源时返回的etag，服务器收到这
个值，再对磁盘上这个⽂件进⾏md5计算得到⼀个etag值，⼆者进⾏⽐对，如果⼆者⼀致说明资源在 上次返回给客户端后没有修改过，此时返回给客户端304状态码，告诉客户端继续使⽤缓存⽂件即可。如果⽂件有变化，那就返回200和新的⽂件内容。
3. 按下ctrl+f5等于在开发者⼯具下勾选禁⽤缓存，发送的请求头上cache-control这⼀项的内容会被置为no-cahce不使⽤缓存内容，去
服务器获取资源。此时不发送if-modified-since和if-none-matched请求头，所以⽆法判定是否⾛304，直接返回200。
4. 按下f5刷新时，如果在缓存有效期，则使⽤缓存即可；否则会发送if-modified-since和if-none-matched请求头，服务器经过判定后返回
304或者200
8,http协议和https协议
http
http协议是超⽂本传输协议，最初的设计⽬的是为了提供⼀种发布和接收html页⾯的⽅法;http协议是以明⽂的⽅式传递数据的，如果传输报⽂被截取，就能获取其中信息，因此存在安全问题;
使⽤80端⼝
https
https可以说是安全版本的http协议，它的安全基础来⾃于ssl协议,ssl协议位于tcp协议和各种应⽤协议之间；主要分为两层,⼀层是记录协议，建⽴在tcp协议之上，主要负责为⾼层协议提供压缩，封装，加密等功能的⽀持;⼀层为握⼿协议，主要是在通信双⽅真实数据传输之前，对双⽅进⾏⾝份认证，协商加密算法，交换加密秘钥等
使⽤443端⼝
9移动端兼容性
1. 点击穿透与点击延迟
点击延迟：在iphone4开始判断⽹页上⽤户的点击⾏为是双击还是单击，判定的依据在⽤户点击后，300ms内没有再次认定为单击，如果在这个延迟期间有再次点击认定为双击(双击触发页⾯缩放事件)，调⽤的是dbclick。
解决:
click事件的触发过程：ontouchstart ontouchend onclick。如果不使⽤现成的库，把事件处理函数写在ontouchstart上；如果使⽤现成的库，可以使⽤zepto或者使⽤专门解决该问题的库fastclick。
点击穿透：因为点击事件有延迟触发，所以如果是a链接，跳转到下个页⾯时，恰好下个页⾯该位置的元素也有点击事件或者链接地址，此时点击⾏为触发到下个页⾯的该元素上，形成点击穿透。解决点击穿透问题:
touched事件出发后阻⽌默认⾏为；或者直接禁⽌页⾯缩放;
[外链图⽚转存失败，源站可能有防盗链机制，建议将图⽚保存下来直接上传(img-6gejqtgo-1604567252109)(C:\Users\⽼范\AppData\Roaming\Typora\typora-user-images\image-20201102000130149.png)]
2. 移动端键盘遮挡问题
当页⾯上有输⼊框时，点击输⼊框弹起软键盘，经常出现的问题的是软键盘遮盖输⼊框元素甚⾄遮盖到输⼊框之上的元素。
没有完全能解决该问题的技术⼿段，所以解决⽅案是在产品设计阶段进⾏
1. 输⼊框的位置不出现在页⾯的下半部分
2. 输⼊框在新开页⾯进⾏输⼊，确认后返回
3. iOS下fixed定位元素在键盘弹起时位置异常
使⽤position:absolute来模拟实现fixed的效果
ios4下不⽀持position:fixed
解决⽅案： 可⽤iScroll插件解决这个问题
4. 移动的区域滚动问题
1. android下没有弹性效果，
2. 使⽤iScroll (vue中有⼀个基于iScroll的better-scroll库)等库来实现弹性滚动（ios使⽤-webkit-overflow-scrolling: touch具有弹性
效果)
3. android
4.0版本以下对⾮body元素设置overflow:scroll设置滚动条⽆效css最新
5. 移动端在⼀些⾮可点击的元素上点击onclick不能触发
解决⽅法：为其增加css设置cursor:pointer属性
6.在ios和andriod中,audio元素和video元素在⽆法⾃动播放
应对⽅案：触屏即播
$('html').one('touchstart',function(){
audio.play()
})
10前端优化⽅案:
1，使⽤⾸屏优化，将⾸屏css⽂件放在html内部内联，加快css的构建
2，将静态资源放在csn上⾯
3，将⼩图⽚做成雪碧图
4，将静态资源使⽤gzip压缩;
5，对静态资源开启强(长时间)缓存
6，对图⽚进⾏base64转换写到css⽂件内部
7，数据可以被缓存时尽量写到本地存储，减少请求次数
8，图⽚懒加载，路由懒加载
9，减少引起页⾯重绘和重排的dom操作
10，预加载，在⼀个页⾯加载完毕后，考虑到⽤户会⼤概率会进⼊下⼀页，那么提前把下个页⾯的资源加载⼀下
解决vuex数据刷新消失的问题:
办法⼀：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）
办法⼆：在页⾯刷新的时候再次请求远程数据，使之动态更新vuex数据
11，如何使⽤ajax做缓存，如何不缓存?
ajax⾃动缓存;
解决数据刷新后,ajax还只是从缓存中拿数据最有效的办法是禁⽌页⾯缓存，有以下⼏种处理⽅法：
1).在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);
2).在服务端加 header(“Cache-Control: no-cache, must-revalidate”);
3).在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“If-Modified-Since”,”0″);
12，浏览器中输⼊url后到出现页⾯中间的过程:
1. 解析url中域名到ip（⽐如查www.baidu这个域名）
1. 先查看浏览器是否有解析过该域名，是否还有它的缓存，浏览器的缓存时间2～10分钟左右，具体看dns解析⽣效的时间，到
有缓存的ip则返回，没有则进⾏下⼀步
2. 浏览器向系统发起查询，系统向配置的dns服务器查询，如果到则返回，如果没有进⾏下⼀步，下⾯就是dns服务器的接⼒
3. ⾸先向根dns服务器去查询（全球dns根服务器只有13台【1台在⽇本1台在澳⼤利亚2台在欧洲9台在
美国】，还有其他镜
像），根服务器会返回com所在的dns服务器的地址（这种顶级域名所在的dns解析服务器称为顶级dns解析服务器）
4. 再向com所在的顶级dns解析服务器发起查询，会返baidu所在的dns服务器的地址
5. 再向baidu所在的dns服务器发起查询，查询到www.baidu的服务器ip地址返回，查不到则报错说明域名解析有问题
或者域名过期等
2. 到ip，开始进⾏三次握⼿，客户端和服务器建⽴通信连接
3. 连接建⽴后，客户端向服务器发起查询请求
4. 服务器内部处理，返回⽹页字符串htmlstring (⽹页的状态：init - loading - interactive - complete)
5. 浏览器收到htmlstring，开始进⾏解析构建dom树
1. 从html标签开始解析构建dom树
2. 遇见link引⼊的css资源的话，新起线程去加载css并构建cssom，css不会阻塞dom树的构建
3. 遇见script引⼊的js资源，阻⽌dom树的解析构建，去加载js，加载完成后再继续dom树的解析构建，所以需要把js放在body底
部
1. 如果script引⼊js时声明了defer属性，表⽰这个资源延迟执⾏，不阻塞dom树的解析构建，defer声明的js会在
DOMContentLoaded执⾏前执⾏。如果多个声明defer属性的js，他们是按照声明的顺序来执⾏
2. 如果script引⼊js时声明了async属性，表⽰这个资源异步执⾏，不阻塞dom树的解析构建，async声明的js会在onLoad
执⾏前执⾏。如果多个声明async属性的js，他们不按照声明的顺序来执⾏
4. 当dom属性解析构建完成后，cssom也构建完成了，合并⽣成渲染树(render Tree)，此时浏览器开始描述这些元素的属性
5. 根据这些元素的属性⽣成渲染层或者合成层，合成层是⼀个独⽴的层级，利⽤这个特性来优化渲染
6. 渲染层合成层⽣成完毕后，浏览器呈现引擎去调⽤底层的显卡，来绘制页⾯内容，显⽰到屏幕上
三次握⼿:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。