校招前端面试知识大全

前言：这是之前看的视频课程的一个面试知识总结，这只是一个简单的总结，小伙伴们还是需要自己深入理解研究这些知识点，这里面可能还有许多知识点没有总结到，小伙伴们需要自己去总结学习。祝大家找工作顺利。

变量类型和计算

• 使用typeof能得到的类型有哪些？
  • undefined
  • number
  • boolean
  • string
  • object
  • function
• 引用类型？
  • 对象
  • 数组
  • 函数
• JS中有哪些内置函数？
  • Boolean
  • Number
  • String
  • Object
  • Array
  • Function
  • Date
  • RegExp
  • Error
• JS按照存储方式分为哪些类型，并描述其特点？
  • 值类型
  • 引用类型
  • 值类型的存储不会相互影响
  • 引用类型是变量指针的赋值，不是真正的拷贝，他们值的修改会相互影响
• 如何理解JSON?
  • JSON在js中是一个对象，有两个API（JSON.stringify() 和 JSON.parse()）
  • 同时JSON也是一种数据格式
• 在if中会被转换成false的?
  • 0
  • ‘’
  • undefined
  • null
  • NaN
  • false
• 面对对象？
  • Math
  • JSON

原型和原型链

• 5条原型规则？
  • 所有的引用类型（数组，对象，函数），都具有对象特性，即可自由扩展（除了“null”以外）
  • 所有的引用类型（数组，对象，函数），都有一个__proto__属性（隐式原型），属性值是一个普通的对象
  • 所有的函数，都有一个prototype（显式原型）属性，属性值是一个普通的对象
  • 所有的引用类型，__proto__的属性值指向它的构造函数的“prototype”的属性值
  • 当试图得到一个引用类型的某个属性时，如果这个引用类型没有这个属性，那么它会去引用类型的__proto__(即该引用类型的构造函数的prototype)中寻找
• var a={}其实是var a=new Object()的语法糖
• var arr=[]其实是var arr=new Array()的语法糖
• function Foo(){}其实是var Foo=new Function(...)
• 使用instanceof判断一个函数是否是一个变量的构造函数
• 如何判断一个变量是数组类型？
  • var arr=[]
    arr instanceof Array //true
    typeof arr //Object,typeof是无法判断是否是数组的
• 描述 new 一个对象的过程
  • 创建一个新对象
  • this指向这个对象
  • 执行代码，即对this赋值
  • 返回this

作用域和闭包

• 执行上下文
  • 范围： 一段<script>或者一个函数
  • 全局：变量定义 函数声明
  • 函数：变量定义 函数声明 this arguments
• “函数声明” 和 “函数表达式” 的区别
  • 函数声明 function fn(){...}
  • 函数表达式 var fn=function(){...}
• 关于this
  • this要在执行时才能确认值，定义时无法确认
• this的使用场景
  • 作为构造函数执行
  • 作为属性对象执行: a.fn()
  • 作为普通函数执行: fn()
  • call apply bind : fn.call()
• 关于作用域
  • JS没有块级作用域
  • 只有函数和全局作用域
  • （一个函数的作用域是他定义的作用域而不是他执行的作用域）
• 作用域链
  • 一个自由变量，一直不断的往父级作用域去找
• 闭包的使用场景？
  • 函数作为返回值
  • 函数作为参数传递

问题

• 说一下对变量提升的理解？
  • 变量定义
  • 函数声明（注意和函数表达式是的区别）
• this的使用场景？
  • 作为构造函数使用
  • 作为对象属性使用
  • 作为普通函数使用
  • call apply bind
• 如何理解作用域？
  • 自由变量
  • 作用域链，即自由变量的查找
  • 闭包的使用场景
• 闭包的实际应用？
  • 闭包实际应用中主要用于封装变量，收敛权限
• 创建10个a标签，点击的时候弹出来对应的序号？
  • 关系到作用域

异步和单线程

• 何时使用异步？
  • 在可能发生等待的情况
  • 等待过程中不能像alert一样阻塞程序运行
  • 因此，所有的“等待的情况”都需要异步
• 前端使用异步的场景？
  • 定时任务 setTimeout setInterval
  • 网络请求：ajax请求，动态加载
  • 事件绑定

问题

• 同步和异步的区别是什么？
  • 同步会阻塞代码执行，而异步不会
  • alert是同步，setTimeout是异步
