服务端获取文档大小

JAVA上百实例源码以及开源项目源代码
2018-12-11 17:07:42
Tcp服务端与客户端的JAVA实例源代码 2个目标文件摘要:Java源码,文件操作,TCP,服务器 Tcp服务端与客户端的JAVA实例源代码，一个简单的Java TCP服务器端程序，别外还有一个客户端的程序，两者互相配合可以开发出超多...
收起
java

JAVA实现服务端获取签名后前端直传文件到oss服务器：前端到后端

千次阅读 热门讨论 2020-08-27 17:24:01

前端向后台请求只去请求获取签名的接口，然后在拿到签名认证后直接向oss服务上传文件，我就是采用的这种方式，因为我并没有用到回调函数，所以就采用这种方式，流程图如下： 服务端请求签名后直传 3.采用服务端签名...

项目场景： 
对于文件上传大家都不陌生，基本上都是上传到自己的服务器后再通过服务器上传到阿里oss服务器上，我现在做的项目是需要上传视频的，这个功能其实已经做好了，但是由于视频文件比较大上传到服务器再上传oss的耗时比较长，就要换一种方式从前端直接上传到oss服务器上 
介绍： 
传统方式：
 Web端常见的上传方法是用户在浏览器或app端上传文件到应用服务器，然后应用服务器再把文件上传到OSS，如下图所示：
 上传慢：用户数据需先上传到应用服务器，之后再上传到OSS。网络传输时间比直传到OSS多一倍。如果用户数据不通过应用服务器中转，而是直传到OSS，速度将大大提升。而且OSS采用BGP带宽，能保证各地各运营商之间的传输速度。
 扩展性差：如果后续用户多了，应用服务器会成为瓶颈。
 费用高：需要准备多台应用服务器。由于OSS上传流量是免费的，如果数据直传到OSS，不通过应用服务器，那么将能省下几台应用服务器。 
直传的方式：
 1.直接通过js直传的.但是appid与appkey都暴露在了前端.这样很不安全，最好不要采用，不过可以试着玩玩。
 JavaScript客户端签名直传
 2.前端向后台请求只去请求获取签名的接口，然后在拿到签名认证后直接向oss服务上传文件，我就是采用的这种方式，因为我并没有用到回调函数，所以就采用这种方式，流程图如下：
 服务端请求签名后直传
 
 3.采用服务端签名后直传方案有个问题：大多数情况下，用户上传数据后，应用服务器需要知道用户上传了哪些文件以及文件名；如果上传了图片，还需要知道图片的大小等，为此OSS提供了上传回调方案。流程图如下：服务端签名直传并设置上传回调
  
进入正题： 
（先来看看前端的代码）
 我这个项目中用到的layui的，我在他的第三方插件中找到了一个大哥写的组件，并用这个组件实现了我所需的功能，这边附上大哥的博客地址以及我已经下载好了的插件压缩包**插件源码的下载的地址，方便大家使用。
 其实这个插件的详细参数说明在文件里都有，因为我也是第一次弄oss直传，弄得详细一点让第一次做这个功能爪哇小伙伴少花费一点时间，我还是贴出来方便大家查看，以下是文件上传js的调用： 
 aliossUploader.render({
                elm:'#uploadBatchFileOther', //上传文件绑定的id
                fileType:'video',  //文件类型
                multiple:false,  //是否多文件上传 否
                layerArea:['800px','500px'],
                layerTitle:'上传文件到阿里云OSS',
                policyUrl:ctx+"courseMediaInfo/getOSS", //后台请求签名的路径，换成你们的就行
                policyData:{},//请求签名的参数，没有可不写
                policyHeader:{
                    Authorization:layui.data('xxx-data').Authorization //请求签名的headers
                },
                codeFiled:'code',//请求签名后返回的状态字段
                codeStatus:0,//请求签名后返回的状态码值
                policyMethod:'GET',//请求签名的方法类型
                accessidFiled : 'accessid',//阿里的accessKeyId
                policyFiled : 'policy',//签名返回的策略policy（也叫表单域）
                signatureFiled : 'signature',//返回的签名(主要就是这个签名)
                httpStr:'https',//上传至oss时是否https
                region:'oss-cn-hangzhou',//oss的数据中心所在的区域(在你的yml配置文件中可以找到)
                bucket: 'xxx-data',//oss的存储空间的名称(你要上传到哪个文件就是哪个名称)
                prefixPath:'course/',//上传时的前缀(相当于在你的oss存储空间多一级目录，要提前在你的oss存储空间新建好，要不然上传的时候会报错找不到文件夹)
                allUploaded:function(res){//成功回调
                    // var s = JSON.stringify(res);
                    // layer.msg(JSON.stringify(res));
                    // console.log(s[3]);
                     $view.find("#courseUrl").val(res[0].ossUrl);
                   /* var var1 = JSON.parse(res).var;*/

                },
                policyFailed:function(res){//失败回调
                    layer.msg(JSON.stringify(res));
                },
                uploadRenderData:{//设置文件大小，还有其他的参数可自行设置（下载源码或者去大哥的博客下看）
                    size:200000 //单位kb
                }
            });
 
提示： 这个地方是上传文件调用所需的，真证用到的源码js在下载插件后的一个叫aliossUploader.js的文件里，可以下载后根据自己的需求自行修改，因为我是采用的这个插件，所以我后台验证签名后返回的格式都是按照所需的参数进行封装的。
 需要注意一下的是请求签名返回的参数结构,其实你要关注一下什么是policy以及他的语法，如何生成signature，这样你才能写后台的接口： 
{
	"code": 0,
	"success": true,
	"msg": "签名成功",
	"data": {
		"accessid": "XXXXX",
		"host": "http://XXXXX.oss-cn-shanghai.aliyuncs.com",
		"policy": "XXXX==",
		"signature": "XXXX=",
		"expire": 1554851252
	}
}
 
在这里附上链接，因为阿里的文档实在是太分散了，我自己找的时候都找了半天
 你写这个小功能就必须了解：
 PostObject使用HTML表单上传Object到指定Bucket
 Policy 语法结构
 以及阿里提供的接口demo我已经下载好了你可以自己去找或者用我的下载好了的都行 
 （**再来看看后端的接口**） 
public class CourseMediaInfoController extends BaseController {

    private final ICourseMediaInfoService courseMediaInfoService;
    @Value("${aliyun.oss.endpoint}")
    private String endpoint; //这个值你的配置文件中有其实就是 http://oss-cn-hangzhou.aliyuncs.com
    @Value("${aliyun.oss.accessKeyId}")
    private String accessKeyId;
    @Value("${aliyun.oss.accessKeySecret}")
    private String accessKeySecret;
    @Value("${aliyun.oss.bucketName.qyjz}")
    private String bucketName; //oss存储空间名称

    //oss存储课时文件前缀
    private String dir = "course/";
    
    @GetMapping("courseMediaInfo/getOSS")
    @ResponseBody
    //@RequiresPermissions("courseMediaInfo:list")
    public Map<String, Object> getOSS() {
        HashMap<String, Object> map1 = new HashMap<>();
        try{
            //开启oss客户端
            OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime *1000;
            Date expiration = new Date(expireEndTime);


            //生成的到期时间转换位s，并转换为String
            String expire = String.valueOf(expireEndTime / 1000);
            PolicyConditions policyConditions = new PolicyConditions();

            //构造用户表单域Policy条件
            PolicyConditions policyConds = new PolicyConditions();
            //设置上传文件大小的范围
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            //设置上传的路径的前缀:就是上传到指定文件夹
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            //根据到期时间生成policy策略
            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            //对policy进行UTF-8编码后转base64
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String endPolicy = BinaryUtil.toBase64String(binaryData);
            //生成签名，policy表单域作为填入的值，将该值作为将要签名的字符串。
            String signature = ossClient.calculatePostSignature(postPolicy);

            //封装参数参数返回
            HashMap<String, Object> map = new HashMap<>();
            map.put("accessid",accessKeyId);
            map.put("host",endpoint);//这里我是直接传过去的，因为在前端访问oss的时候做了拼接的，可以在aliossUploader.js里面找到
            map.put("policy",endPolicy);
            map.put("signature",signature);
            map.put("expire",expire );
            map1.put("code",0);
            map1.put("success",true);
            map1.put("msg","签名成功");
            map1.put("data",map);
        }catch (Exception e){
            e.printStackTrace();
        }
        return map1;
    }
    }
 
这就是后台接口的代码，其实和阿里的demo一摸一样，只是我做了根据插件做了一下修改，添加了注释，因为不加说明我第一眼看上去都不知道这些步骤是干啥的，注意一点的是你的文件上传的前缀要和js那写一致，要不然会报错说你文件夹不存在 
 
注意事项： 
1.一定要在阿里的控制台设置post请求跨域，别问我怎么知道的，看下图：
 2.注意下前端传过在文件上传时的信息，如果上传除了出了问题可以看下请求体的信息，这就是我前面说到的找不到文件夹的错误，如下图：
 
 
 更多的错误码阿里有提供的错误码也可以自行百度 
ps：我只是给我做过的事情记录一下，希望对大家有帮助，如果记得要把前端的插件和阿里demo下载下来对比着看这样上手快一些，不会耽误时间最少有方向，还要记得在你的pom,xml将oss的依赖引入 （下载资源我已经设置0积分但csdn会自动加积分，如果需要得可以留言说 我把重新积分改为0）

收起

展开全文

java javascript

2021年前端面试题及答案

万次阅读 多人点赞 2020-02-11 19:29:34

413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头（HTTP 1.1新）。 414 Request URI Too Long URI太长（HTTP 1.1...

前端面试汇总（2020年）

一

大纲

1、前言

2、前端工程化

3、前端设计模式

4、前端安全性问题

5、前端跨域问题

6、前端数据加密

7、前端http相关问题

8、*前端基础知识点面试题

9、前端技术栈问题

前言

由于新冠肺炎疫情，现在成天呆在家里，加上也要准备面试，就在家里看面试题，看着网上一堆面试题，决定收集常见题目汇总一下。关于面试大纲，我认为每个人都是千差万别的。因为面试官都是对简历所写的项目经验进行深挖或者对你所掌握的基本技能进行考察。

前端工程化

什么是"前端工程化"？

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。

如何做"前端工程化"？

前端工程化就是为了让前端开发能够“自成体系”，个人认为主要应该从模块化、组件化、规范化、自动化四个方面思考。

前端设计模式

前端常见的设计模式主要有以下几种，具体设计模式查看这篇文章。
1. 单例模式
2. 工厂模式
3. 策略模式
4. 代理模式
5. 观察者模式
6. 模块模式
7. 构造函数模式
8. 混合模式

前端安全性问题

这个是老的话题，有的在初中级前端面试中可能不会提到。但是在高级面试的时候，你要说出前端安全性问题防御，及前端常见安全性问题的攻击原理是什么。

xss跨站脚本攻击原理？如何进行？防御手段？

如何进行：如何XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。

主要原理：过于信任客户端提交的数据！

防御手段：不信任任何客户端提交的数据，只要是客户端提交的数据就应该先进行相应的过滤处理然后方可进行下一步的操作。

CSRF跨站请求伪造原理？如何进行？防御手段？

如何进行：当你在某网页登录之后，在没有关闭网页的情况下，收到别人的链接。例如:http://127.0.0.1/dvwa/vulnerabilities/csrf/?password_new=1&password_conf=1&Change=Change#

点击链接，会利用浏览器的cookie把密码改掉。

主要原理：在没有关闭相关网页的情况下，点击其他人发来的CSRF链接，利用客户端的cookie直接向服务器发送请求。

防御手段：

检测Referer

Anti-CSRF token机制

业务上要求用户输入原始密码（简单粗暴），攻击者在不知道原始密码的情况下，无论如何都无法进行CSRF攻击。

Sql脚本注入原理？如何进行？防御手段？

如何进行：利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。

主要原理：通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令

防御手段：

使用预编译，绑定变量（推荐）。

检查数据类型。

过滤特殊字符和语句。

页面不错误回显。

web上传漏洞原理？如何进行？防御手段？

如何进行：用户上传了一个可执行的脚本文件，并通过此脚本文件获得了执行服务器端命令的能力。

主要原理：当文件上传时没有对文件的格式和上传用户做验证，导致任意用户可以上传任意文件，那么这就是一个上传漏洞。

防御手段：

1. 最有效的，将文件上传目录直接设置为不可执行，对于Linux而言，撤销其目录的'x'权限；实际中很多大型网站的上传应用都会放置在独立的存储上作为静态文件处理，一是方便使用缓存加速降低能耗，二是杜绝了脚本执行的可能性；
2. 文件类型检查：强烈推荐白名单方式，结合MIME Type、后缀检查等方式；此外对于图片的处理可以使用压缩函数或resize函数，处理图片的同时破坏其包含的HTML代码；
3. 使用随机数改写文件名和文件路径，使得用户不能轻易访问自己上传的文件；
4. 单独设置文件服务器的域名；

前端跨越问题

什么是跨域？

由浏览器同源策略限制的一类请求场景，当不同地址，不同端口，不同级别，不同协议就会构成跨域。

什么是同源策略？

所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

如何解决跨域？能说1，2，7，8就行。

1、通过jsonp跨域

2、CORS

3、 document.domain + iframe跨域

4、 location.hash + iframe

5、 window.name + iframe跨域

6、 postMessage跨域

7、 nginx代理跨域

8、 nodejs中间件代理跨域

9、 WebSocket协议跨域

前端数据加密问题

一般如何处理用户敏感信息？

前端一般使用md5、base64加密、sha1加密，想要了解详情请自行百度。

前端http相关问题

HTTP常用状态码及其含义？

1xx：指示信息--表示请求已接收，继续处理

100 Continue 初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1新）

101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议（HTTP 1.1新）

2xx：成功--表示请求已被成功接收、理解、接受

200 OK 一切正常，对GET和POST请求的应答文档跟在后面。

201 Created 服务器已经创建了文档，Location头给出了它的URL。

202 Accepted 已经接受请求，但处理尚未完成。

203 Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝（HTTP 1.1新）。

204 No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。

205 Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容（HTTP 1.1新）。

206 Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它（HTTP 1.1新）。

3xx：重定向--要完成请求必须进行更进一步的操作

300 Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。

301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。

302 Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。注意，在HTTP1.0中对应的状态信息是“Moved Temporatily”。出现该状态代码时，浏览器能够自动访问新的URL，因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如，如果浏览器错误地请求http://host/~user（缺少了后面的斜杠），有的服务器返回301，有的则返回302。严格地说，我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。

303 See Other 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取（HTTP 1.1新）。

304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取（HTTP 1.1新）。

307 Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。（HTTP 1.1新）

4xx：客户端错误--请求有语法错误或请求无法实现

400 Bad Request 请求出现语法错误。

401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。

403 Forbidden 资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。

404 Not Found 无法找到指定位置的资源。这也是一个常用的应答。

405 Method Not Allowed 请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）对指定的资源不适用。（HTTP 1.1新）

406 Not Acceptable 指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容（HTTP 1.1新）。

407 Proxy Authentication Required 类似于401，表示客户必须先经过代理服务器的授权。（HTTP 1.1新）

408 Request Timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。（HTTP 1.1新）

409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。（HTTP 1.1新）

410 Gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。（HTTP 1.1新）

411 Length Required 服务器不能处理请求，除非客户发送一个Content-Length头。（HTTP 1.1新）

412 Precondition Failed 请求头中指定的一些前提条件失败（HTTP 1.1新）。

413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头（HTTP 1.1新）。

414 Request URI Too Long URI太长（HTTP 1.1新）。

416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头。（HTTP 1.1新）

5xx：服务器端错误--服务器未能实现合法的请求

500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求。

501 Not Implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求。

502 Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。

503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头。

504 Gateway Timeout 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答。（HTTP 1.1新）505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本。（HTTP 1.1新）

websocket和轮询及长轮询区别

轮询如下：

客户端：啦啦啦，有没有新信息(Request)服务端：没有（Response）客户端：啦啦啦，有没有新信息(Request)服务端：没有。。（Response）客户端：啦啦啦，有没有新信息(Request)服务端：你好烦啊，没有啊。。（Response）客户端：啦啦啦，有没有新消息（Request）服务端：好啦好啦，有啦给你。（Response）客户端：啦啦啦，有没有新消息（Request）服务端：。。。。。没。。。。没。。。没有（Response） ---- loop

