【突击】快速过一遍上届学长学姐的面经

TimeFleeze

已于 2023-09-08 19:25:15 修改

阅读量70

点赞数 1

文章标签： javascript

于 2023-03-20 01:07:17 首次发布

本文链接：https://blog.csdn.net/Time_Freeze/article/details/129604583

版权

1.CSS兼容问题

1.浏览器版本低于IE10，给图片加链接会产生蓝色边框，所以需要img{border-style:none}
，可以考虑导入Normallize.css
2.添加浏览器前缀：Chrome的-webkit-，火狐的-moz-，ie的-ms-
3.两种态度渐近增强和优雅降级
4.Polyfill通过js方式解决css兼容问题
5.使用PostCss兼容
6.移动端的1px兼容
逻辑像素是css的像素，物理像素是实际的物理像素点，iphone6横向是375=>750，移动端UI设计稿一般都用真实像素，所以对于前端来说要除以2才行，所以设计稿的1px，前端实际需要0.5px，新版浏览器可以设置0.5px，对于旧版浏览器，必须使用transform:scale（0.5）

2.dns劫持和arp攻击

dns劫持：通过攻击dns服务器或者伪造dns服务器的方法，将目标网站的域名解析到一个错误的ip地址，导致用户无法访问目标网站或者恶意要求用户访问指定网站

arp攻击：攻击者给电脑A发一个伪造的arp响应（伪造了B的mac地址），A把这个对应关系存到自己的ARP缓存表里面，从而把数据错误的发给了攻击者（本来要给B的），攻击者对B也做一样操作，这样攻击者就可以控制A和B的流量和信息，还能改变A和B的通信内容

3.TCP粘包和拆包

当一个TCP文件很大的时候，传输会造成阻塞，这个时候需采用拆包的方法
TCP是一个面向流的协议，UDP有消息保护边界，TCP没有，如果实际的pack填不满缓冲区，TCP会把多个pack粘包，如果pack过大，会拆包
– 为了让服务端能够组装pack，需加标识符，一些办法：pack之间添加特殊符号作为辨识/pack设置头部其中告知pack长度/强行给pack填充，使每个pack的长度相等
Netty是一个Java框，可以解决TCP粘包和拆包问题

4.移动端适配问题

屏幕像素密度是指屏幕上每英寸包含的物理像素点个数
把PC的视口强制压缩到移动端确实不太好，可以单独做个移动端专用网站
物理像素和设备独立像素(DIP/DP)，像素比DPR，苹果6像素比就是2
– Viewport适配，其实就是设计图直接按DIP写就完事了
– rem适配，最常见方案，其实就是比例放缩，rem真的万能，rem是相对于根元素的字体大小，任何浏览器的默认字体大小是16px，em是相对于父元素的字体大小，em可能会导致一些乘法嵌套，不好使，所以一般移动端适配都是用rem
– vw和vh
– 高清屏幕适当要缩短物理像素边框，设置0.33px,0.5px这样的边框之类的

5.js异步加载方案

正常情况（同步下）js是顺序执行（下载是按顺序的）
– < script defer > < /script >可以异步加载内部脚本也能加载外部链接的js文件，注意必须得是等DOM树生成之后再执行加载完成的js代码（下载是同时的）
– async 不能加载内部脚本，只能异步加载外部链接的js，在js加载完之后立即执行（下载是同时的）,各个js文件的执行顺序不定
–第三种是，创建一个script标签，其实就是document.createElement(‘script’)，加载完之后使用callback()调用一个函数，相当于在页面上加载了一个script脚本（添加了一个< script >标签）

6.js判断数据类型的三种方法

– typeof，缺点是无法判断对象数组和null，因为返回的都是object
– instanceof，缺点是无法判断基本数据类型，只能判断数据是否是某个对象的实例
– Object.prototype.toString.call()，终极方法，最常用，会返回一个形如"[object XXX]"

7.hosts文件是干什么的

– 相当于一个本地的dns缓存，不用访问远程dns服务器，加快网站打开速度
– 根据这个特性，可以快速架设局域网，还可以屏蔽你不想访问的网站

8.聊一下GET和POST