• 前端使用异步的场景是哪些？
  • 定时任务 setTimeout setInterval
  • 网络请求 Ajax请求 动态加载
  • 事件绑定
  • 因为这三个事件都是需要等待的，等待的过程中不能阻塞代码的执行，所以需要异步，因为js是单线程语言，一次只能执行一件事

Math和日期

• Math.random()的作用
  • 随时改变，清除缓存，比方说访问一个链接，在链接后面加入随机数，每次访问这个链接random都会变，每次不一样，这样就可以把缓存清
• 日期
  • Date.now()
  • var date=new Date()
  • date.getFullYear() //年
  • date,getMonth() //月
  • date.getDate() //日
  • date.getHours() //时
  • date.getMinutes() //分钟
  • date.getSeconds() //秒
• Math
  • Math.random()
• 数组API
  • forEach()
    • 没有返回值
  • map()
    • 有返回值，可以return出来
  • every()
  • some()
  • filter()
  • sort()
• 对象API
  • for-in

JS-web-API（上）

• JS内置的的全局函数和对象有哪些？
  • Object Array String Boolean Math Json
  • window document
  • navigator.userAgent

DOM

• DOM结构操作？
  • 新增节点
  • 获取父节点
  • 获取子节点
  • 删除节点
• DOM是哪种基本的数据结构？
  • 树
• DOM操作的常用API有哪些？
  • 获取DOM节点，以及节点的property和Attribute
  • 获取父节点和子节点
  • 新增节点，删除节点
• DOM节点的Attribute和property有何区别?
  • property只是一个JS对象的属性的修改和获取
  • Attribute是对html标签的修改和获取

BOM

• 如何检测浏览器的类型？
  • 使用navigator.userAgent
• 浏览器内核
  • IE trident
  • FireFox Gecko
  • Chrome webkit/Blink
• 拆解url的各部分
  • location.href
  • location.protocol //"http:" "https:"
  • location.host //"www.bilibili.com" 域名
  • location.pathname //"/video/av25887056/" 路径
  • location.search //"?spm_id_from=333.334.chief_recommend.16"
  • location.hash //"#1"
• screen
  • console.log(screen.height)
  • console.log(screen.width)
• history
  • histort.back()
  • history.forward()

JS-web-API（下）

• 事件代理的好处
  • 代码简洁
  • 减少浏览器内存占用
• 简述事件冒泡流程
  • DOM树形结构（按照DOM树形结构往上冒）
  • 事件冒泡
  • 阻止冒泡
  • 冒泡的应用
    • 事件代理
• 无限下拉加载图片的页面，绑定事件
  • 使用事件代理
• 状态码说明
  • readyState
    • 0 (未初始化) 还没有调用send()方法
    • 1 (载入) 已经调用send()方法，正在发送请求
    • 2 (载入完成)send方法执行完毕，已经接收到全部响应内容
    • 3 (交互)正在解析响应内容
    • 4 (完成)响应已经解析完毕，可以调用了
  • status
    • 2xx表示请求成功，如200
    • 3xx表示重定向，浏览器自动跳转
    • 4xx客户端请求错误，如404
    • 5xx服务器端错误
• 什么是跨域
  • 浏览器有同源策略，不允许ajax访问其他域接口
  • 跨域条件：协议，域名，端口，有一个不同就是跨域
• 允许跨域的三个标签
  • 有三个标签允许跨域加载资源
    • <img src=XXX>
    • <link href=XXX>
    • <script src=XXX>
  • 三个标签的场景
    • <img>可以用于打点统计，统计网站可以是其他域
    • <link>可以使用cdn,cdn的是其他域
    • <script>可以用于jsonp
• 跨域的几种实现方式
  • JSONP
  • 服务器端设置http header
• 存储
  • cookie
    • cookie本身用于客户端与服务端通信
    • 但是它有本地存储的功能，于是就被借用
    • 使用documnet.cookie=...获取和修改即可
  • cookie用于存储的缺点
    • 存储量太小，只有4KB
    • 所有的ajax请求都带着，影响获取资源的效率
    • API简单，需要封装才能用document.cookie=...
    • 如果不设置cookie的失效时间的话，浏览器关闭cookie就失效
  • localStorage和sessionStorage
    • HTML5专门为存储而设计，最大容量5M
    • API简单易用
    • localStorage.setItem(key,value),localStorage.getItem(key)
    • 不同之处，localStorage会一直存在本地，sessionStorage浏览器关闭就没有了
  • cookie,localStorage和sessionStorage的区别
    • 容量
    • ajax是否携带
    • API易用性
  • cookie和session的区别
    • cookie存在客户端，session存在服务器
    • 安全性较高的使用session,安全性较低的使用cookie
    • Cookie只能存储字符串，session可以存储任何信息
    • cookie如果不设置时间，当关闭浏览器时，Cookie就失效，不会在本地保存，session的生命周期是一个会话（当启动浏览器到关闭浏览器）。
    • 在存储相对持久的信息时，应考虑使用cookie， 因为cookie可以以文件的形式，存储在客户端。在进行一些登录的验证及信息拦截的时候，可以使用session。

