个人面试题总结

程序媛Nancy
86 阅读12分钟

1.JavaScript中有哪些数据类型？

基本类型主要为以下6种：

  • Number
  • String
  • Boolean
  • Undefined
  • null
  • symbol 复杂类型统称为Object，包括下面三种：
  • Object
  • Array
  • Function

2.浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

html5离线存储有两种： 1、localstorage（本地存储），通常用于静态资源（静态页面）的缓存； 2、Application Cache（应用程序缓存），通常用于AJAX请求缓存，存储非关键性AJAX数据。
在线时，浏览器发现html头部有mainfest属性,它会请求mainfest文件,如果是第一次访问页面,那么浏览器就会根据mainfest文件的内容下载相应的资源并且进行离线存储,如果已经访问过页面并且资源已经进行离线存储了,浏览器就会使用离线的资源加载页面,然后浏览器就会对比新的mainfest文件与旧的mainfest文件,如果文件没有发生改变,就不进行任何操作,如果发了改变,就会重新下载文件中的资源并进行离线存储。
离线时，浏览器会直接使用离线存储的资源。

3.cookie、local Storage、Session Storage的区别？

  • Cookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决 HTTP无状态导致的问题。
  • 作为一段一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制 cookie有效期、安全性、使用范围的可选属性组成。
  • 但是cookie在每次请求中都会被发送，如果不使用 HTTPS并对其加密，其保存的信息很容易被窃取，导致安全风险。举个例子，在一些使用 cookie保持登录态的网站上，如果 cookie被窃取，他人很容易利用你的 cookie来假扮成你登录网站
  • 生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的
  • 存储的信息在同一域中是共享的
  • 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
  • 大小：5M（跟浏览器厂商有关系）
  • localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
  • 受同源策略的限制
  • localStorage 也不是完美的，它有两个缺点：无法像Cookie一样设置过期时间， 只能存入字符串，无法直接存对象

sessionStorage和 localStorage使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，sessionStorage 将会删除数据

4. js中如何创建对象的？

这个博主总结挺好，推荐 JS创建对象的几种方法 - 掘金 (juejin.cn)

5.get和post请求区别

GET 用于获取信息，是无副作用的，是幂等的，且可缓存
POST 用于修改[服务器]上的数据，有副作用，非幂等，不可缓存 最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。

GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

GET和POST还有一个重大区别，简单的说：

GET产生一个TCP数据包；POST产生两个TCP数据包。

总的来说：对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

6.在加载一个网页时，如果特别慢可能会是什么原因

前端页面卡顿的原因有很多，从渲染机制和运行上可以分为两大类，分别是：

  • 渲染不及时，页面掉帧
  • 网页内存占用过高，运行卡顿

两种类型又可细分如下：

渲染不及时，页面掉帧

长时间占用js线程
页面回流和重绘较多
资源加载阻塞

内存过大导致的页面卡顿

内存泄漏导致内存过大

  • 意外的全局变量引起的内存泄漏
  • 闭包引起的内存泄漏
  • 被遗忘的定时器
  • 循环引用
  • DOM删除时没有解绑事件
  • 没有清理的DOM元素引用

dom节点或事件占用内存过大

7.有哪些性能优化的方法？

前端必知-性能优化的七大手段 - 掘金 (juejin.cn)

8.了解一些常见的网络攻击吗？介绍一下他们以及他们有哪些防御措施

  1. XSS

XSS，Cross-site script，跨站脚本攻击。是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。
它可以分为两类：反射型和持久型。

  • 反射型XSS攻击场景：用户点击嵌入恶意脚本的链接，攻击者可以获取用户的cookie信息或密码等重要信息，进行恶性操作。
    解决：开启cookie的HttpOnly属性，禁止JavaScript脚本读取cookie信息。
  • 持久型XSS攻击场景：攻击者提交含有恶意脚本的请求（通常使用<script>标签），此脚本被保存在数据库中。用户再次浏览页面，包含恶意脚本的页面会自动执行脚本，从而达到攻击效果。这种攻击常见于论坛，博客等应用中。
    解决：前端提交请求时，转义<为&lt，转义>为&gt；或者后台存储数据时进行特殊字符转义。
    建议后台处理，因为攻击者可以绕过前端页面，直接模拟请求，提交恶意
  1. SQL注入

攻击者在HTTP请求中注入恶意SQL命令，例如，drop table users，服务器用请求参数构造数据库SQL命令时，恶意SQL被执行。

解决：后台处理，例如，使用预编译语句PreparedStatement进行预处理。

  1. CSRF

CSRF，Cross-site request forgery，跨站请求伪造。这种方式是利用浏览器的cookie或服务器的session策略，盗取用户信息，模拟用户向第三方网站发送恶意请求。
CSRF比XSS更具危险性。想要深入理解CSRF的攻击特性我们有必要了解一下网站session的工作原理。

我们知道http请求是无状态的，也就是说每次http请求都是独立的无关之前的操作的，但是每次http请求都会将本域下的所有cookie作为http请求头的一部分发送给服务端，所以服务端就根据请求中的cookie存放的sessionid去session对象中找到该用户数据。

