搜索
您的当前位置:首页正文

一文看懂前端面试八股文!!通俗简单!

来源:尚车旅游网

async

        async是异步的意思,await则可以理解为async wait ,所以可以立即async就是用来声明一个异步方法,而await是用来等待异步方法执行的。

        扩展: JSONPlaceholder 是一个免费的在线 REST API,用于开发和测试前端应用程序。它提供了一组模拟的 HTTP 接口,可以进行常见的 CRUD(创建、读取、更新、删除)操作,如获取用户信息、文章、评论等。这样,开发人员可以在不使用真实后端服务的情况下,通过 JSONPlaceholder 来模拟和测试前端应用程序的数据交互。

function f() { return Promise.resolve('TEST'); }

async function asyncF() { return 'TEST'; }

这两种写法都是等效的,第一种使用传统的Promise去创建,第二种使用了语法糖。

Promise.resolve() 可以创建一个返回给定值的 Promise 对象,这里返回的是字符串 'TEST'

用async声明的函数会被自动封装为一个 resolved 状态的 Promise 对象。

async function fn1() {

console.log(1)

await fn2()

console.log(2) // 阻塞

}

async function fn2() {

console.log('fn2')

}

fn1()

console.log(3);

await 会阻塞下面的代码(即加入微任务队列),先执行 async外面的同步代码,同步代码执行完,再回到 async 函数中,再执行之前阻塞的代码

所以上述输出结果为:1,fn2,3,2

fetch网络请求接口

在css3中,为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或者javascript. 直接使用transition

transition控制的是属性值的过渡效果,而不是特定的属性

cursor: pointer; 鼠标放上去会变成手性指示

数据加密

加密方式:对称加密,非堆成加密,哈希算法。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Symmetric Encryption Example</title>
</head>

<body>
    <h1>Symmetric Encryption Example</h1>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

    <script>
        // 定义一个密钥(需要确保密钥的安全性)
        const key = "mySecretKey123";

        // 待加密的数据
        const data = "Hello, this is a secret message.";

        // 加密函数
        function encryptData(data, key) {
            const encryptedData = CryptoJS.AES.encrypt(data, key).toString();
            return encryptedData;
        }

        // 解密函数
        function decryptData(encryptedData, key) {
            const decryptedData = CryptoJS.AES.decrypt(encryptedData, key).toString(CryptoJS.enc.Utf8);
            return decryptedData;
        }

        // 加密数据
        const encryptedData = encryptData(data, key);
        console.log("Encrypted Data:", encryptedData);

        // 解密数据
        const decryptedData = decryptData(encryptedData, key);
        console.log("Decrypted Data:", decryptedData);
    </script>

</body>

</html>

中数据类型

  • 在JS中,我们已知有5种基本数据类型:String、Number、Boolean、Undefined、Null。
  • 一种引用数据类型:Object 包含(Function, Array)

Symbol、BigInt

es6的时候新增Symbol数据类型,每个通过Symbol()创建的对象属性值都是独一无二的,避免了重复。

// 创建一个 Symbol 值
const mySymbol = Symbol('description');

// 使用 Symbol 作为对象的属性名
const obj = {
  [mySymbol]: 'Hello, Symbol!'
};

console.log(obj[mySymbol]); // 输出: Hello, Symbol!

在 JavaScript 中,普通的 Number 类型使用双精度浮点数表示,其最大安全整数是 2^53 - 1,es10中新增BigInt,它可以表示任意精度的整数,取决于计算机内存的大小

BigInt 类型的字面量以 "n" 结尾,用来区分普通的 Number 类型

定位

  • position属性取值:static(默认)、relative、absolute、fixed、inherit、sticky。

  • float属性取值:none(默认)、left、right、inherit。

  • display属性取值:none、inline、inline-block、block、table相关属性值、inherit。

POST和GET请求的区别

1.针对数据操作的类型不同.GET对数据进行查询,POST主要对数据进行增删改!简单说,GET是只读,POST是写。

