前端/移动端面经

Last updated on May 13, 2024 pm

cookie

cookie其实就是一些数据信息，类型为“小型文本文件”，存储于电脑上的文本文件中。游览器保存了我们的cookie，里面记录了一些信息。当我们打开一个网站时，如果这个网站我们曾经登录过，那么当我们再次打开网站时，发现就不需要再次登录了，而是直接进入了首页。

（名字、值、可访问目录、有效时间、大小）

cookie有2种存储方式，一种是会话性，一种是持久性。（可以人为设置）

session和cookie的区别

2.1、保存的位置不同
cookie保存在浏览器端，session保存在服务端。
2.2、使用方式不同
cookie如果在浏览器端对cookie进行设置对应的时间，则cookie保存在本地硬盘中，此时如果没有过期，则就可以使用，如果过期则就删除。如果没有对cookie设置时间，则默认关闭浏览器，则cookie就会删除。
session：我们在请求中，如果发送的请求中存在sessionId，则就会找到对应的session对象，如果不存在sessionId,则在服务器端就会创建一个session对象，并且将sessionId返回给浏览器，可以将其放到cookie中，进行传输，如果浏览器不支持cookie，则应该将其通过encodeURL(sessionID)进行调用，然后放到url中。
2.3、存储内容不同：cookie只能存储字符串，而session存储结构类似于hashtable的结构，可以存放任何类型。
2.4、存储大小：``cookie最多可以存放4k大小的内容，session则没有限制。
2.5、session的安全性要高于cooKie
2.6、cookie的session的应用场景：cookie可以用来保存用户的登陆信息，如果删除cookie则下一次用户仍需要重新登录
session就类似于我们拿到钥匙去开锁，拿到的就是我们个人的信息，一般我们可以在session中存放个人的信息或者购物车的信息。
2.7、session和cookie的弊端：cookie的大小受限制，cookie不安全，如果用户禁用cookie则无法使用cookie。如果过多的依赖session，当很多用户同时登陆的时候，此时服务器压力过大。sessionId存放在cookie中，此时如果对于一些浏览器不支持cookie，此时还需要改写代码，将sessionID放到url中，也是不安全。

localstorage和sessionstorage的区别

1、localStorage存储在硬盘里，sessionStorage存储在内存里；

2、数据大小不同；

3、localStorage的生命周期是永久的，除非主动删除，sessionStorage的生命周期是临时的，当关闭当前窗口或标签页，数据就会被清空；

4、localStorage可以跨页面使用，sessionStorage只能在当前窗口使用。

css选择器

1.！important 优先级10000
2.内联选择器 优先级1000
3.ID选择器 优先级100
4.类别选择器 优先级10
5.属性选择器 优先级10
6.伪类 优先级10
7.元素选择器 优先级1
8.通配符选择器 优先级0
9.继承选择器 没有优先级

1、标签选择器：**标签名{css属性名：属性值}**通过标签名找到页面中的这类标签，设置样式

2、类选择器： **.类名{css属性名：属性值；}**通过类名找到页面中的带有这个类名的标签，设置样式

3、id选择器：**#id属性值{css属性名：属性值;}**通过id属性值，找到页面中带有这个id属性值的标签，设置样式

4、通配符选择器：***{css属性名：属性值}**找到页面中所有的标签，然后设置样式（开发中应用最少）

css权重

1.从0开始，一个行内样式+1000
2.一个id选择器+100
3.一个属性选择器、class或者伪类+10
4.一个元素选择器，或者伪元素+1，通配符+0。

权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。 当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。

!important > 行内样式 > 内联样式 and 外联样式

css盒模型

html中的各个元素都类似一个一个的盒子里面的物品，但是却叫做css盒模型，是因为css盒模型像一个盒子，把各种html元素包起来，将html元素进行封装，以便于网页布局与排版。

image-20240513102005071 
    1，上面图中蓝色方框指的是html元素，也是内容部分context，可以是一张图片、一个h1标题、一个表格、一个表单等。但是他的大小并不一定是100×100，而是可以修改的。属性width和height用于修改内容部分的大小。
    2，绿色部分，也就是padding部分，指的是内边距，是元素内容与其最近一层束缚框的距离，类似于在一个方格里写字我们写在方格的中间，而与边框保持一定距离一样。
    3，浅橘色部分，也就是border部分，指的是这个边框的宽度，我们常见的就是宽度为1，也就是一条线。
    4，深橘色部分，也就是margin部分，也叫边缘部分，类似于人与人之间保持一定的距离一样，他的作用是保证html元素之间的距离，比如网页上的两种图片需要保持一定的间距才显得好看。
    5，padding，border，margin实际上是每个html元素都存在的css属性。他们可以对元素的上下左右四个方向进行限制。
    6，当存在盒子里嵌套盒子时，也就是html的标签嵌套时，里面的元素默认以左上角作为停靠点。
    7，盒子模型可用简记为：4个矩形套娃。

