前端面试题

HTML

GET和POST的区别

  • GET在浏览器回退时是无害的，而POST会再次提交请求。
  • GET产生的URL地址可以被Bookmark，而POST不可以。
  • GET请求会被浏览器主动cache，而POST不会，除非手动设置。
  • GET请求只能进行url编码，而POST支持多种编码方式。
  • GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
  • GET请求在URL中传送的参数是有长度限制的，而POST没有。
  • 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
  • GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

Accept和Content-Type

Accept 请求头用来告知客户端可以处理的内容类型，这种内容类型用MIME类型来表示。 服务器使用 Content-Type 应答头通知客户端它的选择。

  1. Accept属于请求头，Content-Type属于实体头
    • Http报头分为通用报头，请求报头，响应报头和实体报头
    • 请求方的http报头结构：通用报头|请求报头|实体报头
    • 响应方的http报头结构：通用报头|响应报头|实体报头
  2. Accept代表发送端（客户端）希望接受的数据类型
    • 比如：Accept：text/xml
    • 代表客户端希望接受的数据类型是xml类型
    • Content-Type代表发送端（客户端|服务器）发送的实体数据的数据类型
    • 比如：Content-Type：text/html
    • 代表发送端发送的数据格式是html

二者合起来:

Accept:text/xml

Content-Type:text/html

即代表希望接受的数据类型是xml格式，本次请求发送的数据的数据格式是html

跨域问题

同源策略：域名、协议、端口

解决跨域的方法：jsonp、CORS、nginx代理跨域、nodejs中间件代理跨域

HTTP和HTTPS的区别

HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头

HTTP 是明文传输，HTTPS 通过 SSL\TLS 进行了加密

HTTP 的端口号是 80，HTTPS 是 443

HTTPS 需要到 CA 申请证书，一般免费证书很少，需要交费

HTTP 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。

ajax/axios/fetch区别

  • 传统ajax隶属于原始js，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，会出现回调地狱。JQuery ajax 是对原生XHR的封装。 缺点如下：
    • 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
    • 基于原生的XHR开发，XHR本身的架构不清晰
    • JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理
    • 不符合关注分离（Separation of Concerns）的原则
    • 配置和调用方式非常混乱，而且基于事件的异步模型不友好
  • axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，具有以下特征：
    • 从浏览器中创建 XMLHttpRequest
    • 支持 Promise API
    • 客户端支持防止CSRF
    • 提供了一些并发请求的接口（重要，方便了很多的操作）
    • 从 node.js 创建 http 请求
    • 拦截请求和响应
    • 转换请求和响应数据
    • 取消请求
    • 自动转换JSON数据
  • fetch是XMLHttpRequest的一种替代方案,而不是ajax的进一步封装，没有使用XMLHttpRequest对象,是基于Promise设计，调用简单，挂在BOM上的，属于全局的方法，很友好的解决了回调地狱问题，优点如下：
    • 语法简洁，更加语义化
    • 基于标准 Promise 实现，支持 async/await
    • 更加底层，提供的API丰富（request, response）
    • 脱离了XHR，是ES规范里新的实现方式

但fetch是一个低层次的API，可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装，且没有办法原生监测请求的进度，而XHR可以

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 最常见的服务器端错误
    • 501 Not Implemented表示request header 里的 method 或 Content-* 时不被服务器支持，无法被处理
    • 502 Bad Gateway 网关错误 表示作为网关或代理角色的服务器，从上游服务器（如tomcat、php-fpm）中接收到的响应是无效的
    • 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）
    • 504 Gateway Timeout网关超时，服务器未能快速的做出反应

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

  • 行内元素有：a b span img input select strong
  • 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p
  • 空元素：<br> <hr> <img> <input> <link> <meta>
  • 行内元素不可以设置宽高，不独占一行
  • 块级元素可以设置宽高，独占一行

去除a标签跳转效果

<a href ="javascript:return false;">这个链接不能点击 </a>   
<a href ="javascript:volid(0);">

meta viewport相关

<!DOCTYPE html>  <!--H5标准声明，使用 HTML5 doctype，不区分大小写-->
<head lang="en"> <!--标准的 lang 属性写法-->
<meta charset="utf-8">    <!--声明文档使用的字符编码-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>   <!--优先使用 IE 最新版本和 Chrome-->
<meta name="description" content="不超过150个字符"/>       <!--页面描述-->
<meta name="keywords" content=""/>     <!-- 页面关键词-->
<meta name="author" content="name, email@gmail.com"/>    <!--网页作者-->
<meta name="robots" content="index,follow"/>      <!--搜索引擎抓取-->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!--为移动设备添加 viewport-->
<meta name="apple-mobile-web-app-title" content="标题"> <!--iOS 设备 begin-->
<meta name="apple-mobile-web-app-capable" content="yes"/>  <!--添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏-->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!--添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telphone=no, email=no"/>  <!--设置苹果工具栏颜色-->
<meta name="renderer" content="webkit"> <!-- 启用360浏览器的极速模式(webkit)-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">     <!--避免IE使用兼容模式-->
<meta http-equiv="Cache-Control" content="no-siteapp" />    <!--不让百度转码-->
<meta name="HandheldFriendly" content="true">     <!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓-->
<meta name="MobileOptimized" content="320">   <!--微软的老式浏览器-->
<meta name="screen-orientation" content="portrait">   <!--uc强制竖屏-->
<meta name="x5-orientation" content="portrait">    <!--QQ强制竖屏-->
<meta name="full-screen" content="yes">              <!--UC强制全屏-->
<meta name="x5-fullscreen" content="true">       <!--QQ强制全屏-->
<meta name="browsermode" content="application">   <!--UC应用模式-->
<meta name="x5-page-mode" content="app">   <!-- QQ应用模式-->
<meta name="msapplication-tap-highlight" content="no">    <!--windows phone 点击无高亮
设置页面不缓存-->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

img中的alt和元素的title属性作用

  • img的alt属性如果无法显示图像，浏览器将显示alt指定的内容
  • 元素title属性在鼠标移到元素上时显示title的内容

href和src区别

  • href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系,若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
  • src表示引用资源，替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。当浏览器解析到src ，会暂停其他资源的下载和处理（图片不会暂停其他资源下载和处理），直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

浏览器的渲染过程

  1. 解析HTML生成DOM树。
  2. 解析CSS生成CSSOM规则树。
  3. 解析JS，操作 DOM 树和 CSSOM 规则树。
  4. 将DOM树与CSSOM规则树合并在一起生成渲染树。
  5. 遍历渲染树开始布局，计算每个节点的位置大小信息。
  6. 浏览器将所有图层的数据发送给GPU，GPU将图层合成并显示在屏幕上。

label标签有什么作用

label标签通常是写在表单内，它关联一个控件，使用label可以实现点击文字选取对应的控件

<input type="checkbox" id="test">
<label for="test" >test</label>

DOM和BOM有什么区别

DOM

  • Document Object Model，文档对象模型
  • DOM 是为了操作文档出现的 API，document 是其的一个对象
  • DOM和文档有关，这里的文档指的是网页，也就是html文档。DOM和浏览器无关，他关注的是网页本身的内容。

BOM

  • Browser Object Model，浏览器对象模型
  • BOM 是为了操作浏览器出现的 API，window 是其的一个对象
  • window 对象既为 javascript 访问浏览器提供API，同时在 ECMAScript 中充当 Global 对象

← CSS →