面经每日一总结 (九)

站长

2023年03月25日 09:54 · 阅读数 52

axios

对xhr的封装，并且返回promise对象
设置拦截器。
取消请求，abort。
自动转换json数据。

对于庞大的项目来说，封装axios一些共同的配置是很有必要的。

axios.defaults.baseURL，请求源的封装。
axios.defaults.headers，设置通用请求头。
axios.default.timeout，设置请求超时时间。
对一些常用请求方法的封装，如get,post。

请看这里

fetch

是对xhr的实现，返回promise对象。当然它只是一个 HTTP 响应，而不是真的 JSON。如果先要将返回的内容转为json，需要调用json方法。

LocalStorage是有大小的，如果超过了这个大小你要怎么处理？

localstorage存储不是5m 是每个域5m。

超了申请其他的域/修改ng配置或者 postmessge通信往其他域上存取

看这个帖子

async和defer，它们区别是什么

他俩都是异步加载js文件，不阻塞dom渲染。
async 加载完立刻执行，并且没有执行顺序。并且可能阻塞dom的渲染。
defer 按照引入的顺序执行。并且会阻止DOMcontentLoaded事件的执行。

多个script引入js的关系

每个script都是异步下载js的。但是下载完以后不会立刻执行，而是等待前面的js文件执行完毕后再去执行。即使前面的js文件出错了，也不影响后续js文件的执行。

并且后面js文件可以应用前面js文件定义的变量等。反之则不行。

还了解过script中的其他属性吗？说来听听。

src

这个属性定义引用外部脚本的 URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的 script 元素标签内不应该再有嵌入的脚本。

type

该属性定义 script 元素包含或src引用的脚本语言。属性的值为 MIME 类型; 支持的 MIME 类型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。如果没有定义这个属性，脚本会被视作 JavaScript。 如果 MIME 类型不是 JavaScript 类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执行。 如果 type 属性为module，代码会被当作 JavaScript 模块实验性。

preload

@vue/preload-webpack-plugin可以为link添加preload，让资源预加载。

<link rel="preload" href="myFont.woff2" as="font"
      type="font/woff2" crossorigin="anonymous

as

该属性仅在<link>元素设置了 rel="preload" 或者 rel="prefetch" 时才能使用。它规定了<link>元素加载的内容的类型，对于内容的优先级、请求匹配、正确的内容安全策略的选择以及正确的 Accept请求头的设置，这个属性是必需的。

值	应用于
audio	`<audio>` 元素
document	`<iframe>` 和 `<frame>` 元素
embed	`<embed>` 元素
fetch	fetch, XHRThis value also requires `<link>` to contain the crossorigin attribute.
font	CSS @font-face
image	`<img>` and `<picture>` elements with srcset or imageset attributes, SVG `<image>` elements, CSS `*-image` rules
object	`<object>` elements
script	`<script>` elements, Worker `importScripts`
style	`<link rel=stylesheet>` elements, CSS `@import`
track	`<track>` elements
video	`<video>` elements
worker	Worker, SharedWorker

ts中Object和object这两个类型的区别

Object可以赋值为原始类型。但是object只能赋值为复杂数据类型。

类型运算「&」和「｜」

面经每日一总结 (九)

&：求两个类型的并集，同名属性也对其类型 &。
|: 两个类型的交集，只保留同名属性且也对其类型｜。

infer

infer 的作用一言蔽之：推导泛型参数

具体看这里

for....in可以遍历对象原型上的属性和方法吗？怎么区分原型和自身的属性和方法？

for in 遍历的是原型和自身非不可遍历和symbol的属性和方法。

通过hasOwnProperty可以区分哪些是自身属性，哪些是原型上的。这个也可以判断Symbol类型的属性。

webpack4与webpack5?

webpack5 的资源模块类型替换 loader

asset/resource 替换 file-loader(发送单独文件)
asset/inline 替换 url-loader （导出 url）
asset/source 替换 raw-loader（导出源代码）
asset

tree-sharking优化

可以删除嵌套模块中未使用的变量。
webpack 5 有一个新的选项 optimization.innerGraph，在生产模式下是默认启用的，它可以对模块中的标志进行分析，找出导出和引用之间的依赖关系。可以追踪到嵌套函数的调用。然后删除未调用的函数。

模块联邦

多个独立的构建可以组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因此可以单独开发和部署它们。

简陋轮播图实现

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    div {
      margin: 100px auto;
      width: 300px;
      height: 300px;
      overflow: hidden;
      border: 2px solid black;

    }

    ul li {
      list-style-type: none;
    }

    ul {
      display: flex;
      left: 0;
      position: absolute;
    }




    img {
      display: block;
    }
  </style>
</head>

