最新前端面试宝典（题目+答案），持续更新中...

Cookie

弊端：

Cookie数量和长度都是有限制的,每个域名最多只能有20条cookie，每个cookie长度不能超过4kb，否者会被截取。

Cookie会被拦截，然后获取session信息。

浏览器本地缓存

Web stroge 和cookie,cookie其实是和服务器做交互的，主要是为服务器所用，web strong就是作为本地存储的。

Web strong主要有两种：localstroge和sessionstroge.

Localstroge：长期存在，同一域名共享。

Sessionstroge：只在会话存在，窗口关闭则不存在，窗口之间不可以共享。

Display:none和visibility：hidden区别

display：none：不占据空间。

Visibility：hidden：占据空间，只是看不见而已。

@import和link

Link属于html标签，@import属于css提供的；

Link页面加载时同时加载，@import页面加载完才加载；

@import在IE5以上才被识别，link无兼容性；

Link权重高于@import。

position的absolute与fixed

共同点：

脱离标准流，不占据空间

不同点：

Absolute是根据设置了相对定位的父级以上的元素进行设置的，fixed是根据窗口惊醒设置的。

Css盒子模型

有两种，IE盒子模型(ie8以下)、w3c盒子模型

IE盒子模型：border+padding+content

w3c盒子模型：content

Box-sizing: border-box; ie盒子模型

Box-sizing: content-box; w3c盒子模型

css选择符

选择器：

ID选择器

类选择器

标签选择器

相邻选择器

子级选择器

后代选择器

通配符选择器

属性选择器

伪类选择器

 

可以继承的样式：

Font-size,font-famaily,color,text-indent

@important>id选择器>类选择器>标签选择器>通配选择器

Css新增选择器

:nth-child(n)

:disabled

:checked

Css3新增属性

圆角、渐变、旋转、阴影、过渡、媒体查询、多栏布局。

语义化

有利于SEO，有助于爬虫信息抓取；

有利于团队开发，增加可读性。

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

声明在文档最前面，是用来告诉浏览器该使用什么模式来渲染文档；

严格模式的排版和js运行模式都是按照浏览器的最高标准；

http与https

http是一种超文本传输协议，是现在网络传输最主流的传输协议，传输的数据都是明文，未加密的。

https是以安全为目标的http协议，传输的数据时加密的。

兼容性问题

1. 浏览器 默认的padding和margin不一致。

解决：*{padding：0；margin：0}

1. 空的input：file在苹果浏览器中进行form表单提交会报错。

解决：提交前删除空的移除空的input：file

1. Margin-bottom 在苹果浏览器无效。

解决：padding-bottom 代替

浮动

浮动元素会脱离标准流，不占据空间。会造成父元素塌陷，影响页面布局。

解决：

1. overflow:hdden;
2. 空标签，设置clear：both;
3. 伪类标签：clearfix

DOM节点操作

创建：CreatedElement();

添加：appendChild() 在元素内部尾部插入元素

InsertBefore() 在元素内部开始插入元素

移除：removeChild();

替换：replaceChild();

 

Html5

新增语义化标签：

Heater、footer、section、nav、aside；

音频和视频：audio、video；

画布：canvas；

本地缓存：web stroge;

表单控件：

Date、time、email、url、search

新的技术：

WebSocket。

Iframe

优点：

异步加载缓慢的网页或者脚本；

缺点：

阻塞主页面的onload事件，没有语义化，html5无提倡。

多标签页通信

Web stroge 使用。

Websocket兼容性问题

使用socket.io。

进程和线程

一个程序至少有一个进程，一个进程至少一个线程；

Js 是单线程的，为什么可以异步？

因为js主线程虽然是单线程的，但是底层却是多线程的，所以支持异步。

项目优化

图片压缩、雪碧图、gif、图片最好可以表明宽高；

文件合并；

CDN托管；

缓存使用：例如ajax缓存；

图片懒加载；

NaN、null、undefind

NaN类型：number；

Nulll类型：object；

Undefind类型：undefind；

注意：

NaN == NaN  -- false

‘NaN’ == NaN  -- false

NaN == 0  --false

Null == undefind  --true 因为两个意义上都代表无

Null === undefind  --false

Null == false  --false

Undefind == false  --false

False == 0  --true

typeof(NaN)

"number"

typeof('NaN')

"string"

typeof(0)

"number"

typeof(null)

"object"

typeof(NaN)

"number"

typeof(undefined)

"undefined"

解决跨域

Jsonp(get，原理动态插入script ,因为script不存在跨域问题)、服务器代理（常用）。

Document.write和innerHTML

Document.write只能重绘整一个页面；

innerHTML可以重绘页面部分内容；

.call()和.apply()

两个方法都是函数的方法，可以改变this的指向问题。

Apply()多接受1个数组参数。获取最大最小值(Math.max.apply(window, arr)。

内存泄漏

指由于不良的编码习惯定义的一些不再需要的对象还存在。

全局变量滥用、对象或者方法的循环引用、计时器或者回调函数。

闭包

闭包其实就是一个函数，函数内部可以访问其父级函数作用域。

Var a = {b: 1}

Var b = {}

b.a1 = a

b.a2 = a

b.a1 == b.a2  --false

因为基本类型都是存在栈内存，引用类型的变量的值存在堆内存，引用类型的在堆里面对应的key存在栈里面。

浏览器内核

谷歌浏览器：blink

ie浏览器：trident

Safari浏览器：webkit

Opera浏览器：blink

Firefox: gecko

渐进增强和优雅降级

渐进增强：先针对低版本浏览器进行构建页面，完成基本功能，然后再对高版本浏览器进行交互、效果、功能上优化。

渐进增强：一开始就构建完成的项目，然后再针对版本浏览器进行测试和修复。

数组的方法

Unshift、push、shift、pop、splice、concat、split、sort

字符串方法

Split、replace、slice

状态码

200-299请求成功

300-399 重定向

400-499 客户端错误

500-599 服务端错误

Url到页面展示

浏览器获得请求对应的ip

浏览器和服务器用过TCP3次握手，建立请求

浏览器发送请求到服务器

服务器接收请求 ，相应请求

浏览器拿到返回数据，渲染页面。

TCP：传输控制协议（TCP，Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流的传输层通信协议

前端安全

XXS：恶意脚本或者代码注入。

解决：过滤和转义。

CSRF：跨站请求伪造。

解决：合理使用get、post，验证码使用，token。

网络劫持。

解决：https，提交数据使用非对称加密。crypto-js

事件冒泡和事件委托

事件冒泡：操作的元素向上一级一级执行，直到html；

事件委托：给父级元素注册事件，监听子元素的点击事件。