web前端面试必看 | 前端面试技巧和注意事项

Web前端面试需注重面试礼仪、熟悉面试流程，并掌握前端技术相关核心知识，以下是详细介绍：

• 着装得体：根据公司文化选择合适的着装，不一定是西装，但要干净整齐，展现专业态度。

• 肢体语言：坐姿端正自然，避免翘腿、抖腿、葛优躺等不雅动作，保持大方得体。
• 专注倾听：面试过程中认真倾听面试官的问题，不卑不亢，谦虚有礼，避免玩手机、回消息或打电话，手机最好调至静音或免打扰模式。

• 笔试（部分公司有）：考察基础知识的掌握程度，可能涉及HTML、CSS、灶哗稿JavaScript等前端基础内容。
• 自我介绍：简洁明了地介绍自己的基本信息、技术栈、项目经验等，突出与应聘岗位相关的亮点。
• 聊技术：面试官会针对前端技术进行深入提问，考察技术能力和解决问题的能力。
• 提问环节：面试官通常会询问求职者“你有什么想问的吗？”，此时可以提出关于公司、团队、项目等方面的问题，展现对岗位的兴趣和关注。

前端技术是面试的核心部分，以下是一些常见的面试方向及问题：

• HTML5新增内容或API：如Canvas绘图、视频音频支持、本地存储（localStorage、sessionStorage）、Web Workers多线程等，需了解其基本用法和应用场景。
• input和textarea的区别：input是单行输入框，textarea是多行文本输入框，在样式、输入内容长度限制等方面有差异。
• 用div模拟textarea：可通过设置div的contenteditable属性为true，芦裤并结合CSS样式实现类似textarea的多行文本输入效果。
• 语义化HTML：使隐孝用具有语义的标签（如header、footer、nav、article等）来构建页面结构，提高代码的可读性和可维护性，也有利于SEO优化。
• HTML5的!DOCTYPE HTML：HTML5的文档类型声明非常简单，只需写!DOCTYPE HTML，目的是让浏览器按照标准模式渲染页面。
• Doctype作用及标准模式与兼容模式区别：Doctype用于声明文档类型，标准模式下浏览器按照W3C标准渲染页面，兼容模式下浏览器会模拟旧版本浏览器的行为，以兼容一些不规范的代码。
• HTML5新特性与移除元素：新特性如上述提到的Canvas、本地存储等；移除了如frame、frameset、noframes等标签。对于新标签的浏览器兼容问题，可通过引入html5shiv.js等库来解决。
• cookies、sessionStorage和localStorage的区别：cookies数据大小有限制，会随请求发送到服务器；sessionStorage和localStorage数据存储在本地，sessionStorage在会话结束时清除，localStorage长期保存。

• float特性：浮动元素会脱离文档流，向左或向右浮动，直到碰到父元素或另一个浮动元素为止，需注意清除浮动带来的影响。
• CSS隐藏元素方法：如display: none（不占据空间）、visibility: hidden（占据空间）、opacity: 0（占据空间，可设置透明度）等。
• CSS清除浮动方法：如使用clear: both的空div、父元素设置overflow: hidden或auto、使用伪元素清除浮动等。
• CSS居中：水平居中可通过margin: 0 auto（块级元素）、text-align: center（行内元素或文本）等方式实现；垂直居中可通过设置line-height等于容器高度（单行文本）、使用flex布局或transform属性等实现。
• CSS盒子模型：包括内容（content）、内边距（padding）、边框（border）和外边距（margin），可分为标准盒子模型（width和height指内容宽度）和IE盒子模型（width和height指内容+内边距+边框的宽度）。
• CSS选择符、继承属性与优先级算法：选择符包括元素选择符、类选择符、ID选择符、后代选择符等；可继承属性如font-size、color等；优先级算法根据选择符的权重来计算，ID选择符权重最高，其次是类选择符，最后是元素选择符，!important可提高优先级。CSS3新增伪类如:nth-child()、:hover等。
• CSS3新特性：如圆角（border-radius）、阴影（box-shadow、text-shadow）、渐变（linear-gradient、radial-gradient）、过渡（transition）、动画（animation）等。
• BFC：块级格式化上下文，是一个独立的渲染区域，内部元素的布局不会影响外部元素，可通过设置overflow: hidden、float、position: absolute等属性触发。
• 等高布局实现方法：如使用正负margin和padding、使用flex布局、使用表格布局等。
• li与li之间空白间隔原因及解决办法：原因是HTML中的换行符或空格会被解析为空白节点，解决办法可通过设置父元素font-size: 0，再为li设置合适的字体大小，或使用float布局等。
• 伪元素与伪类区别：伪元素用于创建虚拟的元素，如::before、::after；伪类用于定义元素的特殊状态，如:hover、:active。
• 响应式布局实现方法及兼容低版本浏览器：可使用媒体查询（@media）根据不同的屏幕尺寸应用不同的样式，兼容低版本浏览器可通过引入respond.js等库来实现。
• z-index层叠顺序：z-index值越大，元素越靠前显示，但只对定位元素（position不为static）有效。
• 过渡与动画区别：过渡用于实现元素状态的平滑变化，需要触发条件（如:hover）；动画可实现更复杂的动画效果，可通过@keyframes定义动画序列，自动播放。
• CSS reset：通过重置浏览器默认样式，统一不同浏览器的默认样式表现，减少兼容性问题。
• CSS Sprite技术优缺点：优点是减少HTTP请求次数，提高页面加载速度；缺点是维护困难，图片合并后修改单个图标需重新生成图片。
• px与em、rem区别：px是固定像素单位；em相对于当前元素的字体大小；rem相对于根元素的字体大小。
• 渐进增强和优雅降级区别：渐进增强是从基础功能开始，逐步增加高级功能，以适应不同设备和浏览器；优雅降级是从高级功能开始，确保在低版本浏览器中也能正常使用基础功能。