css 有哪几种定位

1、静态定位：默认值。（没有指定定位方式时）按照文档的书写布局自动分配在一个合适的地方，用margin改变位置。

2、相对定位：脱离正常的文档流，但是其在文档流中的位置依然存在，视觉上相对原来的位置有移动。（设置left、top等值）

3、绝对定位：默认情况下依赖浏览器的左上角为定位基准;如果绝对定位的元素存在父、祖先元素且存在相对定位的时候该元素将依赖具备相对定位的元素来进行定位，而不是左上角。（设置top、right、bottom、left这些偏移值，相对于 static 定位以外的第一个父元素进行定位）在没有父元素的条件下，它的参照为body，该方式脱离文档流

4、固定定位：生成绝对定位的元素，相对于浏览器窗口进行定位。只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，脱离文档流；

标准流
  1. 块级元素会独占一行，从上向下顺序排列。
  2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

12. 如果制作一个访问量很大的网站，对css，js和图片应该怎么处理?

方法1：资源文件按模块进行放置，有利于团队开发

方法2：图片尽量采取聚合技术

方法3：精简压缩css和js文件，减少文件大小

方法4：类库、媒体使用CDN加速，减轻服务器压力

解释jsonp的原理

JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JS怎么创建一个类?

方式1 : var obj = new Object();

方式2 : var obj = {};

ajax原理，什么是同步异步(主观题，答案不唯一)?

Ajax的工作原理：相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

xml和json

json相比xml可读性和可扩张性好、编码及解码难度较低、在数据交互中带宽占用少，并且在当下是最流行的数据交互格式。

css怎么清除浮动

1、给父元素单独定义高度

2、在标签结尾处(前)加空标签并设置clear:both;

3、父元素div定义 伪元素:after

4、父元素定义 overflow:hidden;

5、父元素定义 overflow:auto;

浮动的作用：可以让多个块级元素一行内排列显示。浮动可以改变元素标签默认的排列方式。

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

js数据类型

未定义 (Undefined)，空 (Null)，数字 (Number)，字符串 (String)，布尔值 (Boolean)，符号 (Symbol)，任意大整数 (BigInt)，对象 (Object)。

js 的作用域链

各个作用域的嵌套关系组成一条作用域链。

作用域链主要是进行标识符（变量和函数）的查询，标识符解析就是沿着作用域链一级一级的搜索标识符的过程，而作用域链就是保证对变量和函数的有序访问。
（1）如果自身作用域中声明该变量，则无需使用作用域链
在上面的例子中，如果要在 bar 函数中查询变量 a ，则直接使用 LHS 查询，赋值为 100 即可。
（2）如果自身作用域中未声明该变量，则需要使用作用域链进行查找

js 的作用域，块级作用域，函数作用域

（由于 JavaScript 存在变量提升这种特性，从而导致很多与直觉不符的代码，这也是 JavaScript 的一个重要设计缺陷，这种设计缺陷带来的问题可以去看看JS变量和函数提升。所以 ES6 通过引入块级作用域并配合 let、const 关键字来避开了这种设计缺陷，但是由于 JavaScript 需要向下兼容，所以变量提升在相当长一段时间内还会继续存在。）

作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。在 JS 中作用域分为全局作用域和函数作用域，另外函数作用域可以互相嵌套。（ES6增加了块级作用域）

1、全局作用域：全局作用域中的对象在代码中的任何地方都能访问，其生命周期伴随着页面的生命周期。

2、函数作用域：函数作用域就是在函数内部定义的变量或函数，并且定义的变量或函数只能在函数内部被访问，函数执行结束后，函数内部定义的变量就会被销毁。

3、块级作用域：ES6 中给 JavaScript 新增了块级作用域

  • 块级作用域由{}包括，if语句和for语句里面的{}都属于块级作用域

  • var定义的变量没有块级作用域概念，可以跨块级作用域访问

  • let和const定义的变量只能在块级作用域里访问

    块级作用域是通过词法环境的栈结构来实现的，而变量提升是通过变量环境来实现的，通过两者的结合，JavaScript 引擎也就同时支持了变量提升和块级作用域了。

同源和跨域，跨域问题怎么解决