<body>
  <!-- 22:14 -->
  <div style="position: relative;">
    <ul id="ulId">
      <li>
        <img src="./img/1.jpg" alt="">
      </li>
      <li>
        <img src="./img/2.jpg" alt="">
      </li>
      <li>
        <img src="./img/3.jpg" alt="">
      </li>
      <li>
        <img src="./img/4.jpg" alt="">
      </li>
      <li>
        <img src="./img/5.jpg" alt="">
      </li>
      <li>
        <img src="./img/6.jpg" alt="">
      </li>
      <li>
        <img src="./img/1.jpg" alt="">
      </li>
    </ul>
  </div>
  <script>
    window.onload=function() {
      const ul=document.getElementById("ulId")
      setInterval(() => {
        if(parseInt(ul.style.left)>-6*300) {
          ul.style.left=parseInt(ul.style.left)-300+"px";
        } else {
          ul.style.left=0;
        }
      },1000)
    }
  </script>

原贴

下列元素的排列顺序

  <div style="display: inline; background: red">divl</div>
  <div style="display:inline-block;background: blue">div2</div>
  <div style="display:block;float:left;background: greenyellow">div3</div>
  <div style="display: inline-block;background: yellow">div4</div>

  <div style="display:block;float: left;clear:both;background: gray">div5</div>
  <div style="display:block;float:left;background: blueviolet">div6</div>

面经每日一总结 (九)

浮动元素对于上方的块级元素没有影响，但是对于上方的行内元素，行内块元素是有影响的。
清除浮动加在浮动元素上会出现换行。clear属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。清除浮动表示的是移动当前元素到清除浮动的下方。作用于当前元素。当前元素下移。

讲一下promise限制并发怎么做的

主要是通过变量控制并发数量。while循环控制。
当当前任务执行完成，需要递归调用run方法触发下一次任务的执行。因为then方法是异步的。需要再次去唤醒run方法执行下一个任务。在异步中控制执行的变量，不会立刻返回，所以while循环将结束，run方法执行结束，所以需要唤醒。

面经每日一总结 (九)

闭包的好处

创建私有变量，减少全局变量。
保存当前变量状态。

处理事件的方式

事件处理器属性，即添加在dom节点上。
行内事件处理器。
addEventListener。

实现css的样式隔离

vue scoped
css in js
css modules, 依赖于webpack
BEM规范，认为约定规范
shadow DOM

具体看这里

vue3和vue2

性能更好
- proxy去完成响应式。惰性代理
- 模板编译, vue-next-template-explorer.netlify.app/
  - patchFlag: 标记动态节点，区分不同的动态类型。在diff算法中，直接忽略静态节点比较，区分不同的动态节点比较。
  - hoistStatic：静态节点提升到父级作用域缓存起来，多个相邻的静态节点会进行合并。
- 渲染时cacheHandler: 缓存事件。这个会通过vei对象进行事件缓存。将事件缓存在vei.value中。对于事件的更新直接修改value就行，而不是通过调用addEventListsener频繁的创建和移除。
- tree-sharking：静态模板编译时，剔除无用的内容。
体积更小。
更好的代码组织。
更好的逻辑复用。
增加了一些新功能（suspense, teleport...）

composition api 和 hooks

setup只会调用一次，但是hooks可能调用很多次。
setup不需要useMemo, useCallback来缓存一些内容，但是hooks需要，这是他的执行机制造成的。
setup不需要调用顺序，但是hooks执行必须保证严格的顺序，所以不能存放在if,for等中。

react的合成事件

react17之前事件被统一挂载到document,但是17之后，它将被挂载到root根组件上。主要是为了兼容多个版本的react，微前端。

合成事件syntheticEvent模拟出了原生事件的所有能力。

为啥需要合成事件

更好的兼容性，跨平台性。
挂载到根节点上，减少内存消耗，避免频繁的解绑。
方便事件的统一管理。

前端为啥需要进行打包构建

让代码体积更小。进行压缩合并，tree-sharing,让资源加载更快。
兼容性，错误检查 polyfill， postcss, eslint, babel
编辑高级语法，优雅降级。
统一高效的开发环境，统一构建流程和产出标准。

webpack优化

oneof, exclude, include
contenthash进行资源缓存。
base64
分包， splitChunks， import, 多入口。
IngnorePlugin 按需引入。
publicPath，这里可以做cdn缓存。
代码压缩等。
缓存。 babel-loader cacheDirectory。
多进程打包。

模块联邦

webpack 5 新增 Module Federation（模块联邦）功能，他可以帮助将多个独立的构建组成一个应用程序，不同的构建可以独立的开发与部署。

具体看这里

判断事件是否可以被取消

e.preventDefault(): 取消事件
e.cancelable: 事件是否可取消。

如果 addEventListener 第三个参数 { passive: true}，preventDefault 将会会无效。

async, defer的解释

q.shanyue.tech/fe/dom/456.…