长轮询如下：

客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request）服务端：额。。 等待到有消息的时候。。来 给你（Response）客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request） -loop

websocket如下：

websocket解决了HTTP的这几个难题。首先，被动性，当服务器完成协议升级后（HTTP->Websocket），服务端就可以主动推送信息给客户端啦。

所以上面的情景可以做如下修改。

客户端：啦啦啦，我要建立Websocket协议，需要的服务：chat，Websocket协议版本：17（HTTP Request）服务端：ok，确认，已升级为Websocket协议（HTTP Protocols Switched）客户端：麻烦你有信息的时候推送给我噢。。服务端：ok，有的时候会告诉你的。服务端：balabalabalabala服务端：balabalabalabala服务端：哈哈哈哈哈啊哈哈哈哈服务端：笑死我了哈哈哈哈哈哈哈

Http和Https的区别？

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

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

*前端基础知识点面试题

HTML/5、CSS/3相关

一、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性：

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

移除元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
h5新标签兼容：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

如何区分：
DOCTYPE声明\新增的结构元素\功能元素

二、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

CSS 选择符：

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[rel = "external"]）

9.伪类选择器（a: hover, li:nth-child）

可以继承的属性：

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式：border padding margin width height ;

优先级：

!important > id > class > tag

important 比内联优先级高,但内联比 id 要高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 元素的每个 元素。

p:last-of-type 选择属于其父元素的最后 元素的每个 元素。

p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

三、CSS3有哪些新特性？

更详细的请见：https://www.cnblogs.com/qianduantuanzhang/p/7793638.html

CSS3实现圆角（border-radius），阴影（box-shadow），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器多背景 rgba

在CSS3中唯一引入的伪元素是::selection.

媒体查询，多栏布局

border-image

四、解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念？

1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，宽度 = 边框 + padding + 内容宽度； chrom、IE9+、(添加doctype) 使用标准盒模型，宽度 = 内容宽度。
2. box-sizing : 为了解决标准黑子和IE盒子的不同，CSS3增添了盒模型属性box-sizing，content-box(默认)，border-box 让元素维持IE传统盒子模型， inherit 继承父盒子模型；
3. 边界塌陷：块元素的 top 与 bottom 外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距），这样的现象称之为外边距塌陷。
4. 负值作用：负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面，我也能让它显示在最前面。

五、BFC（Block Formatting Context）是什么？应用？

1. BFC 就是 ‘块级格式上下文’ 的格式，创建了BFC的元素就是一个独立的盒子，不过只有BLock-level box可以参与创建BFC，它规定了内部的Bloc-level Box 如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
2. 应用场景：
1. 解决margin叠加的问题
2. 用于布局（overflow: hidden）,BFC不会与浮动盒子叠加。
3. 用于清除浮动，计算BFC高度。

六、如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

七、简要说一下CSS的元素分类

块级元素：div,p,h1,form,ul,li;
行内元素 : span,a,label,input,img,strong,em;

八、解释下浮动和它的工作原理？清除浮动的方法

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。

2.使用after伪对象清除浮动

　该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

#parent:after{

　　content:".";

　　height:0;

　　visibility:hidden;

　　display:block;

　　clear:both;

　}

3.设置overflow为hidden或者auto

4.浮动外部元素

九、CSS隐藏元素的几种方法（至少说出三种）

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局，能让元素保持可以操作;
Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

十、如何让一个盒子水平垂直居中

复制代码

//已知宽高<div class="div1"></div><style>
    .div1{
        width:400px;
        height:400px;
        position:absolute;
        left:50%;
        top:50% 
        margin:-200px 0 0 -200px;    }   
</style>//未知宽高<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>
        .div1{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            border: 1px solid #000;
            width: 400px;
            height: 400px;        }    </style></head><body>    <div class="div1"></div></body></html>//未知宽高方法二：<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>
        .div1{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            border: 1px solid #000;
            width: 400px;
            height: 400px;        }    </style></head><body>    <div class="div1"></div></body></html>

JS部分

1、cookie、localStorage、sessionStorage的区别和使用？

cookie：是存储在本地的数据，有时候也用cookies，通常经过加密，应用最经典的就是判断注册用户是否已经登录过该网站。   localStorage：仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在；
   创建和访问localStorage：
        1）、设置数据：
        var forgetData = {phone:vm.phone};        localStorage.setItem("forgetData",JSON.Stringfy(forgetData));    //forgetData是存储在localStorage里边的本地数据；JSON.Stringfy(forgetData)是将数据转化为字符串格式；
            获取数据：
        vm.forgetData=JSON.parse(localStorage.getItem("forgetData"));  //将字符串转化为JSON化；
        2）、设置：localStorage.name = "zhao";
             获取：localStorage.name    //zhao        localStorage.setItem(key,value);//设置数据        localStorage.getItem(key);//获取数据        localStorage.removeItem(key);//删除单个数据        localStorage.clear();//清除所有localStorage的数据

    sessionStorage：当用户的浏览器窗口关闭时，数据会被清除；
    
    共同点：都是保存在浏览器端，且同源的。
    区别：
        cookie数据始终在同源的http请求中携带9即使不需要)，即cookie在浏览器和服务器之间来回传递；cookie数据还有路径的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据大小不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只能保存很小的数据。
        sessionStorage和localStorage不会自动把数据发给服务器，只在本地保存，虽然也有大小限制，但是要比cookie大得多，可以达到5M或者更大。
        数据有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效，不能持久保存；localStorage：始终有效，浏览器窗口关闭也一直保存；cookie：只在cookie设置的过期时间之前保存，即使浏览器窗口关闭。
        作用域不同，sessionStorage在不同浏览器窗口的数据不能共享，即使是同一个页面；localStorage在所有的同源窗口中都是共享的；cookie也是在同源窗口中共享的，

2、如何实现浏览器多标签页之间的通信？

    调用localStorage、cookie本地存储方式。

3、JavaScript的typeof返回类型有哪些？

Object（null和Array）、number、undefined、string、Boolean、function

4、类型转换

强制转换：parseInt();parseFloat();number();

5、数组的方法

var list = [1,2,3];list.pop();//删除数组的最后一个元素 var list = [1,2];list.unshift(0,1);//头部添加  var list = [0,1,1,2,3];list.push(4,5);//尾部添加   var list = [1,2,3,4,5];var arr = list.concat(4,[5,6]);//把两个数组连接起来 //var arr = [1,2,3,4,5];  //var list = [1,2,3];list.join("-");    //1-2-3list.reverse();//3,2,1list.slice(1);//var list = [2,3];list.slice(1,2);//var list = [2];list.slice(1,-2);//设置了两个参数，终止下标为负数，当出现负数时，将负数加上数组长度的值来替换该位置的数。var arr = list.splice(0,1);//删除 var list = [2,3];  var arr = [1];可以删除任意数量的项，只需指定2个参数；要删除的第一项的位置和要删除的项数。例如splice(0,2);会删除当前数组的前两项list.splice(2,0,4,6);//插入，var list = [1,2,4,6,3]; 可以向指定位置插入任意数量的项，需要3个参数，起始位置、0（要删除的项数）、要插入的任意数量的项。例如splice(2,0,4,6);会从第二个位置插入4和6；list.splice(2,1,4,6);//替换，var list = [1,2,6,3]; 可以向指定位置插入任意数量的项，同时删除任意数量的项，需要3个参数，起始位置、要删除的项数、要插入的任意数量的项。例如splice(2,1,4,6);会从位置 2 开始插入4和6。list.sort();//按照第一个数字大小进行排序;function compare(a,b){
    return a-b;//正序；
    return b-a;//倒序；}list.sort(compare);

6、ajax请求时get和post的区别？

get：从服务器上获取数据，传送数据量小，安全性低，请求会被缓存，缓存是针对URL进行缓存的，get请求参数直接加在URL地址后面，一种参数组合就会产生一种URL的缓存，重复的请求结果是相同的；post：向服务器发送数据；传送数据量大，请求不会被缓存，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全，所以涉及用户隐私的数据都要用post传送；

7、ajax请求时，如何解释json数据？

使用eval方法解析的时候，eval();不会去判断该字符串是否合法，而且json对象里的js方法也会被执行，这是非常危险的；推荐使用JSON.parse(); JSON.parse();把字符串转化成json。

8、call和apply的区别？

共同点：
    都可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。
    另一种说法，都能够改变方法的执行上下文（执行环境），将一个对象的方法交给另一个对象来执行，并且是立即执行。
不同点：
    apply();//最多只能有两个参数--新this对象和一个数组argArray，如果给该方法传递多个参数，则把参数都写进这个数组里边，当然，即使只有一个参数，也要写进数组里边。
    call();//可以接收多个参数，第一个参数apply()一样，后面则是一串参数列表。
    实际上，apply和call的功能是一样的，只是传入的参数列表的形式不同。

9、http常用状态码？

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

10.你有哪些性能优化的方法？

    （详情请看雅虎14条性能优化原则）。

      （1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

      （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

      （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

      （4） 当需要设置的样式很多时设置className而不是直接操作style。

      （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

      （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

      （7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。

11.深拷贝和浅拷贝

    基本类型指的是简单的数据段，引用类型指的是多个值构成的对象；    var name = "John"; // 基本类型值

    var obj = new Object(); 
    obj.name = "John"; 
    // obj 为引用类型值
    
    在复制变量中，对于基本类型来说，两者互不影响，    var num = 1;    var num1 = num; // num1 = 1;

    var num1 = 3; // num还是1,不会变
    
    浅拷贝和深拷贝的区别：
    对于浅拷贝来说，对于一个数组（数组是一个对象），只要我们修改了一个拷贝数组，原数组也会跟着改变。
    因为他们引用的是同一个地址的数据，拷贝的时候并没有给b数组创造独立的内存，只是把a数组指向数据的指针拷贝给了b；
    而深拷贝就与其相反，将会给b数组创造独立的内存，并且将a数组的内容一一拷贝进来，两者互不影响。
    
    实现深拷贝：
    一：层级拷贝，用递归实现；
    二：JSON解析        var b = JSON.parse(JSON.stringify(a));

其他

一、怎么让Chrome支持小于12px 的文字？

这个我们在做移动端的时候，设计师图片上的文字假如是10px，我们实现在网页上之后。往往设计师回来找我们，这个字体能小一些吗？我设计的是10px？为啥是12px?其实我们都知道，谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢？

我们的做法是：

针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放！

<style>pspan{font-size:10px;-webkit-transform:scale(0.8);display:block;}</style><p><span>haorooms博客测试10px</span></p>

二、IOS手机浏览器字体齿轮

修改-webkit-font-smoothing属性，结果是：-webkit-font-smoothing:none:无抗锯齿-webkit-font-smoothing: antialiased | subpixel-antialiased |default:灰度平滑

三、如何修改chrome记住密码后自动填充表单的黄色背景？

大体可以通过input : -webkit-autofill来进行修改！