1、同源策略：它是浏览器最核心也最基本的安全功能。如果缺少了同源策略，浏览器很容易受到 XSS、 CSFR 等攻击。同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。

2、跨域：当浏览器中一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。（什么情况下触发同源策略）

（1）CORS技术（跨源资源共享）：服务器在返回响应报文的时候，在响应头中设置一个允许的header

（2）原生jsonp：通过动态创建script标签,通过script标签的src,向一个不同源的接口发送一个get请求（jsonp不支持post）

  • 获取客户端发送过来的回调函数的名字
  • 得到要通过JSONP形式发送给客户端的数据
  • 根据前两步得到的数据，拼接出一一个函数调用的字符串
  • 把上一步拼接得到的字符串，响应给客户端的<script>标签进行解析执行

具有局限性，不安全，可能会受到XSS攻击；只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 Javascript 调用的问题

（3）jQuery中的jsonp：设置dataType为jsonp，jq会自动动态帮我们创建一个script标签，将url放到src属性中。细节注意点：jq使用jsonp不需要自己设置callback，jq会自动帮我们发送callback参数，参数值就是jq的success回调函数

（4）浏览器设置跨域：通过修改一些设置，让被设置的浏览器没有同源的限制,自然可以实现跨域

PNG格式和JPG格式的区别

1、JPG 使用的是有损压缩——这意味着当图像变小时，图像中的某些数据会被永久删除。从长远来看，这可能会影响文件的质量，因为每次编辑和保存文件时，都会丢失更多数据。
PNG 使用无损压缩。这意味着压缩图像时不会丢失任何数据——无论编辑保存文件多少次，质量都保持不变。图像不会变得模糊或扭曲。

2、最好以 PNG 格式创建屏幕截图，这是几乎所有屏幕截图工具的默认设置。手机端一般会自动将屏幕截图保存为 PNG 格式。主要是因为屏幕截图一般包含具有清晰对比度的精确直线和没有颜色渐变的单色区域。这些都是JPG 格式的主要弱点。

image-20240513111239223

JPG适合用于照片，在风景或人物图片中几乎看不到压缩伪像。由于尺寸小，适合在网站中使用和网络传输。PNG适用于所有包含锐边和纯色的图形。用于保存屏幕截图、图标和需要透明背景的图片。

协商缓存和强缓存

懒加载的原理和你是怎么实现的

1、对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源的时候，再对资源进行请求和加载。

2、原理：监听onscroll事件判断资源位置

首先为所有懒加载的静态资源添加自定义属性字段，比如如果是图片，可以指定data-src为真实的图片地址，src指向loading的图片。
然后当资源进入视口的时候，将src属性值替换成data-src的值。
可以使用元素的getBoundingRect().top判断是否在视口内，也可以使用元素距离文档顶部的距离offsetTop和scrollTop是否小于视口高度来判断：

React setState之后的流程

有什么办法实现深拷贝？

1、浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是指向内存的地址 ，所以如果其中一个对象改变了这个引用类型的值，就会影响到另一个对象。
深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。
2、方法：递归调用、lodash函数库（**lodash.cloneDeep()**）实现深拷贝、通过js的内置对象JSON来进行深拷贝、通过jQuery的extend方法实现深拷贝、Object.assign()拷贝

怎么调试 JS 代码

1、直接在js代码中加入断点进行调试

2、在事件监听器上设置断点

3、在DOM节点中设置断点

（下一步、跳过一些代码、进入函数、跳出函数、跳到下一个断点）

4、使用vs code（安装某些插件）

web安全问题，答了（xss、csrf），怎么防御攻击

\1. 地图展示为什么不用 Google
\2. 小程序为什么不使用框架
\3. 没有学 react 吗
前后端分离是什么

image-20240513113123476

1、”前”特指浏览器端(或客户端)，直接呈现给用户的；后端是服务器端，处理业务逻辑和数据，不呈现给用户（JSP不是前端技术）

2、静态资源和服务(实现接口的业务逻辑)，在开发阶段就分离开发，而部署阶段分离部署在不同服务器上，算是严格意义上的前后端分离。

3、前端人员和后端人员约定好接口后，前端人员彻底不用再关心业务处理是怎么回事，他只需要把界面做好就可以了，后端人员也不用再关系前端界面是什么样的，他只需要做好业务逻辑处理即可。服务的切离，代码管理，服务部署也都独立出来分别管理，系统的灵活性也获得了极大的提升。

4、最核心的就是无论你后端换了什么语言，换了什么人去编写，换了什么样的服务器，只要你们定义的一个接口规则不变，然后不会影响到用户的使用，数据的一个展示。同时反过来也一样，无论你前端换了什么UI框架，欸，我今天用easyui，明天我用layui，后天我用bootstrap，你也能够根据定义的接口文档去展示相关数据和效果，那么就是前后端分离。