开发环境

• 关于开发环境
  • IDE（写代码的效率）
  • git（代码版本管理，多人协作开发）
  • JS模块化
  • 打包工具
  • 上线回滚的流程
• 常用Git命令
  • git add.
  • git checkout xxx
  • git commit -m
  • git push origin master
  • git pull origin master
  • git branch
  • git checkout -b xxx(新建分支)/git checkout xxx
  • git merge xxx
• 模块化
  • AMD
    • require.js
    • 全局define
    • 全局require
    • 依赖JS会自动、异步加载

  // 定义模块 myModule.js
  define(['myModule'], function(){
      var name = 'Byron';
      function printName(){
          console.log(name);
      }
  
      return {
          printName: printName
      };
  });
  
  // 加载模块
  require(['myModule'], function (my){
    my.printName();
  });
  
  ---------------------
  
  本文来自 一切随我走之大师之路 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/jackwen110200/article/details/52105493?utm_source=copy 
  复制代码

  • CommonJS
    • nodejs模块化规范，现在大量被前端引用，原因：
      • 前端开发依赖的插件和库，都可以从npm获取
      • 构建工具的高度自动化，使得使用npm的成本非常低
      • CommonJs不会异步加载JS,而是同步一次性加载出来
      • export和require
  • AMD和CommonJS的使用场景
    • 需要异步加载使用AMD
    • 不需要异步加载，或者使用了npm之后建议用CommonJS
• 上线和回滚的基本流程
  • 上线流程要点
    • 将测试完成的代码提交到git版本库的master分支
    • 将当前服务器的代码全部打包并记录版本号，备份
    • 将master分支的代码提交覆盖到线上服务器，生成新版本号
  • 回滚流程要点
    • 将当前服务器的代码打包并记录号版本号，备份
    • 将备份的上一个版本号解压，覆盖到线上服务器，并生成新的版本
• linux基本命令
  • 服务器使用linux居多，server版，只有命令行
  • 测试环境要匹配线上环境，因此也是linux
  • 经常需要登录测试机来自己配置，获取数据

运行环境

• 知识点

  • 加载资源的形式

    • 输入url（或跳转页面）加载html
      • www.baidu.com
    • 加载html中的静态资源
      • <script src="...">
      • <img src="...">
      • <link href="...">

  • 加载一个资源的过程

    • 浏览器根据DNS服务器得到域名的ip地址
    • 向这个ip的机器发送http请求
    • 服务器收到，处理，并返回http请求
    • 浏览器得到内容

  • 浏览器渲染页面的过程

    • 根据HTML生成DOM tree
    • 根据CSS生成CSSOM
    • 将DOM tree和CSSOM整合形成RenderTree
    • 根据RenderTree开始渲染和展示
    • 遇到script时，会执行并且阻塞渲染

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

  • 浏览器根据DNS服务器得到域名的ip地址
  • 向这个ip的机器发送http请求
  • 服务器收到，处理，并返回http请求
  • 浏览器得到内容

  详细点的如下

  • 在地址栏输入地址
  • 查看浏览器是否有缓存，如果有缓存直接返回缓存内容，没有缓存发起新请求
  • 通过DNS回去域名的ip地址
  • 与目标IP地址建立TCP连接
  • TCP连接后将http请求发送给服务器
  • 服务器接受请求并解析将响应报文返回给浏览器
  • 浏览器接受HTTP响应，然后根据情况选择关闭TCP连接或保留重用
  • 浏览器解析文档显示界面
    参考这里

• window.onload和DOMContentLoaded的区别

  window.addEventListener('load',funciton(){
      //在页面中的一切都加载完毕时触发，
      //包括所有图像、JavaScript文件、CSS文件等外部资源等外部资源 
  })
  复制代码

  document.addEventListener('DOMContentLoaded',function(){
      // 在形成完整的DOM树之后就会触发
      // 不理会图像、JavaScrpt文件、CSS文件或其他资源是否下载完毕
  })
  复制代码