input:-webkit-autofill {background-color:#FAFFBD;background-image: none;color:#000;}

四、谷歌浏览器运行下面代码，并解释！

[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

运行上面代码之后，会发现HTML层都被使用不同的颜色添加了一个高亮的边框。为什么会这样呢？

首先我们来看

[].forEach.call()，关于call()和apply()，我前面有文章也写过，具体可以看http://www.haorooms.com/post/js_constructor_pro

[].forEach.call()等价于Array.prototype.forEach.call()

其次我们来看$$("*")

你可以在你的Chrome浏览器控制台中输入$$('a')，然后你就能得到一个当前页面中所有锚元素的列表。

$$函数是许多现代浏览器命令行API中的一个部分，它等价于document.querySelectorAll,你可以将一个CSS选择器作为这个函数的参数，然后你就能够获得当前页面中所有匹配这个CSS选择器的元素列表。如果你在浏览器控制台以外的地方，你可以使用document.querySelectorAll('')来代替$$('')

为元素添加颜色

为了让元素都有一个漂亮的边框，我们在上面的代码中使用了CSS属性outline。outline属性位于CSS盒模型之外，因此它并不影响元素的属性或者元素在布局中的位置，这对于我们来说非常有用。这个属性和修改border属性非常类似，因此下面的代码应该不会很难理解：

a.style.outline="1px solid #"+ color

真正有趣的地方在于定义颜色部分：

（~~(Math.random()*(1<<24))).toString(16)

~~的作用相当于parseInt，和我前面讲解的“|”功能类似，关于运算符“I” ，可以去看看！

通过上面代码可以获取到一个随机的颜色值！

五、input [type=search] 搜索框右侧小图标如何美化？

美化效果如下图：

enter image description here

右侧默认的比较难看的按钮，美化成右侧效果。

input[type="search"]::-webkit-search-cancel-button{-webkit-appearance: none;height:15px;width:15px;border-radius:8px;background:url("images/searchicon.png")no-repeat 00;background-size:15px15px;}

用到的是伪元素::-webkit-search-cancel-button，关于什么是伪类和为元素，请看：http://www.haorooms.com/post/css_wl_wys

六、iOS safari 如何阻止“橡皮筋效果”？

可以参考一下知乎上的回答 https://www.zhihu.com/question/22256539 。

但是，我们遇到的问题不是这样，我是要解决弹跳导致弹出层（position:absolute）的覆盖层高度小于100%;

针对这个问题，我想到的解决方案如下：

方法一：把position:absolute改成position:fixed，并在弹出层之后，设置body的高度是100%；overflow是hidden。

方法二：

思路是获取苹果浏览器导航栏的高度。然后滚动的时候，重新获取其高度。在导航栏高度变小的时候，给弹出层增加高度的百分比！

代码如下：

//ios safari 伸缩判断var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true;
        $(window).scroll(function(){if(agent.indexOf("iPhone")!=-1|| agent.indexOf("iPad")!=-1){var topbarHeightNow=window.outerHeight-window.innerHeight;if(topbarHeightNow<topbarHeight){
                    globleflag=false//此处写处理逻辑}else{
                 globleflag=true//此处写处理逻辑}}});

七、实现点击文字，文字后面radio选中效果

这个效果是前端很经常用到和遇到的效果了，实现这个效果的方式也很多，很多朋友用js和jquery来实现，但是最简单的，我们可以直接用lable标签的 for 属性来实现。

看下下面例子：

<form><labelfor="male">Male</label><inputtype="radio"name="sex"id="male"/><br/><labelfor="female">Female</label><inputtype="radio"name="sex"id="female"/></form>

label 的for属性后面跟着input的id,就可以点击label，来触发input效果了，大家可以试一试！

八、网站中，图片文件（jpg，png,gif），如何点击下载？而非点击预览？

我们平时在网站中的图片，假如我们要下载，如下写：

<ahref="haorooms博客.jpg">下载</a>

我们点击下载按钮，只会预览“haorooms博客.jpg”这张图片，并不会出现下载框，另存为那种？那么我们如何做呢？

我们只需要如下写

<ahref="haorooms博客.jpg"download>下载</a>

就可以下载了。点击如下进行尝试吧！下载

不但如次，我们还可以指定文件名称，如下写法：

<ahref="haorooms博客.jpg"download="haoroom前端博客图片下载">下载</a>

测试如下：下载

上面就是指定下载的写法！

九、Math.min()比Math.max()大

Math.min()<Math.max()// falseMath.min()>Math.max()// true

因为Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。

前端技术栈问题

vue相关问题？

更多前端技能请关注公众号”极致简文“

▼

往期精彩回顾

▼

React组件与生命周期

React函数组件和Class组件以及Hooks

2020年最火爆的Vue.js面试题

Redux使用之我要买个女朋友（入门篇）

收起

展开全文

js 前端面试题

前端面试题（持续更新中）

万次阅读 多人点赞 2019-11-06 17:16:33

HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息，通常情况下会配合数字证书实现。 13.ajax的同步和异步区别：同步：提交请求 -> 等待...

全家桶项目源码：Vue全家桶+SSR+Koa2全栈开发美团网[完整版] 链接：https://pan.baidu.com/s/1cwPDVkj_I5z568mYIHni4A 提取码：24g2

2020字节跳动扎心面试题链接（从公众号获取的）：
https://mp.weixin.qq.com/s/B8xRPxwjJfURyYzTQgIxUw

CSS面试题：
1、谈谈你对CSS盒模型的认识？

1、基本概念：标准模型+IE模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内边距（padding），边框（border），margin（外边距），和内容（content）。
标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
怪异(IE)盒模型：一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）
设置盒模型：box-sizing:border-box

2、CSS是如何设置这两种模型，那么二者怎么转化呢？

content-box: 指的是W3C标准盒模型，也是默认的设置属性。
border-box：指的是IE盒模型，width和height包含了padding和border。

3、JS如何获取盒模型对应的宽和高？

dom.style.width/height：对节点样式可读可写，但只能读或写内嵌的CSS样式对于在(style)或外联样式不能读写。
dom.currentStyle.width/height：拿到的是渲染之后的宽和高，比较真实，但支持IE浏览器
window.getComputedStyle(dom).width/height：方法是只读的，只能获取样式，不能设置。
dom.getBoundingClientRect().width/height：getBoundingClientRect()方法得到8个值，除了 width 和 height 外的属性x、y、left、top、right和bottom都是相对于视口(viewport)的左上角位置而言的。

4、什么是BFC？BFC的原理?

块级格式化上下文。是一种边距重叠解决方案。
应用场景： 1. 解决margin叠加的问题
2. 用于布局（overflow: hidden）
3.BFC不会与浮动盒子叠加。
4. 用于清除浮动，计算BFC高度。

5、行内元素和块级元素有什么区别？

块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，块级元素可以设置宽高，如p,ul,form,div,(h1-h6)等标签元素
行内元素：元素在一行内水平排列，高度由元素的内容决定，行内元素不可以设置宽高，如a,br,span,input等元素。

6、行内元素和块级元素如何转换？

行变块：display:block
块变行：display：inline
display：inline-block(可以在同一行内显示)。

7、什么是伪类选择器和伪元素？列举3个CSS3中引入的伪类选择器和伪元素！

伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
伪元素选择器：dom中不存在的元素，仅仅是css中用来渲染，添加一些特殊效果的，比如p::before，选择p标签（真元素）前面的假元素（伪元素，p标签前面没有元素，只是假设有）
::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动
::selection用来改变浏览网页选中文的默认效果

伪类选择器：一个概念上的类，不是我们定义的，是抽象的。如a:hover，选择a标签（元素选择器）中具有鼠标悬停类的所有元素，这个类是抽象的，不是我们自己定义的，再如first-child，选择第一个，选择具有这个类性质的所有元素，“第一个”，这个类就抽象了，我们没必要定义一个第一个这样的类
列举：:root()选择器，根选择器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是（html）。:root选择器等同于（html）元素。
:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

8、px和em，rem的区别？

px 实际上就是像素，用PX设置字体大小时，比较稳定和精确。px是固定长度单位，不随其它元素的变化而变化
em 就是根据基准来缩放字体的大小。em 是相对长度单位。em是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化
rem是CSS3新增的一个相对单位,rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化
例如： ==屏幕宽度/设计宽度 = 1rem的值/预设定rem的值。
1920/1920=100/100 ;
所以 1rem=1920/1920*100 ;
document.documentElement 是html节点
document.documentElement.style.fontSize = ((windowWidth / designWidth) * rem2px) + 'px';
假如，用户将屏幕拖小了，变为960。1rem将自动变为50px;960/1920乘以100=50
这里需要判断下，当屏幕的宽度大于设计稿定义的宽度，用设计稿的宽度，如果小于，用屏幕宽度作为变量屏幕宽度。

10、关于绝对定位，相对定位和固定定位

1、相对定位不脱离标准流，在页面中占位置。
相对于自己原来的位置来进行定位。
2、绝对定位脱离标准流，在页面中不占位置。
如果没有父元素，则相对于body定位；如果有父元素，但父元素没有定位，那么还是相对于body定位；如果父元素有定位，那么相对于父元素来定位。
3、固定定位：相对于浏览器窗口进行定位
相对定位：position: relative;
绝对定位：position: absolute;

11、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

CSS 选择符：
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li:nth-child）

1.2 可以继承的属性：
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;

优先级： !important > id > class > tag
important 比内联优先级高,但内联比 id 要高

CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个  元素的每个  元素。
p:last-of-type 选择属于其父元素的最后  元素的每个 元素。
p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

12、以下是CSS3的几种常用前缀

-webkit
-moz
-ms
-o

13、CSS3新增的伪类有哪些

p:last-of-type 选择属于其父元素的最后  元素的每个  元素。
p:only-of-type 选择属于其父元素唯一的 元素的每个  元素。
p:only-child 选择属于其父元素的唯一子元素的每个  元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个  元素。
:enabled、:disabled 控制表单控件的禁用状态。
p:first-of-type 选择属于其父元素的首个  元素的每个  元素。
:checked，单选框或复选框被选中。

14、CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba
在CSS3中唯一引入的伪类是 ::selection.
媒体查询，多栏布局
border-image

15、为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响,但求影响最小的情况下初始化。

16、解释下浮动和它的工作原理？清除浮动的技巧

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，清除浮动的本质:主要为了解决父级元素因为子级浮动引起内部高度为0的问题。

使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。
使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
使用after伪对象清除浮动。
该方法只适用于非IE浏览器。
一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
可以给父元素设置overflow：auto或者hidden

#JS的面试问题：
0、如何判断一个变量是对象还是数组？

1、我们能够使用typeof判断变量的身份，判断字符串得到string，数字和NaN得到number，函数会得到function等，但是判断数组，对象和null时都会得到object，这就是typeof的局限性，
2、使用instanceof（比较运算符）可以用来判断一个变量是数组还是对象
3、constructor（构造函数）
4、Object.prototype.toString.call()
总结：判断简单数据类型可以用typeof，判断数组，对象使用instanceof，constructor和 Object.prototype.toString.call()，最好使用Object.prototype.toString.call()，更加精准

1.闭包

闭包就是能够读取其他函数内部变量的函数。
外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象
创建闭包最常见方式，就是在一个函数内部创建另一个函数。
闭包的缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量都永远不会被释放
在退出函数之前，将不使用的局部变量全部删除。可以使变量赋值为null;

2.数据类型

基本数据类型：String（字符串）,Boolean（布尔）,number（数值）,Null（空值）,undefined（未定义）
引用数据类型：Object(Array,Date,RegExp,Function)

3.javascript 中 == 和 === 的区别是什么？举例说明。

===会自动进行类型转换，==不会

4.请尽可能详尽的解释 ajax 的工作原理

思路：先解释异步，再解释 ajax 如何使用
Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用JS来操作DOM而更新页面。XMLHttpRequest 是 ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
特点：Ajax 可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源

ajax是什么？

通过异步模式，提升了用户体验
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
Ajax 在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

Ajax 的缺点：

Ajax 不支持浏览器 back 按钮
安全问题 Ajax 暴露了与服务器交互的细节
对搜索引擎的支持比较弱
破坏了程序的异常机制
不容易调试

HTTP协议类型题目：
5. HTTP 状态消息

200：请求已成功，请求所希望的响应头或数据体将随此响应返回。
302：请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当
继续向原有地址发送以后的请求。只有在Cache-Control或 Expires中进行了指定的情况下，
这个响应才是可缓存的
304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上
次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁
止包含消息体，因此始终以消息头后的第一个空行结尾。
403：服务器已经理解请求，但是拒绝执行它。
404：请求失败，请求所希望得到的资源未被在服务器上发现。
500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

6.说一下什么是Http协议

对客户端和服务器端之间数据传输的格式规范，格式简称为“超文本传输协议”

7.什么是Http协议无状态协议?怎么解决Http协议无状态协议?

(1)、无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息
(2)、无状态协议解决办法：通过1、Cookie 2、通过Session会话保存。

8.Http协议中有哪些请求方式?

GET:用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器，从指定的资源请求数据
POST:用于传输信息给服务器, 向指定的资源提交要处理的数据
PUT:传输文件,报文主体中包含文件内容,保存到对应URI位置
HEAD:获得报文首部,与GET方法类似,只是不返回报文主体,一般用于验证URI是否有效
DELETE:删除文件,与PUT方法相反,删除对应URI位置的文件
OPTIONS:查询响应URI支持的HTTP方法

区别:

Get 是通过地址栏来传值，而 Post 是通过提交表单来传值。

在这里插入图片描述

9.Http协议由什么组成?

请求报文包括三部分:
(1).请求行:包含请求方法,URI,HTTP版本协议 (2).请求首部字段 (3).请求内容实体
响应报文包含三部分:
(1).状态行:包含HTTP版本,状态码,状态码原因短语 (2).响应首部字段 (3).响应内容实体

10.HTTP协议的工作原理?

HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息，通常情况下会配合数字证书实现。

13.ajax的同步和异步区别：

同步：提交请求 -> 等待服务器处理 -> 处理完毕返回，这个期间客户端浏览器不能干任何事
异步：请求通过事件触发 -> 服务器处理（这是浏览器仍然可以作其他事情）-> 处理完毕
ajax.open方法中，第3个参数是设同步或者异步。

14.跨域? ?

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

14-1、什么情况下会碰到跨域问题？有哪些解决方法？

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。
解决方法：1. JSONP方法:JSONP是服务器与客户端跨源通信的常用方法，Jsonp 需要目标服务器配合一个callback函数网页通过添加一个(script)元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
首先，网页动态插入(script)元素，由它向跨源网址发出请求。
2.通过修改document.domain来跨子域
3.使用window.name来进行跨域
4.通过CORS解决AJAX跨域

15.简述 ajax 的过程。

创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
设置响应 HTTP 请求状态变化的函数
发送 HTTP 请求
获取异步调用返回的数据
使用 JavaScript 和 DOM 实现局部刷新

16.axios和ajax的区别

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

②axios特征：
1.自动转换JSON数据
2.从 node.js 创建 http 请求
3.支持 Promise API
4.客户端支持防止CSRF
5.提供了一些并发请求的接口
PS：防止CSRF：就是让你的每个请求都带一个从cookie中拿到的key，根据浏览器同源策略，假冒的网站是拿不到你cookie中得到key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略

17.JavaScript 链原型，原型链 ? 有什么特点？

1.原型对象也是普通的对象，是对象一个自带隐式的 _ proto_ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null 的话，我们就称之为原型链
2. 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

3.每一次获取对象中的属性都是一次查询过程，如果在自有属性中找不到就会去原型对象中查找，如果原型对象中还查不到，就回去原型对象的原型中查找，也就是按照原型链查找，直到查找到原型链的顶端，也就是Object的原型。

作用域链：
　　一般情况下，变量取值到创建这个变量的函数的作用域中取值。
　　但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

一、作用域
　　在 Javascript 中，作用域分为全局作用域和函数作用域
　　全局作用域：
　　　　代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。
　　函数作用域：
　　　　在固定的代码片段才能被访问

18、JS创建对象有几种方法？

1.new Ｏbject()
2.使用字面量
3.工厂模式
4.构造函数模式（constructor）
5.原型模式（prototype）
6.构造函数+原型模式
还是点击下面链接讲解的比较详细吧 ↓
https://www.jianshu.com/p/1fb0447db852

19、虚拟dom和实体dom的区别？

DOM的本质：
浏览器概念，浏览器从服务器端读取html页面，浏览器将html解析成一棵元素嵌套关系的dom树，用对象来表示页面上的元素，并提供操作dom对象的api。
虚拟DOM：
框架概念，程序员用js对象来模拟页面上dom元素的嵌套关系( 本质 )，为了实现页面元素的高效更新( 目的 )
区别：1、虚拟DOM不会进行重排与重绘操作；
2、虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要修改的部分，最后进行重排和重绘，减少过多DOM节点重排和重绘损耗。
3、虚拟DOM有效降低大面积（真实DOM节点）的重排和重绘，因为最终与真实DOM比较差异，可以局部渲染

20、描述一下事件冒泡机制

当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

21、请描述一下cookies，sessionStorage和localStorage的区别

cookie（储存在用户本地终端上的数据）是网站为了标识用户身份而储存在用户本地终端上的数据，cookie数据始终在同源的http请求中携带，只会在浏览器和服务器间来回传递。另外两个不会自动把数据发给服务器，仅在本地保存。

22、js阻止事件冒泡的两种方法

event.stopPropagation( )
event.target

23、JS的内置对象
在这里插入图片描述
24、函数调用的四种方式

函数调用模式
方法调用模式
构造器调用模式
间接调用模式，通过call()和apply()进行

25、JS中常见的几种继承方法

1.原型链继承
原型链实现继承的思想：利用原型让一个引用类型继承另一个引用类型的属性和方法。
原型链的基本概念：当一个原型对象等于另一个类型的实例，此时的原型对象将包含一个指向另一个指向另一个原型的指针。同时，另一个原型中也包含着一个指向另一个构造函数的指针。如果另一个原型是另一个类型的实例，此时实例和原型就构成了原型链
原型链存在的问题：
1）包含引用类型值的原型属性会被所有实例共享，这会导致对一个实例的修改会影响另一个实例。在通过原型来实现继承时，原型实际上会变成另一个类型的实例。原先的实例属性就变成了现在的原型属性
2）在创建子类型的实例时，不能向超类型的构造函数中传递参数

2.构造函数继承（经典继承）
借用构造函数的基本思想，即在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象，因此通过使用apply()和call()方法可以在新创建的对象上执行构造函数
借用构造函数的优势：可以在子类型构造函数中向超类型构造函数传递参数
借用构造函数的问题：
1）无法避免构造函数模式存在的问题，方法都在构造函数中定义，因此无法复用函数。
2）在超类型的原型中定义的方法，对子类型而言是不可见的。因此这种技术很少单独使用。

3.组合方式继承（构造函数 + 原型链）
组合继承：指的是将原型链和借用构造函数的技术组合到一起。思路是使用原型链实现对原型方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数的复用，又能够保证每个实例都有它自己的属性。
组合继承的优势：
避免了原型链和借用构造函数的缺点，融合了他们的优点，是JavaScript中最常用的继承模式。instanceof和isprototypeOf()也能够用于识别基于组合继承创建的对象

4.es6方法继承

27、JS运行机制

JS为什么是单线程?

JS的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。

JS的运行机制：

因为JavaScript是单线程，意味着任务要一个接着一个完成，但是，如果前一个任务执行时间很长，那么后面的任务就得一直阻塞着，这样用户体验十分差。
JavaScript的设计者考虑到了这一点，所以他将JavaScript的任务分为两种，在主线程上执行的任务"同步任务"，被主线程挂载起来的任务"异步任务",后者一般是放在一个叫任务队列的数据结构中。
只有当所有同步任务都执行完了才会，开始观察任务队列中被挂载起来的任务，并且按照队列的特性，先进先出的依次执行。

28、DOM是什么？

DOM是Document Object Model，即文档对象模型，它允许脚本控制Web页面、窗口和文档。

29、DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。
无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，
dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

30、数组去重的方法

1.ES6 Set去重

var arr = [1,2,3,3,2,1,5,1];
var arr2 = Array.from(new Set(arr))
console.log(arr2)

var arr = [1,2,3,3,2,1,5,1];
let a = [...new Set(arr)]
console.log(a)

2.利用for嵌套for，然后splice去重
3.利用indexOf去重

var arr = [1,3,4,5,6,7,4,3,2,4,5,6,7,3,2];
function find(){
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) == -1 ) { //也可以换成if（newArr.indexOf(arr[i])<0)
newArr.push(arr[i]);
  }
}
consoloe.log(newArr); // [1, 3, 4, 5, 6, 7, 2]
}
find(arr); //调用这个方法  indexOf对大小写敏感

4.利用filter
filter(x,index,self)可以为数组提供过滤功能，其中x代表元素，index是与X一同传入元素的索引，而self代表数组本身。

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7];
var arr2 = arr.filter(function(x, index,self) {
return self.indexOf(x)===index;
}); 
console.log(arr2); //[1, 2, 3, 4, 5, 6 ,7]

32、事件委托

简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。
举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。

34、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

35、null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0
undefined是一个表示"无"的原始值，转为数值时为NaN
当声明的变量还未被初始化时，变量的默认值为undefined
null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象
undefined表示 “缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

1.变量被声明了，但没有赋值时，就等于 undefined
2. 调用函数时，应该提供的参数没有提供，该参数等于 undefined
3. 对象没有赋值的属性，该属性的值为 undefined
4. 函数没有返回值时，默认返回 undefined

null表示“没有对象”，即该处不应该有值。典型用法是：
1. 作为函数的参数，表示该函数的参数不是对象
2. 作为对象原型链的终点

36、哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包
控制台日志
循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

37、typeof null返回什么？为什么？

不同的对象在底层都表示为二进制，在javascript中二进制前三位都为0的话会被判断为object类型，
null的二进制表示全0，自然前三位也是0，所以执行typeof时会返回“object”

39、ES6中…运算符能做什么

1.复制数组 2.合并数组 3. 扩展运算符可以与解构赋值结合起来，用于生成数组。 4.扩展运算符还可以将字符串转为真正的数组

42、如何实现浏览器内多个标签页之间的通信?

第一种——调用localStorage
在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；
在另一个标签页里面监听 storage 事件。
即可得到 localstorge 存储的值，实现不同标签页之间的通信。

第二种——调用cookie+setInterval()
将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

43、数据类型的自动转换和隐式转换你知道哪些？

隐式类型转换：
1 == ‘1’
‘1’ + 1
‘1’ - 1
显示类型转换：
parseInt(str,radix)/parseFloat(str,radix)/Number()转变成数字。
Boolean(param)转变成布尔值
subString()转变成字符串

VUE方面的问题：
1.谈谈你对MVVM开发模式的理解

Vue是一个 MVVM框架，其各层的对应关系如下:
View层：在Vue中是绑定dom对象的HTML(代表UI视图，负责数据的展示；)
ViewModel层：在Vue中是实例的vm对象 (负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；)
Model层：在Vue中是data、computed、methods等中的数据(代表数据模型，数据和业务逻辑都在Model层中定义；)
在 Model 层的数据变化时，View层会在ViewModel的作用下，实现自动更新

2、Vue的响应式原理？

Vue响应式底层实现方法是 Object.defineProperty() 方法，该方法中存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响
Vue中编写了一个wather来处理数据，在使用getter方法时，总会通知wather实例对view层渲染页面，同样的，在使用setter方法时，总会在变更值的同时，通知wather实例对view层进行更新

3、Vue的生命周期

1.beforeCreate --创建前
触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
在此阶段可以做的事情：加loading事件
2.created --创建后
触发的行为：vue实例的数据对象data有了，$el还没有
在此阶段可以做的事情：解决loading，请求ajax数据为mounted渲染做准备
3.beforeMount --渲染前
触发的行为：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换
在此阶段可以做的事情：。。。
4.mounted --渲染后
触发的行为：vue实例挂载完成，data.filter成功渲染
在此阶段可以做的事情：配合路由钩子使用
5.beforeUpdate --更新前
触发的行为：data更新时触发
在此阶段可以做的事情：。。。
6.updated —更新后
触发的行为：data更新时触发
在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）
7.beforeDestroy —销毁前
触发的行为：组件销毁时触发
在此阶段可以做的事情：可向用户询问是否销毁
8.destroyed —销毁后
触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
在此阶段可以做的事情：组件销毁时进行提示

4、请详细说下你对vue生命周期的理解？

答：总共分为8个阶段：创建前 / 后，载入前 / 后，更新前 / 后，销毁前 / 后。
创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

5、vue生命周期在真实场景下的业务应用

created：进行ajax请求异步数据的获取、初始化数据
mounted：挂载元素内dom节点的获取
nextTick：针对单一事件更新数据后立即操作dom
updated：任何数据的更新，如果要做统一的业务逻辑处理
watch：监听具体数据变化，并做相应的处理

7、Vue中双向数据绑定是如何实现的？

Vue在组件和实例初始化的时候，会将data里的数据进行数据劫持(object.definepropty对数据做处理)。被解除过后的数据会有两个属性：一个叫getter，一个叫setter。
getter是使用数据的时候触发，setter是在修改数据的时候触发，修改数据的时候触发setter，同时也触发了底层的watcher(可以收到属性的变化通知并执行相应的函数，从而更新视图。)监听，通知dom修改刷新。

8、父组件与子组件传值

父向子传值：属性传值，父组件通过给子组件标签上定义属性，子组件通过props方法接收数据；
子向父传值：事件传值，子组件通过$emit(‘自定义事件名’，值)，父组件通过子组件上的@自定义事件名=“函数”接收 ($emit方法传递参数)

10、如何让css只在当前组件中起作用

将当前组件的 (style)修改为(styple scoped)

11、第一次加载页面会触发哪几个钩子

第一次加载会触发 beforeCreate、created、beforeMount、mounted四个钩子

12、Vuex是什么？

Vuex是专门为Vue服务，用于管理页面的数据状态、提供统一数据操作的生态系统
vuex:是vue提供的状态管理工具，简单解释就是vue各个组件直接的变量是不能直接共享的，组件直接的参数传递才多层的时候变得异常复杂，所以就诞生了vuex的状态管理工具，保证了状态的统一和可追踪
①：这个状态自管理应用包含以下几个部分：
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
②：使用vuex管理数据的好处：
能够在vuex中集中管理共享的数据，便于开发和后期进行维护
能够高效的实现组件之间的数据共享，提高开发效率
存储在vuex中的数据是响应式的，当数据放生改变时，页面中的数据会同步更新
③：vuex中的数据和data中的数据与什么区别？
vuex中的数据是全局的，共享的，data中的数据是私有的
vuex中的数据是响应式的，只要vuex中的数据发生改变，引用vuex中的数据的文件会同步更新
vuex中的数据是单向的，想要修改vuex中的数据必须在mutation中修改

13、router是什么？

1.router：this.$router 是路由【导航对象】，用它可以方便的使用 JS 代码，实现路由的前进、后退、跳转到新的 URL 地址
2.routes：指创建vue-router路由实例的配置项。用来配置多个route路由对象
3.route：this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它

14、vue单页面应用及优缺点

vue核心是一个响应的数据绑定系统，mvvm，数据驱动，组件化，轻量，简洁，高效，快速，模块友好。
缺点：不支持低版本浏览器，最低到IE9，不利于SEO的优化，首页加载时间较长，不可以使用浏览器的导航按钮需要自行实现前进后退。

15、vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

16、vue.nextTick()的用处？

nextTick可以使我们在下次DOM更新循环结束之后执行延迟回调，用于获得更新后的DOM。

18、兄弟组件之间如何传值？

可以用过一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发 $e m i t 和监听$ on来实现组件之间的通信和参数传递，类似window的全局自定义事件。类似与子传父，只不过是利用一个新的vue示例作为媒介，而不是当前vue示例(this)

19、jquery和vue的控制DOM元素的主要区别是什么？

jquery操作的是直接dom元素。vue操作的是dom元素对象。
vue.js优势是（视图-模型）双向绑定，简化了dom的操作（不用重写大量的html标签），提高dom的复用率（以最少代码实现更多的功能），倾向于数据读写，虽然看上去使用比较繁琐，但是利于后期的维护。
jquery优势是jquery语义化，容易理解，比较简单，可拓展的插件多。
总结:如果dom操作频繁，不需要动画效果，就使用vue.js。如果dom操作不频繁，但又需要复杂的动画效果，就使用jquery. vue.js比较适合于后台管理页面，jquery比较适合于前台用户交互页面。

20、vue2模版template的四种写法？

1.写在构造器里的：
2.写在(template)标签里
3.写在(script type=“x-template”)标签里

21、var let const声明的变量的区别

let不允许在相同作用域内，重复声明同一个变量。let声明的变量只在其所在代码块内有效
const是定义常量的,而且定义一次以后不能再进行更改，否者会报错；
使用const定义的常量，拥有let一样的特性（无声明提前，有块状作用域，重复声明）

let：* 声明的变量只在它所在的代码块有效； * 需要先声明然后再使用，否则报错
var：* 声明的变量在全局范围内都有效；

var定义的变量可以修改，如果不初始化会输出undefined，不会报错

const： * 声明一个只读的常量，一旦声明，常量的值就不允许改变；

一旦声明了变量，就必须初始化，不能留到以后赋值；
只在声明所在的块级作用域内有效；

22、如何理解JSON？

JSON是一种轻量级的数据交换格式,作用：通常用于服务端向页面传输数据。
JSON 是一个 JS 对象，有 2 个 API
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

23、函数声明和函数表达式的区别（作用域）

1.以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的.
2.以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用.
3.以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而函数表达式可以在任何地方声明.

24、关于动态路由

不能传递参数的是静态路由，可以传递参数，但是其对应的路由数量是不确定的，叫动态路由
在参数名前面加上：,然后将参数写在路由的path内
这是无参数跳转

query和params两者都可以传递参数，区别是什么？
1.query 传参配置的是path，而params传参配置的是name，在params中配置path无效
2.query在路由配置不需要设置参数，而params必须设置
3.query传递的参数会显示在地址栏中
4.params传参刷新会无效，但是query会保存传递过来的值，刷新不变

25、vue是什么？跟JS有什么区别？

vue就是一个js库，并且无依赖别的js库，跟jquery差不多。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。
区别：在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或者js来添加各种特效功能，需要去选中每一个元素进行命令，这样太繁琐了
vue的好处：1.数据绑定：vue会根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染。
2.组件式开发：通过vue的模块封装，它可以将一个web开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发。
一句话概括：用数据绑定的思想，vue可以简单写单个页面，也可以写一个大的前端系统，也可以做手机app的界面。

26、Vue-CLi是啥？

它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好Webpack，以及各种依赖包的工具

27、vue是怎么渲染的？

1.原有模板语法，挂载渲染：就是对使用Vue标签语法的hmtl进行渲染。
2.使用render属性，createElement函数直接渲染：原本无html，通过JavaScript 的完全编程的能力生成页面。
3.使用render属性，配合组件的template属性，createElement函数渲染
4.使用render属性，配合单文件组件，createElement函数渲染

28、vue常用的5个事件修饰符
.stop: 阻止事件冒泡；
.prevent: 阻止默认事件；
.capture: 实现捕获触发事件的机制 ;
.self: 实现只有点击当前元素时候，才会触发事件处理函数 ;
.once: 事件只触发一次；

26、vue-router 有哪几种导航钩子？

第一种：全局导航钩子
第二种：单独路由独享钩子
第三种：组件内的钩子

29、vue-router 路由模式有几种？

Hash: 使用URL的hash值来作为路由。支持所有浏览器。
History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式
Abstract：支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。

30、Vue组件通信的六种方法

1.父组件向子组件传值： props/$emit
2.子组件向父组件传值（通过事件形式） $ emit/$on
3.vuex
4.$ attrs/$ listeners
$ attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$ attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
$ listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
5.provide/inject
6.$parent / $children与 ref
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例

31、veu中的三要素

响应式：vue如何监听到 data 每个属性变化?
vue的响应式原理：Vue在组件和实例初始化的时候，会将data里的数据进行数据劫持(object.definepropty对数据做处理)。被解除过后的数据会有两个属性：一个叫getter，一个叫setter。
getter是使用数据的时候触发，setter是在修改数据的时候触发，修改数据的时候触发setter，同时也触发了底层的watcher(可以收到属性的变化通知并执行相应的函数，从而更新视图。)监听，通知dom修改刷新。

模板引擎：vue的模板如何被解析，指令如何处理？
. 本质就是个字符串。模板最终必须转换成JS代码。因为：
. 有逻辑，如（v-if v-for）,必须用JS才能实现
. 转换为html渲染页面，必须用JS才能实现
. 因此，模板最重要转化成JS函数(render函数）

渲染：vue 的模板如何被渲染成 html?
模板解析成render函数---->返回JS模拟的虚拟DOM结构：模板是一段字符串，模板解析生成render函数，执行render函数返回为vnode，vnode表明了各个节点的层级关系、特性、样式、绑定的事件。
2、 vnode---->html：通过 updateComponent函数调用vm._update（）传入vnode，利用基于snabbdom的patch（)方法改造的生成真实DOM节点并渲染页面。

32、v-if跟v-show的区别

v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;
v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

33、在ES6中，Promise对象只有三种状态

异步操作“未完成”（pending）
异步操作“已完成”（resolved，又称fulfilled）
异步操作“失败”（rejected）

34、箭头函数和普通函数的区别

,不需要通过function关键字创建函数,并且可以省略return关键字.但函数体内的this对象指的是定义时所在的对象,而不是使用时所在的对象;
①不绑定this,箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。
普通函数的this指向调用它的那个对象。
②箭头函数不能作为构造函数，不能使用new
③箭头函数不绑定arguments
④箭头函数通过call和apply调用，不会改变this指向，只会传入参数
⑤箭头函数没有原型属性

35、ES6有哪些新特性

1.模板字符串:模板字符串是为了解决使用+号拼接字符串的不便利而出现的

2.解析结构

函数默认参数

4.展开运算符

5.class类

收起

展开全文

前端面试题

MySQL 面试题

万次阅读 多人点赞 2019-09-02 16:03:33

2、Buffer pool 支持在线改变大小 3、Buffer pool 支持导出部分比例 4、支持新建 innodb tablespace，并可以在其中创建多张表 5、磁盘临时表采用 innodb 存储，并且存储在 innodb temp tablespace...

MySQL 面试题

MySQL 涉及的内容非常非常非常多，所以面试题也容易写的杂乱。当年，我们记着几个一定要掌握的重心：

重点的题目添加了【重点】前缀。

索引。
锁。
事务和隔离级别。

因为 MySQL 还会有部分内容和运维相关度比较高，所以本文我们分成两部分【开发】【运维】两部分。

对于【开发】部分，我们需要掌握。
对于【运维】部分，更多考验开发的知识储备情况，当然能回答出来是比较好的，特别是对于高级开发工程师、架构师等。

开发

为什么互联网公司一般选择 MySQL 而不是 Oracle?

免费、流行、够用。

? 当然，这个回答要稍微润色下。不过一般，很少问这个问题了。

数据库的三范式是什么？什么是反模式？

艿艿：重点在于反模式的回答。实际开发中，不会严格遵守三范式。

胖友直接看《服务端指南数据存储篇 | MySQL（07）范式与反模式》。

MySQL 有哪些数据类型？

MySQL 支持多种类型，大致可以分为三类：数值、日期/时间和字符串(字符)类型。具体可以看看《MySQL 数据类型》文档。

正确的使用数据类型，对数据库的优化是非常重要的。

? MySQL 中 varchar 与 char 的区别？varchar(50) 中的 50 代表的涵义？

1、varchar 与 char 的区别，char 是一种固定长度的类型，varchar 则是一种可变长度的类型。
2、varchar(50) 中 50 的涵义最多存放 50 个字符。varchar(50) 和 (200) 存储 hello 所占空间一样，但后者在排序时会消耗更多内存，因为 ORDER BY col 采用 fixed_length 计算 col 长度(memory引擎也一样)。所以，实际场景下，选择合适的 varchar 长度还是有必要的。

? int(11) 中的 11 代表什么涵义？

int(11) 中的 11 ，不影响字段存储的范围，只影响展示效果。具体可以看看《MySQL 中 int 长度的意义》文章。

? 金额(金钱)相关的数据，选择什么数据类型？

方式一，使用 int 或者 bigint 类型。如果需要存储到分的维度，需要 *100 进行放大。
方式二，使用 decimal 类型，避免精度丢失。如果使用 Java 语言时，需要使用 BigDecimal 进行对应。

? 一张表，里面有 ID 自增主键，当 insert 了 17 条记录之后，删除了第 15,16,17 条记录，再把 MySQL 重启，再 insert 一条记录，这条记录的 ID 是 18 还是 15？

一般情况下，我们创建的表的类型是 InnoDB ，如果新增一条记录（不重启 MySQL 的情况下），这条记录的 ID 是18 ；但是如果重启 MySQL 的话，这条记录的 ID 是 15 。因为 InnoDB 表只把自增主键的最大 ID 记录到内存中，所以重启数据库或者对表 OPTIMIZE 操作，都会使最大 ID 丢失。
但是，如果我们使用表的类型是 MyISAM ，那么这条记录的 ID 就是 18 。因为 MyISAM 表会把自增主键的最大 ID 记录到数据文件里面，重启 MYSQL 后，自增主键的最大 ID 也不会丢失。

最后，还可以跟面试官装个 x ，生产数据，不建议进行物理删除记录。

? 表中有大字段 X(例如：text 类型)，且字段 X 不会经常更新，以读为为主，请问您是选择拆成子表，还是继续放一起?写出您这样选择的理由

拆带来的问题：连接消耗 + 存储拆分空间。

如果能容忍拆分带来的空间问题，拆的话最好和经常要查询的表的主键在物理结构上放置在一起(分区) 顺序 IO ，减少连接消耗，最后这是一个文本列再加上一个全文索引来尽量抵消连接消耗。
不拆可能带来的问题：查询性能。

如果能容忍不拆分带来的查询性能损失的话，上面的方案在某个极致条件下肯定会出现问题，那么不拆就是最好的选择。

实际场景下，例如说商品表数据量比较大的情况下，会将商品描述单独存储到一个表中。即，使用拆的方案。

MySQL 有哪些存储引擎？

MySQL 提供了多种的存储引擎：

InnoDB
MyISAM
MRG_MYISAM
MEMORY
CSV
ARCHIVE
BLACKHOLE
PERFORMANCE_SCHEMA
FEDERATED
…

具体每种存储引擎的介绍，可以看看《数据库存储引擎》。

? 如何选择合适的存储引擎？

提供几个选择标准，然后按照标准，选择对应的存储引擎即可，也可以根据常用引擎对比来选择你使用的存储引擎。使用哪种引擎需要根据需求灵活选择，一个数据库中多个表可以使用不同的引擎以满足各种性能和实际需求。使用合适的存储引擎，将会提高整个数据库的性能。

是否需要支持事务。
对索引和缓存的支持。
是否需要使用热备。
崩溃恢复，能否接受崩溃。
存储的限制。
是否需要外键支持。

艿艿：目前开发已经不考虑外键，主要原因是性能。具体可以看看《从 MySQL 物理外键开始的思考》文章。

目前，MySQL 默认的存储引擎是 InnoDB ，并且也是最主流的选择。主要原因如下：

【最重要】支持事务。
支持行级锁和表级锁，能支持更多的并发量。
查询不加锁，完全不影响查询。
支持崩溃后恢复。

在 MySQL5.1 以及之前的版本，默认的存储引擎是 MyISAM ，但是目前已经不再更新，且它有几个比较关键的缺点：

不支持事务。
使用表级锁，如果数据量大，一个插入操作锁定表后，其他请求都将阻塞。

艿艿：也就是说，我们不需要花太多力气在 MyISAM 的学习上。

? 请说明 InnoDB 和 MyISAM 的区别

	InnoDB	MyISAM
事务	支持	不支持
存储限制	64TB	无
锁粒度	行锁	表锁
崩溃后的恢复	支持	不支持
外键	支持	不支持
全文检索	5.7 版本后支持	支持

更完整的对比，可以看看《数据库存储引擎》的「常用引擎对比」小节。

? 请说说 InnoDB 的 4 大特性？

艿艿：貌似我面试没被问过…反正，我是没弄懂过~~

插入缓冲(insert buffer)
二次写(double write)
自适应哈希索引(ahi)
预读(read ahead)

? 为什么 SELECT COUNT(*) FROM table 在 InnoDB 比 MyISAM 慢？

对于 SELECT COUNT(*) FROM table 语句，在没有 WHERE 条件的情况下，InnoDB 比 MyISAM 可能会慢很多，尤其在大表的情况下。因为，InnoDB 是去实时统计结果，会全表扫描；而 MyISAM 内部维持了一个计数器，预存了结果，所以直接返回即可。

详细的原因，胖友可以看看《高性能 MySQL 之 Count 统计查询》博客。

? 各种不同 MySQL 版本的 Innodb 的改进？

艿艿：这是一个选择了解的问题。

MySQL5.6 下 Innodb 引擎的主要改进：

online DDL
memcached NoSQL 接口
transportable tablespace（ alter table discard/import tablespace）
MySQL 正常关闭时，可以 dump 出 buffer pool 的（ space， page_no），重启时 reload，加快预热速度
索引和表的统计信息持久化到 mysql.innodb_table_stats 和 mysql.innodb_index_stats，可提供稳定的执行计划
Compressed row format 支持压缩表

MySQL5.7 下 Innodb 引擎的主要改进：

1、修改 varchar 字段长度有时可以使用

这里的“有时”，指的是也有些限制。可见《MySQL 5.7 online ddl 的一些改进》。
2、Buffer pool 支持在线改变大小
3、Buffer pool 支持导出部分比例
4、支持新建 innodb tablespace，并可以在其中创建多张表
5、磁盘临时表采用 innodb 存储，并且存储在 innodb temp tablespace 里面，以前是 MyISAM 存储
6、透明表空间压缩功能

重点】什么是索引？

索引，类似于书籍的目录，想找到一本书的某个特定的主题，需要先找到书的目录，定位对应的页码。

MySQL 中存储引擎使用类似的方式进行查询，先去索引中查找对应的值，然后根据匹配的索引找到对应的数据行。

? 索引有什么好处？

提高数据的检索速度，降低数据库IO成本：使用索引的意义就是通过缩小表中需要查询的记录的数目从而加快搜索的速度。
降低数据排序的成本，降低CPU消耗：索引之所以查的快，是因为先将数据排好序，若该字段正好需要排序，则正好降低了排序的成本。

? 索引有什么坏处？

占用存储空间：索引实际上也是一张表，记录了主键与索引字段，一般以索引文件的形式存储在磁盘上。
降低更新表的速度：表的数据发生了变化，对应的索引也需要一起变更，从而减低的更新速度。否则索引指向的物理数据可能不对，这也是索引失效的原因之一。

? 索引的使用场景？

1、对非常小的表，大部分情况下全表扫描效率更高。
2、对中大型表，索引非常有效。
3、特大型的表，建立和使用索引的代价随着增长，可以使用分区技术来解决。

实际场景下，MySQL 分区表很少使用，原因可以看看《互联网公司为啥不使用 MySQL 分区表？》文章。

对于特大型的表，更常用的是“分库分表”，目前解决方案有 Sharding Sphere、MyCAT 等等。

? 索引的类型？

索引，都是实现在存储引擎层的。主要有六种类型：

1、普通索引：最基本的索引，没有任何约束。
2、唯一索引：与普通索引类似，但具有唯一性约束。
3、主键索引：特殊的唯一索引，不允许有空值。
4、复合索引：将多个列组合在一起创建索引，可以覆盖多个列。
5、外键索引：只有InnoDB类型的表才可以使用外键索引，保证数据的一致性、完整性和实现级联操作。
6、全文索引：MySQL 自带的全文索引只能用于 InnoDB、MyISAM ，并且只能对英文进行全文检索，一般使用全文索引引擎。

常用的全文索引引擎的解决方案有 Elasticsearch、Solr 等等。最为常用的是 Elasticsearch 。

具体的使用，可以看看《服务端指南数据存储篇 | MySQL（03）如何设计索引》。

? MySQL 索引的“创建”原则？

注意，是“创建”噢。

1、最适合索引的列是出现在 WHERE 子句中的列，或连接子句中的列，而不是出现在 SELECT 关键字后的列。
2、索引列的基数越大，索引效果越好。
具体为什么，可以看看如下两篇文章：
- 《MySQL 索引基数》理解相对简单
- 《低基数索引为什么会对性能产生负面影响》写的更原理，所以较为难懂。
3、根据情况创建复合索引，复合索引可以提高查询效率。

因为复合索引的基数会更大。
4、避免创建过多的索引，索引会额外占用磁盘空间，降低写操作效率。
5、主键尽可能选择较短的数据类型，可以有效减少索引的磁盘占用提高查询效率。
6、对字符串进行索引，应该定制一个前缀长度，可以节省大量的索引空间。

? MySQL 索引的“使用”注意事项？

注意，是“使用”噢。

1、应尽量避免在 WHERE 子句中使用 != 或 <> 操作符，否则将引擎放弃使用索引而进行全表扫描。优化器将无法通过索引来确定将要命中的行数,因此需要搜索该表的所有行。

注意，column IS NULL 也是不可以使用索引的。
2、应尽量避免在 WHERE 子句中使用 OR 来连接条件，否则将导致引擎放弃使用索引而进行全表扫描，如：SELECT id FROM t WHERE num = 10 OR num = 20 。
3、应尽量避免在 WHERE 子句中对字段进行表达式操作，这将导致引擎放弃使用索引而进行全表扫描。
4、应尽量避免在 WHERE 子句中对字段进行函数操作，这将导致引擎放弃使用索引而进行全表扫描。
5、不要在 WHERE 子句中的 = 左边进行函数、算术运算或其他表达式运算，否则系统将可能无法正确使用索引。
6、复合索引遵循前缀原则。
7、如果 MySQL 评估使用索引比全表扫描更慢，会放弃使用索引。如果此时想要索引，可以在语句中添加强制索引。
8、列类型是字符串类型，查询时一定要给值加引号，否则索引失效。
9、LIKE 查询，% 不能在前，因为无法使用索引。如果需要模糊匹配，可以使用全文索引。

关于这块，可以看看《服务端指南数据存储篇 | MySQL（04）索引使用的注意事项》文章，写的更加细致。

? 以下三条 SQL 如何建索引，只建一条怎么建？

WHERE a = 1 AND b = 1
WHERE b = 1
WHERE b = 1 ORDER BY time DESC

以顺序 b , a, time 建立复合索引，CREATE INDEX table1_b_a_time ON index_test01(b, a, time)。
对于第一条 SQL ，因为最新 MySQL 版本会优化 WHERE 子句后面的列顺序，以匹配复合索引顺序。

? 想知道一个查询用到了哪个索引，如何查看?

EXPLAIN 显示了 MYSQL 如何使用索引来处理 SELECT 语句以及连接表,可以帮助选择更好的索引和写出更优化的查询语句。

使用方法，在 SELECT 语句前加上 EXPLAIN 就可以了。《MySQL explain 执行计划详细解释》。

【重点】MySQL 索引的原理？

解释 MySQL 索引的原理，篇幅会比较长，并且网络上已经有靠谱的资料可以看，所以艿艿这里整理了几篇，胖友可以对照着看。

《MySQL索引背后的数据结构及算法原理》

写的一点都不好，艿艿在地铁反复看了 10 遍。

强烈推荐！！！！
《MySQL 索引原理》
《深入理解 MySQL 索引原理和实现 —— 为什么索引可以加速查询？》

下面，艿艿对关键知识做下整理，方便胖友回顾。

几篇好一点的文章:

《MySQL索引背后的数据结构及算法原理》

《MySQL 索引原理》

《深入理解 MySQL 索引原理和实现 —— 为什么索引可以加速查询？》

MySQL 有哪些索引方法？

在 MySQL 中，我们可以看到两种索引方式：

B-Tree 索引。
Hash 索引。

《MySQL BTree 索引和 hash 索引的区别》

什么是 B-Tree 索引？

B-Tree 是为磁盘等外存储设备设计的一种平衡查找树。因此在讲 B-Tree 之前先了解下磁盘的相关知识。

系统从磁盘读取数据到内存时是以磁盘块（block）为基本单位的，位于同一个磁盘块中的数据会被一次性读取出来，而不是需要什么取什么。
InnoDB存储引擎中有页（Page）的概念，页是其磁盘管理的最小单位。InnoDB 存储引擎中默认每个页的大小为 16 KB，可通过参数 innodb_page_size 将页的大小设置为 4K、8K、16K ，在 MySQL 中可通过如下命令查看页的大小：

mysql> show variables like 'innodb_page_size';

而系统一个磁盘块的存储空间往往没有这么大，因此 InnoDB 每次申请磁盘空间时都会是若干地址连续磁盘块来达到页的大小 16KB 。InnoDB 在把磁盘数据读入到磁盘时会以页为基本单位，在查询数据时如果一个页中的每条数据都能有助于定位数据记录的位置，这将会减少磁盘 I/O 次数，提高查询效率。

B-Tree 结构的数据可以让系统高效的找到数据所在的磁盘块。为了描述B-Tree，首先定义一条记录为一个二元组 [key, data] ，key 为记录的键值，对应表中的主键值，data 为一行记录中除主键外的数据。对于不同的记录，key值互不相同。

一棵 m 阶的 B-Tree 有如下特性：

每个节点最多有 m 个孩子。
- 除了根节点和叶子节点外，其它每个节点至少有 Ceil(m/2) 个孩子。
- 若根节点不是叶子节点，则至少有 2 个孩子。
所有叶子节点都在同一层，且不包含其它关键字信息。
每个非叶子节点包含 n 个关键字信息（P0,P1,…Pn, k1,…kn）
- 关键字的个数 n 满足：ceil(m/2)-1 <= n <= m-1
- ki(i=1,…n) 为关键字，且关键字升序排序。
- Pi(i=0,…n) 为指向子树根节点的指针。P(i-1) 指向的子树的所有节点关键字均小于 ki ，但都大于 k(i-1) 。

B-Tree 中的每个节点根据实际情况可以包含大量的关键字信息和分支，如下图所示为一个 3 阶的 B-Tree：

B-Tree çš„ç»“æž„

每个节点占用一个盘块的磁盘空间，一个节点上有两个升序排序的 key 和三个指向子树根节点的 point ，point 存储的是子节点所在磁盘块的地址。两个 key 划分成的三个范围域，对应三个 point 指向的子树的数据的范围域。
以根节点为例，key 为 17 和 35 ，P1 指针指向的子树的数据范围为小于 17 ，P2 指针指向的子树的数据范围为 [17~35] ，P3 指针指向的子树的数据范围为大于 35 。

模拟查找 key 为 29 的过程：

1、根据根节点找到磁盘块 1 ，读入内存。【磁盘I/O操作第1次】
2、比较 key 29 在区间（17,35），找到磁盘块 1 的指针 P2 。
3、根据 P2 指针找到磁盘块 3 ，读入内存。【磁盘I/O操作第2次】
4、比较 key 29 在区间（26,30），找到磁盘块3的指针P2。
5、根据 P2 指针找到磁盘块 8 ，读入内存。【磁盘I/O操作第3次】
6、在磁盘块 8 中的 key 列表中找到 eky 29 。

分析上面过程，发现需要 3 次磁盘 I/O 操作，和 3 次内存查找操作。由于内存中的 key 是一个有序表结构，可以利用二分法查找提高效率。而 3 次磁盘 I/O 操作是影响整个 B-Tree 查找效率的决定因素。B-Tree 相对于 AVLTree 缩减了节点个数，使每次磁盘 I/O 取到内存的数据都发挥了作用，从而提高了查询效率。

什么是 B+Tree 索引？

B+Tree 是在 B-Tree 基础上的一种优化，使其更适合实现外存储索引结构，InnoDB存储引擎就是用 B+Tree 实现其索引结构。

从上一节中的 B-Tree 结构图中可以看到，每个节点中不仅包含数据的 key 值，还有 data 值。而每一个页的存储空间是有限的，如果 data 数据较大时将会导致每个节点（即一个页）能存储的 key 的数量很小，当存储的数据量很大时同样会导致 B-Tree 的深度较大，增大查询时的磁盘 I/O 次数，进而影响查询效率。在 B+Tree 中，所有数据记录节点都是按照键值大小顺序存放在同一层的叶子节点上，而非叶子节点上只存储 key 值信息，这样可以大大加大每个节点存储的 key 值数量，降低 B+Tree 的高度。

B+Tree 相对于 B-Tree 有几点不同：

非叶子节点只存储键值信息。
所有叶子节点之间都有一个链指针。
数据记录都存放在叶子节点中。

将上一节中的 B-Tree 优化，由于 B+Tree 的非叶子节点只存储键值信息，假设每个磁盘块能存储 4 个键值及指针信息，则变成 B+Tree 后其结构如下图所示：

B+Tree çš„ç»“æž„

通常在 B+Tree 上有两个头指针，一个指向根节点，另一个指向关键字最小的叶子节点，而且所有叶子节点（即数据节点）之间是一种链式环结构。因此可以对 B+Tree 进行两种查找运算：一种是对于主键的范围查找和分页查找，另一种是从根节点开始，进行随机查找。

可能上面例子中只有 22 条数据记录，看不出 B+Tree 的优点，下面做一个推算：

InnoDB 存储引擎中页的大小为 16KB，一般表的主键类型为 INT（占用4个字节）或 BIGINT（占用8个字节），指针类型也一般为 4 或 8 个字节，也就是说一个页（B+Tree 中的一个节点）中大概存储 16KB/(8B+8B)=1K 个键值（因为是估值，为方便计算，这里的 K 取值为〖10〗^3）。也就是说一个深度为 3 的 B+Tree 索引可以维护10^3 *10^3 *10^3 = 10亿条记录。
实际情况中每个节点可能不能填充满，因此在数据库中，B+Tree 的高度一般都在 2~4 层。MySQL 的 InnoDB 存储引擎在设计时是将根节点常驻内存的，也就是说查找某一键值的行记录时最多只需要 1~3 次磁盘 I/O 操作。

B+Tree 有哪些索引类型？

在 B+Tree 中，根据叶子节点的内容，索引类型分为主键索引和非主键索引。

主键索引的叶子节点存的数据是整行数据( 即具体数据 )。在 InnoDB 里，主键索引也被称为聚集索引（clustered index）。
非主键索引的叶子节点存的数据是整行数据的主键，键值是索引。在 InnoDB 里，非主键索引也被称为辅助索引（secondary index）。

辅助索引与聚集索引的区别在于辅助索引的叶子节点并不包含行记录的全部数据，而是存储相应行数据的聚集索引键，即主键。当通过辅助索引来查询数据时，需要进过两步：

首先，InnoDB 存储引擎会遍历辅助索引找到主键。
然后，再通过主键在聚集索引中找到完整的行记录数据。

另外，InnoDB 通过主键聚簇数据，如果没有定义主键，会选择一个唯一的非空索引代替，如果没有这样的索引，会隐式定义个主键作为聚簇索引。

再另外，可能有胖友有和艿艿的一样疑惑，在辅助索引如果相同的索引怎么存储？最终存储到 B+Tree 非子节点中时，它们对应的主键 ID 是不同的，所以妥妥的。如下图所示：

ç›¸åŒçš„ç´¢å¼•æ€Žä¹ˆå˜å‚¨

聚簇索引的注意点有哪些？

聚簇索引表最大限度地提高了 I/O 密集型应用的性能，但它也有以下几个限制：

1、插入速度严重依赖于插入顺序，按照主键的顺序插入是最快的方式，否则将会出现页分裂，严重影响性能。因此，对于 InnoDB 表，我们一般都会定义一个自增的 ID 列为主键。

关于这一点，可能面试官会换一个问法。例如，为什么主键需要是自增 ID ，又或者为什么主键需要带有时间性关联。
2、更新主键的代价很高，因为将会导致被更新的行移动。因此，对于InnoDB 表，我们一般定义主键为不可更新。

MySQL 默认情况下，主键是允许更新的。对于 MongoDB ，其主键是不允许更新的。
3、二级索引访问需要两次索引查找，第一次找到主键值，第二次根据主键值找到行数据。

当然，有一种情况可以无需二次查找，基于非主键索引查询，但是查询字段只有主键 ID ，那么在二级索引中就可以查找到。
4、主键 ID 建议使用整型。因为，每个主键索引的 B+Tree 节点的键值可以存储更多主键 ID ，每个非主键索引的 B+Tree 节点的数据可以存储更多主键 ID 。

什么是索引的最左匹配特性？

当 B+Tree 的数据项是复合的数据结构，比如索引 (name, age, sex) 的时候，B+Tree 是按照从左到右的顺序来建立搜索树的。

比如当 (张三, 20, F) 这样的数据来检索的时候，B+Tree 会优先比较 name 来确定下一步的所搜方向，如果 name 相同再依次比较 age 和 sex ，最后得到检索的数据。
但当 (20, F) 这样的没有 name 的数据来的时候，B+Tree 就不知道下一步该查哪个节点，因为建立搜索树的时候 name 就是第一个比较因子，必须要先根据 name 来搜索才能知道下一步去哪里查询。
比如当 (张三, F) 这样的数据来检索时，B+Tree 可以用 name 来指定搜索方向，但下一个字段 age 的缺失，所以只能把名字等于张三的数据都找到，然后再匹配性别是 F 的数据了。

这个是非常重要的性质，即索引的最左匹配特性。

MyISAM 索引实现？

MyISAM 索引的实现，和 InnoDB 索引的实现是一样使用 B+Tree ，差别在于 MyISAM 索引文件和数据文件是分离的，索引文件仅保存数据记录的地址。

MyISAM 索引与 InnoDB 索引的区别？

InnoDB 索引是聚簇索引，MyISAM 索引是非聚簇索引。
InnoDB 的主键索引的叶子节点存储着行数据，因此主键索引非常高效。
MyISAM 索引的叶子节点存储的是行数据地址，需要再寻址一次才能得到数据。
InnoDB 非主键索引的叶子节点存储的是主键和其他带索引的列数据，因此查询时做到覆盖索引会非常高效。

【重点】请说说 MySQL 的四种事务隔离级别？

1、插入速度严重依赖于插入顺序，按照主键的顺序插入是最快的方式，否则将会出现页分裂，严重影响性能。因此，对于 InnoDB 表，我们一般都会定义一个自增的 ID 列为主键。

关于这一点，可能面试官会换一个问法。例如，为什么主键需要是自增 ID ，又或者为什么主键需要带有时间性关联。
2、更新主键的代价很高，因为将会导致被更新的行移动。因此，对于InnoDB 表，我们一般定义主键为不可更新。

MySQL 默认情况下，主键是允许更新的。对于 MongoDB ，其主键是不允许更新的。
3、二级索引访问需要两次索引查找，第一次找到主键值，第二次根据主键值找到行数据。

当然，有一种情况可以无需二次查找，基于非主键索引查询，但是查询字段只有主键 ID ，那么在二级索引中就可以查找到。
4、主键 ID 建议使用整型。因为，每个主键索引的 B+Tree 节点的键值可以存储更多主键 ID ，每个非主键索引的 B+Tree 节点的数据可以存储更多主键 ID 。
1、插入速度严重依赖于插入顺序，按照主键的顺序插入是最快的方式，否则将会出现页分裂，严重影响性能。因此，对于 InnoDB 表，我们一般都会定义一个自增的 ID 列为主键。

关于这一点，可能面试官会换一个问法。例如，为什么主键需要是自增 ID ，又或者为什么主键需要带有时间性关联。
2、更新主键的代价很高，因为将会导致被更新的行移动。因此，对于InnoDB 表，我们一般定义主键为不可更新。

MySQL 默认情况下，主键是允许更新的。对于 MongoDB ，其主键是不允许更新的。
3、二级索引访问需要两次索引查找，第一次找到主键值，第二次根据主键值找到行数据。

当然，有一种情况可以无需二次查找，基于非主键索引查询，但是查询字段只有主键 ID ，那么在二级索引中就可以查找到。
4、主键 ID 建议使用整型。因为，每个主键索引的 B+Tree 节点的键值可以存储更多主键 ID ，每个非主键索引的 B+Tree 节点的数据可以存储更多主键 ID 。
1、插入速度严重依赖于插入顺序，按照主键的顺序插入是最快的方式，否则将会出现页分裂，严重影响性能。因此，对于 InnoDB 表，我们一般都会定义一个自增的 ID 列为主键。

关于这一点，可能面试官会换一个问法。例如，为什么主键需要是自增 ID ，又或者为什么主键需要带有时间性关联。
2、更新主键的代价很高，因为将会导致被更新的行移动。因此，对于InnoDB 表，我们一般定义主键为不可更新。

MySQL 默认情况下，主键是允许更新的。对于 MongoDB ，其主键是不允许更新的。
3、二级索引访问需要两次索引查找，第一次找到主键值，第二次根据主键值找到行数据。

当然，有一种情况可以无需二次查找，基于非主键索引查询，但是查询字段只有主键 ID ，那么在二级索引中就可以查找到。
4、主键 ID 建议使用整型。因为，每个主键索引的 B+Tree 节点的键值可以存储更多主键 ID ，每个非主键索引的 B+Tree 节点的数据可以存储更多主键 ID 。

事务就是对一系列的数据库操作（比如插入多条数据）进行统一的提交或回滚操作，如果插入成功，那么一起成功，如果中间有一条出现异常，那么回滚之前的所有操作。

这样可以防止出现脏数据，防止数据库数据出现问题。

事务的特性指的是？

指的是 ACID ，如下图所示：

äº‹åŠ¡çš„ç‰¹æ€§

原子性 Atomicity ：一个事务（transaction）中的所有操作，或者全部完成，或者全部不完成，不会结束在中间某个环节。事务在执行过程中发生错误，会被恢复（Rollback）到事务开始前的状态，就像这个事务从来没有执行过一样。即，事务不可分割、不可约简。
一致性 Consistency ：在事务开始之前和事务结束以后，数据库的完整性没有被破坏。这表示写入的资料必须完全符合所有的预设约束、触发器、级联回滚等。
隔离性 Isolation ：数据库允许多个并发事务同时对其数据进行读写和修改的能力，隔离性可以防止多个事务并发执行时由于交叉执行而导致数据的不一致。事务隔离分为不同级别，包括读未提交（Read uncommitted）、读提交（read committed）、可重复读（repeatable read）和串行化（Serializable）。
持久性 Durability ：事务处理结束后，对数据的修改就是永久的，即便系统故障也不会丢失。

事务的并发问题？

实际场景下，事务并不是串行的，所以会带来如下三个问题：

1、脏读：事务 A 读取了事务 B 更新的数据，然后 B 回滚操作，那么 A 读取到的数据是脏数据。
2、不可重复读：事务 A 多次读取同一数据，事务 B 在事务 A 多次读取的过程中，对数据作了更新并提交，导致事务 A 多次读取同一数据时，结果不一致。
3、幻读：系统管理员 A 将数据库中所有学生的成绩从具体分数改为 ABCDE 等级，但是系统管理员 B 就在这个时候插入了一条具体分数的记录，当系统管理员 A 改结束后发现还有一条记录没有改过来，就好像发生了幻觉一样，这就叫幻读。

小结：不可重复读的和幻读很容易混淆，不可重复读侧重于修改，幻读侧重于新增或删除。解决不可重复读的问题只需锁住满足条件的行，解决幻读需要锁表。

MySQL 事务隔离级别会产生的并发问题？

READ UNCOMMITTED（未提交读）：事务中的修改，即使没有提交，对其他事务也都是可见的。

会导致脏读。
READ COMMITTED（提交读）：事务从开始直到提交之前，所做的任何修改对其他事务都是不可见的。

会导致不可重复读。

这个隔离级别，也可以叫做“不可重复读”。
REPEATABLE READ（可重复读）：一个事务按相同的查询条件读取以前检索过的数据，其他事务插入了满足其查询条件的新数据。产生幻行。

会导致幻读。
SERIALIZABLE（可串行化）：强制事务串行执行。

事务隔离级别	脏读	不可重复读	幻读
读未提交（read-uncommitted）	是	是	是
读已提交（read-committed）	否	是	是
可重复读（repeatable-read）	否	否	是（x）
串行化（serializable）	否	否	否

MySQL 默认的事务隔离级别为可重复读（repeatable-read）。
上图的 <X> 处，MySQL 因为其间隙锁的特性，导致其在可重复读（repeatable-read）的隔离级别下，不存在幻读问题。也就是说，上图 <X> 处，需要改成“否”！！！！
? 记住这个表的方式，我们会发现它是自左上向右下是一个对角线。当然，最好是去理解。
具体的实验，胖友可以看看《MySQL 的四种事务隔离级别》。

【重点】请说说 MySQL 的锁机制？

表锁是日常开发中的常见问题，因此也是面试当中最常见的考察点，当多个查询同一时刻进行数据修改时，就会产生并发控制的问题。MySQL 的共享锁和排他锁，就是读锁和写锁。

共享锁：不堵塞，多个用户可以同时读一个资源，互不干扰。
排他锁：一个写锁会阻塞其他的读锁和写锁，这样可以只允许一个用户进行写入，防止其他用户读取正在写入的资源。

? 锁的粒度？

表锁：系统开销最小，会锁定整张表，MyIsam 使用表锁。
行锁：最大程度的支持并发处理，但是也带来了最大的锁开销，InnoDB 使用行锁。

? 什么是悲观锁？什么是乐观锁？

1）悲观锁

它指的是对数据被外界（包括本系统当前的其他事务，以及来自外部系统的事务处理）修改持保守态度，因此，在整个数据处理过程中，将数据处于锁定状态。悲观锁的实现，往往依靠数据库提供的锁机制（也只有数据库层提供的锁机制才能真正保证数据访问的排他性，否则，即使在本系统中实现了加锁机制，也无法保证外部系统不会修改数据）。

在悲观锁的情况下，为了保证事务的隔离性，就需要一致性锁定读。读取数据时给加锁，其它事务无法修改这些数据。修改删除数据时也要加锁，其它事务无法读取这些数据。

2）乐观锁

相对悲观锁而言，乐观锁机制采取了更加宽松的加锁机制。悲观锁大多数情况下依靠数据库的锁机制实现，以保证操作最大程度的独占性。但随之而来的就是数据库性能的大量开销，特别是对长事务而言，这样的开销往往无法承受。

而乐观锁机制在一定程度上解决了这个问题。乐观锁，大多是基于数据版本（ Version ）记录机制实现。何谓数据版本？即为数据增加一个版本标识，在基于数据库表的版本解决方案中，一般是通过为数据库表增加一个 “version” 字段来实现。读取出数据时，将此版本号一同读出，之后更新时，对此版本号加一。此时，将提交数据的版本数据与数据库表对应记录的当前版本信息进行比对，如果提交的数据版本号大于数据库表当前版本号，则予以更新，否则认为是过期数据。

什么是死锁？

多数情况下，可以认为如果一个资源被锁定，它总会在以后某个时间被释放。而死锁发生在当多个进程访问同一数据库时，其中每个进程拥有的锁都是其他进程所需的，由此造成每个进程都无法继续下去。简单的说，进程 A 等待进程 B 释放他的资源，B 又等待 A 释放他的资源，这样就互相等待就形成死锁。

虽然进程在运行过程中，可能发生死锁，但死锁的发生也必须具备一定的条件，死锁的发生必须具备以下四个必要条件：

互斥条件：指进程对所分配到的资源进行排它性使用，即在一段时间内某资源只由一个进程占用。如果此时还有其它进程请求资源，则请求者只能等待，直至占有资源的进程用毕释放。
请求和保持条件：指进程已经保持至少一个资源，但又提出了新的资源请求，而该资源已被其它进程占有，此时请求进程阻塞，但又对自己已获得的其它资源保持不放。
不剥夺条件：指进程已获得的资源，在未使用完之前，不能被剥夺，只能在使用完时由自己释放。
环路等待条件：指在发生死锁时，必然存在一个进程——资源的环形链，即进程集合 {P0，P1，P2，•••，Pn} 中的 P0 正在等待一个 P1 占用的资源；P1 正在等待 P2 占用的资源，……，Pn 正在等待已被 P0 占用的资源。

下列方法有助于最大限度地降低死锁：

设置获得锁的超时时间。

通过超时，至少保证最差最差最差情况下，可以有退出的口子。
按同一顺序访问对象。

这个是最重要的方式。
避免事务中的用户交互。
保持事务简短并在一个批处理中。
使用低隔离级别。
使用绑定连接。

? MySQL 中 InnoDB 引擎的行锁是通过加在什么上完成(或称实现)的？为什么是这样子的？？

InnoDB 是基于索引来完成行锁。例如：SELECT * FROM tab_with_index WHERE id = 1 FOR UPDATE 。

FOR UPDATE 可以根据条件来完成行锁锁定，并且 id 是有索引键的列,如果 id 不是索引键那么 InnoDB 将完成表锁，并发将无从谈起。

【重要】MySQL 查询执行顺序？

MySQL 查询执行的顺序是：

(1)     SELECT
(2)     DISTINCT <select_list>
(3)     FROM <left_table>
(4)     <join_type> JOIN <right_table>
(5)     ON <join_condition>
(6)     WHERE <where_condition>
(7)     GROUP BY <group_by_list>
(8)     HAVING <having_condition>
(9)     ORDER BY <order_by_condition>
(10)    LIMIT <limit_number>

具体的，可以看看《SQL 查询之执行顺序解析》文章。

【重要】聊聊 MySQL SQL 优化？

可以看看如下几篇文章：

《PHP 面试之 MySQL 查询优化》
《【面试】【MySQL常见问题总结】【03】》第 078、095、105 题

另外，除了从 SQL 层面进行优化，也可以从服务器硬件层面，进一步优化 MySQL 。具体可以看看《MySQL 数据库性能优化之硬件优化》。

编写 SQL 查询语句的考题合集

MySQL 数据库 CPU 飙升到 500% 的话，怎么处理？

当 CPU 飙升到 500% 时，先用操作系统命令 top 命令观察是不是 mysqld 占用导致的，如果不是，找出占用高的进程，并进行相关处理。

如果此时是 IO 压力比较大，可以使用 iostat 命令，定位是哪个进程占用了磁盘 IO 。

如果是 mysqld 造成的，使用 show processlist 命令，看看里面跑的 Session 情况，是不是有消耗资源的 SQL 在运行。找出消耗高的 SQL ，看看执行计划是否准确， index 是否缺失，或者实在是数据量太大造成。一般来说，肯定要 kill 掉这些线程(同时观察 CPU 使用率是否下降)，等进行相应的调整(比如说加索引、改 SQL 、改内存参数)之后，再重新跑这些 SQL。

也可以查看 MySQL 慢查询日志，看是否有慢 SQL 。

也有可能是每个 SQL 消耗资源并不多，但是突然之间，有大量的 Session 连进来导致 CPU 飙升，这种情况就需要跟应用一起来分析为何连接数会激增，再做出相应的调整，比如说限制连接数等。

? 在 MySQL 服务器运行缓慢的情况下输入什么命令能缓解服务器压力？

1）检查系统的状态

通过操作系统的一些工具检查系统的状态，比如 CPU、内存、交换、磁盘的利用率，根据经验或与系统正常时的状态相比对，有时系统表面上看起来看空闲，这也可能不是一个正常的状态，因为 CPU 可能正等待IO的完成。除此之外，还应观注那些占用系统资源(CPU、内存)的进程。

使用 sar 来检查操作系统是否存在 IO 问题。
使用 vmstat 监控内存 CPU 资源。
磁盘 IO 问题，处理方式：做 raid10 提高性能。
网络问题，telnet 一下 MySQL 对外开放的端口。如果不通的话，看看防火墙是否正确设置了。另外，看看 MySQ L是不是开启了 skip-networking 的选项，如果开启请关闭。

2）检查 MySQL 参数

max_connect_errors
connect_timeout
skip-name-resolve
slave-net-timeout=seconds
master-connect-retry

3）检查 MySQL 相关状态值

关注连接数
关注下系统锁情况
关注慢查询（slow query）日志

Innodb 的事务与日志的实现方式

? 有多少种日志？

redo 日志
undo 日志

? 日志的存放形式？

redo：在页修改的时候，先写到 redo log buffer 里面，然后写到 redo log 的文件系统缓存里面(fwrite)，然后再同步到磁盘文件（fsync）。
undo：在 MySQL5.5 之前，undo 只能存放在 ibdata* 文件里面， 5.6 之后，可以通过设置 innodb_undo_tablespaces 参数把 undo log 存放在 ibdata* 之外。

? 事务是如何通过日志来实现的，说得越深入越好

艿艿：这个流程的理解还是比较简单的，实际思考实现感觉还是蛮复杂的。

基本流程如下：

因为事务在修改页时，要先记 undo ，在记 undo 之前要记 undo 的 redo，然后修改数据页，再记数据页修改的 redo。 redo（里面包括 undo 的修改）一定要比数据页先持久化到磁盘。
当事务需要回滚时，因为有 undo，可以把数据页回滚到前镜像的状态。
崩溃恢复时，如果 redo log 中事务没有对应的 commit 记录，那么需要用 undo 把该事务的修改回滚到事务开始之前。如果有 commit 记录，就用 redo 前滚到该事务完成时并提交掉。

MySQL binlog 的几种日志录入格式以及区别

? 各种日志格式的涵义

binlog 有三种格式类型，分别如下：

1）Statement

每一条会修改数据的 SQL 都会记录在 binlog 中。

优点：不需要记录每一行的变化，减少了 binlog 日志量，节约了 IO，提高性能。(相比 row 能节约多少性能与日志量，这个取决于应用的 SQL 情况，正常同一条记录修改或者插入 row 格式所产生的日志量还小于 Statement 产生的日志量，但是考虑到如果带条件的 update 操作，以及整表删除，alter 表等操作，ROW 格式会产生大量日志，因此在考虑是否使用 ROW 格式日志时应该跟据应用的实际情况，其所产生的日志量会增加多少，以及带来的 IO 性能问题。)
缺点：由于记录的只是执行语句，为了这些语句能在 slave 上正确运行，因此还必须记录每条语句在执行的时候的一些相关信息，以保证所有语句能在 slave 得到和在 master 端执行时候相同的结果。另外 MySQL 的复制，像一些特定函数功能，slave 可与 master 上要保持一致会有很多相关问题(如 sleep() 函数，last_insert_id()，以及 user-defined functions(udf) 会出现问题)。
使用以下函数的语句也无法被复制：
- LOAD_FILE()
- UUID()
- USER()
- FOUND_ROWS()
- SYSDATE() (除非启动时启用了 --sysdate-is-now 选项)
  
  同时在 INSERT …SELECT 会产生比 RBR 更多的行级锁。

2）Row

不记录 SQL 语句上下文相关信息，仅保存哪条记录被修改。

优点：binlog 中可以不记录执行的 SQL 语句的上下文相关的信息，仅需要记录那一条记录被修改成什么了。所以 rowlevel 的日志内容会非常清楚的记录下每一行数据修改的细节。而且不会出现某些特定情况下的存储过程，或 function ，以及 trigger 的调用和触发无法被正确复制的问题。
缺点：所有的执行的语句当记录到日志中的时候，都将以每行记录的修改来记录，这样可能会产生大量的日志内容,比如一条 Update 语句，修改多条记录，则 binlog 中每一条修改都会有记录，这样造成 binlog 日志量会很大，特别是当执行 alter table 之类的语句的时候，由于表结构修改，每条记录都发生改变，那么该表每一条记录都会记录到日志中。

3）Mixedlevel

是以上两种 level 的混合使用。

一般的语句修改使用 Statement 格式保存 binlog 。
如一些函数，statement 无法完成主从复制的操作，则采用 Row 格式保存 binlog 。

MySQL 会根据执行的每一条具体的 SQL 语句来区分对待记录的日志形式，也就是在 Statement 和 Row 之间选择一种。

新版本的 MySQL 中对 row level 模式也被做了优化，并不是所有的修改都会以 row level 来记录。

像遇到表结构变更的时候就会以 Statement 模式来记录。
至于 Update 或者 Delete 等修改数据的语句，还是会记录所有行的变更，即使用 Row 模式。

? 适用场景？

在一条 SQL 操作了多行数据时， Statement 更节省空间，Row 更占用空间。但是， Row 模式更可靠。

因为，互联网公司，使用 MySQL 的功能相对少，基本不使用存储过程、触发器、函数的功能，选择默认的语句模式，Statement Level（默认）即可。

? 结合第一个问题，每一种日志格式在复制中的优劣？

Statement 可能占用空间会相对小一些，传送到 slave 的时间可能也短，但是没有 Row 模式的可靠。
Row 模式在操作多行数据时更占用空间，但是可靠。

所以，这是在占用空间和可靠之间的选择。

如何在线正确清理 MySQL binlog？

MySQL 中的 binlog 日志记录了数据中的数据变动，便于对数据的基于时间点和基于位置的恢复。但日志文件的大小会越来越大，占用大量的磁盘空间，因此需要定时清理一部分日志信息。

# 首先查看主从库正在使用的binlog文件名称
show master(slave) status

# 删除之前一定要备份
purge master logs before'2017-09-01 00:00:00'; # 删除指定时间前的日志
purge master logs to'mysql-bin.000001'; # 删除指定的日志文件

# 自动删除：通过设置binlog的过期时间让系统自动删除日志
show variables like 'expire_logs_days'; # 查看过期时间
set global expire_logs_days = 30; # 设置过期时间

MySQL 主从复制的流程是怎么样的？

MySQL 的主从复制是基于如下 3 个线程的交互（多线程复制里面应该是 4 类线程）：

1、Master 上面的 binlog dump 线程，该线程负责将 master 的 binlog event 传到 slave 。
2、Slave 上面的 IO 线程，该线程负责接收 Master 传过来的 binlog，并写入 relay log 。
3、Slave 上面的 SQL 线程，该线程负责读取 relay log 并执行。
4、如果是多线程复制，无论是 5.6 库级别的假多线程还是 MariaDB 或者 5.7 的真正的多线程复制， SQL 线程只做 coordinator ，只负责把 relay log 中的 binlog 读出来然后交给 worker 线程， woker 线程负责具体 binlog event 的执行。

? MySQL 如何保证复制过程中数据一致性？

1、在 MySQL5.5 以及之前， slave 的 SQL 线程执行的 relay log 的位置只能保存在文件（ relay-log.info）里面，并且该文件默认每执行 10000 次事务做一次同步到磁盘，这意味着 slave 意外 crash 重启时， SQL 线程执行到的位置和数据库的数据是不一致的，将导致复制报错，如果不重搭复制，则有可能会导致数据不一致。
- MySQL 5.6 引入参数 relay_log_info_repository，将该参数设置为 TABLE 时， MySQL 将 SQL 线程执行到的位置存到 mysql.slave_relay_log_info 表，这样更新该表的位置和 SQL 线程执行的用户事务绑定成一个事务，这样 slave 意外宕机后，slave 通过 innodb 的崩溃恢复可以把 SQL 线程执行到的位置和用户事务恢复到一致性的状态。
2、MySQL 5.6 引入 GTID 复制，每个 GTID 对应的事务在每个实例上面最多执行一次，这极大地提高了复制的数据一致性。
3、MySQL 5.5 引入半同步复制，用户安装半同步复制插件并且开启参数后，设置超时时间，可保证在超时时间内如果 binlog 不传到 slave 上面，那么用户提交事务时不会返回，直到超时后切成异步复制，但是如果切成异步之前用户线程提交时在 master 上面等待的时候，事务已经提交，该事务对 master 上面的其他 session 是可见的，如果这时 master 宕机，那么到 slave 上面该事务又不可见了，该问题直到 5.7 才解决。
4、MySQL 5.7 引入无损半同步复制，引入参 rpl_semi_sync_master_wait_point，该参数默认为 after_sync，指的是在切成半同步之前，事务不提交，而是接收到 slave 的 ACK 确认之后才提交该事务，从此，复制真正可以做到无损的了。
5、可以再说一下 5.7 的无损复制情况下， master 意外宕机，重启后发现有 binlog 没传到 slave 上面，这部分 binlog 怎么办？？？分 2 种情况讨论， 1 宕机时已经切成异步了， 2 是宕机时还没切成异步？？？这个怎么判断宕机时有没有切成异步呢？？？分别怎么处理？？？

? MySQL 如何解决主从复制的延时性？

5.5 是单线程复制，5.6 是多库复制（对于单库或者单表的并发操作是没用的），5.7 是真正意义的多线程复制，它的原理是基于 group commit，只要 master 上面的事务是 group commit 的，那 slave 上面也可以通过多个 worker线程去并发执行。和 MairaDB10.0.0.5 引入多线程复制的原理基本一样。

? 工作遇到的复制 bug 的解决方法？

5.6 的多库复制有时候自己会停止，我们写了一个脚本重新 start slave 。

? 你是否做过主从一致性校验，如果有，怎么做的，如果没有，你打算怎么做？

主从一致性校验有多种工具例如 checksum、mysqldiff、pt-table-checksum 等。

聊聊 MySQL 备份方式？备份策略是怎么样的？

具体的，胖友可以看看《MySQL 高级备份策略》。主要有几个知识点：

数据的备份类型
- 【常用】完全备份
  
  这是大多数人常用的方式，它可以备份整个数据库，包含用户表、系统表、索引、视图和存储过程等所有数据库对象。但它需要花费更多的时间和空间，所以，一般推荐一周做一次完全备份。
- 增量备份
  
  它是只备份数据库一部分的另一种方法，它不使用事务日志，相反，它使用整个数据库的一种新映象。它比最初的完全备份小，因为它只包含自上次完全备份以来所改变的数据库。它的优点是存储和恢复速度快。推荐每天做一次差异备份。
- 【常用】事务日志备份
  
  事务日志是一个单独的文件，它记录数据库的改变，备份的时候只需要复制自上次备份以来对数据库所做的改变，所以只需要很少的时间。为了使数据库具有鲁棒性，推荐每小时甚至更频繁的备份事务日志。
- 文件备份
  
  数据库可以由硬盘上的许多文件构成。如果这个数据库非常大，并且一个晚上也不能将它备份完，那么可以使用文件备份每晚备份数据库的一部分。由于一般情况下数据库不会大到必须使用多个文件存储，所以这种备份不是很常用。
备份数据的类型
- 热备份
- 温备份
- 冷备份
备份工具
- cp
- mysqldump
- xtrabackup
- lvm2 快照

MySQL 几种备份方式？

MySQL 一般有 3 种备份方式。

1）逻辑备份

使用 MySQL 自带的 mysqldump 工具进行备份。备份成sql文件形式。

优点：最大好处是能够与正在运行的 MySQL 自动协同工作，在运行期间可以确保备份是当时的点，它会自动将对应操作的表锁定，不允许其他用户修改(只能访问)。可能会阻止修改操作。SQL 文件通用方便移植。
缺点：备份的速度比较慢。如果是数据量很多的时候，就很耗时间。如果数据库服务器处在提供给用户服务状态，在这段长时间操作过程中，意味着要锁定表(一般是读锁定，只能读不能写入数据)，那么服务就会影响的。

2）物理备份

艿艿：因为现在主流是 InnoDB ，所以基本不再考虑这种方式。

直接拷贝只适用于 MyISAM 类型的表。这种类型的表是与机器独立的。但实际情况是，你设计数据库的时候不可能全部使用 MyISAM 类型表。你也不可能因为 MyISAM 类型表与机器独立，方便移植，于是就选择这种表，这并不是选择它的理由。

缺点：你不能去操作正在运行的 MySQL 服务器(在拷贝的过程中有用户通过应用程序访问更新数据，这样就无法备份当时的数据)，可能无法移植到其他机器上去。

3）双机热备份。

当数据量太大的时候备份是一个很大的问题，MySQL 数据库提供了一种主从备份的机制，也就是双机热备。

优点：适合数据量大的时候。现在明白了，大的互联网公司对于 MySQL 数据备份，都是采用热机备份。搭建多台数据库服务器，进行主从复制。

数据库不能停机，请问如何备份? 如何进行全备份和增量备份?

可以使用逻辑备份和双机热备份。

完全备份：完整备份一般一段时间进行一次，且在网站访问量最小的时候，这样常借助批处理文件定时备份。主要是写一个批处理文件在里面写上处理程序的绝对路径然后把要处理的东西写在后面，即完全备份数据库。
增量备份：对 ddl 和 dml 语句进行二进制备份。且 5.0 无法增量备份，5.1 后可以。如果要实现增量备份需要在 my.ini 文件中配置备份路径即可，重启 MySQL 服务器，增量备份就启动了。

? 你的备份工具的选择？备份计划是怎么样的？

视库的大小来定，一般来说 100G 内的库，可以考虑使用 mysqldump 来做，因为 mysqldump 更加轻巧灵活，备份时间选在业务低峰期，可以每天进行都进行全量备份(mysqldump 备份出来的文件比较小，压缩之后更小)。

100G 以上的库，可以考虑用 xtrabackup 来做，备份速度明显要比 mysqldump 要快。一般是选择一周一个全备，其余每天进行增量备份，备份时间为业务低峰期。

备份恢复时间是多长？

物理备份恢复快，逻辑备份恢复慢。

这里跟机器，尤其是硬盘的速率有关系，以下列举几个仅供参考：

20G 的 2 分钟（mysqldump）
80G 的 30分钟（mysqldump)
111G 的 30分钟（mysqldump)
288G 的 3 小时（xtrabackup)
3T 的 4 小时（xtrabackup)

