前端面试
2020-08-28 22:54:49 0 举报
AI智能生成
2019前端面经
作者其他创作
大纲/内容
浏览器的渲染原理
请求资源:将请求内容交由html解析器进行解析,生成dom树
渲染:根据dom树建立renderobject树
建立renderLayer树及虚拟绘制上下文
绘制:
合成
计算机网络
TCP/IP
三次握手
过程:客户端发送SYN报文,服务端响应SYN+ACK报文,客户端发送ACK报文
四次挥手
过程:客户端发送FIN报文,此时服务器可以发送ACK报文给客户端,但客户端只能响应;服务器端在数据发送完毕后发送FIN+ACK报文;客户端发送ACK报文,此时连接断开
TCP和UDP的区别
TCP特点
面向连接
首部字节长度为20字节
面向字节流,数据可以分割
支持流量控制和拥塞控制
提供可靠数据传输
UDP特点
无连接,具有较小的延迟和协议开销
首部字节长度为8字节
面向报文,不支持报文分割
DNS解析
根域名服务器地址不变,访问根域名服务器得到各顶级域名服务器的NS记录和A记录,之后依次访问各个顶级域名服务器,得到次级域名服务器的NS和A,直到访问到指定主机
https工作过程
客户端发起请求
服务器向客户端发送证书
客户端解析证书,生成随机数
将随机数加密传送到服务器
服务器用随机数加密传送的消息内容
https与http的区别
https加密传输,http明文传输
https提供身份验证
https端口是43,http为80
设计架构
resetful api
数据结构
10大排序算法
冒泡
简单选择排序
快速排序
基数排序
...
算法优化
查找
顺序查找
折半查找
CSS
新特性:box-shadow、gradient、transform/animation
可以继承的属性
行内元素
text-direction、line-height、white-space、letter-spacing、word-spacing、font-size、font-family、color、text-transform
列表元素
list-style、list-style-type、list-style-position、list-style-image
终端块级元素
text-indent、text-align
选择器的优先级
!important>内联样式>ID>class|伪类|属性>标签|伪元素>继承>通配符
BFC
定义:指页面上的一块渲染区域,规定该元素如何布局,且对其他元素产生的影响
产生BFC的几种方式
BFC的常用规则
常见的应用: ul li中的垂直外边距合并
常见的布局方式
定位
其中,position:fixed/absolute脱离文档流
flex
设置在容器上的属性
设置在容器成员上的属性
grid
父元素
子元素
浮动
浮动会脱离文档流,块级元素认为他不存在;行内元素/文字会认为它存在,给浮动元素留出位置。
常见的布局
等高布局
水平居中
垂直居中
水平-垂直居中
两列/三列布局
注意的点
width: auto和width: 100%的区别
less
sass
嵌套
选择器嵌套
属性嵌套
sassScript
变量
运算
混合器
继承
高级功能
if
while/for/each
function()
详细地址
web安全
sql攻击
防御:不能使用sql拼接,使用占位符注入;严格验证用户输入,对单引号和双引号进行转换
xss
定义:利用客户端对服务器身份的有效性。
防御:对用户输入进行严格验证,对标签进行转换(过滤特殊字符);在cookie中避免存入重要的信息;服务端指定数据类型,避免作为html解析
csrf
定义:利用服务器对客户端身份的有效性
防御:服务器端对referer进行验证、每次请求都使用验证码
模块管理
AMD
cmd
commonjs
ES6 import/export
webpack
ES6
module
promise
Promise.all: 当所有promise实例变为resolve时,会将每个实例的返回值作为数组传递给resolve函数作为参数
Promise.race
Promise.resolve
Promise.reject
Peomise.reject与promise.resolve的区别:resolve会将定义的参数作为后续resolve函数的参数,而reject会将Promise.reject的参数作为后续reject的参数
generator函数
概念:遍历器生成函数,状态机
yield表达式:
yield *表达式
next(): 便利每一个状态,且next的参数作为上一个yield表达式的返回值
async&&await
async函数是generator函数的语法糖
错误处理
箭头函数
this指向
工具
webpack
babel
HTTP
状态码
1**
100 表示服务器接收客户端请求,允许客户端继续发送请求
101 表示进行协议升级
2**
200 请求成功
3**
301 永久重定向
302 临时重定向
303 临时重定向,仅限于get请求
304 服务器没有返回资源,浏览器读取本地资源即可。
4**
400 bad request--客户端请求出错
401 需要进行客户端验证
403 用户权限不够,禁止访问,请求资源被服务器拒绝
404 请求的资源在服务器上找不到
5**
502 bad gateway
503 服务器负载太多或者正在维护,不能完成响应
500 服务器端发生错误
请求方法
GET
POST
HTTP缓存
强制缓存
cache-control:max-age
expires
协商缓存(会向服务器验证资源的有效性)
etag/if-non-match
last-modified/last-modified-since
http1.0和http1.1的区别
可扩展性
增加upgrade头域
增加options方法
缓存
增加Vary头域,用于内容协商
增加etag,if-none-match进行协商缓存
增加cache-control,利用max-age指定相对时间,当资源改变时,服务器重新激活stale对象
带宽优化
增加range头域,指明请求内容部分
允许发送100请求,判断是否有权限进行操作
长连接
host头域
内容协商
cookie
session
HTML5/HTML
语义化:header、footer、slide、nav、artical、section
元素
常见的块级元素:P、div、table、form、ul、li、ol
常见的内联元素:img、span、label、input、textarea、a
可替换元素(可以设置width,height,padding-top,margin-top)
img,textarea
不可替换元素(可以不设置width,height,margin-top,可以设置padding-top)
span,label,a
JS
函数节流、函数防抖
内存管理
策略
标记清除
引用计数
内存管理
内存泄漏
全局变量
避免全局变量的方式: 1.采用命名空间 2.采用模块加强的方式
IE中BOM、DOM采用的是C++实现的COM,com采用的是引用计数的内存回收机制,因此会存在循环引用的问题
DOM注册事件时,采用闭包的方案
IE中,采用string.length
注册事件后,删除元素
优点: 内存会影响到执行栈及一个线程中同时执行的语句数量,因此管理内存能带来性能上的提升
数据类型
基本类型
undefined
null
string
字符方法
charAt()
charCodeAt()
操作方法
concat()
substring(),不包含末尾元素
slice()
substr()
位置方法
indexOf()
lastIndexOf()
大小写转换
toLowerCase()
toUpperCase()
字符串匹配方法
match(),返回值是数组,参数为正则表达式或者是regexp对象
search(),返回第一个匹配项的索引
replace()
第二个参数是函数时,第一个参数是模式的匹配项,模式匹配项的位置,原始字符串
split
比较方法
localCompare()
String.fromCharCode()
number
boolean
symbol
Symbol.for(),返回一个symbol类型值
Symbol.keyFor(),返回一个描述字符串
object
array
方法
队列方法
shift()
unshift()
栈方法
push()
pop()
迭代方法
every(),返回boolean
filter(),返回返回值是true的项组成的数组
forEach(),没有返回值
map(),返回每一项调用函数返回值组成的数组
some(),返回boolean
find(),找出第一个返回值为true的元素
findIndex(),找出第一个返回值为true的元素的index
fill(),填充对象时,填充的是同一个对象的地址
keys(),values,entries()
归并方法
reduce()
reduceRight()
位置方法
indexOf()
lastIndexOf()
操作方法
concat()
slice()
splice() 【改变原数组】,参数分别是起始位置,删除的项数,加入的项
copyWithin(),修改原数组
includes()
fill()
转换方法
转换成字符串
toString()
valueOf(),转化为数组
join()
... 数组扩展运算符,将数组转化成数字列表
转换成数组
Array.from()【适用于类数组对象和具有length属性的对象】
Array.of(),将一组值转换为数组
重排序方法(会改变原数组)
reverse()
sort()
检测方法
instanceof
Array.isArray()
函数
闭包
作用: 1.延长变量的生命周期 2.模仿块级作用域
理解:内部函数可以访问外部函数变量或参数的一种函数
注意: 内部函数的this,arguments只能访问到活动对象为止,不能访问全局变量
this绑定
call
apply
bind
返回一个函数,向bind方法中传递的参数加上绑定函数的参数与原函数的参数会一一对应起来
用call或apply发现bind方法
作用域
对象
js实现浅拷贝
浅拷贝的方法
Object.assign()
array.slice()
array.concat()
JS实现深拷贝
检测方法
Object.is(),判断两个值是否严格相等,与===只有+0 !=-0的区别
操作方法
Object.assign(),用于对象合并,只拷贝自身可枚举的属性
Object.create(),参数作为原型对象
Json.stringify()会忽略自身不可枚举的属性
迭代方法
for..in会遍历 自身和继承的可枚举的属性,不含symbol
Object.keys()会遍历自身可枚举的属性的键名
getOwnPropertyNames(),会遍历对象所有的属性名(包括不可枚举的属性的键名)
Reflect.ownKeys(),遍历对象的所有属性名
操作原型对象的方法
Object.setPropertyOf(obj,proto)
Object.getPropertyOf()
web worker
链接: http://www.alloyteam.com/2015/11/deep-in-web-worker/
super关键字用在对象方法中,表示对象的原型对象
对象扩展运算符,取出对象中所有可遍历的属性
原型链
跨域
H5 postMessage
web socket
jsonp
cors
相同窗口下,window.name
同一主域,domain上升
异步
Promise A规范,promise
Event loop【宏任务、微任务】
Generator函数及API
async函数
本地存储
cache缓存
manifest
本地存储
localStorage
sessionStorage
cookie
设置
读取
修改
删除
localstorage,sessionstorage, cookie的区别
大小: storage为5m,cookie为4k
与服务端通信:cookie在同源情况下自动携带
生命周期
数据库
webSQL
indexDB
内存
绘图
canvas
svg
canvas与svg的区别
1. canvas支持图像导出
2. svg支持为元素设置事件处理程序
性能优化
减少HTTP请求
CDN内容分发
域名收敛
js/css采用外部文件的方式,可以利用本地缓存之后读取,而不用重新加载
减少带宽
压缩代码,图片压缩,选取合适的图片[webp>jpg,png>gif]
js
减少DOM操作,可以采用文本片段做缓冲;操作样式时可以采用class/id选择器
避免批量注册事件,可以采用事件委托
css
避免使用css表达式
尽量使用id选择器,速度快
动画元素使用硬件加速,使其单独形成一个层
项目中的亮点
机考-面试系统
websocket
优点:http是无状态协议,避免多次http连接造成http header的重复发送
工作原理:基于http,指定connection: upgrade;upgrade: websocket;等待服务器返回响应,建立websocket连接,之后进行websocket通信;
限制
web worker
特点
运行环境
navigator
location对象,但是所有的属性都是只读的
self对象
所有ES对象
xhr构造器
setTimeout及setInterval
importScript方法
close方法
localStorage(只能存储json字符串)
网络协议仿真
eventLoop
函数防抖(搜索框的实现)
淘宝实习
weex
MVVM框架
vue
vue router的实现原理
对组件化的理解
虚拟DOM
react
生命周期函数
挂载
componentwillmount
render
componentDidmount
更新
shouldComponentUpdate(nextState,nextProps)
componentWillReciveProps
componentWillUpdate
render
componentDidupdate
卸载
componentUnmount
危险的属性
ref(接受DOM作为参数)
context(父元素设置getChildContext,子元素设置contextTypes)
redux
store
react native
性能优化
减少props,state对不必要元素的影响
shouldComponentUpdate(nextState,nextProps)
减少不必要的元素传入到子组件中(减少virtual dom的diff比较)
react和vue的区别
双向数据绑定(v-model)
实现原理
vue更为简单,例如事件修饰符,v-model提供的修饰符
0 条评论
下一页