2.参数大小不同. GET请求在URL中传送的参数是有长度的限制,而POST没有限制

3.安全性不同. GET参数通过URL传递,会暴露,不安全;POST放在Request Body中,相对更安全

4.浏览器回退表现不同 GET在浏览器回退时是无害的,GET 请求可能会比较宽松地进行重试,而 POST 请求则会更加谨慎,避免自动重复发起请求,以确保数据提交的准确性和安全性。

6.浏览器对响应的处理不同GET请求参数会被完整的保留在浏览器历史记录里,而POST中的参数不会被保留

图片懒加载原理

图片懒加载也叫延迟加载,只加载当前屏幕的图片,可视区域外的图片不会进行加载,只有当屏幕滚动的时候才加载。

特点

  • 提高网页加载速度
  • 减少后台服务器压力
  • 提升用户体验

原理

  • 将图片地址存储到 data-xxx 属性上
  • 判断图片是否在可视区域
  • 如果在,就设置图片 src
  • 绑定 scroll 监听事件

节流和防抖

节流

节流是一种常用的性能优化技术,它可以限制函数的执行频率,避免过多的重复操作,提升页面的响应速度。

函数在 n 秒内只执行一次,如果多次触发,则忽略执行。

应用场景

  • 拖拽场景
  • scroll场景
  • 窗口大小调整

「手写代码-节流」

防抖

防抖函数可以将多次高频率触发的函数执行合并成一次,并在指定的时间间隔后执行一次。通常在处理输入框、滚动等事件时使用,避免频繁触发事件导致页面卡顿等问题。

函数在 n 秒后再执行,如果 n 秒内被触发,重新计时,保证最后一次触发事件 n 秒后才执行。

应用场景

  • 输入框搜索
  • 表单提交按钮
  • 文本器保存

「手写代码-防抖」

SPA首屏为什么加载慢?

SPA首屏加载慢可能有以下原因:

  • JavaScript文件过大:SPA通常有很多 JavaScript 文件,如果这些文件的大小过大或加载速度慢,就会导致首屏加载缓慢。可以通过代码分割和打包、使用CDN等方式来优化加载速度。
  • 数据请求过多或数据请求太慢:SPA通过 AJAX 或 Fetch 等方式从后端获取数据,如果数据请求过多或数据请求太慢,也会导致首屏加载缓慢。可以通过减少数据请求、使用数据缓存、优化数据接口等方式来优化数据请求速度。
  • 大量图片加载慢:如果首屏需要加载大量图片,而这些图片大小过大或加载速度慢,也会导致首屏加载缓慢。可以通过图片压缩、使用图片懒加载等方式来优化图片加载速度。
  • 过多的渲染和重绘操作:如果在首屏加载时进行大量的渲染和重绘操作,也会导致首屏加载缓慢。可以通过尽可能少的DOM操作、使用CSS3动画代替JS动画等方式来优化渲染和重绘操作。
  • 网络问题:网络问题也会影响SPA首屏加载速度,比如网络延迟、丢包等。可以通过使用CDN、使用HTTP/2等方式来优化网络问题。

为什么要做性能优化

性能优化是为了提高网页的加载速度和相应速度,给用户带来更好的体验和用户满意度,同时还能减少服务器的负载压力,以此来提升程序的稳定性,具体有以下几个因素:

  • 提高用户体验
  • 增加页面访问量
  • 提高搜索引擎排名
  • 减少服务器压力
  • 节约成本
  • 提高用户留存率

