淘天集团前端开发工程师一面面经

2024-08-17

元素水平、垂直居中面试官首先问了如何实现元素的水平和垂直居中。

答：弹性布局

dislay： flex
align-items： center // 垂直居中
justify-content：center // 水平居中

相对定位

父： position：relative
子: position: absolute
top：50%;
left:50%;
transform:translate(-50%,-50%)

grid 布局

表格布局

单行/多行文字设置省略号接着，讨论了如何在单行和多行文字中设置省略号。

white-space: nowrap;   // 不自动换行
overflow: hidden; //不滚动
text-overflow: ellipsis; // 省略的文本用省略号

display: -webkit-flex; // 弹性盒子
-webkit-box-orient: vertical; //垂直布局
-webkit-line-clamp: 3 // 最多展示3行
overflow；hidden;
text-overflow: ellipsis;

JavaScript 判断用户端设备然后，面试官询问了如何使用 JavaScript 判断用户端设备。

答：用户端设备是指：手机、电脑、ipad？

使用 navigator 对象。navigator 对象包含了浏览器的信息

function getBrowserType() {  // 判断浏览器的
    var userAgent = navigator.userAgent;
    if (/MSIE|Trident/.test(userAgent)) {
        return 'Internet Explorer';
    } else if (/Edge/.test(userAgent)) {
        return 'Microsoft Edge';
    } else if (/Firefox/.test(userAgent)) {
        return 'Firefox';
    } else if (/Chrome/.test(userAgent) && /Google Inc/.test(navigator.vendor)) {
        return 'Chrome';
    } else if (/Safari/.test(userAgent) && /Apple Computer/.test(navigator.vendor)) {
        return 'Safari';
    } else if (/Opera/.test(userAgent)) {
        return 'Opera';
    }
    return 'Unknown';
}

function isMobileDevice() {  //判断移动设备的
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    // 判断是否包含特定的移动标识
    if (/windows phone/i.test(userAgent)) {
        return true;
    }
    if (/android/i.test(userAgent)) {
        return true;
    }
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return true;
    }
    if (/BlackBerry/i.test(userAgent)) {
        return true;
    }
    if (/IEMobile/i.test(userAgent)) {
        return true;
    }
    // 其他可能的移动设备
    return false;
}

TypeScript 中 type 和 interface 的区别面试官问了 TypeScript 中 type 和 interface 的区别。

答：ts 的 type 是什么忘记了后面学习了在补充
TypeScript 如何定义联合类型讨论了在 TypeScript 中如何定义联合类型。

答：联合类型使用竖线（|）分隔每个类型。？是可选类型
深入 TypeScript 场景题面试官给出了一些 TypeScript 的场景题，要求深入分析。
React 相关问题面试官问我是否熟悉 React，并提出了一些相关问题。
项目难点面试官让我分享在项目中遇到的难点及解决方案。
路由懒加载及其原理讨论了路由懒加载的实现及其原理。

blog.csdn.net/czj10495616…

路由懒加载做了什么事情？
1. 将对应的组件打包成一个一个 js 块
2. 只有在这个路由被访问到的时候才会去加载对应的组件
路由懒加载实现的方式

vue 异步加载技术

1：vue-router 配置路由，使用 vue 的异步组件技术，可以实现懒加载，此时一个组件会生成一个 js 文件。 2：component: resolve => require(['放入需要加载的路由地址'], resolve)
```
path: '/problem',
name: 'problem',
component: resolve => require(['../pages/home/problemList'], resolve)
}
```
import
```
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
```
require
```
const HelloWorld=resolve=>{
		require.ensure(['@/components/HelloWorld'],()=>{
			resolve(require('@/components/HelloWorld'))
		})
	}
```
实现的原理

还是跟 webpack 打包有关系，还要在学习一下
页面性能差，如何定位面试官问了如果页面性能差，如何进行定位。

答：

使用开发者工具录制资源加载的时间

network 请求的时间

分析有没有特别大的图片
深入性能优化场景题面试官给出了一些性能优化的场景题，要求深入分析。
深入分页优化场景题最后，面试官提出了一些分页优化的场景题，要求详细解答。

面试题积累2

淘天集团前端开发工程师一面面经

2024-08-17