背景我18年本科毕业，年前已有换工作想法，一直没有付诸行动，疫情爆发后回到老家，年后开始找工作，对于自己水平不是很清楚，之前找工作一直都挺顺利的。大学毕业没有留在实习单位继续做前端开发，那时候三大框架已经开始流行了，实习公司用的还是jquery。回老家学了一个月的车和vue、小程序后，凭着自学做的项目找了一周工作入职第一家公司。面试经验比较少，想着多面面看看对方公司的反馈。年前还没开始准备就面了腾讯，终止于二面，所以说还是要好好复习再面大厂。面的岗位以两三年为主，虽然我是1.5年经验，但有的岗位年限要求
背景
我18年本科毕业，年前已有换工作想法，一直没有付诸行动，疫情爆发后回到老家，年后开始找工作，对于自己水平不是很清楚，之前找工作一直都挺顺利的。大学毕业没有留在实习单位继续做前端开发，那时候三大框架已经开始流行了，实习公司用的还是jquery。回老家学了一个月的车和vue、小程序后，凭着自学做的项目找了一周工作入职第一家公司。面试经验比较少，想着多面面看看对方公司的反馈。年前还没开始准备就面了腾讯，终止于二面，所以说还是要好好复习再面大厂。
面的岗位以两三年为主，虽然我是1.5年经验，但有的岗位年限要求没那么严格也可以试试，尤其写的优秀者可放宽年限要求。面了四五家，有上市公司，也有小公司，都是远程面试。
html、css部分
如何理解html语义化
html语义化是指从代码上展示页面的结构，而不是从最终视觉上来表现结构。
- 表现形式
html5新标签:
header-页眉、footer-页脚、aside-附属信息、nav-导航链接、section、article，
caption-表格标题、thead-表头、tbody-表格内容、tfoot-表尾
h1~h6，作为标题使用，且重要性递减
- 作用
有利于构建良好的html架构，有利于搜索引擎建立索引和抓取
页面结构清晰，有利于代码的维护和管理
有利于不同设备(盲人阅读器、屏幕阅读器)的解析
- px，em，rem区别
px 相对长度单位，是相当于显示器的分辨率而言的
em 相对长度单位，相对父元素的字体大小而言的
rem 相对长度单位，相对html根元素的字体大小而言的，css3新增元素
- 盒子模型
IE盒子模型 宽度=内容宽度+padding *2+border *2
w3c盒子模型 宽度=内容宽度
通过box-sizing切换，默认为content-box(w3c盒子模型)，border-box时为IE盒子模型
- BFC
块级格式化上下文，让BFC里面的元素与外面元素隔离，使里外元素的定位不会相互影响。触发条件:
根元素
overflow不为visible
float
position:absolute或fixed
display:inline-block或table
应用:
防止垂直方向margin重叠
不和浮动元素重叠
清除元素内部浮动
- target和currentTarget区别
target是事件的真正目标
currentTarget是事件处理程序注册的元素
-
document.ready和window.onload区别
document.ready是dom树加载后执行，而window.onload是整个页面资源加载完后执行，所以document.ready比window.onload先执行 -
事件流
DOM2事件流分为三个部分:事件捕获、处于目标、事件冒泡。
事件冒泡是指事件从执行的元素开始往上层遍历执行
事件捕获是指事件从根元素开始从外向里执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">click Me</button>
<script>
let btn=document.getElementById('btn');
btn.onclick=fucntion(e){
console.log(e)
}
</script>
</body>
</html>
点击按钮后，事件冒泡的执行顺序是:button->body->html->document
事件捕获的执行顺序则相反:document->html->body->button
- doctype作用，严格模式和混合模式的区别
<!doctype>声明位于文档的最前面，在html之前显示。用于告诉浏览器的解析器，用什么文档类型规范来解析文档。严格模式默认用浏览器支持的最高版本解析，混合模式以宽松的向后兼容的方式解析，doctype不存在或格式不正确时会让文档以混杂模式呈现
水平垂直居中
//方法一
display:flex;
justify-content:center;
align-items:center;
//方法二
display:table;
vertical-align:center;
//方法三:适用于已知宽高且父元素定位不为static
postion:absolute;
width:100px;
height:100px;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
//方法四
position:absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
//方法五:适用于行内元素
display:inline-block;
width:100px;
height:100px;
text-align:center;
line-height:100px;
//方法六:适用于块级元素
display:block;
height:100px;
margin:0 auto;
line-height:100px;
回流和重绘区别
回流：当渲染树中元素尺寸、结构或者某些属性发生变化时，浏览器重新渲染部分或全部页面的情况叫回流。下列元素改变引发回流:
-
getBoundingClientRect()
-
scrollTo()
-
scrollIntoView()或者scrollIntoViewIfneeded
-
clientTop、clientLeft、clientWidth、clientHeight
-
offsetTop、offsetLeft、offsetWidth、offsetHeight
-
scrollTop、scrollLeft、scrollWidth、scrollHeight
-
getComputedStyle()
重绘：当页面中元素样式变化不会改变它在文档流中的位置时，即不会使元素的几何属性发生变化，浏览器会将新样式赋给它并重新绘制页面(比如color、backgroundColor)
频繁回流和重绘会引起性能问题
避免方法:
-
减少table布局使用
-
减少css表达式的使用(如calc())
-
减少DOM操作，用documentFragment代替
-
将元素设为display:none;操作结束后把它显示回来，因为display:none不会引发回流重绘
-
避免频繁读取会引发回流重绘的元素，如果需要最好是缓存起来
-
对复杂动画元素使用绝对定位，使它脱离文档流
-
减少使用行内样式
js部分
- setTimeout、setInterval区别
两者都是定时器，设定一个150ms后执行的定时器不代表150ms后定时器会执行，它表示代码在150ms内会被加入队列，如果这个时间点队列没有其他逻辑在执行，表面上看代码在精确时间执行了。在队列中有其他逻辑时，代码等待时间会超过150ms
setTimeout 只执行一次
setInterval 执行多次，属于重复定时器
- 防抖节流
节流:多次触发事件时，一段时间内保证只调用一次。以动画为例，人眼中一秒播放超过24张图片就会形成动画，假设有100张图片，我们一秒播放100张过于浪费，一秒播放24张就够了。
防抖:持续触发事件后，时间段内没有再触发事件，才调用一次。以坐电梯为例，电梯10s运行一次。如果快要运行时进来一个人，则重新计时。
最低0.47元/天 解锁文章
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