逻辑导入时间一般是备份时间的 5 倍以上。

备份恢复失败如何处理？

首先在恢复之前就应该做足准备工作，避免恢复的时候出错。比如说备份之后的有效性检查、权限检查、空间检查等。如果万一报错，再根据报错的提示来进行相应的调整。

? mysqldump 和 xtrabackup 实现原理？

1）mysqldump

mysqldump 是最简单的逻辑备份方式。

在备份 MyISAM 表的时候，如果要得到一致的数据，就需要锁表，简单而粗暴。
在备份 InnoDB 表的时候，加上 –master-data=1 –single-transaction 选项，在事务开始时刻，记录下 binlog pos 点，然后利用 MVCC 来获取一致的数据，由于是一个长事务，在写入和更新量很大的数据库上，将产生非常多的 undo ，显著影响性能，所以要慎用。
优点：简单，可针对单表备份，在全量导出表结构的时候尤其有用。
缺点：简单粗暴，单线程，备份慢而且恢复慢，跨 IDC 有可能遇到时区问题

2）xtrabackup

xtrabackup 实际上是物理备份+逻辑备份的组合。

在备份 InnoDB 表的时候，它拷贝 ibd 文件，并一刻不停的监视 redo log 的变化，append 到自己的事务日志文件。在拷贝 ibd 文件过程中，ibd文件本身可能被写”花”，这都不是问题，因为在拷贝完成后的第一个 prepare 阶段，xtrabackup 采用类似于 Innodb 崩溃恢复的方法，把数据文件恢复到与日志文件一致的状态，并把未提交的事务回滚。
如果同时需要备份 MyISAM 表以及 InnoDB 表结构等文件，那么就需要用 flush tables with lock 来获得全局锁，开始拷贝这些不再变化的文件，同时获得 binlog 位置，拷贝结束后释放锁，也停止对 redo log 的监视。

