2022.8.19 携程外包面试

kagamkuro

已于 2024-06-04 17:04:46 修改

阅读量631

点赞数

文章标签：面试前端 javascript

于 2022-08-22 12:51:38 首次发布

本文链接：https://blog.csdn.net/kagamkuro/article/details/126463333

版权

上周五面试了携程外包，问的所有内容全是八股题，是很简单的，但是有些问题没准备过因此没答上来。还有这面试官总喜欢质疑，不够友好，十分傲慢，我觉得不行！

难度：简单

答案主要从百度搜的，以及自己的理解，有不对的请立即指正

html中有哪些行内元素，块级元素

平时常用的几个：
行内元素
b, a, span, img, button, input, label,audio, video
块级元素
div, p, ul, ol, h1

html5有哪些新标签

平时常用的标签： < canvas> < audio> < video> < embed>
语义化标签：< header> < nav> < article> < section> < footer> 等

css3有哪些新属性

box-shadow, text-shadow, border-image, border-radius等

有没有使用过css预处理器

之前使用过scss，它跟css相比一个是可以定义变量，一个是具有了缩进形式

js数组的一些常用api

push() 在末尾添加元素
shift() 删除第一项
pop() 删除末尾元素
reverse() 数组反转
sort() 数组排序
join() 转数组为字符串
indexOf() 返回元素的索引

如何解决any带来的弊端

any放弃了类型检测，因此比较危险，因此我们除非在一些必要情况下使用any，其他情况下能不用就不用

优化项目性能的一些方案

合并压缩css和js以及其他资源
减少无效的http请求
图片可以考虑预加载
优化首屏加载：.

资源文件如何进行打包

项目中内置了Webpack，可以进行打包，主要是把代码和资源文件打包成多个bundle

如何解决跨域问题

跨域问题是指协议、域名、端口号不同时，就会报cors错误，这是由于违反了浏览器的同源策略
React中可以使用http-proxy-middleware，把其中的target设置成后端服务器的域名，相当于前端起了一个代理服务器
比如：

import proxy from 'http-proxy-middleware'

export default app => {
  app.use(
    proxy('/api', {
      target: 'https://localhost:44359/',
      changeOringin: 'ture',
      pathRewhite: { '^/api': '' }
    })
  )
}

其他的解决方案还有改发jsonp，在服务端响应header头添加Access-Control-Allow-Origin等等

说说React生命周期

挂载：插入了真实dom，组件已经加载好，此时会调用componentDidMount()函数
更新：当组件的 state 或 props 发生变化时，组件就会更新，此时会重新渲染页面，并且会调用componentDidUpdate()函数
卸载：组件从dom中被移除，此时会调用componentWillUnmount()函数

getDerivedStateFromProps()主要用在哪里

这个生命周期在挂载之前，当属性改变的时候会被调用，作用是根据改变的属性更新状态。

有没有用过hooks

hooks是新特性，使得函数组件拥有生命周期以及状态，和类组件一样。类组件使用过多，不利于js函数式编程风格的特性。
useState：使得函数组件拥有state
useEffect：使得函数组件拥有componentDidMount，componentDidUpdate 和 componentWillUnmount等生命周期
useContext：使得函数组件可以数据共享
还有useCallback useReducer useRef等其他功能

useEffect如何体现生命周期

const isMounted = useRef(false);
useEffect(() => {
    //componentDidMount
    if(isMounted.current){
          //componentDidUpdate
    }
    return () => {
    // componentWillUnmount
}
  }, []);