这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战
前端相关面试题
1, 如何优化网页加载速度？
1.减少 css，js 文件数量及大小(减少重复性代码，代码重复利用)，压缩 CSS 和 Js 代码
2.图片的大小
3.把 css 样式表放置顶部，把 js 放置页面底部
4.减少 http 请求数
5.使用外部 Js 和 CSS
2, 那些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用
数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的
内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
3, WEB 应用从服务器主动推送 Data 到客户端有那些方式？
* html5 websoket
* WebSocket 通过 Flash
* XHR 长时间连接
* XHR Multipart Streaming
* 不可见的 Iframe
* <script>标签的长时间连接(可跨域)
4, 对 e Node 的优点和缺点提出了自己的看法？
优点：
- 因为 Node 是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在 Node 上的代理服务器相比其他技术实现（如 Ruby）的服务器表现要好得多。
- 与 Node 代理服务器交互的客户端代码是由 javascript 语言编写的，因此客户端和服务 器端都用同一种语言编写，这是非常美妙的事情。 缺点：
- Node 是一个相对新的开源项目，所以不太稳定，它总是一直在变。
- 缺少足够多的第三方库支持。看起来，就像是 Ruby/Rails 当年的样子（第三方库现在已 经很丰富了，所以这个缺点可以说不存在了）。
5, Node.js 的适应场景？
1)、实时应用：如在线聊天，实时通知推送等等（如 socket.io）
2)、分布式应用：通过高效的并行 I/O 使用已有的数据
3)、工具类应用：海量的工具，小到前端压缩部署（如 grunt），大到桌面图形界面应用程
序
4)、游戏类应用：游戏领域对实时和并发有很高的要求（如网易的 pomelo 框架）
5)、利用稳定接口提升 Web 渲染能力
6)、前后端编程语言环境统一：前端开发人员可以非常快速地切入到服务器端的开发（如著
名的纯 Javascript 全栈式 MEAN 架构）
6, 、对 针对 jQuer的优化方法？
a、优先使用 ID 选择器
b、jquery 获取到的 DOM 元素如果需要多次使用，建议使用一个变量将其保存起来，因为操
作 DOM 的过程是非常耗费性能的
c、在 class 前使用 tag(标签名)
d、给选择器一个上下文
e、慎用 .live()方法（应该说尽量不要使用）
f、使用 data()方法存储临时变量
7, http状态码有哪些，说出常用的即可？
100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。
400 语义有误，当前请求无法被服务器理解。
401 当前请求需要用户验证
403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。
503 – 服务不可用
8, 前端开发的优化问题?
（1） 减少 http 请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页
Gzip，CDN 托管，data 缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端用变量保存 AJAX
请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能。
（4） 当需要设置的样式很多时设置 className 而不是直接操作 style。
（5） 少用全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作。
（6） 避免使用 CSS Expression（css 表达式)又称 Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用 table，table 要等其中的内容完全下载之后才会显
示出来，显示比 div+css 布局慢。
9, 如何阻止事件冒泡和默认事件？
阻止浏览器的默认行为
window.event?window.event.returnValue=false:e.preventDefault();
停止事件冒泡
window.event?window.event.cancelBubble=true:e.stopPropagation();
原生JavaScript中，return false;只阻止默认行为，不阻止冒泡，jQuery中的return false;
既阻止默认行为，又阻止冒泡
10, 分别阐述 split(),slice(),splice(),join() ?
join(): 用于把数组中的所有元素拼接起来放入一个字符串。所带的参数为分割字符串的分隔
符，默认是以逗号分开。归属于 Array
split(): 即把字符串分离开，以数组方式存储。归属于 Stringstring
slice(): 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子
数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()
splice(): 方法向/从数组中添加/删除项目，然后返回被删除的项目。返回的是含有被删除
的元素的数组。
11, 关于 javascript 中 apply()和 call()的区别？
相同点:两个方法产生的作用是完全一样的
不同点:方法传递的参数不同
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
apply()接收两个参数，一个是函数运行的作用域(this)，另一个是参数数组。
call()方法第一个参数与 apply()方法相同，但传递给函数的参数必须列举出来。
12 javascript 的 继承的 6 种方法？
1. 原型链继承
2. 借用构造函数继承
3. 组合继承(原型+借用构造)
4. 原型式继承
5. 寄生式继承
6. 寄生组合式继承
13, 如何编写高性能的 Javascript ?
1，使用 DocumentFragment 优化多次 append
2，通过模板元素 clone ，替代 createElement
3，使用一次 innerHTML 赋值代替构建 dom 元素
4，使用 firstChild 和 nextSibling 代替 childNodes 遍历 dom 元素
5，使用 Array 做为 StringBuffer ，代替字符串拼接的操作
6，将循环控制量保存到局部变量
7，顺序无关的遍历时，用 while 替代 for
8，将条件分支，按可能性顺序从高到低排列
9，在同一条件子的多（ >2 ）条件分支时，使用 switch 优于 if
10，使用三目运算符替代条件分支
11，需要不断执行的时候，优先考虑使用 setInterval
14， 数组和对象有哪些原生方法，列举一下？
#Arrary 数组常用的方法
Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素
#Object 对象的常用方法
Object.hasOwnProperty( ) 检查属性是否被继承
Object.isPrototypeOf( ) 一个对象是否是另一个对象的原型
Object.propertyIsEnumerable( ) 是否可以通过 for/in 循环看到属性
Object.toLocaleString( ) 返回对象的本地字符串表示
Object.toString( ) 定义一个对象的字符串表示
Object.valueOf( ) 指定对象的原始值
15，DOM 常见操作？
#（1）创建新节点
createDocumentFragment() //创建一个 DOM 片段
createElement_x() //创建一个具体的元素
createTextNode() //创建一个文本节点
#（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
#（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的 Name 属性的值
getElementById() //通过元素 Id，唯一性
16, 在 Javascript 中什么是伪数组？如何将伪数组转化为标准数组?
伪数组（类数组）：无法直接调用数组方法或期望 length 属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的 argument 参数，还有像调用getElementsByTagName,document.childNodes 之类的,它们都返回 NodeList ``对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。假设接第八题题干，我们要给每个 log 方法添加一个”(app)”前缀，比如’hello world!’->’(app)hello world!’。方法如下：
function log(){
var args = Array.prototype.slice.call(arguments); //为了使用 unshift
数组方法，将 argument 转化为真正的数组
args.unshift('(app)');
console.log.apply(console, args);
};
17, javascript 的本地对象，内置对象和宿主对象？
本地对象为独立于宿主环境的 ECMAScript 提供的对象，包括 Array Object RegExp 等
可以 new 实例化的对象
内置对象为 Gload，Math 等不可以实例化的(他们也是本地对象，内置对象是本地对象
的一个子集)
宿主对象为所有的非本地对象，所有的 BOM 和 DOM 对象都是宿主对象，如浏览器自带的
document,window 等对象
18, 一个页面从输入 L URL 到页面加载显示完成，这个过程中发生了什么?
分为 4 个步骤：
1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器
都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS查询。这能使浏览器获得请求
对应的 IP 地址。
2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包
括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间
传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由
客户端发出该请求已经被接受的报文。
3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远
程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正
确的响应。
4. 此时，Web 服务器提供资源服务，客户端开始下载资源。
19, CSS3有哪些新特性？
1. CSS3 实现圆角（border-radius），阴影（box-shadow），
2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)
skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4. 增加了更多的 CSS 选择器 多背景 rgba
5. 在 CSS3 中唯一引入的伪元素是 ::selection.
6. 媒体查询，多栏布局
7. border-image
20, html5 有哪些新特性、移除了那些元素？
# 新特性：
1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频 API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术 webworker, websocket, Geolocation
# 移除的元素：
1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
2. 对可用性产生负面影响的元素：frame，frameset，noframes；