如何从 mysqldump 产生的全库备份中只恢复某一个库、某一张表？

具体可见《MySQL 全库备份中恢复某个库和某张表以及 mysqldump 参数 –ignore-table 介绍》文章。

聊聊 MySQL 集群?

艿艿：这块艿艿懂的少，主要找了一些网络上的资料。

? 对于简历中写有熟悉 MySQL 高可用方案？

我一般先问他现在管理的数据库架构是什么，如果他只说出了主从，而没有说任何 HA 的方案，那么我就可以判断出他没有实际的 HA 经验。

不过这时候也不能就是断定他不懂 MySQL 高可用，也许是没有实际机会去使用，那么我就要问 MMM 以及 MHA 以及 MM + keepalived 等的原理、实现方式以及它们之间的优势和不足了，一般这种情况下，能说出这个的基本没有。

MMM 那东西好像不靠谱，据说不稳定，但是有人在用的，和 mysql-router 比较像，都是指定可写的机器和只读机器。
MHA 的话一句话说不完，可以搜索下相关博客。

聊聊 MySQL 安全？

感兴趣的胖友，可以看看：

MySQL 有哪些日志？

错误日志：记录了当 mysqld 启动和停止时，以及服务器在运行过程中发生任何严重错误时的相关信息。
二进制文件：记录了所有的 DDL（数据定义语言）语句和 DML（数据操纵语言）语句，不包括数据查询语句。语句以“事件”的形式保存，它描述了数据的更改过程。（定期删除日志，默认关闭）。

