网络
-
http和https，TSL四次握手，对称加密，非对称加密，证书，签名
-
Tcp连接，三次握手，四次挥手
-
跨域解决方案：Window.postMessage(dom查询)，document.domain（子域父域），代理，CROS（跨资源共享），JSONP
-
浏览器的dns缓存>操作系统dns缓存> hosts文件> dns服务器的zone文件>dns服务器缓存>根dns服务器>com.服务器>qq.com.服务器(得出结果)
-
常见的端口以及对应的服务
- 21 文件传输FTP
- 25 邮件传输SMTP
- 53 DNS域名服务器
- 80 HTTP传输
- 443 HTTPS传输
-
http1.0/1.1/2.0的区别。
http1.0 exprires last-modified 连接无法复用 http1.1 etag cache-control，支持长连接（connection） 支持文件断点续传 http2.0 多路复用，二进制分帧， 首部压缩，server push 传输速度更快了
-
tcp/ip、http。
-
7层模型
（物理层），数据链路层，网络层，传输层，（会话层），（表示层），应用层
-
网络四元组/五元组/七元组
四元组：源IP地址、目的IP地址、源端口、目的端口
五元组：源IP地址、目的IP地址、协议号、源端口、目的端口
七元组：源IP地址、目的IP地址、协议号、源端口、目的端口，服务类型以及接口索引
-
TCP拥塞控制：（ 1）慢启动、拥塞避免（ 2 ）快重传、快恢复
-
超时重传，流量控制
-
应对SYN Flood问题：SYN Cookie
-
session ticket 用于SSL握手优化
操作系统
- 操作系统：进程与线程的区别，句柄等
- 进程是资源分配的最小单位，线程是CPU调度的最小单位
- 一个程序至少有一个进程，一个进程至少有一个线程
- 进程间不能共享资源。线程间可以共享数据
- 进程间切换代价大，线程间切换代价小
- 进程拥有资源多，线程拥有资源少。多个线程共享进程的资源
-
进程间通信 管道（半双工），消息队列，共享存储，信号量，套接字，信号
-
磁盘寻道算法：
1.FIFO：先来先服务算法；
2.SSTF： 最短寻道时间算法；
3.SCAN：电梯调度算法；(这样命名很形象)
4.CSCAN： 循环扫描算法
5.FSCAN：分步电梯调度算法(分两个队列)
Javascript
-
node
- express和koa的中间件原理
-
微信小程序JS Bridge
-
六种原型：Boolean Undefined String Symbol Null Number。（一种object型，六中基本类型，一种复杂类型）
-
确定一个对象的类型
JavaScript有五种方法可以确定一个值到底是什么类型，分别是typeof运算符，constructor法，instanceof运算符，Object.prototype.toString方法以及Array.isArray法.
-
定时器函数：setInterval的一下运行两次。
-
箭头函数和普通函数的差别：
- 箭头函数不绑定this
- 无argument，rest代替
- 不能使用new操作符
- 没有原型属性
- 不能简单返回对象字面量
-
优先级 （）和 . 大于 new
-
正则表达式
-
事件捕获与事件冒泡（addEventListener的第三个参数），事件委托
-
原型：原型是一个对象，其他对象可以通过它实现继承
-
实例方法，原型方法，静态方法
- 寄生组合继承与Class继承
- 原型链：
-
-
===与==的区别，==的源码 -
for in 与for of（Iterator迭代器）的区别
-
实体字符
-
webpack原理：先合并命令行参数和配置文件参数，然后根据参数从入口文件开始编译，在编译时可以通过对module的配置，对不同文件进行编译输出，不同的loader是链式调用，即以前一个loader的输出为输入。在编译的过程中会触发一系列的事件，加载的插件通过监听这些事件对编译结果进行修改。编译过程中会形成引用关系的树，然后对各个模块形成chunk，最后打包到一个文件中去，然后输出文件
-
babel（将Es6转为Es5）原理：通过对语法分析后产生的抽象语法树进行结构替换
-
手写Promise的
.all，.race，any，allSettled -
垃圾回收：引用计数，标记清除，分代回收
-
正向代理隐藏真实客户端，反向代理隐藏真实服务端
-
commonJs 和 esModule 的区别
commonJs是被加载的时候运行，esModule是编译的时候运行
commonJs输出的是值的浅拷贝，esModule输出值的引用
commentJs具有缓存。在第一次被加载时，会完整运行整个文件并输出一个对象，拷贝（浅拷贝）在内存中。下次加载文件时，直接从内存中取值
CSS
- 盒子模型：标准盒模型和替代盒模型（IE）
- BFC，应用：清除浮动，防止边距折叠，两栏布局
- float不是完全脱离文档流，float只是脱离了文档流的dom空间但是还占据着文字空间。
- 移动端适配，dpr
- css引擎解析过程
- 相邻的两个inline-block节点为什么会出现间隔：inline-block元素之间出现空格的原因： html 元素换行 ，可以通过去掉换行或者将父元素的font-size设置为0
- 浏览器 CSS 匹配核心算法的规则是以
从右向左方式匹配节点的 - 选择器优先级：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
- Css实现一个三角形
- grid布局，flex布局
- css继承
HTML
-
行内元素，块级元素
- 块属性标签的宽度假如不做设置，会直接默认为父元素宽度的100%
- p标签中不能嵌套div标签
-
替换元素（input，img，iframe，video，canvas）：替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
浏览器：
-
V8引擎：先通过parser将代码词法分析，语法分析，转化为抽象语法树。然后使用ignition解释器对代码编译成字节码（bytecode），然后逐句解释成二进制代码并执行，在解释执行的过程中，标记重复执行的热点代码，将标记的代码通过Turbofan引擎进行编译生成效率更高二进制代码，再次运行到这个函数时便只执行高效代码而不再解释执行字节码。
JIT（即时编译）
-
触发重绘和重排（回流）：
添加、删除、更新 DOM 节点 通过 display: none 隐藏一个 DOM 节点-触发重排和重绘 通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化 移动或者给页面中的 DOM 节点添加动画 添加一个样式表，调整样式属性 用户行为，例如调整窗口大小，改变字号，或者滚动。
-
coockie和session的区别
-
event loop，调用栈，任务队列，微任务队列
macrotasks:
setTimeout, setInterval, setImmediate, I/O, UI renderingmicrotasks:process.nextTick, Promise, MutationObserver -
Bom对象：
Navagator：提供有关浏览器的信息
Window：Window对象处于对象层次的最顶层，它提供了处理Navagator窗口的方法和属性
Location：提供了与当前打开的URL一起工作的方法和属性，是一个静态的对象
History：提供了与历史清单有关的信息
Document：包含与文档元素一起工作的对象，它将这些元素封装起来供编程人员使用
-
可获得焦点的元素：
- window
- 链接被点击或键盘操作
- 表单空间被点击或键盘操作
- 设置
tabindex属性的元素被点击或键盘操作
-
浏览器缓存机制：浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的，浏览器缓存有 HTML Meta 标签控制与 HTTP 头信息控制两种。头信息控制关键字段：Expires 和 Cache-Control
- 强制缓存
- 协商缓存
-
DOMContentLoaded（首屏元素加载完，但是图片等资源未加载）
load（所有资源加载完成）
-
白屏时间与首屏时间
白屏时间 = 地址栏输入网址后回车 - 浏览器出现第一个元素 首屏时间 = 地址栏输入网址后回车 - 浏览器第一屏渲染完成
测试方法：浏览器开发者工具，首屏模块标签标记法，统计首屏内加载最慢的图片/iframe，Performance API
VUE
-
双向绑定
-
computed与watch还有filter的区别（computed是一个依赖多个，watch是多个依赖一个）
-
v-if和v-for避免同时使用
-
Vue3 用 Proxy 代替 Object.defineProperty
Object.defineProperty 是对对象属性的劫持 Proxy 是对整个对象劫持
Object.defineProperty 无法监听新增和删除 Object.defineProperty 无法监听数组部分方法需要重写 Object.defineProperty 性能不好要对深层对象劫持要一次性递归
Proxy 能正确监听数组方法 Proxy 能正确监听对象新增删除属性 Proxy 只在 getter 时才进行对象下一层属性的劫持 性能优化 Proxy 兼容性不好
React
- fiber机制：使用requestIdleCallback进行dom的增量更新（window.requestIdleCallback()会在浏览器空闲时期依次调用函数），
Fiber实现了自己的组件调用栈，它以链表的形式遍历组件树，可以灵活的暂停、继续和丢弃执行的任务。（requestIdleCallback会让一个低优先级的任务在空闲期被调用，而requestAnimationFrame会让一个高优先级的任务在下一个栈帧被调用，从而保证了主线程按照优先级执行Fiber单元。）
其他
-
前端安全问题：XSS（跨站脚本攻击，dom型，反射型，存储型），CSRF（跨站请求伪造）
-
hyberid混合开发，多端开发
-
前端优化的三个维度：静态资源优化、接口访问优化、页面渲染速度优化。
常见的方式：减少 HTTP 请求数，减少 DNS 查询，使用 CDN，避免重定向，图片懒加载，减少 DOM 元素数量，减少 DOM 操作，使用外部 JavaScript 和 CSS，压缩 JavaScript 、 CSS 、字体、图片等，优化 CSS Sprite，使用 iconfont，字体裁剪，多域名分发划分内容到不同域名，尽量减少 iframe 使用，避免图片 src 为空，把样式表放在 中，把脚本放在页面底部
-
常用的存储：
浏览器端：cookie，WebStorage(localStorage、sessionStorage)，userData，indexedDB
服务器端：session
-
iframe可用在以下几个场景中：
1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。 2：ajax上传文件。 3：加载别的网站内容，例如google广告，网站流量分析。
4： 在上传图片时，不用flash实现无刷新。
5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。
-
编译原理过程：词法分析 -> 语法分析（语法树） -> 语义分析 -> 中间代码生成 -> 代码优化 -> 目标代码生成 -> 目标程序
-
数据库三大范式：1）不可分，2）有主键，其他键依赖主键，3）非主键字段不相互依赖，不传递依赖
算法题：
-
动态规划，回溯，单调栈，双指针（滑动窗口）
-
深度优先搜索，广度优先搜索
深度优先搜索基于栈实现，顾名思义即从一条路径先走，走到底再回来走其他的路。从树的根节点出发，比较根节点，不对则弹出，并且把根节点的所有领接节点压入栈，然后比较栈顶的节点，如果不对，弹出，再将这个节点的所有领接节点压入，如此往复。
广度优先基于队列实现。
-
大数相加
-
数组去重
-
各种排序算法：各种排序的特点
-
快速排序：
var sortArray = function(nums) { // 快速排序 function quickSort(start, end, arr) { if (start < end) { let mid = sort(start, end, arr); // 注意，一定要是 start mid , mid+1 end 这种组合 // 否则当首位最大的时候(mid返回0)，将会无限循环 quickSort(start, mid, arr); quickSort(mid+1, end, arr); } return arr; } function sort(start, end, arr) { // 取基准值 let base = arr[start]; let low = start; let high = end; while(low !== high) { // 从后往前，寻找比基准值小的值，赋给low位置(也就是取base值的位置) while(arr[high] >= base && high > low) { high--; } arr[low] = arr[high]; // 从前往后，寻找比基准值大的值，赋给high位置 while(arr[low] <= base && high > low) { low++; } arr[high] = arr[low]; } arr[low] = base; return low; } return quickSort(0, nums.length - 1, nums); }; -
手写节流函数
function throttle(callback,interval=200){ let tag=true; return function (){ let that=this; if(!tag) return; tag=false; setTimeout(()=>{ callback.apply(that,arguments); tag=true; },interval); }; } -
手写防抖函数
fuction debounce(callback,delay){ let timer=null; return fuction(){ let that=this; clearTimeout(timer); timer=setTimeout(()=>{ callback.apply(that,arguments) },delay) } } -
vue diff算法：
<body> <div id="app"> <input type="text" id="txt"> <p id="show"></p> </div> </body> <script type="text/javascript"> let obj={} Object.defineProperty(obj,'txt',{ get(){ return obj; }, set(newValue){ document.getElementById('txt').value=newValue; document.getElementById('show').innerHtml=newValue; } }) document.addEventListerner('keyup',fuction(e){ obj.txt=e.target.value; }) </script>
DOM 操作常见API
createDocumentFragment()
createElement()
createTextNode()
//添加 移除 替换 插入
appendChild()
removeChild()
replaceChild()
insertBefore()
//查找
getElementsByTagName()
getElementsByName()
getElementsByClassName()
getElementById()
querySelector()
querySelectorAll()
JS设置css样式的几种方式
/* 1.直接设置style属性 */
element.style.height = '100px';
/* 2.直接设置属性 */
element.setAttribute('height', '100px');
/* 3.使用setAttribute设置style属性 */
element.setAttribute('style', 'height: 100px !important');
/* 4.使用setProperty设置属性，通过第三个参数设置important */
element.style.setProperty('height', '300px', 'important');
/* 5.设置cssText */
element.style.cssText += 'height: 100px !important';
这里当然有主观偏好的成分，但如果这种区别会导致开发效率的提升，那么它就有客观的价值存在。
技术开放问题
- 说说你对前端架构的认识，如何设计出一个架构方案？
- 了解过前端当前的发展趋势吗？
- 了解过云计算吗？能不能讲一讲云计算的发展方向和前景？
- 有没有写过多线程的程序
- 说一说你对React，Vue这类框架的看法
HR面开放问题：（自信，简洁）
-
自我介绍一下？
-
请你分享一下最有成就感的经历，在这个过程中具体经历了什么？
-
目前为止，你坚持做的最久的事情是什么？
-
请你分享一次最让你印象深刻的收到批评的时间？在这个过程中具体经历了什么？
-
请分享一次团队任务陷入僵局或遇到困难的情况，当时你是如何扭转局面、推动进展的？
-
请举一个你周边的觉得最成功的人，TA在哪些方面的表现和行为让你觉得认可？
-
介绍一下实习期间做的项目？有什么亮点吗？
-
老家是哪里的？
-
为什么选择阿里？而不是字节？
-
最崩溃的事情是什么
-
最尴尬的事情是什么
-
是否容易发怒（举一个发怒的事件）
-
成为前端的特质是什么
-
未来三年的规划
-
家庭氛围怎么样
-
你是什么星座
-
你对自己的未来有什么规划？
-
你在大学做课题或者项目时遇到过最棘手的问题是什么？你是如何解决的？
-
你平时是如何学习新知识的？
-
你得过哪些奖？对你来说最大的收获是什么？
-
你实习过程中有什么收获？
-
你最近在看什么书？
-
为什么选择前端？
-
经常写代码吗？是否喜欢写代码？