• 性能优化

  • 原则
    • 多使用内存、缓存或其他方法
    • 减少CPU计算，减少网络
  • 从哪里入手
    • 加载页面和静态资源
    • 页面渲染
  • 加载资源优化
    • 静态资源的压缩合并
      • (通过构建工具)
    • 静态资源缓存
      • 通过链接名字控制缓存
        • <script src="abc_1.js">
    • 使用CDN让资源加载更快
    • 使用SSR后端渲染，数据直接输出到HTML中
      • 现在vue react提出了这样的概念
      • 其实jsp php asp都属于后端渲染
  • 渲染优化
    • CSS放前面，JS放后面
    • 懒加载（图片懒加载，下拉加载更多）

      •    <img id="img" src="perviem.png" data-realsrc="abc.png"/>
        <script type="text/javascript">  
            //图片懒加载  
            var img1=document.getElementById('img')
            img1.src=img1.getAttribute('data-realsrc')  
        </script>
        复制代码

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

      •       //未缓存DOM查询
         for(var i=0;i<document.getElementsByTagName('p').length;i++){
         	//todo
         }
        
         //缓存了DOM查询
         var pList=document.getElementsByTagName('p')
         var i;
         for(i=0;i<pList.length;i++){
         	//todo
         }
        复制代码

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

      •   //合并DOM插入
          var listNode=document.querySelector('.list')
          var frag=document.createDocumentFragment()
          var a,li;
          for(a=0;a<10;a++){
          	var li=document.createElement('li')
          	li.innerHTML='list item'+a
          	frag.appendChild(li)
          }
          listNode.appendChild(frag)
        复制代码

    • 事件节流
    • 尽早执行操作（DOMContentLoaded）

      •     document.addEventListener('DOMContentLoaded',function(){
          //DOM渲染完及执行，此时图片，视频可能还没加载完
        })
        复制代码

• 安全性

  • XSS跨站请求攻击
  • XSRF跨站请求伪造

• XSS

  • 举个例子
  • 在某个网站写一篇文章，同时偷偷插入一段<script>
  • 攻击代码中，获取cookie，发送到自己的服务器
  • 发布文章客，别人看到文章内容
  • 会把查看者的cookie发送到攻击者的服务器

• 怎么防范XSS

  • 前端替换关键字，例如替换<为&lt,>为&gt
  • 后端替换

• XSRF

  • 你已登陆一个购物网站，正在浏览商品
  • 该网站付费接口是(xxx.com/pay?id=100)但是没有任何验证
  • 你收到一封邮件，里面图片的src是(xxx.com/pay?id=100)
  • 你打开邮件的时候，就已经悄悄的付费购买了

• 如何放置XSRF攻击

  • 增加验证流程、如输入指纹，密码，短信验证码

• 如何防止别人恶意调用接口

  • 验证码，采用点触验证，滑动验证或第三方验证服务，普通验证很容易被识破
  • 频率，限制同IP,同设备等发送次数，单点时间范围可请求时长
  • 归属地，检测IP所在地是否与手机号归属地匹配，IP所在地是否为常在地
  • 可疑用户，对可疑用户主动要求其发送信息（或其他主动行为）来验证身份
  • 黑名单，对黑名单用户，限制其操作，API接口直接返回success，1可以避免浪费资源，2混淆黑户判断
  • 签名，API接口启用签名策略，签名可以保障请求URL的完整安全，签名匹配再进行下一步操作
  • token,对于重要的API接口，生成token值，做验证。
  • https,启用https，https需要密钥验证，可以在一定程度上辨别是否伪造IP
  • 代码混淆，发布前端代码混淆过的包
  • 风控，大量肉鸡来袭时只能受着，同样攻击者也会暴露意图，分析意图提取算法，分析判断是否为恶意 如果是则断掉；异常账号及时锁定；或从产品角度做出调整，及时止损。
  • 数据安全，数据安全方面做策略，攻击者得不到有效数据，提高攻击者成本
  • 恶意IP库，( threatbook.cn/ )，过滤恶意IP
  • tips:
    • 鉴别IP真伪，可以考虑第三方saas服务
    • 手机号真伪，可以考虑选择有防攻击的运营商

• 如何解决用户恶意注册

  • 手机验证码
  • IP限制
  • 记录注册人cookie，ip防止恶意注册

转载于:https://juejin.im/post/5bbd755f518825573058428c