就是我们上面看到的 MySQL binlog 日志。
查询日志：记录了客户端的所有语句，格式为纯文本格式，可以直接进行读取。（log 日志中记录了所有数据库的操作，对于访问频繁的系统，此日志对系统性能的影响较大，建议关闭，默认关闭）。
慢查询日志：慢查询日志记录了包含所有执行时间超过参数long_query_time（单位：秒）所设置值的 SQL 语句的日志。（纯文本格式）

重要，一定要开启。

另外，错误日志和慢查询日志的详细解释，可以看看《MySQL 日志文件之错误日志和慢查询日志详解》文章。

聊聊 MySQL 监控？

你是如何监控你们的数据库的？

监控的工具有很多，例如 Zabbix ，Lepus ，我这里用的是 Lepus 。

对一个大表做在线 DDL ，怎么进行实施的才能尽可能降低影响？

使用 pt-online-schema-change ，具体可以看看《MySQL 大表在线 DML 神器–pt-online-schema-change》文章。

另外，还有一些其它的工具，胖友可以搜索下。

收起

展开全文

mysql面试题

前端面试锦集
千次阅读 多人点赞 2019-07-20 13:41:45
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 ...
收起
前端面试
2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
万次阅读 多人点赞 2018-06-15 18:01:14
最近录制的ajax从基础到实战的视频，包含原生ajax jquery的ajax 以及ajax接口获取数据等 Ajax前端开发、项目实战、从零基础到精通、接口数据调用-学习视频教程-腾讯课堂红色为常见面试题 =======================...
收起
前端面试题
测试开发笔记
万次阅读 多人点赞 2019-11-14 17:11:58
从而使公司获取利润 1简单 2技术要求低 1测试介入时间晚，修改成本高 2有一些问题可能被遗留不会被修改必须保证 1对被测产品 2需求规格说明书 3系统测试工程师 4需求开发人员集成测试 integration testing（IT） ...
收起
测试开发
HTTP 协议
千次阅读 多人点赞 2018-08-06 17:08:35
HEAD 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头。 PST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）.POST请求可能会导致新的资源的建立和/或已有资源的修改。 PUT ...
收起
HTTP协议
C#基础教程-c#实例教程，适合初学者
万次阅读 多人点赞 2016-08-22 11:13:24
C#基础教程-c#实例教程，适合初学者。第一章 C#语言基础本章介绍C#语言的基础知识，希望具有C语言的读者能够基本掌握C#语言，并以此为基础，能够进一步学习用C#语言编写window应用程序和Web应用程序。...
收起
c#
JavaWeb
千次阅读 多人点赞 2017-12-26 09:09:24
转发： request.getRequestDispatcher("服务端路径").forword(req,resp); 区别：转发是一次请求一次响应，重定向两次请求，两次响应转发地址栏不变，重定向会变转发的路径不需要就工程名，重定向需要加工程名 ...
收起
javaweb
JAVA上百实例源码以及开源项目
千次下载 热门讨论 2016-01-03 17:37:40
6个目标文件，EJB来模拟银行ATM机的流程及操作：获取系统属性，初始化JNDI，取得Home对象的引用，创建EJB对象，并将当前的计数器初始化，调用每一个EJB对象的count()方法，保证Bean正常被激活和钝化，EJB对象是用...
收起
HTTP协议理解及服务端与客户端的设计实现
万次阅读 多人点赞 2019-06-20 19:05:05
本文主要帮助读者理解 HTTP 的协作原理、HTTP 相关的各层协议，在服务端和客户端的架构设计和一些优化的技巧，本文中主要讲述逻辑思想和协议远离，会使用部分 Java 代码，但会有详细的讲解，非开发应该也读的明白。...
收起
http socket http客户端 tcp/ip
content-length获取的大小与实际文件大小不一致的原因
千次阅读 2020-08-04 15:45:45
2.Content-Length为什么不靠谱（content-length获取的大小与实际文件大小不一致的原因）下面我们来分析几种Content-Length的几种异常情况： 2.1.gzip压缩问题引用官方文档的描述： By default this ...
收起
python http
Tomcat面试题+http面试题+Nginx面试题+常见面试题
千次阅读 多人点赞 2019-12-12 15:04:43
Nginx面试题 1、缺省安装的Nginx+php-fpm环境，假设用户浏览一个耗时的网页，但是却在服务端渲染页面的中途中关闭了浏览器，那么请问服务端的PHP脚本是继续执行还是退出执行？答：正常情况下，如果client异常退出了...
收起
Tomcat面试题 Nginx面试题
Java中根据WebService的服务端生成客户端，并且实现从客户端发送文件到服务端，测试发送文件大小的临界值
2018-08-29 16:51:45
//获取客户端文件内容及名称 public void getValue(String fileContent,String fileName); //写入文件 public int writeFile(String filePath, byte[] content); } 测试结果: 测试地址： ...
收起
java
分布式服务框架
千次阅读 2016-01-29 10:42:11
的命令及服务端的响应，而非结构化数据则主要用于客户端和服务端数据的传递。由于非结构化数据采用字节流的形式在客户端和服务端之间进行传输和存储，因此使用方式非常灵活，缓存数据存储几乎没有任何限制，...
收起
分布式
Web基础（三）Python Web
千次阅读 多人点赞 2018-11-14 19:11:49
开发Web应用程序的时候，通常会把常用的功能封装起来，成为各种框架，比如Flask，Django，Tornado（使用某框架进行web开发，相当于开发服务端的应用程序，处理后台逻辑）。但是，服务器程序和应用程序互相配合才能给...
收起
Python Web Web 基础 WSGI Web架构
服务端开发常用技术
千次阅读 2017-08-18 16:17:02
招聘要求： ...MongoDB使用内存映射文件, 32位系统上限制大小为2GB的数据（64位支持更大的数据）。[8] MongoDB服务器只能用在小端序系统，虽然大部分公司会同时准备小端序和大端序系统。维基百科： ...
收起
服务端实现对页面截图 - Headless Chrome
千次阅读 2019-08-20 16:56:59
版权声明 : ... / 1 / 前言 ... 这篇文章其实是和服务端实现对页面截图 - PhantomJs一起写完的，但是最近才整理发布出来，是为了解决PhantomJs无法对动态页面进行截图，加入我有一个有数据报表的页面...
收起
Linux实用教程(第三版)
万次阅读 多人点赞 2019-08-27 22:55:59
2.3注销、关闭和重启Linux系统 2.4 FirewallD防火墙第三章字符界面操作基础本章内容字符界面简介在Linux系统下获取帮助 Shell基础知识 3.4使用bash 3.5Shell实用功能 3.6重定向 3.7 vi编辑器命令模式命令末行...
收起
Linux
Android官方开发文档Training系列课程中文版：分享文件之获取文件信息
千次阅读 2016-04-07 17:29:02
之前的课程讲述了客户端APP试图与含有文件的URI一同运行，APP可以请求服务端APP的文件信息，包括文件的数据类型以及文件的大小。这些数据类型可以帮助客户端APP来判断该文件是否可以处理，文件的大小可以帮助客户端...
收起
android
小程序开发文档
万次阅读 多人点赞 2019-02-21 17:48:24
最近领导交给一个任务，单独开发一个小程序项目，还要出一篇小程序课题文档。这也是我第一次接触小程序，遂把领导对课题的要求以及自己开发过程中遇到的问题做如下总结：如何创建小程序项目这一步在官方文档中的...
收起
小程序
Mina基础框架及客户端-服务端框架对应实现例子
千次阅读 2016-06-01 18:18:12
，以获取当前时间。处理器类是一个实现 IoHandler接口的类。几乎所有的程序都在使用 Mina ,这成为该计划的主力,因为它能从客户提供传入的请求服务。对于这个教程，其类集成自 IoHandlerAdapter。此类...
收起
java apache mina nio
阿里oss服务端签名后直传
千次阅读 2019-10-27 13:16:58
服务端签名后直传1.背景2.原理介绍3.OSS中的相关概念4.编码 1.背景采用JavaScript客户端直接签名时，AccessKeyID和AcessKeySecret会暴露在前端页面，因此存在严重的安全隐患。因此，OSS提供了服务端签名后直传的...
收起
使用Nuxt.js搭建VUE应用的SSR（服务端渲染）
千次阅读 2019-06-20 00:14:02
Nuxt.js的介绍 Nuxt.js概述 nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染） ...通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的UI渲染我们的目标...
收起
c++ http服务端开发笔记
千次阅读 2019-05-14 11:33:02
LZ贴出的代码就是很多文档中提到的取得IP的“Stupid”方法。会受到/etc/hosts等不可控因素的影响。应该用ioctl获取: # include # include # include # include # include # include...
收起
WebUploader 接收服务端返回的数据
千次阅读 2019-02-22 14:05:08
1、通过WebUploade插件获取上传文件的信息数据并传参给服务端程序，为WebUploader意义上的上传文件成功； 2、通过服务端程序将文件保存到指定路径和文件信息入库，为最终的上传文件成功；一、遇到的问题 ...
收起
java服务端，支付宝支付代码笔记
千次阅读 2017-08-21 19:31:59
私钥：private_key这个在支付宝的文档里有生成的方式，基于java后台使用，需要将这个密钥转成PKCS8, 在蚂蚁金服的开放平台设置和上传公钥，私钥转成pkcs8格式放到代码中主要配置的地方 ...
收起
阿里oss服务端签名直传并设置上传回调
千次阅读 2019-10-27 15:24:42
如果上传了图片，还需要知道图片的大小等。为此OSS提供了上传回调方案。OSS回调完成后，应用服务器再将结果返回给客户端，以便服务端实时了解用户上传了什么文件。 2.流程介绍流程如下： 1.用户向应用服务器请求...
收起