• 作用域：包括全局作用域、函数作用域和块级作用域（ES6引入let和const后），作用域链用于查找变量。
• 变量提升：变量在声明之前就可以被访问，值为undefined，函数声明也会被提升。
• 闭包：能够访问其他函数内部变量的函数，可用于封装变量、实现私有成员等，但需注意内存泄漏问题。
• call与apply区别：两者都用于改变函数的this指向，call方法参数是依次传递，apply方法参数是一个数组。
• 手写bind函数：通过创建一个新函数，将原函数的this绑定到指定对象，并可传递部分参数。
• 原型与原型链：每个函数都有一个prototype属性，指向函数的原型对象，实例对象通过__proto__属性指向原型对象，形成原型链，用于实现继承。
• 继承方式及优缺点：如原型链继承、构造函数继承、组合继承、寄生组合继承等，各有优缺点，需根据实际情况选择。
• 数组基本操作：如push、pop、shift、unshift、splice、slice、concat、join等。
• 设计模式：如单例模式、工厂模式、观察者模式、发布-订阅模式等，了解其原理和应用场景。
• JavaScript中this工作原理：this的指向取决于函数的调用方式，如直接调用、方法调用、构造函数调用、call/apply/bind调用等。
• 箭头函数：箭头函数没有自己的this，它的this继承自外层作用域，且不能使用arguments对象。
• 事件模型及事件代理/委托：包括DOM事件模型和IE事件模型，事件代理利用事件冒泡机制，将事件处理函数绑定在父元素上，提高性能。
• 添加、删除、修改节点：如document.createElement()、appendChild()、removeChild()、replaceChild()、setAttribute()等方法。
• jsonp：用于解决跨域问题的一种方法，通过动态创建script标签，利用src属性请求跨域数据，但只支持GET请求。
• 高阶函数：一个函数可以接收另一个函数作为参数，或者返回一个函数，如map、filter、reduce等方法。
• js线程理解：JavaScript是单线程语言，但通过事件循环机制实现了异步编程，包括宏任务（如setTimeout、setInterval、I/O操作）和微任务（如Promise、MutationObserver）。
• setTimeout与setInterval区别及使用注意事项：setTimeout是延迟一定时间后执行一次函数，setInterval是每隔一定时间重复执行函数；使用setInterval时需注意函数的执行时间可能超过间隔时间，导致任务堆积。
• 隐式转换：JavaScript在进行比较或运算时，会自动将不同类型的值转换为相同类型，需注意转换规则，避免出现意外结果。
• 数字格式化：可通过正则表达式或toLocaleString()方法将120542.00转换为120,542.00。
• AMD与CMD区别：AMD是异步模块定义，提前执行依赖模块；CMD是通用模块定义，就近依赖，延迟执行。

• vue

  组件传值prop：父组件通过props向子组件传递数据。

  路由：使用vue-router实现页面路由跳转，包括动态路由、嵌套路由等。

  双向数据绑定：通过v-model指令实现表单元素和数据的双向绑定。

  过滤器：用于对数据进行格式化处理，如日期格式化、货币格式化等。

  computed：计算属性，根据依赖的数据动态计算并缓存结果，只有依赖的数据发生变化时才会重新计算。

  生命周期钩子函数：如created、mounted、updated、destroyed等，在不同的生命周期阶段执行相应的操作。

  插槽：用于在组件中预留内容插槽，实现组件的复用和扩展。

• react

  render：负责渲染组件的虚拟DOM。

  生命周期：如componentDidMount、componentDidUpdate、componentWillUnmount等，用于在组件的不同阶段执行操作。

  更改状态State：通过setState方法更新组件的状态，触发重新渲染。

  jsx：一种JavaScript的语法扩展，允许在JavaScript代码中编写类似HTML的结构。

  组件传值Props：父组件通过props向子组件传递数据。

• angularjs：了解其基本概念和特点，如双向数据绑定、依赖注入、指令等。

• gulp：基于流的自动化构建工具，通过定义任务来执行一系列操作，如文件合并、压缩、编译等。
• webpack：模块打包工具，可将各种资源（如JavaScript、CSS、图片等）视为模块，进行依赖分析和打包，支持代码分割、懒加载等功能。

• SVN：集中式版本控制系统，代码集中存储在服务器上，需联网进行操作。
• Git：分布式版本控制系统，每个开发者本地都有完整的代码仓库，支持离线操作，功能更强大，使用更广泛。