总结
为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
前端面试题汇总
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JavaScript
性能
linux
初识Vue
<div id="app">
<!-- mustache语法中,不仅可以直接写变量,也可以写简单的表达式 -->
<h2>{{message+name}}</h2>
<h2>{{mesage+' '+neme}}</h2>
<h3>{{message}}</h3>
<h1>{{name}}</h1>
</div>
<script>
//let(变量)/const(常量)
//编程范式:声明式编程
const app = new Vue({
el: "#app",//用于挂载要管理的元素
data: {//定义数据
message: '你好',
name: "zaima"
}
})
//js的编程范式是命令式编程,要一步一步明确指定
</script>
遍历数组
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: '你好',
movies: ['海王', '星际穿越', '少年派', '盗梦空间']
}
})
</script>
v-bind
基本使用
<!-- 不加v-bind就无法动态获取vue里的东西 -->
<div id="app">
<!-- v-bind的简写是: -->
<a :href="aHref"></a>
<img v-bind:src="对应图片地址" alt="">
</div>
<script>
// hook钩子
const app = new Vue({
el: '#app',
data: {
message: '你好吖',
aHref: "www.baidu.com"
}
})
</script>
v-bind动态绑定class(对象语法)
<div id="app"> //哪个类名为true就添加哪个类
<!-- <h2 v-bind:class="{类名1:true,类名2:布尔值}">{{message}}</h2> -->
<!-- 下面类名可以同时添加 -->
<!-- <h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2> -->
<!-- 里面也可以加函数 -->
<h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
</div>
<script>
// hook钩子
const app = new Vue({
el: '#app',
data: {
message: '你好吖',
isActive: true,
isLine: true
},
// 里面放事件,函数都放进来
methods: {
btnClick: function () {
this.isActive = !this.isActive
},
// 调用data里的方法都要加this
getClasses:function(){
return {active:this.isActive,line:this.isLine}
}
}
})
</script>
v-bind动态绑定style(对象语法)
<div id="app">
<!-- <h2 v-bind:style="{key(属性名):value(属性值)}">{{message}}</h2> -->
<!-- 属性值变量不用加单引号,固定值加单引号,不加单引号会当变量解析 -->
//fontSize = font-size 在vue里前面有-要大写字母
<h2 :style="{fontSize:finalSize + 'px',backgroundColor: finalColor}">{{message}}</h2>
<h2 :style="getStyles()">{{message}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好吖',
finalSize:50,
finalColor:'red'
},
methods:{
getStyles:function(){
return {fontSize:this.finalSize + 'px',backgroundColor: this.finalColor}
}
}
})
</script>
computed 计算属性
基本使用
<div id="app">
<h2>总价格:{{totalPrice}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
books:[
{id:110,name:"编程艺术",proce:119},
{id:111,name:"代码大全",proce:119},
{id:112,name:"深入理解计算机原理",proce:119},
{id:113,name:"现代操作系统",proce:119},
]
},// computed计算属性
computed:{
// 计算总价格
totalPrice:function(){
let result=0;
for(let i=0; i<this.books.length; i++){
result += this.books[i].proce
}
return result
}
}
})
</script>
v-on事件的监听
v-on的参数问题
<div id="app">
<!-- 1.事件调用的方法没有参数 -->
<button @click="btn1Click()">按钮一</button>
<button @click="btn1Click">按钮一</button>
<!-- 2.事件在定义时,写方法时省略了小括号,但是方法本身是需要一个参数的,
这个时候,Vue会默认将浏览器生产的event事件对象作为参数传入到方法
如果方法不需要参数可以省略小括号-->
<!-- <button @click="btn2Click(123)">按钮二</button>
<button @click="btn2Click()">按钮二</button> -->
<button @click="btn2Click">按钮二</button>
<!-- 3.方法定义时,我们需要event对象,同时有需要其他参数 -->
<!-- 在调用方式,如何手动获取到浏览器参数的event对象:$event -->
<!-- abc不加引号就当作变量 -->
<button @click="btn3Click(abc,$event)">按钮三</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好吖',
abc:123
},
methods:{
btn1Click(){
console.log("btn1Click");
},
btn2Click(event){
console.log("------",event);
},
btn3Click(abc,event){
console.log('+++++',abc,event);
}
}
})
</script>
v-on的修饰符
<div id="app">
<!-- 1.stop修饰符,阻止了下面事件的冒泡 -->
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
<!-- 2.prevent修饰符,阻止了下面事件向百度提交 -->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<!-- 3.监听某个键盘的键帽,enter只执行keyUP(回车)一个键位 -->
<input type="text" @keyup.enter="keyUp">
<!-- 4.once修饰符,只能执行一次 -->
<button @click.once="btn2Click">按钮2</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
btnClick() {
console.log("btnclick");
},
divClick() {
console.log("divclick");
},
submitClick() {
console.log("submitclick");
},
keyUp() {
console.log("keyup");
},
btn2Click() {
console.log("btn2click");
}
}
});
</script>
条件判断
v-if和v-else的使用
<div id="app">
<!-- v-if 当条件为false时,包含v-if指令的元素,根本不会出现在dom中 -->
<!-- v-show 当条件为false时,只是包含v-show指令的元素看不到了,但是还存在网页代码中 -->
<!-- 跟js的if语句相似,也可以用函数判断决定那个为true -->
<h2 v-if="isShow">
<div>abc</div>
<div>abc</div>
<div>abc</div>
</h2>
<h1 v-else>isShow为false时,显示我</h1>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
isShow:false,
},
methods: {}
});
</script>
用户登录切换案例
<div id="app">
<span v-if="isUser">
<!-- label里的username这个属性指向input里的id,这样点击label里的文字也可以获取焦点 -->
<label for="username">用户账号</label>
<!-- 如果不希望文本框的内容被复用就用key设置不同的值,这样文本框才会重新渲染 -->
<input type="text" id="username" placeholder="用户账户" key="username">
</span>
<span v-else>
<label for="email">用户邮箱</label>
**TCP协议**
- TCP 和 UDP 的区别?
- TCP 三次握手的过程?
- 为什么是三次而不是两次、四次?
- 三次握手过程中可以携带数据么?
- 说说 TCP 四次挥手的过程
- 为什么是四次挥手而不是三次?
- 半连接队列和 SYN Flood 攻击的关系
- 如何应对 SYN Flood 攻击?
- 介绍一下 TCP 报文头部的字段
- TCP 快速打开的原理(TFO)
- 说说TCP报文中时间戳的作用?
- TCP 的超时重传时间是如何计算的?
- TCP 的流量控制
- TCP 的拥塞控制
- 说说 Nagle 算法和延迟确认?
- 如何理解 TCP 的 keep-alive?
![](https://img-blog.csdnimg.cn/img_convert/bf1658e4db3df07609f4557641a3073e.webp?x-oss-process=image/format,png)
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
#### 浏览器篇
- 浏览器缓存?
- 说一说浏览器的本地存储?各自优劣如何?
- 说一说从输入URL到页面呈现发生了什么?
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全?
- 实现事件的防抖和节流?
- 实现图片懒加载?
![](https://img-blog.csdnimg.cn/img_convert/6d15c14f43cfd871ba1fd10bd8ab578e.webp?x-oss-process=image/format,png)
的作用?
- TCP 的超时重传时间是如何计算的?
- TCP 的流量控制
- TCP 的拥塞控制
- 说说 Nagle 算法和延迟确认?
- 如何理解 TCP 的 keep-alive?
[外链图片转存中...(img-Oek1aUWo-1715617915328)]
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
#### 浏览器篇
- 浏览器缓存?
- 说一说浏览器的本地存储?各自优劣如何?
- 说一说从输入URL到页面呈现发生了什么?
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全?
- 实现事件的防抖和节流?
- 实现图片懒加载?
[外链图片转存中...(img-e7KxSCKU-1715617915329)]