9.跨域问题都有哪些解决方案

cloud.tencent.com/developer/a…

10、var let和const区别

11、有没有自己做过组件

12、vue组件通信

13、前端性能优化

14、和缓存相关的状态码

HTTP之缓存状态码是200还是304 - web开发 - 亿速云 (yisu.com)

16.三次握手四次挥手

vue3js.cn/interview/h…

16.vuex

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state) 。Vuex 和单纯的全局对象有以下两点不同：

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

17.三栏布局如何实现

实现三栏布局中间自适应的布局方式有：

  • 两边使用 float，中间使用 margin
  • 两边使用 absolute，中间使用 margin
  • 两边使用 float 和负 margin
  • display: table 实现
  • flex实现
  • grid网格布局

18.状态码熟悉吗

http状态码的作用是服务器告诉客户端当前请求响应的状态，通过状态码就能判断和分析服务器的运行状态。

  • 1 表示消息
  • 2 表示成功
  • 3 表示重定向
  • 4 表示请求错误
  • 5 表示服务器错误

下面给出一些状态码的适用场景：

  • 100：客户端在发送POST数据给服务器前，征询服务器情况，看服务器是否处理POST的数据，如果不处理，客户端则不上传POST数据，如果处理，则POST上传数据。常用于POST大数据传输
  • 206：一般用来做断点续传，或者是视频文件等大文件的加载
  • 301：永久重定向会缓存。新域名替换旧域名，旧的域名不再使用时，用户访问旧域名时用301就重定向到新的域名
  • 302：临时重定向不会缓存，常用 于未登陆的用户访问用户中心重定向到登录页面
  • 304：协商缓存，告诉客户端有缓存，直接使用缓存中的数据，返回页面的只有头部信息，是没有内容部分
  • 400：参数有误，请求无法被服务器识别
  • 403：告诉客户端进制访问该站点或者资源，如在外网环境下，然后访问只有内网IP才能访问的时候则返回
  • 404：服务器找不到资源时，或者服务器拒绝请求又不想说明理由时
  • 503：服务器停机维护时，主动用503响应请求或 nginx 设置限速，超过限速，会返回503
  • 504：网关超时

19.从输入url地址到页面渲染完成经历了什么过程

简单的分析，从输入 URL到回车后发生的行为如下：

  • URL解析
  • DNS 查询
  • TCP 连接
  • HTTP 请求
  • 响应请求
  • 页面渲染

20.vue中实现对数据的监听（computed watch是否存在缓存中）

computed 本质是一个惰性求值的观察者computed watcher。其内部通过 this.dirty 属性标记计算属性是否需要重新求值。

  • 当 computed 的依赖状态发生改变时,就会通知这个惰性的 watcher,computed watcher 通过 this.dep.subs.length 判断有没有订阅者,
  • 有的话,会重新计算,然后对比新旧值,如果变化了,会重新渲染。 (Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化时才会触发渲染 watcher 重新渲染，本质上是一种优化。)
  • 没有的话,仅仅把 this.dirty = true (当计算属性依赖于其他数据时，属性并不会立即重新计算，只有之后其他地方需要读取属性的时候，它才会真正计算，即具备 lazy（懒计算）特性。)

watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听

注意：Watcher : 观察者对象 , 实例分为渲染 watcher (render watcher),计算属性 watcher (computed watcher),侦听器 watcher（user watcher）三种

21.Linux有没有学过

blog.csdn.net/q357010621/…

22.webpack怎么把组件抽离出来

23.对称加密/非对称加密/哈希加密

对称加密算法: 也叫私钥加密算法，其特征是收信方和发信方使用相同的密钥，即加密密钥和解密密钥是相同或等价的。
非对称加密算法: 也叫公钥加密算法。其特征是收信方和发信方使用的密钥互不相同，而且几乎不可能从加密密钥推导解密密钥。
散列算法（签名算法）有：MD5、SHA1、HMAC
用途：主要用于验证，防止信息被修。具体用途如：文件校验、数字签名、鉴权协议
MD5：MD5是一种不可逆的加密算法，目前是最牢靠的加密算法之一，尚没有能够逆运算的程序被开发出来，它对应任何字符串都可以加密成一段唯一的固定长度的代码。

24.了解过java吗？

我回答：了解javase的基础知识，javaee和javaweb学过一点但是忘记了。

25.异步处理的方法

26.axios的用法

axios 是一个轻量的 HTTP客户端，基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。
axios框架全称（ajax – I/O – system）：

  • 基于promise用于浏览器和node.js的http客户端，因此可以使用Promise API

  • 不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点：

  • 在浏览器中创建XMLHttpRequest请求

  • 在node.js中发送http请求

  • 支持Promise API

  • 拦截请求和响应

  • 转换请求和响应数据

  • 取消要求

  • 自动转换JSON数据

  • 客户端支持防止CSRF/XSRF(跨域请求伪造)
    www.php.cn/vuejs/49817…

avatar
文章
阅读
粉丝