JAVA上百实例源码以及开源项目源代码

JAVA实现服务端获取签名后前端直传文件到oss服务器：前端到后端

项目场景：

介绍：

进入正题：

注意事项：

2021年前端面试题及答案

前言

前端工程化

如何做"前端工程化"？

前端设计模式

前端安全性问题

xss跨站脚本攻击原理？如何进行？防御手段？

CSRF跨站请求伪造原理？如何进行？防御手段？

Sql脚本注入原理？如何进行？防御手段？

web上传漏洞原理？如何进行？防御手段？

前端跨越问题

什么是跨域？

什么是同源策略？

如何解决跨域？ 能说1，2，7，8就行。

前端数据加密问题

一般如何处理用户敏感信息？

前端http相关问题

HTTP常用状态码及其含义？

websocket和轮询及长轮询区别

Http和Https的区别？

*前端基础知识点面试题

HTML/5、CSS/3相关

JS部分

其他

一、怎么让Chrome支持小于12px 的文字？

二、IOS手机浏览器字体齿轮

三、如何修改chrome记住密码后自动填充表单的黄色背景？

四、谷歌浏览器运行下面代码，并解释！

首先我们来看

其次我们来看$$("*")

为元素添加颜色

五、input [type=search] 搜索框右侧小图标如何美化？

