面试记录专刊:第三天

319 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第3天,点击查看活动详情

今天复习计划,主要是以算法为主。又重复刷了之前做的一些简单难度的题,感觉还是好难>-<

一.前端知识

1.移动端适配

1.1 Rem与em
  • em的计算基于父组件的fontSize
  • rem计算基于根组件fontSize

假设我们的设计稿为750px,则rem的计算公式:

 document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

为了避免手动计算设计稿上的px,可以使用vsCode插件px2rem进行转换。

1.2 使用gti CI/CD(持续集成/持续部署)进行自动化部署
  • 前端项目配置 .gitlab-ci.yml
  • web服务器配置 gitlab runner
  • 连接git仓库与gitlal runner

当代码推到git仓库,gitlab runner会拉取仓库代码并执行.gitlab-ci.yml里配置的ssh脚本进行打包、复制打包文件至指定文件夹。

2. CJS 和 ESM

拷贝与引用
CJS模块导入的值为拷贝,不会随着导出模块的值得变化而变化。
ESM导入的值为引用,当导出模块的值发生变化,导入的值也会产生变化。

静态与动态
v8引擎拿到js代码后会边编译边执行,在编译的时候v8就给import导入的模块建立静态的引用,ESM的引用是静态的,并且不能在运行时更改,所以import必须放在文件开头,不能放在语句中间。

CJS的引用是动态的,只有在运行时才会对值进行拷贝。所以require可以放在任何地方。

异步与同步
ESM为异步加载,CJS为同步加载。

3. CSS

3.1 盒模型

image.png 盒模型从外到里:margin-border-padding-content

标准盒模型与IE盒模型的区别:标准盒模型的witdhheight只包含content。 IE盒模型则稍有不同,会包含padingborder。设置的方法:box-size: content-box/border-box

3.2 居中的方法
  • flex:
  align-items: center
  justify-content: center
  • positon与translate
  position: absolute
  left: 50%
  top: 50%
  transform: traslate(50%,50%)
  • position
     position: absolute;
     width: 100px;
     height: 100px;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
  • 文字居中
   text-align: center;
   line-height: 200px;

二.算法

最大子数组和

定义pre以及max进行循环比较即可。

找到所有数组中消失的数字

回文链表

难点在于如果获取链表尾部的节点的值与头部节点的值做比较

三.面经

暂无

四.其他

健身打卡:

2091b5fc101e448b5f9449d07b90d2d.jpg

英语打卡:

636601f93a86273127aae55d0b9d3f0.jpg