滴滴前端日常实习面经：已oc

因为看到有人说链接未失效是二面通过了，想问一下大家身边有没有人同一天走完一二面，链接当天没有失效，但是后面发现挂了的5.14更新------------------------------4.28 一二面5.14 hr说招满了，应该🈚️了

项目实习相关问题八股h5 新增什么？css3 新增什么？canvas 用过吗？对 SEO 的了解（只说了 meta 标签中写利于搜索的关键词，同时优化 html 结构）行元素有哪些？块级元素有哪些？行内块有哪些？有没有用过视频音频标签（没有）选择器有哪些？权重有没有用过父子原则器通配符选择器（没怎么用）对 flex 布局了解，细说，flex：1 和 flex：auto 是啥？哪个属性 flex 布局交叉轴转 180 度（不会）function前面除了async还能加啥（不会）promise 讲一讲，async 和 await 为什么能实现同步形式？他们为什么会出现async 和 await 原...

1. 常见的行内元素2. 网页中head部分的meta标签有什么作用3. 子元素如何对父元素实现水平垂直居中4. 有用过grid吗？（了解过，但是没在项目中使用过）5. css中rem和em的区别6. 列举position的值7. 伪类和伪元素有什么区别8. canvas和svg有什么区别（回答了不熟悉canvas，svg使用一般是直接在网站中选取svg图标插入）9. 了解过svg的图标是如何实现的吗10. 列举数组有哪些方法11. 针对回答的方法，问了push、splice、shift、slice、fliter哪些是改变原数组，哪些不改变12. 讲一下防抖和节流的使用场景13. 字符串反转 说一下思路14. 数组随机打乱 说一下思路15. vue3中的hooks方法用过吗？ （我只说了生命周期，好像不是16. computed和watch的区别17. 列表渲染时，key有什么作用18. 图片懒加载具体是什么实现的（使用了vueuse中的useIntersectionObserver）19. 知道vueuse的作者吗（这个真不知道）20. 之前自己有写过一个hooks吗21. 有哪些常见的持久化方案22. cookies、sessionstorage、localstorage常见的使用场景23. 了解或者使用过ts吗（只看了一点ts，面试官还是比较看重这里的，表示ts一定要会24. package.json文件是干什么用的？25. package-lock.json文件和package.json有什么区别？26. 列举发起网络请求常见的http的header27. 说一下http的状态码28. 有哪些途径学习前端的知识29. 有提到过在掘金看帖子，还问我有没有固定关注的人或者订阅的专栏30. 未来对于前端学习有什么规划吗31. 怎么看别人都说ai会取代前端？说说看法反问：针对面试表现能不能提一些未来学习的建议？一定要会ts，前端工程化方面虽然使用不多，但是也要掌握滴滴流程很快，十分钟内就知道结果了。

好伤心，面试官结束时候评价是整体还行，等视频挂了5分钟内收到感谢信这前后反差，我只好安慰面试官尊重自己，但是谁来安慰我呀面试上来开始问八股1，说说 url到浏览器页面显示整个过程2，http 缓存3，流式输出，你知道哪些可以实现的方式？AI生成到前端你觉得采用那种方式？3，css 设置的元素要不断旋转，怎么写（不到一分钟面试官问我是否会，不会可以换一题，那我还行想到用什么，那换一题吧）keyfram 里面设transform；animation 里面应用设定的spin；代码如下：（linear 匀速转，infinite 无限循环）@keyframes spin {    from {        transform: rotate(0deg);    }    to {        transform: rotate(360deg);    }}.spinner {    animation: spin 2s linear infinite; /*持续2秒 转一圈*/}4，输出解释题：function app() {    const [count, setCount] = useState(0)    useEffect(() => {        const interval = setInterval(() => {            console.log('useEffect')            setCount(count + 1)        }, 1000)    }, [])     return (        <div>            <h1>{count}</h1>        </div>     )}会输出打印什么？h1位置 count 显示什么那当然每隔1s 打印出0，页面显示也是05，好的，你分析他原来想要实现什么效果，然后现在这段代码怎么改能实现预期效果，你有几种方式？【用useRef 、手写update函数，设定count 动态依赖项，使用setTimeout 递归（但是容易爆栈）】我当时有点懵，当然是没考虑到function app() {    const [count, setCount] = useState(0)    const countRef = useRef(count);    useEffect(() => {        setInterval(() => {            console.log('count', count);            // setCount(count + 1)            setCount(countRef.current + 1)        }, 1000)    },[])    useEffect(() => {       const update = () => {        console.log('update')        setCount(count + 1)         setTimeout(update, 1000) // 递归调用, 会导致栈溢出       }        update(); // 初始调用    })    useEffect(() => {        const interval = setInterval(() => {            console.log('useEffect')            setCount(count + 1)        }, 1000)    }, [count]) // 动态依赖，但是频繁定时器创建和销毁    return (        <div>            <h1>{count}</h1>        </div>     )}7，输出顺序是什么？function app() {        promise.resolve().then(() => {        console.log('promise')    })    useEffect(() => {        console.log('useEffect')    }, [count])    useLayoutEffect(() => {        console.log('useLayoutEffect')    }, [count])    return (        <div>            <h1>{count}</h1>        </div>     )}输出：useLayoutEffect promiseuseEffectuseLayoutEffect（dom更新后，相当浏览器刷新渲染了，立即同步执行）、promise (微任务，在同步执行完清空微任务队列）useEffect（异步执行，事件循环后执行）期间问了useLayoutEffect 和 useEffect 区别8，看下面输出什么？（弱弱心想：不能出点其他的吗？）function Foo() {    getName = function () {        alert(1);    }    return this;}Foo.getName = function () {    alert(2);}Foo.prototype.getName = function () {    alert(3);}var getName = function () {    alert(4);}function getName() { alert(5); }Foo.getName(); // 2getName(); // 4Foo().getName(); // 1getName(); // 1new Foo.getName(); // 2new Foo().getName(); // 3new new Foo().getName(); // 3看这是金典js输出，但是解释起来费劲呀，解释不断问我：变量提升到哪，函数提升到哪，可以修改一下代码看看提升到的位置，new 关键字分析一下，作为普通函数调用还是.... （问下牛友，这种题目去那找能复习到呀）9，写个sum函数实现下面输出：console.log(sum(1,2,3).sumOf()); // 6console.log(sum(1,4)(2).sumOf()); // 7console.log(sum(1)(2)(3)(4).sumOf()); // 10function sum(...args) {    let total = args.reduce((acc,cur) => acc + cur,0);    function innerSum(...newArgs) {        total += newArgs.reduce((acc,cur) => acc + cur,0);        return innerSum;    }    innerSum.sumOf = () => total;    return innerSum;}console.log(sum(1,2,3).sumOf()); // 6console.log(sum(1,4)(2).sumOf()); // 7console.log(sum(1)(2)(3)(4).sumOf()); // 10