六、iOS safari 如何阻止“橡皮筋效果”？

七、实现点击文字，文字后面radio选中效果

八、网站中，图片文件（jpg，png,gif），如何点击下载？而非点击预览？

九、Math.min()比Math.max()大

vue相关问题？

前端面试题（持续更新中）

MySQL 面试题

MySQL 面试题

开发

为什么互联网公司一般选择 MySQL 而不是 Oracle?

数据库的三范式是什么？什么是反模式？

MySQL 有哪些数据类型？

MySQL 有哪些存储引擎？

重点】什么是索引？

【重点】MySQL 索引的原理？

【重点】请说说 MySQL 的四种事务隔离级别？

【重点】请说说 MySQL 的锁机制？

【重要】MySQL 查询执行顺序？

【重要】聊聊 MySQL SQL 优化？

编写 SQL 查询语句的考题合集

MySQL 数据库 CPU 飙升到 500% 的话，怎么处理？

Innodb 的事务与日志的实现方式

MySQL binlog 的几种日志录入格式以及区别

MySQL 主从复制的流程是怎么样的？

聊聊 MySQL 备份方式？备份策略是怎么样的？

聊聊 MySQL 集群?

聊聊 MySQL 安全？

MySQL 有哪些日志？

聊聊 MySQL 监控？

对一个大表做在线 DDL ，怎么进行实施的才能尽可能降低影响？

前端面试锦集

2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

测试开发笔记

HTTP 协议

C#基础教程-c#实例教程，适合初学者

JavaWeb

JAVA上百实例源码以及开源项目

HTTP协议理解及服务端与客户端的设计实现

content-length获取的大小与实际文件大小不一致的原因

Tomcat面试题+http面试题+Nginx面试题+常见面试题

Java中根据WebService的服务端生成客户端，并且实现从客户端发送文件到服务端，测试发送文件大小的临界值

分布式服务框架

如何解决跨域？能说1，2，7，8就行。