最新初中级前端面试题总结
- 一、HTML
- 让一个div垂直居中的方式
- h5新标签
- 谈谈iframe的优缺点
- 二、CSS
- 3.Bootstrap响应式布局原理
- CSS 盒模型(Box Model)，box-sizing
- rem与em的区别
- CSS选择器
- css常用选择器
- css选择器权重
- position定位属性详解
- link与@import区别与选择
- 用 css 或 js 实现多行文本溢出省略效果，考虑兼容性
- 三、JavaScript
- JS 执行机制
- 代码提升（为了编译）
- 编译代码
- 高级语言编译器步骤：
- 执行代码
- JS的基本数据类型
- JS有哪些内置对象
- JS的几条基本规范
- JS引用方法
- 合并数组
- 补充get和post请求在缓存方面的区别
- 请描述一下本地存储 `cookies`、 `sessionStorage`和`localstorage`区别
- call,apply,bind的区别？
- 闭包
- JS作用域及作用域链
- this
- 函数作用域
- 作用域链
- 原型&原型链
- 事件循环
- 执行顺序
- 图片的预加载和懒加载
- mouseover和mouseenter的区别
- 解决异步回调地狱
- typeof vs instanceof
- ['1', '2', '3'].map(parseInt) what & why？
- 什么是防抖和节流？有什么区别？如何实现？
- setTimeout、Promise、Async/Await 的区别？
- Async/Await 如何通过同步的方式实现异步?
- JS事件循环，微任务和宏任务
- Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？
- JS 异步解决方案的发展历程以及优缺点
- 情人节福利题，如何实现一个 new
- 四、Vue
- vue生命周期
- 什么是Vue生命周期？
- Vue生命周期的作用是什么？
- Vue生命周期总共有几个阶段？
- 第一次页面加载会触发哪几个钩子？
- DOM渲染在哪个周期中就已经完成？
- 每个生命周期适合哪些场景？
- v-show与v-if区别
- Vue开发中常用的指令有哪些
- 绑定class的数组用法
- 路由跳转方式
- Vue全家桶
- Vue中的MVVM思想
- Vuex的五个核心属性
- vue双向绑定（v-model）的原理
- Vue 请求数据方式
- computed和watch有什么区别?
- 写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？（滴滴、饿了么）
- 组件中的data为什么是函数？
- Class 与 Style 如何动态绑定？
- vue的单项数据流
- keep-alive
- nextTick()
- Vue插槽
- 你有对 Vue 项目进行哪些优化？
- 代码层面的优化
- Webpack 层面的优化
- 基础的 Web 技术的优化
- 五、ES6
- var、let、const之间的区别
- 解构赋值
- 1. 数组解构赋值：
- 2 对象解构赋值
- 扩展运算符
- rest运算符
- 使用箭头函数应注意什么？
- Set、Map、weakSet、weakMap的区别？
- promise对象的用法,手写一个promise
- ES5/ES6 的继承除了写法以外还有什么区别？
- 六、Git
- git常用的命令
- 七、Webpack
- webpack打包原理
- webpack的优点
- webpack的缺点
- 八、网络协议
- 网络分层
- HTTP/HTTPS比较
- HTTP的状态码
- get请求传参长度的误区
- 为什么用axios，不用ajax?
- 简单讲解http2 的多路复用
- 九、性能优化
- 如何优化页面，加快页面的加载速度
- HTML优化
- CSS优化
- JavaScript优化
- 评测你写的前端代码性能和效率？
- 十、算法
- 编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组
- 十一、其他
- Chrome 浏览器进程
- 浏览器主进程
- GPU 进程
- 网络进程
- 插件进程
- 渲染进程
- 常问
- 人事面
- LAST
- 什么样的前端代码是好的？
- 对前端工程师这个职位是怎么样理解的？它的前景会怎么样？
- 你觉得前端工程的价值体现在哪？
- 平时如何管理你的项目？
一、HTML
让一个div垂直居中的方式
.parent {
display: flex;
justify-content: center; //水平居中
align-items: center; //垂直居中
}
详情请戳：https://blog.csdn.net/a1056244734/article/details/106759185
h5新标签
有<section>、<header>、<footer>、<aside>、<nav>、<video>、<audio>、<canvas>等...
详细瞅这里：https://blog.csdn.net/a1056244734/article/details/106865698
谈谈iframe的优缺点
iframe是一种框架，也是一种很常见的网页嵌入方式
iframe的优点：
- iframe能够原封不动的把嵌入的网页展现出来。
- 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
- 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
- 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
iframe的缺点：
- 会产生很多页面，不容易管理。
- iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
- 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
- 很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
- iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
- 浏览器的后退按钮无效（只能针对实现当前光标所在页面的前进与后退，无法实现frameset整个页面的前进与后退）
分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。
二、CSS
3.Bootstrap响应式布局原理
简言之：百分比布局+媒体查询
Bootstrap响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板，PC端都能使用，而不用考虑使用媒体查询（针对不同的设备分别写不同的代码）。Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为做多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。
使用Bootstrap响应式布局
首先需要在head中引入meta标签，添加viewpirt属性，content中宽度等于设备宽度， initial-scale:页面首次被显示可见区域的缩放级别，取值1则页面按实际尺寸显示，无任何缩放；
maximum-scale:允许用户缩放到的最小比例；
user-scalable:用户是否可以手动缩放。代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">
CSS 盒模型(Box Model)，box-sizing
盒模型又被分为 IE盒模型 和 W3C标准盒模型 两种类型。
在 IE8+ 的浏览器中要使用哪个盒模型可以由 box-sizing 控制。
box-sizing: content-box //W3C标准盒模型，默认
box-sizing: border-box //IE盒模型
这两者的区别在于:
- IE盒模型（ box-sizing: border-box ）的盒子大小为 content + padding + border。
- W3C标准盒模型（ box-sizing:content-box ）的盒子大小为 content, 不包括 padding 和 border，后两者另算大小。
详情请戳：CSS 盒模型(Box Model)，box-sizing
rem与em的区别
rem是根据根的font-size变化，而em是根据父级的font-size变化
rem：相对于根元素html的font-size
html {
font-size: 20px;
}
div {
font-size: 2rem;
}
//相当于
div {
font-size: 40px;
}
em：相对于父元素计算
p {
font-size: 20px;
}
// p为span父元素
p span {
font-size: 2rem;
}
//相当于
p span {
font-size: 40px; // 20*2=40
}
CSS选择器
css常用选择器
通配符选择器：*
ID选择器：#myid
类选择器：.myclassname
元素选择器：div、span、p、a 等
相邻选择器（h1+p）
子选择器（ul < li）
后代选择器：p span、div a 等
伪类选择器：a:hover、 li:nth-child 等
属性选择器：a[rel="external"]、input[type="text"]
[class*="col-"]
选择所有类名中含有"col-"的元素
[class^="col-"]
选择所有类名中以"col-"开头的元素
[class$="-col"]
选择所有类名中以"-col"结尾的元素
css选择器权重
!important --> 行内样式 --> #id --> .class --> 元素和伪元素 --> * --> 继承 --> 默认
position定位属性详解
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于static定位以外的第一个父元素（最近的已定位的祖先元素）进行定位。元素的位置通过left, right, top, bottom进行规定 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left, right, top, bottom进行规定 |
| relative | 生成相对定位的元素，相对于其正常位置定位。元素的位置通过left, right, top, bottom进行规定 |
| static | 默认值，忽略 top, bottom, left, right和z-index |
| inherit | 从父元素继承该属性的值 |
link与@import区别与选择
"CSSurl路径" rel="stylesheet" type="text/css">
- link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css；
- 当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载；
- @import需要 IE5 以上才能使用；
- link可以使用 js 动态引入，@import不行
用 css 或 js 实现多行文本溢出省略效果，考虑兼容性
/*单行*/
.single {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
/*多行*/
.mutiple {
display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
-webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/
line-clamp: 3;
overflow: hidden;
max-width: 100%;
}
/*多行考虑兼容性*/
p.compatible {
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}
p.compatible::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
详情戳：https://blog.csdn.net/a1056244734/article/details/106772336
三、JavaScript
JS 执行机制
代码提升（为了编译）
- 变量提升
- 函数提升（优先级最高）
编译代码
V8 编译 JS 代码的过程
- 生成抽象语法树（AST）和执行上下文
- 第一阶段是分词（tokenize），又称为词法分析
- 第二阶段是解析（parse），又称为语法分析
- 生成字节码
字节码就是介于 AST 和机器码之间的一种代码。但是与特定类型的机器码无关，字节码需要通过解释器将其转换为机器码后才能执行。 - 执行代码
高级语言编译器步骤：
- 输入源程序字符流
- 词法分析
- 语法分析
- 语义分析
- 中间代码生成
- 机器无关代码优化
- 代码生成
- 机器相关代码优化
- 目标代码生成
执行代码
- 执行全局代码时，创建全局上下文
- 调用函数时，创建函数上下文
- 使用 eval 函数时，创建 eval 上下文
- 执行局部代码时，创建局部上下文
JS的基本数据类型
Undefined、Null、Boolean、Number、String、ES6新增：Symbol
JS有哪些内置对象
Object是JavaScript中所有对象的父对象
数据封装对象：Object、Array、Boolean、Number和String
其他对象：Function、Arguments、Math、Date、RegExp、Error
JS的几条基本规范
1、不要在同一行声明多个变量
2、请使用===/!==来比较true/false或者数值
3、使用对象字面量[1,2]替代new Array这种形式
4、不要使用全局变量
5、Switch语句必须带有default分支
6、函数不应该有时候有返回值，有时候没有返回值
7、for循环必须使用大括号
8、if语句必须使用大括号
9、for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染
JS引用方法
行内引入
<body>
<input type="button" onclick="alert('行内引入')" value="按钮"/>
<button onclick="alert(123)">点击我</button>
</body>
内部引入
<html>
<head>head>
<body>
<script>
window.onload = function () {
alert("js 内部引入！")
}
script>
body>
html>
外部引入
<body>
<div>div>
<script type="text/javascript" src="./js/index.js">script>
body>
注意
1，不推荐行内引入或者HTML中插入