前端面试题2

1 JS基础知识

1.1 变量类型

JavaScript 有六种数据类型。主要的类型有 Number、String、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。

1.1.1 变量的声明

JS中变量申明分显式申明和隐式申明。

var i=100;//显式申明
i=100;//隐式申明

1.1.2 变量类型检测

1，使用typeof

typeof 变量

2，Variables.constructor

变量.constructor==变量类型（比如Number，String，Boolean ）

1.2 原型和原型链

1.2.1 原型

每一个函数都有一个prototype对象属性，指向另一个对象，prototype的所有属性和方法，都会被构造函数的实例继承。prototype就是调用构造函数所创建的那个实例对象的原型。

1.2.2 原型链

实例对象与原型之间的连接，叫做原型链，JS在创建对象的时候，都有一个叫做proto的内置属性，用于指向创建它的函数对象的原型对象prototype。

1.3 闭包和作用域

1.3.1 闭包

闭包是能够读取其他函数内部的变量的函数。

特点：

• 让外部访问函数内部变量成为可能；

• 局部变量会常驻在内存中；

• 可以避免使用全局变量，防止全局变量污染；

• 会造成内存泄漏（有一块内存空间被长期占用，而不被释放）

1.3.2 作用域

作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

call、

1.3.2.1 全局作用域和函数作用域

1，全局作用域：最外层函数 和在最外层函数外面定义的变量拥有全局作用域。

（1）最外层函数和在最外层函数外面定义的变量

（2）所有末定义直接赋值的变量自动声明为拥有全局作用域

（3）window 对象的属性拥有全局作用

内层作用域可以访问外层作用域的变量

2，函数作用域：声明在函数内部的变量。

3，块级作用域：块级作用域可通过新增命令 let 和 const 声明

1.3.2.2 作用域链

如果父级也没呢？再一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是 作用域链 。

1.4 异步和单线程

1.4.1 单线程

单线程：一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着。

1.4.2 异步

前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

• 回调函数

• 事件监听

• 观察者模式

• Promises对象

1.5 Promises

promise都有三个状态：pending(默认)、fulfilled(完成)、rejected(失败)

每个 Promise 都有个叫 then 的方法，它接受两个函数做参数：resolve 和 reject， 按照顺序传递。 调用

1.7 相关方法

1.7.1日期

Date：获得当日的日期

getTime：返回从 1970 年 1 月 1 日至今的毫秒数

setFullYear：设置具体的日期

getDay：显示星期

1.7.2 math

random：获得随机数

1.7.3 数组方法

• forEach 遍历所有元素

• every 判断所有元素是否都符合条件

• some 判断是否有至少一个元素符合条件

• sort 排序

• map 对元素重新组装，生成新元素

• filter 过滤符合条件的元素

1.7.4 对象方法

for(let key in object){
   key//对象的属性
}

2 js-web-api

2.1 DOM操作

2.1.1 DOM常用API

1，获得DOM节点，以及节点上的property和Attribute

2，获得父节点、获取子节点

3，新增节点、删除节点

2.1.2 attribute和property

property是对js对象属性的修改

attribute是对html标签属性的修改

2.1.3 DOM的本质

浏览器拿到的字符串，然后把标签解析为一个一个对象，并且以树的形式存储。

2.2 BOM操作

2.1.1，navigator

var ua = navigator.userAgent

var isChrome = ua.indexOf("Chrome")

如何检测浏览器的类型

2.1.2，screen

screen.width

2.1.3，location

• location.href

• location.protocol

• location.pathname

• location.search

• location.hash

2.1.4，history

• history.back

• history.forward

2.3 事件

2.3.1 通用事件

function bindEvent(elem,type,fn){
  elem.addEventListener(type,fn)
}

2.3.2 事件冒泡

事件不断的向外延伸

2.3.3 代理

当点击事件的时候，可以通过e.target.nodeName找到事件来自哪儿

2.4 Ajax

2.4.1 手动编写ajax

var xmlHttpRequest =  new XMLHttpRequest();

2.4.2 状态码

2.4.2.1 readyState

• 0，还没有调用send

• 1，已经调用send方法，正在发送请求

• 2，send方法执行完成，已经接收到全部响应内容

• 3：正在解析响应内容

• 4：响应内容解析完成，可以在客户端调用

2.4.2.2 status

• 200：成功请求

• 300：重定向

• 400：客户端请求错误

• 500：服务器端错误

2.5，跨域

2.5.1 什么是跨域

浏览器有同源策略，不允许ajax访问其他域的接口

跨域条件：协议、域名、端口有一个不同就算跨域

2.5.2 可以跨域的三个标签

<img src="">
<link href="">
<script src="">

<img>用于打点统计，统计网站可能是其他域

<link><script>可以使用CDN

<script>可以应用于JSONP

注意事项

所有的跨域请求都必须经过信息提供方允许

2.5.3 JSONP