css给js传递参数

www.zhangxinxu.com/wordpress/2…

js获取元素的宽高

offestWidth/offsetHeight
getBoundingClientRect
scrollWidth/scrollHeight
clientWidth/clientHeight

  <style>
    #outer {
      height: 200px;
      overflow: scroll;
    }

    #inner {
      width: 100px;
      height: 1600px;
      padding: 20px;
      border: 1px solid black;
    }
  </style>
  
  <div id="outer">
    <div id="inner"></div>
  </div>
  <script>
    const inner=document.getElementById("inner")
    // const inner=document.getElementById("outer")
    console.log("offsetW/h",inner.offsetWidth,inner.offsetHeight)// 获取的是完整的 border + padding + content
    console.log("getBoundingClientRect",inner.getBoundingClientRect()) // 获取的是完整的 border + padding + content
    console.log("scrollW/H",inner.scrollWidth,inner.scrollHeight)// 获取的是padding + content + scrollTop 包括由于 overflow 溢出而在屏幕上不可见的内容。但是不包括滚动条自身的宽度
    console.log("clientW/H",inner.clientWidth,inner.clientHeight)// 获取的是padding + content。是可视区域的宽度，隐藏的滚动高度是不能获取的。
  </script>

面经每日一总结 (九)

如何做出类似于地图的缩放

<style>
    html,
    body {
      height: 100%;
    }

    #outer {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    #inner {
      width: 100px;
      height: 100px;
      background: red;
      transform: scale(1);
    }
  </style>
  <div id="outer">
    <div id="inner"></div>
  </div>
  <script>
    const inner=document.getElementById("inner")
    let x=1;
    document.body.onwheel=function(e) {
      if(e.wheelDelta>0) { // 大于0表示向下化
        x+=0.5
      } else {
        x-=0.5
      }
      inner.style.transform=`scale(${x})`
    }
  </script>

websocket

vue3js.cn/interview/h…

如何画出直角三角形

只需要设置两条边的border就行，而且其中一条边还是transparent。

.box {
      /* 内部大小 */
      width: 0px;
      height: 0px;
      /* 只设置两条边，然后画三角形 */
      /* 边框大小 只设置两条边*/
      border-top: #4285f4 solid;
      border-right: transparent solid;
      border-width: 85px;
    }

面经每日一总结 (九)

css提高页面渲染性能的方法有哪些

实现方式有很多种，主要有如下：

内联首屏关键CSS。内联css关键代码能够使浏览器在下载完html后就能立刻渲染。
异步加载CSS
资源压缩
合理使用选择器，不要嵌套过多层级。
减少使用昂贵的属性

在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能

不要使用@import

未设置宽高的元素水平垂直居中

www.jianshu.com/p/69c570f4c…

let 定义的变量也是有声明提升的

在编译的时候进行声明提升。

    let a = 1
    function test() {
      function scope() {
        let b = 2
        c = 3
      }
      let c = 4 // 这个在声明的时候是存在作用域提升的。
      scope()
      let b
      console.log(a, b, c) // 1, undefined, 3
    }

    test()
    console.log(c) // c为定义 报错

为啥js继承constructor总是需要改变指向

www.cnblogs.com/zhangjiabin…

一般不改变，直接使用是没有问题的。但是对于我们直接通过原型的构造函数创建对象就有问题了。prototype.constructor()会调用父元素的构造函数。

    Animal // 父类
    Cat // 子类
    let cat = new Cat()
    let cat2 = new cat.__proto__.constructor();  // Animal called （这里只有Animal的构造函数被调用了）

element-ui相关问题

www.nowcoder.com/discuss/444…

转载自:https://juejin.cn/post/7213996779343331385

面经每日一总结 (九)

axios

fetch

LocalStorage是有大小的，如果超过了这个大小你要怎么处理？

async和defer，它们区别是什么

多个script引入js的关系

还了解过script中的其他属性吗？说来听听。

preload

ts中Object和object这两个类型的区别

类型运算 「&」和「｜」

infer

for....in可以遍历对象原型上的属性和方法吗？怎么区分原型和自身的属性和方法？

webpack4与webpack5?

简陋轮播图实现

下列元素的排列顺序

讲一下promise限制并发怎么做的

闭包的好处

处理事件的方式

实现css的样式隔离

vue3和vue2

composition api 和 hooks

react的合成事件

前端为啥需要进行打包构建

webpack优化

模块联邦

判断事件是否可以被取消

async, defer的解释

css给js传递参数

js获取元素的宽高

如何做出类似于地图的缩放

websocket

如何画出直角三角形

css提高页面渲染性能的方法有哪些

未设置宽高的元素水平垂直居中

let 定义的变量也是有声明提升的

为啥js继承constructor总是需要改变指向

element-ui相关问题

类型运算「&」和「｜」