面经每日一总结 (九)

最新推荐文章于 2024-10-01 17:17:19 发布

Web面试那些事儿

最新推荐文章于 2024-10-01 17:17:19 发布

阅读量837

点赞数 28

分类专栏：牛客面经每日一总结文章标签：前端面试

本文链接：https://blog.csdn.net/Likestarr/article/details/135968168

版权

牛客面经每日一总结专栏收录该内容

11 篇文章 1 订阅

订阅专栏

浏览器有哪些线程和进程

（1）浏览器主进程：一个浏览器只有一个主进程，负责如菜单栏、标题栏等界面显示，文件访问，前进后退，以及子进程管理等。
（2）GPU 进程：GPU（图形处理单元）最初是为了实现 3D 的 CSS 效果而引入的，后来随着网页及浏览器在界面中的使用需求越来越普遍，Chrome 便在架构中加入了 GPU 进程。
（3）插件进程：主进程会为每个加入浏览器的插件开辟独立的子进程，由于进程间所分配的运行资源相对独立，所以即便某个插件进程意外崩溃，也不至于对浏览器和页面造成影响。另外，出于对安全因素的考虑，这里采用了沙箱模式（即上图中虚线所标出的进程），在沙箱中运行的程序受到一些限制：不能读取敏感位置的数据，也不能在硬盘上写入数据。这样即使插件运行了恶意脚本，也无法获取系统权限。
（4）网络进程：负责页面的网络资源加载，之前属于浏览器主进程中的一个模块，最近才独立出来。
（5）渲染进程：也称为浏览器内核，其默认会为每个标签窗口页开辟一个独立的渲染进程，负责将 HTML、CSS 和 JavaScript 等资源转为可交互的页面，其中包含多个子线程，即 JS 引擎线程、GUI 渲染线程、事件触发线程、定时触发器线程、异步 HTTP 请求线程等。当打开一个标签页输入 URL 后，所发起的网络请求就是从这个进程开始的。另外，出于对安全性的考虑，渲染进程也被放入沙箱中。

使用web worker的注意事项

DOM限制：Worker 无法读取主线程所处理网页的 DOM 对象，也就无法使用 document、window 和 parent 等对象，只能访问 navigator 和 location 对象。
文件读取限制：Worker 子线程无法访问本地文件系统，这就要求所加载的脚本来自网络。
通信限制：主线程和 Worker 子线程不在同一个上下文内，所以它们无法直接进行通信，只能通过消息来完成。
脚本执行限制：虽然 Worker 可以通过 XMLHTTPRequest 对象发起 ajax 请求，但不能使用 alert() 方法和 confirm() 方法在页面弹出提示。
同源限制：Worker 子线程执行的代码文件需要与主线程的代码文件同源。

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 按照引入的顺序执行。并且在dom解析完毕执行，会阻止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 的作用一言蔽之：推导泛型参数

具体看这里[4]

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>
  
  <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>

讲一下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/[7]
  - 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")
    
    console.log("offsetW/h",inner.offsetWidth,inner.offsetHeight)
    console.log("getBoundingClientRect",inner.getBoundingClientRect()) 
    console.log("scrollW/H",inner.scrollWidth,inner.scrollHeight)
    console.log("clientW/H",inner.clientWidth,inner.clientHeight)
  </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) { 
        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) 
    }

    test()
    console.log(c)

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

www.cnblogs.com/zhangjiabin…

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

    Animal 
    Cat 
    let cat = new Cat()
    let cat2 = new cat.__proto__.constructor();

element-ui相关问题

www.nowcoder.com/discuss/444…

Web面试那些事儿

关注

28
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

面经每日一总结 (九)

浏览器有哪些线程和进程

使用web worker的注意事项

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相关问题

类型运算「&」和「｜」