闭包是什么

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。

1.让外部访问函数内部变量变成可能

2.变量会常驻在内存中

3.可以避免使用全局变量,防止全局变量污染;

4.可能会造成内存泄漏或溢出。

闭包要注意什么

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

\12. this 指向
\13. var、const、let
\14.

flex 布局

flex是Flexible Box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性

image-20240513135451485

（主轴方向、如何换行、如何对齐、项目放大、缩小比例）

CSS引入的方式有哪些?link和@import的区别是?

内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可

XSS(反射型、存储型、DOM型)

  • 攻击者对含有漏洞的服务器发起XSS攻击（注入JS代码）。
  • 诱使受害者打开受到攻击的服务器URL。
  • 受害者在Web浏览器中打开URL，恶意脚本执行。

防范：

（1）编码：对用户输入的数据进行HTML Entity编码

（2）过滤：移除用户上传的DOM属性，如onerror等，移除用户上传的style节点，script节点，iframe节点等。

（3）校正：避免直接对HTML Entity编码，使用DOM Prase转换，校正不配对的DOM标签。

CSRF

跨站请求伪造

攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账…造成的问题包括：个人隐私泄露以及财产安全。

  1. 登录受信任网站A，并在本地生成Cookie
  2. 在不登出A的情况下，访问危险网站B

Node.js的适用场景？

高并发、聊天、实时消息推送

404、500、301 分别是什么

100-199 用于指定客户端应相应的某些动作。

200-299 用于表示请求成功。

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。

500-599 用于支持服务器错误。 503 – 服务不可用

301：永久移动（网页移动到新的位置）

302：临时移动

400：错误请求（服务器不理解请求的语法）

403：服务器拒绝请求

404：服务器找不到请求的网页

500：服务器内部错误，无法完成请求

502：错误网关

几种CSS布局方式及其特点。

答案：常见的CSS布局方式包括浮动、定位、弹性布局和网格布局。

404、500 错误如何检查

\21. 临时重定向是什么，二者区别
\22. http 2.0
\23. React 没学过吗
\24. vue 如何实现响应式
\25. v-if 和 v-show 区别
\26. 组件间通信方式
\27. 性能优化（使用异步请求)
\28. 给请求排序

框架 vue和react的异同

一、同

①都使用虚拟dom。
②提供了响应式和组件化的视图组件。
③把注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

二、异

vue：1、渐进式框架、自底向上增量开发

​ 2、可以在任意其他类型的项目中使用，使用成本较低，更灵活，主张较弱

3、易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）

react：主张是函数式编程的理念， 实现了前端界面的高性能高效率开发，react很擅长处理组件化的页面。在 React 中，所有的组件的渲染功能都依靠 JSX，它是JavaScript的语法扩展，它在创建UI组件和调试时非常简单有用。

三、总结

1、React：整体是函数式的思想，在react中，是单向数据流，推崇结合immutable来实现数据不可变。
Vue：的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

2、React：思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等。
Vue：把html，css，js组合到一起，用各自的处理方式，Vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。

3、当组件的状态发生变化时，React的机制会触发整个组件树的重新呈现。您可能需要使用额外的属性来避免不必要地重新渲染子组件。虽然Vue的重新渲染功能是开箱即用的，但Vue提供了优化的重新渲染，其中系统在渲染过程中跟踪依赖关系并相应地工作。重新渲染是Vue最显着的特征，也使其成为全世界开发人员广泛接受的框架。

4、react是类式的写法，api很少，而Vue是声明式的写法，通过传入各种options，api和参数都很多。所以react结合typescript更容易一起写，Vue稍微复杂。

手写防抖节流

浏览器性能优化策略

一、感知性能优化（loading图标或者骨架屏）

如果一个页面的加载时间很长，我们也可以通过一些方式让用户觉得没有那么慢。

二、HTML优化

1、HTML代码压缩，将注释、空格和新行从生产文件中删除。减少HTML的大小，加快网站的页面加载时间，并显著减少用户的下载时间。

2、删除不必要的注释

3、删除不必要的属性： type="text/javascript" or type="text/css"

4、使用语义化标签image-20240513150309276

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。

有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。

方便其他设备解析，如盲人阅读器根据语义渲染网页

有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

5、减少iframe数量

6、削减DOM数量和层级数量

7、减少HTTP请求次数（将多个 CSS 和 JavaScript 文件合并为一个文件）

三、JS优化

1、