前端面试题整理

# 目录

# $HTML， HTTP，web综合问题

• 1、前端需要注意哪些SEO
• 2、<img>的title和alt有什么区别
• 3、HTTP的几种请求方法用途
• 4、从浏览器地址栏输入url到显示页面的步骤
• 5、如何进行网站性能优化
• 6、HTTP状态码及其含义
• 7、语义化的理解
• 8、介绍一下你对浏览器内核的理解
• 9、html5有哪些新特性、移除了那些元素？
• 10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
• 11、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
• 12、请描述一下 cookies，sessionStorage 和 localStorage 的区别
• 13、iframe有那些缺点？
• 14、WEB标准以及W3C标准是什么?
• 15、xhtml和html有什么区别?
• 16、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
• 17、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
• 18、HTML全局属性(global attribute)有哪些
• 19、Canvas和SVG有什么区别？
• 20、HTML5 为什么只需要写 <!DOCTYPE HTML>？
• 21、如何在页面上实现一个圆形的可点击区域？
• 22、网页验证码是干嘛的，是为了解决什么安全问题

# $CSS部分

• 1、css sprite是什么,有什么优缺点
• 2、display: none;与visibility: hidden;的区别
• 3、link与@import的区别
• 4、什么是FOUC?如何避免
• 5、如何创建块级格式化上下文(block formatting context),BFC有什么用
• 7、清除浮动的几种方式，各自的优缺点
• 8、为什么要初始化CSS样式?
• 9、css3有哪些新特性
• 10、display有哪些值？说明他们的作用
• 11、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
• 12、CSS优先级算法如何计算？
• 13、对BFC规范的理解？
• 14、谈谈浮动和清除浮动
• 15、position的值， relative和absolute`定位原点是
• 16、display:inline-block 什么时候不会显示间隙？(携程)
• 17、PNG,GIF,JPG的区别及如何选
• 18、行内元素float:left后是否变为块级元素？
• 19、在网页中的应该使用奇数还是偶数的字体？为什么呢？
• 20、::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
• 21、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
• 22、CSS合并方法
• 23、CSS不同选择器的权重(CSS层叠的规则)
• 24、列出你所知道可以改变页面布局的属性
• 25、CSS在性能优化方面的实践
• 26、CSS3动画（简单动画的实现，如旋转等）
• 27、base64的原理及优缺点

# $JavaScript

• 1、闭包
• 2、说说你对作用域链的理解
• 3、JavaScript原型，原型链 ? 有什么特点？
• 4、请解释什么是事件代理
• 5、Javascript如何实现继承？
• 6、谈谈This对象的理解
• 7、事件模型
• 8、new操作符具体干了什么呢?
• 9、Ajax原理
• 11、模块化开发怎么做？
• 12、异步加载JS的方式有哪些？
• 13、那些操作会造成内存泄漏？
• 14、XML和JSON的区别？
• 15、谈谈你对webpack的看法
• 17、常见web安全及防护原理
• 18、用过哪些设计模式？
• 19、为什么要有同源限制？
• 20、offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
• 21、javascript有哪些方法定义对象
• 22、常见兼容性问题？
• 22、说说你对promise的了解
• 23、你觉得jQuery源码有哪些写的好的地方
• 25、Node的应用场景
• 26、谈谈你对AMD、CMD的理解
• 27、那些操作会造成内存泄漏？
• 28、web开发中会话跟踪的方法有哪些
• 29、介绍js的基本数据类型
• 30、介绍js有哪些内置对象？
• 31、说几条写JavaScript的基本规范？
• 32、JavaScript有几种类型的值？，你能画一下他们的内存图吗？
• 33、javascript创建对象的几种方式？
• 34、eval是做什么的？
• 35、null，undefined 的区别？
• 36、[“1”, “2”, “3”].map(parseInt) 答案是多少？
• 37、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？
• 38、JSON 的了解？
• 39、js延迟加载的方式有哪些？
• 40、同步和异步的区别?
• 41、渐进增强和优雅降级
• 42、defer和async
• 43、说说严格模式的限制
• 44、attribute和property的区别是什么？
• 45、谈谈你对ES6的理解
• 46、ECMAScript6 怎么写class么，为什么会出现class这种东西?
• 47、什么是面向对象编程及面向过程编程，它们的异同和优缺点
• 48、从你自己的理解来看，你是如何理解面向对象编程的，它解决了什么问题，有什么作用
• 49、对web标准、可用性、可访问性的理解

# $编程题

• 1、写一个通用的事件侦听器函数
• 2、如何判断一个对象是否为数组
• 3、冒泡排序
• 4、快速排序
• 5、编写一个方法 求一个字符串的字节长度

# $其他

• 1、谈谈你对重构的理解
• 2、什么样的前端代码是好的
• 3、对前端工程师这个职位是怎么样理解的？它的前景会怎么样？
• 4、你觉得前端工程的价值体现在哪
• 5、平时如何管理你的项目？

# 人事面

• 面试完你还有什么问题要问的吗
• 你有什么爱好?
• 你最大的优点和缺点是什么?
• 你为什么会选择这个行业，职位?
• 你觉得你适合从事这个岗位吗?
• 你有什么职业规划?
• 你对工资有什么要求?
• 如何看待前端开发？
• 未来三到五年的规划是怎样的？

# 常问

• 自我介绍
• 你的项目中技术难点是什么？遇到了什么问题？你是怎么解决的？
• 你认为哪个项目做得最好？
• 最近在看哪些前端方面的书？
• 平时是如何学习前端开发的？
• 你最有成就感的一件事
• 你是怎么学习前端的

# $HTML， HTTP，web综合问题

# 1、前端需要注意哪些SEO

• 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

# 2、<img>的title和alt有什么区别

• 通常当鼠标滑动到元素上的时候显示
• alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

# 3、HTTP的几种请求方法用途

• 1、GET方法

  • 发送一个请求来取得服务器上的某一资源

• 2、POST方法

  • 向URL指定的资源提交数据或附加新的数据

• 3、PUT方法

  • 跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有

• 4、HEAD方法

  • 只请求页面的首部

• 5、DELETE方法

  • 删除服务器上的某资源

• 6、OPTIONS方法

  • 它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息

• 7、TRACE方法

  • TRACE方法被用于激发一个远程的，应用层的请求消息回路

• 8、CONNECT方法

  • 把请求连接转换到透明的TCP/IP通道

# 4、从浏览器地址栏输入url到显示页面的步骤

• 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
• 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
• 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
• 载入解析到的资源文件，渲染页面，完成。

# 5、如何进行网站性能优化

• content方面

  1. 减少HTTP请求：合并文件、CSS精灵、inline Image
  2. 减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
  3. 减少DOM元素数量

• Server方面

  1. 使用CDN
  2. 配置ETag
  3. 对组件使用Gzip压缩

• Cookie方面

  1. 减小cookie大小

• css方面

  1. 将样式表放到页面顶部
  2. 不使用CSS表达式
  3. 使用<link>不使用@import

• Javascript方面

  1. 将脚本放到页面底部
  2. 将javascript和css从外部引入
  3. 压缩javascript和css
  4. 删除不需要的脚本
  5. 减少DOM访问

• 图片方面

  1. 优化图片：根据实际颜色需要选择色深、压缩
  2. 优化css精灵
  3. 不要在HTML中拉伸图片

# 6、HTTP状态码及其含义

• 1XX：信息状态码
  • 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
• 2XX：成功状态码
  • 200 OK 正常返回信息
  • 201 Created 请求成功并且服务器创建了新的资源
  • 202 Accepted 服务器已接受请求，但尚未处理
• 3XX：重定向
  • 301 Moved Permanently 请求的网页已永久移动到新位置。
  • 302 Found 临时性重定向。
  • 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
  • 304 Not Modified 自从上次请求后，请求的网页未修改过。
• 4XX：客户端错误
  • 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
  • 401 Unauthorized 请求未授权。
  • 403 Forbidden 禁止访问。
  • 404 Not Found 找不到如何与 URI 相匹配的资源。
• 5XX: 服务器错误
  • 500 Internal Server Error 最常见的服务器端错误。
  • 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

# 7、语义化的理解

• 用正确的标签做正确的事情！
• html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
• 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
• 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

# 8、介绍一下你对浏览器内核的理解？

• 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

• 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核

• JS引擎则：解析和执行javascript来实现网页的动态效果

• 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

# 9、html5有哪些新特性、移除了那些元素？