告别前端开发生涯【TX前端面经整理(二面挂)】

最新推荐文章于 2024-06-12 11:13:48 发布

huiiyu0

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量123

点赞数

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/sketchlcy/article/details/130883925

版权

实现函数将10进制转36进制
判断一个完全二叉树是否镜像对称。input=[1,2,2,null,3,3,null]
问了一堆数据库的东西，说做后台
浏览器渲染（输入url到渲染）
http缓存，catch-control
js渲染阻塞异步加载
前端常见的安全问题
Nodejs事件循环：Eventloop—会不断寻找可执行的任务来执行。在执行完同步任务(即清空调用栈)之后，首先会执行微任务队列的任务，微任务队列的任务清空后才会执行宏任务。(先做软菜，并不断检查还有什么菜没做，按照指定顺序执行；软菜做完开始上菜：浏览器可能发生渲染，在渲染后再执行宏任务)
聊项目聊项目
场景题：设计一个排行榜（数据结构），小明排行名次提升后排行榜怎么重新排序
浏览器和服务器交互的方式有哪些？
你认为优秀的前端的是怎么样的？
你最近的学习到的技术？
TCP和UDP的区别
一个往大了整一个往小了整，两个index记录头尾索引，对比头尾大小就ok了。
数组展开，然后创建一个空对象，遍历第一个数组，记录第一个数组出现过的数字，再遍历第二个数组，如果数字已经被记录过，就加入到一个result的数组中，最后对result从小到大排序即可。
大小写字母代表同步异步函数：创建了一个current数组记录当前需要执行的函数，初值为入口函数，一个needEnd数组记录所有已经开始需要结束的函数，一个对象记录函数之间的关系，最后一个order数组记录完整的顺序；如果当前current为空，打印order.join；while不为空，order.push(method)，对于同步函数和异步函数，只是current更新的方式不同而已。就很不错

①

可能是做了笔试，二面三面好像没有手撕题目。

一面（2022.6.27）：难得是个女面试官，问的内容挺基础的。
1. 自我介绍、学前端多久了，怎么学的、最近在看的东西、问项目难点
2. 宏任务与微任务：JS是单线程的只有一个调用栈，按照先入后出执行调用栈时会先执行同步的任务(马上就能执行的)；调用栈在发现异步任务的时候会把其放入队列中(同步队列和异步队列—都按照先入先出的规则)。会被归为宏任务的队列：1. 新程序或子程序被直接执行；2. 时间的回调函数； 3. setTimeout()和setInterval()； 4. requestAnimationFrame、I/O等。微任务队列：Promise.then() .catch() .finally()、MutationObserver、Object.observe、Node.js里的process.nextTick()
3. 大文件上传技术方案、分片，续传
4. 封装的东西，axios的封装，封装的vue的hooks，取消请求：ajax-更新请求但不渲染页面
5. es6、ts和es6的区别
6. vue2和vue3，改进：①pinia—
7. worker除了webworker还有啥类型
8. let和const
9. ~~http1,http2,http3的改进~~
10. ~~css实现小红点，口述~~
11. ~~算法：列表转树~~
12. 反问
~~二面（2022.7.4）：全程在盘问项目和博客写的东西~~
1. ~~自我介绍、最近在看的文章~~
2. ~~为什么用虚拟dom，声明式语法和过程式语法~~
3. ~~说项目~~
4. ~~FileReader，ArrayBuffer~~
5. ~~gitlab flow~~
6. ~~husky 干嘛的~~
7. ~~rebase，什么场景~~
8. ~~cherry-pick，什么场景~~
9. ~~monorepo，具体场景，为什么不用npm link~~
10. 反问
~~三面（2022.7.14）：这一面面试官人很好，全程像是在聊天。~~
②

腾讯新闻（一面）
1. 组件通信
2. webpack打包流程
3. 浏览器两个标签页通信（localstorage、postmessge、Websocket、cookie）websocket使用http协议、后与浏览器保持TCP持久连接，请求头：connection：upgrade，upgrade：websocket，key和version。
4. ES6新特征继承：会继承，除了私有属性，父类的所有属性和方法，都会被子类继承，其中包括静态方法。
5. vuex mutation和action的区别
6. 前端优化
7. 给div中的第三个p标签加样式
8. 获取dom节点
9. Flex布局和Grid布局
10. 水平垂直居中
11. git 查看当前分支的提交记录
12. 用什么git指令解决冲突
13. 代码考核：数组去重
③