1，加载http:codeing.m/class.html

class.html不一定真的存在

同理<script src="http:codeing.m/class.html">不一定真的存在

3，服务器端设置http header

2.6 存储

• cookie

• sessionStorage

• localStorage

1，cookie

本身用于客户端和服务器端的通信，但是拥有本地存储的功能，于是被借用

缺点：存储量太小，只有4KB；2，所有http请求都带着，会影响获取资源的效率；3，API简单，需要疯子才能用

2，sessionStorage和localStorage

为HTML5专门存储设计，最大容量5M

API简单易用。loaclStorage.setItem;loaclStorage.getItem

• 容量

• 是否会携带到ajax

• API易用性

开发环境

• IDE

• git

• js模块化

• 打包工具

• 上线回滚的流程

1，IDE

1.1 webstorm

1.2 sublime

1.3 vscode：快捷键、插件安装

1.4 atom

1.5 插件 重要

2，Git

1，coding.net github.com

2，git的基本操作必须熟练

2.1 常用的git命令

• git add

• git checkout xxx

• git commit -m "xxx"

• git push origin master

• git pull origin master

• git branch 多人开发分支

• git checkout -b xxx / git checkout xxx

• get merge xxx

3，模块化

4，AMD

require.js requirejs.org

全局define函数

全局require函数

依赖JS会自动、异步加载

5，webpack

6 上线回滚

1，上线和回滚的基本流程

1.1 产品上线

（1）将测试完成的代码提交到git版本的master分支

（2）将当前服务器的代码全部打包并记录版本号，备份

（3）将master分支的代码提交覆盖到线上服务器，生产新的版本号

1.2 回滚

（1）将当前服务器的代码打包并记录版本号、备份

（2）将备份的上一个版本号解压，覆盖到线上服务器，并生成新的版本号

2，linux基本命令

mkdir：创建文件夹

ls：看文件名字

cd.. 返回上一个目录

rm 删除一个文件

cp a.js a1.js 拷贝文件

mv a.js src/a.js 移动文件

运行环境

1 页面加载

从输入url到得到html的详细过程

window.onload和DOMContentLoaded的区别

• 页面的全部资源加载完才会执行，包括图片、视频--window.onload

• DOM渲染完毕即可执行、此时图片、视频还没有加载完--DOMContentLoaded

1.1 加载资源的形式

输入url（或跳转页面）加载html

http://coding.com

加载html中的静态资源

<script src="/static/js/jquery.js"></script>

1.2 加载资源的过程

• 浏览器根据DNS服务器得到域名的IP地址

• 向这个IP的服务器发送http请求

• 服务器收到、处理并返回http请求

• 浏览器得到返回内容

1.3 浏览器渲染页面的过程

• 根据html结构生产DOM Tree

• 根据CSS生产CSSOM

• 将DOM和CSSOM整合成RenderTree

• 根据RenderTree开始渲染和展示

• 遇到<script>时，会执行阻塞渲染：js有权利更改dom树

2 性能优化

1，静态资源的压缩合并

webpack进行的文件合并

2，静态资源缓存

通过连接名字控制缓存

  <script src="abc_1.js"></script>

webpack 根据内容进行判断

3，使用CDN让资源加载更快

会根据用户的地址，给予你附近服务器传输资源

4，使用SSR后端渲染，数据直接输出到HTML中

直接获得页面渲染，不需要ajax请求

1.1 渲染优化

• CSS放前面，JS放后面

• 懒加载（图片懒加载，下拉加载更多）

• 减少DOM查询，对DOM查询做缓存

  缓存查询的节点，通过getElementByTagName会消耗时间

• 减少DOM操作，多个操作尽量合并在一起操作

  做一次节点，这个节点处理好后，再添加进去

• 事件节流，很频繁的操作合并到一起

  事件调用keyup的时候，在停止的时候调用change,

• 尽早执行操作

3 安全性

1，XSS跨站请求攻击

写博客的时候，偷偷插入<script>，在其他人看文章的时候，获取cookie，发送到自己的服务器。（账号相关信息）

处理：<为&lt>替换为（为&lt）

2，XSRF跨站请求伪造

登录购物网站，正在浏览商品，付费接口是xxx.com/play?id=100，然后收到一封邮件，隐藏,查看邮件的时候，已经付费。增加验证流程

面试

1，简历

一，简洁明了，重点突出项目经历和解决方案

（1）项目的复杂度

（2）项目中的技术

二，个人博客放到简历中，并且定期维护博客

三，开源项目放在简历中，并且定期维护开源项目

四，简历不要造假，要保持能力和经历上的真实性

2，面试

一，如何看到加班

项目需要，可以进行加班

二，不要挑战面试官，不要反考面试官

三，学会给面试官惊喜

一个知识点延伸有用的其他知识点，不要太多

四，遇到不会的问题，说出自己知道的就可以

五，谈谈自己的缺点