– GET的本质是从服务器获取指定的资源，无论操作多少次，服务器上的数据都是安全的且每次结果都相同（幂等），因此浏览器可以对GET请求缓存，也可以做到代理上（比如nginx），而且在浏览器中GET请求可以保存为书签，GET请求的参数写在URL里面，只能为ASCLL字符，浏览器对URL长度有限制（不同浏览器不一样，不同服务器也不一样，比如chrome浏览器限制上限为8182字符），http对这个长度没有限制，GET安全性明显相对POST较差，参数会保存在浏览器历史中

– POST本质是根据请求负荷（body）对指定的资源作出处理，服务器的数据不安全，不幂等，所以浏览器一般不缓存POST，也不能做书签， body的数据类型和长度都不会受到限制，参数不会保存在浏览器历史中

9.js的继承

– es5的原型继承+构造函数继承=>组合继承方式，用原型继承需注意指回构造函数constructor，把原型链尽可能想清楚（—|—结构，自行脑补）！很简单其实，new A()既能让B的prototype指向实例a，又避免了同地址更改问题，完美; 而构造函数继承其实就是call，相当于让b使用了一次A构造函数，成功继承了A的属性，这就是es5比较完备的继承方案

– es6里面，继承有extends关键字，子类的constructor里面必须用super（）调用父类构造函数，子类没有自己的this对象，而是创建了父类的实例对象this，再用子类自己的构造函数修改

因此区别：es5继承实质是先创造子类的实例对象，再把父类的属性和方法添加到this上；es6则是先创建了父类的实例对象this，再用子类自己的构造函数修改

10.React的Fiber

React15掉帧的根本原因：传统的递归调用栈罢了，最大的问题就是Reconcile（协调，其实就是遍历diff）过程不能中断，导致浏览器必须等待React处理完成才行，容易导致页面阻塞，用户体验不好

React16开始引进Fiber，所有元素都视为Fiber，用链表的形式指出了每个Fiber的父节点子节点兄弟节点，Reconcile可中断，在浏览器的一帧内（比如16ms），会给Fiber最后剩下比如5ms的时间分片（前面的时间是处理用户输入/js/raf/布局/绘制），时间分片需向浏览器申请（requestIdlecallback，React用Messagechannel模拟实现），在这个小分片内，不断执行更新队列的任务（最先执行被中断的任务），直到时间分片用完，重新向浏览器申请时间分片，注意Commit（提交过程）不可中断

11.说一下React的Diff

– React用三种策略将diff复杂度从O(n^3)降到O(n)
– Tree Diff：两棵树对比时只会比同一层的节点，不考虑跨层变化
– Component Diff：对比两个组件时，判断类型是否相同，不相同的话直接判断为Dirty Component，替换整个组件下的所有子节点
– Element Diff：对同一级的叶子子节点比较，有一个lastindex=0，先遍历新的集合，对新集合的每个元素，在老集合中找到相同的key（找不到则说明是添加新元素），看看index和lastindex的比较，从而判断是否需要移动，注意lastindex要不断更新，最后再遍历一遍老集合，看看有没有要删掉的，有的话就删掉，至此整个Diff过程结束，因此，尽量减少把最后一个节点移动到列表头部的操作，会加大Diff开销

12.说下webpack

– webpack是一个打包模块化js的工具，负责代码转换，分割，压缩，校验，自动发布等
– 构建过程：初始化compiler，从entry出发，调用loader和模块进行翻译，递归本步骤直到所有模块都被处理，将这些modules组装成不同chunk加入到output中
– 常见loader：babel-loader,sass-loader,file-loader,css-loader,eslint-loader,style-loader…
– Babel过程：解析es6字符串为es6 AST(babel-parser)，就是词法分析和语法分析=>将ES6 AST转换为ES5 AST(babel-traverse)=>生成ES5字符串(babel-generator)
– webpack打包速度优化：happypack将loader变为多线程加速编译/externals配置提取常用库/多入口情况下使用SpiltChunkPlugin提取公共代码…
– webpack优化前端性能：用uglifyjs-webpack-plugin和webpack-parrel-uglify-plugin压缩js/用optimize-css-assets-webpack-plugin压缩css/还可以用CDN加速，将引用津泰资源的路径改为CDN上对应的路径/SpiltChunkPlugin提取公共代码，利用浏览器缓存/代码切割-路由懒加载/TreeShaking删除不需要的死代码(配置optimize-minimize实现)