一面
1. 自我介绍
2. H5 与小程序如何交互？
3. 小程序如何得到 H5 中的操作？
4. 移动端适配
5. 如何根据 UI 设计的？
6. 知道 rpx？
7. 项目难点？
8. 懒加载怎么在这个项目中实现？
9. 样式怎么存储的？
10. 如果要生成海报，并能保存到本地。应该如何实现？
11. 图片优化？
12. CDN？
13. 输入 url 到渲染过程？
14. 对页面进行操作（点击按钮，未购买=>已购买）浏览器会发生什么？
15. 重排重绘区别
16. 样式的改变可以采用哪种方式？
17. 使用过预处理器吗具体说说功能
18. 数据如何请求（axios 还是调用库）
19. √ 前后端交互的数据格式 JSON 的数据类型？
20. vue 双向数据绑定原理
21. 其他双绑方式（vue3）
22. 用户多次下拉刷新渲染，用什么优化？—— 防抖节流原理
23. 使用过vuex吗 mutations actions 区别、与 Pinia 的区别
24. Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
25. 缓存的方式区别
26. 每个会话存储的原理了解吗为什么互不影响
27. 快排
28. 聊家常
二面
1. 项目背景（深挖项目）
2. 遇到的难点
3. 项目中的性能问题
4. 用插件压缩图片前后对比
5. 图片压缩的参数（例如格式等）
6. jpg是有损压缩吗
7. 测试的时候遇到过手机发热吗？怎么测试的？
8. 如果让你选择使用H5或者小程序，你怎么选择？
9. 为什么目前很多公司使用小程序而不是app
10. H5和小程序的区别
11. vue3最显著的特点
12. 点击浏览器中的某一个元素，会发生什么
13. 可以拿到该元素的哪些属性
14. 文本的tag是什么
15. 节点类型
16. 实现json 的stringify

bootstrap面试(样式，参考API文档)

加载bootstrap：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

什么是Bootstrap网格系统（Grid System）？
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
Bootstrap 网格系统（Grid System）的工作原理？
（1）行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
（2）使用行来创建列的水平组。
（3）内容应该放置在列内，且唯有列可以是行的直接子元素。
（4）预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
（5）列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
（6）网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
对于各类尺⼨的设备，Bootstrap设置的class前缀分别是什么
超⼩设备⼿机（ <768px ）： .col-xs-*
⼩型设备平板电脑（>=768px ）： .col-sm-*
中型设备台式电脑（>=992px ）： .col-md-*
⼤型设备台式电脑（>=1200px ）： .col-lg-*
Bootstrap如何设置响应式表格？
增加class=“table-responsive”
元素浮动及清除浮动的class？
（1） class="pull-left"元素浮动到左边
（2）class="pull-right"元素浮动到右边
（3） class=“clearfix” 清除浮动

jQuery面试（js库）

jQuery 库中的 $() 是什么？

$() 函数是 jQuery() 函数的别称，$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。
网页上有 5 个 <div> 元素，如何使用 jQuery来选择它们？
jQuery 里的 ID 选择器和 class 选择器有何不同？

选择元素、class、id，使用$(””)来选择。
如何在点击一个按钮时使用 jQuery 隐藏一个图片？
这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。你需要知道如何为按钮设置事件并执行hide() 方法，代码如下所示：

$('#ButtonToClick').click(function(){

$('#ImageToHide').hide();

});
$(document).ready() 是个什么函数？为什么要用它？

ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题。

JavaScript window.onload 事件和 jQuery ready 函数有何不同？
这个问答是紧接着上一个的。JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。
另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。
如何找到所有 HTML select 标签的选中项？$(“body”).可否？？

这是面试里比较棘手的 jQuery 问题之一。这是个基础的问题，但是别期望每个 jQuery 初学者都知道它。你能用下面的 jQuery 选择器获取所有具备 multiple=true 的标签的选中项：

$('[name=NameOfSelectedTag] :selected')

这段代码结合使用了属性选择器和 :selected 选择器，结果只返回被选中的选项。你可按需修改它，比如用 id 属性而不是 name 属性来获取 <select> 标签。
jQuery 里的 each() 是什么函数？你是如何使用它的？
each() 函数允许你遍历一个元素集合。可以传一个函数给 each() 方法，被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题，举个例子，如何在 alert 框里显示所有选中项。我们可以用上面的选择器代码找出所有选中项，然后我们在 alert 框中用 each() 方法来一个个打印它们，代码如下：

 `$('[name=NameOfSelectedTag] :selected').each(function(selected) {`
    
    `alert($(selected).text());`
    
    `});`

其中 text() 方法返回选项的文本。

你是如何将一个 HTML 元素添加到 DOM 树中的？
你可以用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。这是 jQuery 提供的众多操控 DOM 的方法中的一个。你可以通过 appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。
你能用 jQuery 代码选择所有在段落内部的超链接吗？
使用 $( ‘p a’ )来选择所有嵌套在段落（<p>标签）内部的超链接（<a>标签）
$(this) 和 this 关键字在 jQuery 中有何不同？
$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)
你如何使用jQuery来提取一个HTML 标记的属性例如. 链接的href?
attr() 方法被用来提取任意一个HTML元素的一个属性的值. 你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接，然后你可以应用attr()方法来获得他们的href属性的值。下面的代码会找到页面中所有的链接并返回href值：