常见性能优化有哪些关键指标?

  • 首屏加载时间First Contentful Paint(FCP):首次内容绘制时间,指浏览器首次绘制页面中至少一个文本、图像、非白色背景色的canvas/svg元素等的时间,代表页面首屏加载的时间点。
  • 首次绘制时间First Paint(FP):首次绘制时间,指浏览器首次在屏幕上渲染像素的时间,代表页面开始渲染的时间点。
  • 最大内容绘制时间Largest Contentful Paint(LCP):最大内容绘制时间,指页面上最大的可见元素(文本、图像、视频等)绘制完成的时间,代表用户视觉上感知到页面加载完成的时间点。
  • 用户可交互时间Time to Interactive(TTI):可交互时间,指页面加载完成并且用户能够与页面进行交互的时间,代表用户可以开始操作页面的时间点。
  • 页面总阻塞时间Total Blocking Time (TBT):页面上出现阻塞的时间,指在页面变得完全交互之前,用户与页面上的元素交互时出现阻塞的时间。TBT应该尽可能小,通常应该在300毫秒以内。
  • 搜索引擎优化Search Engine Optimization (SEO):网站在搜索引擎中的排名和可见性。评分范围从0到100,100分表示网站符合所有SEO最佳实践。

除此之外还有常见的258原则、GOOGLE团队建议

258原则

  • 2:页面的加载时间应该控制在2秒以内,这是用户能够接受的最短时间。
  • 5:页面的加载时间在5秒以内,用户对页面加载速度的不满意度开始上升。
  • 8:页面的加载时间超过8秒,用户的流失率将急剧增加,用户很可能会放弃访问该页面。

性能优化方式有哪些

HTML&CSS

  • 减少DOM数量,减轻浏览器渲染计算负担。
  • 使用异步和延迟加载js文件,避免js文件阻塞页面渲染
  • 压缩HTML、CSS代码体积,删除不要的代码,合并CSS文件,减少HTTP请求次数和请求大小。
  • 减少CSS选择器的复杂程度,复杂度与阿高浏览器解析时间越长。
  • 避免使用CSS表达式在javascript代码中
  • 使用css渲染合成层如transform、opacity、will-change等,提高页面相应速度减少卡顿现象。
  • 动画使用CSS3过渡,减少动画复杂度,还可以使用硬件加速。

JS

  • 减少DOM操作数量
  • 避免使用with语句、eval函数,避免引擎难以优化。
  • 尽量使用原生方法,执行效率高。
  • 将js文件放到文件页面底部,避免阻塞页面渲染
  • 使用事件委托,减少事件绑定次数。
  • 合理使用缓存,避免重复请求数据。

Vue

  • 合理使用watch和computed,数据变化就会执行,避免使用太多,减少不必要的开销
  • 合理使用组件,提高代码可维护性的同事也会降低代码组件的耦合性
  • 使用路由懒加载,在需要的时候才会进行加载,避免一次性加载太多路由,导致页面阻塞
  • 使用Vuex缓存数据
  • 合理使用mixins,抽离公共代码封装成模块,避免重复代码。
  • 合理使用v-if 、v-show
  • v-for 不要和v-if一起使用,v-for的优先级会比v-if高
  • v-for中不要用index做key,要保证key的唯一性
  • 使用异步组件,避免一次性加载太多组件
  • 避免使用v-html,存在安全问风险和性能问题,可以使用v-text
  • 使用keep-alive缓存组件,避免组件重复加载

Webpack优化

  • 代码切割,使用code splitting将代码进行分割,避免将所有代码打包到一个文件,减少响应体积。
  • 按需加载代码,在使用使用的时候加载代码。
  • 压缩代码体积,可以减小代码体积
  • 优化静态资源,使用字体图标、雪碧图、webp格式的图片、svg图标等
  • 使用Tree Shaking 删除未被引用的代码
  • 开启gzip压缩
  • 静态资源使用CDN加载,减少服务器压力

网络优化

  • 使用HTTP/2
  • 减少、合并HTTP请求,通过合并CSS、JS文件、精灵图等方式减少请求数量。
  • 压缩文件, 开启nginx,Gzip对静态资源压缩
  • 使用HTTP缓存,如强缓存、协商缓存
  • 使用CDN,将网站资源分布到各地服务器上,减少访问延迟


作者:https://juejin.cn/post/7273119689185673253

因篇幅问题不能全部显示,请点此查看更多更全内容

热门图文

Top