$('a').each(function(){

alert($(this).attr('href'));

});
你如何使用jQuery设置一个属性值?
前面这个问题之后额外的一个后续问题是，attr()方法和jQuery中的其它方法一样，能力不止一样. 如果你在调用attr()的同时带上一个值。
对象.attr(“name”,“value”)；name是属性的名称，value是这个属性的新值
对象.prop(“name”,“value”);
设置多个属性值：对象.attr(“name”:“value”,“name”:“value”)属性：属性值，属性：属性值

jquery中attr和prop的区别

对于html元素本身就带有的固定属性（本身就带有的属性），在处理时，使用prop方法可以操作布尔类型的属性

对于html元素我们自己定义的dom属性，在处理时，使用attr方法不可以操作布尔类型的属性

<a href = "#" id="link1" class="btn" action="delete">删除</a>

这个例子里的<a>元素的dom属性值有"id、href、class和action"，很明显，前三个是固有属性，而后面一个action属性是我们自己定义上去的

<a>元素本身是没有属性的。这种就是自定义的dom属性。处理这些属性时，建议使用attr方法，使用prop方法对自定义属性取值和设置属性值时，都会返回undefined值。

像checkbox，radio和select这样的元素，选中属性对应“checked”和"selected"，这些也属于固有属性，因此需要使用prop方法去操作才能获取正确答案

14. jQuery中 detach() 和 remove() 方法的区别是什么?

尽管 detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于 detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 而 remove() 方法则会保持过去被移除对象的引用. 你也还可以看看，用来向DOM中添加元素的 appendTo() 方法.

15. 你如何利用jQuery来向一个元素中添加和移除CSS类?

通过利用 addClass() 和 removeClass() 这两个 jQuery 方法。动态的改变元素的class属性可以很简单例如. 使用类“.active"来标记它们的未激活和激活状态等等，.addClass(“类名”)添加元素 .remove() 删除样式类

16. 使用 CDN 加载 jQuery 库的主要优势是什么 ?【http://c.biancheng.net/view/8042.html】

这是一个稍微高级点儿的jQuery问题。除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次。因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。

17. jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?

ajax() 方法更强大，更具可配置性, 让你可以指定等待多久，以及如何处理错误。

get() 方法是一个只获取一些数据的专门化方法。

18. jQuery 中的方法链是什么？使用方法链有什么好处？

方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对 DOM 进行了一轮查找，性能方面更加出色。

19. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样？

这通常用于阻止事件向上冒泡。

20. 哪种方式更高效：document.getElementbyId(“myId”) 还是 $(“#myId”)？

document.getElementbyId(“myId”)直接调用了 JavaScript 引擎。

React

💡 React 将 HTML 与 JavaScript 结合在了一起，以此创建出一个新的标记语言 JSX。React 还使得管理整个应用程序的数据流变得更容易。

💡 需要学习创建不同的 React 组件，以 state props 管理数据，以及使用不同的生命周期方法（例如 componentDidMount）和更多内容。

入门：https://zh-hans.reactjs.org/tutorial/tutorial.html

class ShoppingList extends React.Component {
  render() {    //render返回了一个react元素
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>);
  }
}
等价于
return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

1.关于嵌套的 JSX，必须返回单个元素。利用{/* */}包裹注释。

ReactDOM.render(JSX, document.getElementById(“DOM节点”));

在这里插入图片描述

2.任何 JSX 元素都可以使用自闭合标签编写，并且每个元素都必须关闭。

3.React 中的所有内容都是一个组件

js方法创建组件：组件首字母大写——const DemoComponent = function()

利用class创建：

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
}

4.引入组件

子组件
嵌套组件 ReactDOM.render(, targetNode)
用props方法传递组件（3中的表示可以写做）

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      
			</button>);
  }
}

Docker

💡 镜像（Mirroring）是一种文件存储形式，是冗余的一种类型，一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本即为镜像。
定制镜像文件（Dockerfile）：每个镜像形成的特定步骤操作指南（菜谱），指明操作系统、应用指南以及各种指令。

容器介绍b站视频1
容器介绍b站视频2

杂

虚拟机、容器、镜像

Docker按照特定开发环境配置，并不需要创建完整的虚拟操作系统，但还是会创建独立环境，也就是容器container。container里面也有操作系统，可以跑各自的应用程序，互不干扰。
container之间共用主机内核但不直接访问内核，而是通过Docker引擎访问，容器中需要的应用会根据实际情况增加。
在这里插入图片描述