前端开发常见面试问题(二)

最新推荐文章于 2023-02-27 15:01:21 发布

Gem__

最新推荐文章于 2023-02-27 15:01:21 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/Gemming_/article/details/103691007

版权

C3的动画和jQuery动画的区别

css3 animation与jQuery animate()区别在于实现机制不同:
1.css3中的过渡和animation动画都是基于css实现机制的，属于css范畴之内，并没有涉及到任何语言操作。效率略高与jQuery中的animate()函数，但兼容性很差。
2.jQuery中的animate()函数可以简单的理解为css样式的“逐帧动画”，是css样式不同状态的快速切换的结果。效率略低于css3动画执行效率，但是兼容性好。
1、css3 使用 GPU，jQuery 使用 CPU
2、css3 比 jQuery 更流畅，更快，更效率
3、jQuery 支持所有游览器
4、css3(animation, transition) 不支持 ie6, 7, 8, 9
5、css3 animation 支持的 css 属性比 jQuery 多

说一下你对闭包的理解

我的理解是，闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
function outer(){
    var num = 1;
    function inner(){
        var n = 2;
        alert(n + num);
    }
    return inner;
}
outer()();
子函数调用父函数内变量的行为产生了闭包。
优点：可以从函数外部访问函数内部变量、保留变量不会被销毁.
缺点：不会被js垃圾回收机制回收,占用了资源.

如何实现跨域?

跨域通信的几种方式:

1、JSONP
2、WebSocket
3、CORS
4、Hash
5、postMessage

1、JSONP
原理:通过<script>标签的异步加载来实现的。比如说，实际开发中，我们发现，head标签里，可以通过<script>标签的src，里面放url，加载很多在线的插件。这就是用到了JSONP。
JSONP的实现：
比如说，客户端这样写：
<script src="http://www.smyhvae.com/?data=name&callback=myjsonp"></script>
上面的src中，data=name是get请求的参数，myjsonp是和后台约定好的函数名。
服务器端这样写：
        myjsonp({
            data: {}
        })
于是，本地要求创建一个myjsonp 的全局函数，才能将返回的数据执行出来。


2.WebSocket
用法: 
var ws = new WebSocket('wss://echo.websocket.org'); //创建WebSocket的对象。参数可以是 ws 或 wss，后者表示加密。
    //把请求发出去
    ws.onopen = function (evt) {
        console.log('Connection open ...');
        ws.send('Hello WebSockets!');
    };
    //对方发消息过来时，接收
    ws.onmessage = function (evt) {
        console.log('Received Message: ', evt.data);
        ws.close();
    };
    //关闭连接
    ws.onclose = function (evt) {
        console.log('Connection closed.');
    };

3.CORS
CORS 可以理解成是既可以同步、也可以异步的Ajax。
fetch 是一个比较新的API，用来实现CORS通信。用法如下：
   // url（必选），options（可选）
      fetch('/some/url/', {
          method: 'get',
      }).then(function (response) {  //类似于 ES6中的promise
      }).catch(function (err) {
        // 出错了，等价于 then 的第二个参数，但这样更好用更直观
      });
4、Hash
url的#后面的内容就叫Hash。Hash的改变，页面不会刷新。这就是用 Hash 做跨域通信的基本原理。
补充：url的?后面的内容叫Search。Search的改变，会导致页面刷新，因此不能做跨域通信。
使用举例：
场景：我的页面 A 通过iframe或frame嵌入了跨域的页面 B。
现在，我这个A页面想给B页面发消息，怎么操作呢？
（1）首先，在我的A页面中：
    //伪代码
    var B = document.getElementsByTagName('iframe');
    B.src = B.src + '#' + 'jsonString';  //我们可以把JS 对象，通过 JSON.stringify()方法转成 json字符串，发给 B
（2）然后，在B页面中：
    // B中的伪代码
    window.onhashchange = function () {  //通过onhashchange方法监听，url中的 hash 是否发生变化
        var data = window.location.hash;
    };
5、postMessage()方法
H5中新增的postMessage()方法，可以用来做跨域通信。
场景：窗口 A (http:A.com)向跨域的窗口 B (http:B.com)发送信息。步骤如下。
（1）在A窗口中操作如下：向B窗口发送数据：
    // 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
    Bwindow.postMessage('data', 'http://B.com'); //这里强调的是B窗口里的window对象
（2）在B窗口中操作如下：
    // 在窗口B中监听 message 事件
    Awindow.addEventListener('message', function (event) {   //这里强调的是A窗口里的window对象
        console.log(event.origin);  //获取 ：url。这里指：http://A.com
        console.log(event.source);  //获取：A window对象
        console.log(event.data);    //获取传过来的数据
    }, false);

JavaScript定时器实现的原理

定时器函数可以通过异步操作实现,代码在一定时间后执行
虽然JavaScript是单线程的，但是它的执行环境，也就是浏览器是多线程的，时间计数并不是由JavaScript现成来完成，而是由浏览器的某个现成完成，所以定时器函数能够实现异步操作。
伪代码:
一次性定时器:setTimeout(()=>{'执行代码'},'毫秒时间')
一次性定时器:setInterval(()=>{'执行代码'},'毫秒时间')

Ajax实现的原理

统一流程:
//1.创建XMLHttpRequest对象。
var xmlHttp;
if (window.XMLHttpRequest) {            //非IE
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {       //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
//2.设置请求方式。   
var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url);
3.调用回调函数。
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var obj = document.getElementById(id);
            obj.innerHTML = xmlHttp.responseText;
        } else {
            alert("AJAX服务器返回错误！");
        }
    }
4.设置发送请求的内容和发送报送。发送请求。
var params = "userName=" + document.getElementsByName("userName")[0].value + "&userPass=" + document.getElementsByName("userPass")[0].value + "&time=" + Math.random();         // 增加time随机参数，防止读取缓存 				
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");    // 向请求添加 HTTP 头，POST如果有数据一定加！！！！
xmlHttp.send(params);

web存储

HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

HTTP和HTTPS的区别

http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。
主要的区别如下：
Https协议需要ca证书，费用较高。
http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
优点:大幅增加了中间人攻击的成本,提高了安全性.
缺点:费时延长50%,耗电增加10%~20%;缓存会增加数据开销;SSL证书需要费用;SSL整数需要绑定IP,不能绑定多个域名

HTTP请求经历了什么

一个完整的http请求主要有六个步骤：
1.域名解析
2.发起TCP的3次握手
3.建立TCP连接后发起http请求
4.服务器端响应http请求，浏览器得到html代码
5.浏览器解析html代码，并请求html代码中的资源
6.浏览器对页面进行渲染呈现给用户。

JavaScript事件流模型

冒泡事件流：
当触发一个节点的事件时，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点。
捕获事件流：
当触发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，
知道当前节点自身。
DOM事件流：
dom同时支持两种事件模型，但捕获性事件先开始，从document开始也结束于document，dom模型的独特之处在于文本也可以触发事件。

阻止事件冒泡：

 ① IE10之前，e.cancelBubble = true;
 ② IE10之后，e.stopPropagation();

阻止默认事件

①IE10之前：e.returnValue = false;
②IE10之后：e.stopPropagation();

常见的排序算法

 1、冒泡排序
思路：外层循环从1到n-1，内循环从当前外层的元素的下一个位置开始，依次和外层的元素比较，出现逆序就交换，通过与相邻元素的比较和交换来把小的数交换到最前面。
2、选择排序
思路：冒泡排序是通过相邻的比较和交换，每次找个最小值。选择排序是：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。
3、插入排序
思路：通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。可以理解为玩扑克牌时的理牌；
4、希尔排序
思路：希尔排序是插入排序的一种高效率的实现，也叫缩小增量排序。先将整个待排记录序列分割成为若干子序列分别进行直接插入排序，待整个序列中的记录基本有序时再对全体记录进行一次直接插入排序。
5、归并排序
思路：将已有序的子序列合并，得到完全有序的序列；即先使每个子序列有序，再使子序列段间有序。若将两个有序表合并成一个有序表，称为2-路归并。它使用了递归分治的思想；相当于：左半边用尽，则取右半边元素；右半边用尽，则取左半边元素；右半边的当前元素小于左半边的当前元素，则取右半边元素；右半边的当前元素大于左半边的当前元素，则取左半边的元素。
6、快速排序
思路：通过一趟排序将待排记录分隔成独立的两部分，其中一部分记录的关键字均比另一部分的关键字小，则可分别对这两部分记录继续进行排序，以达到整个序列有序。
7、堆排序
思路：堆积是一个近似完全二叉树的结构，并同时满足堆积的性质：即子结点的键值或索引总是小于（或者大于）它的父节点。
8、计数排序
思路：将输入的数据值转化为键存储在额外开辟的数组空间中。 作为一种线性时间复杂度的排序，计数排序要求输入的数据必须是有确定范围的整数。
9、桶排序
思路：桶排序是计数排序的升级版。它利用了函数的映射关系，高效与否的关键就在于这个映射函数的确定。桶排序 (Bucket sort)的工作的原理：假设输入数据服从均匀分布，将数据分到有限数量的桶里，每个桶再分别排序（有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排）。
10、基数排序
思路：基数排序是按照低位先排序，然后收集；再按照高位排序，然后再收集；依次类推，直到最高位。有时候有些属性是有优先级顺序的，先按低优先级排序，再按高优先级排序。最后的次序就是高优先级高的在前，高优先级相同的低优先级高的在前。

从平均时间来看，快速排序是效率最高的，但快速排序在最坏情况下的时间性能不如堆排序和归并排序。而后者相比较的结果是，在n较大时归并排序使用时间较少，但使用辅助空间较多。
上面说的简单排序包括除希尔排序之外的所有冒泡排序、插入排序、简单选择排序。其中直接插入排序最简单，但序列基本有序或者n较小时，直接插入排序是好的方法，因此常将它和其他的排序方法，如快速排序、归并排序等结合在一起使用。
基数排序的时间复杂度也可以写成O(d*n)。因此它最使用于n值很大而关键字较小的的序列。若关键字也很大，而序列中大多数记录的最高关键字均不同，则亦可先按最高关键字不同，将序列分成若干小的子序列，而后进行直接插入排序。
从方法的稳定性来比较，基数排序是稳定的内排方法，所有时间复杂度为O(n^2)的简单排序也是稳定的。但是快速排序、堆排序、希尔排序等时间性能较好的排序方法都是不稳定的。稳定性需要根据具体需求选择。
上面的算法实现大多数是使用线性存储结构，像插入排序这种算法用链表实现更好，省去了移动元素的时间。具体的存储结构在具体的实现版本中也是不同的。

线程与进程的区别

根本区别:进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位。
在开销方面：每个进程都有独立的代码和数据空间（程序上下文），程序之间的切换会有较大的开销；线程可以看做轻量级的进程，同一类线程共享代码和数据空间，每个线程都有自己独立的运行栈和程序计数器（PC），线程之间切换的开销小。

所处环境：在操作系统中能同时运行多个进程（程序）；而在同一个进程中有多个线程同时执行（通过CPU调度，在每个时间片中只有一个线程执行）
内存分配方面：

进程：系统在运行的时候会为每个进程分配不同的内存空间；

线程：除了CPU外，系统不会为线程分配内存（线程所使用的资源来自其所属进程），线程组之间只能共享资源。

堆和栈的区别

1.申请方式:栈由系统自动分配，而堆是人为申请开辟;
2.申请大小:栈获得的空间较小，而堆获得的空间较大;
3.申请效率:栈由系统自动分配，速度较快，而堆一般速度比较慢;
4.存储内容:基础变量的值存储在栈中，而引用变量存储在栈中的是指向堆中的数组或者对象的地址,引用变量实际存储在堆中;
5.栈内存中的数据类型会随着方法结束而销毁,堆内存中的对象不会随方法的结束而销毁。
6.底层不同:栈是连续的空间，而堆是不连续的空间;

什么是事件冒泡和事件捕获

事件冒泡：子元素事件的触发会影响父元素事件；

事件捕获：父元素的事件会影响子元素的事件；

事件捕获指的是从document到触发事件的那个节点，也就是说自上而下的去触发事件，相反的，事件冒泡是自下而上的去触发事件，绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获，true为事件捕获，false为事件冒泡，jQuery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。

前端加密算法

前端使用非对称加密原理很简单，前后端共用一套加密解密算法，前端使用公钥对数据加密，后端使用私钥将数据解密为明文。中间攻击人拿到密文，如果没有私钥的话是没办法破解的。

1.base64加密:

<script type="text/javascript" src="base64.js"></script>
  <script type="text/javascript">  
          var b = new Base64();  
          var str = b.encode("admin:admin");  
         alert("base64 encode:" + str);  
 　　　　　//解密
         str = b.decode(str);  
         alert("base64 decode:" + str);  
 </script>

2.md5加密：

<script type="text/ecmascript" src="md5.js"></script>
 <script type="text/javascript">  
    var hash = hex_md5("123dafd");
      alert(hash)
 </script>

3.sha1加密：

<script type="text/ecmascript" src="sha1.js"></script>
 <script type="text/javascript">
    var sha = hex_sha1('mima123465')
    alert(sha)   
</script>

前端遇到的安全问题有哪些?

三大安全性问题:
XSS攻击、SQL注入攻击、CSRF攻击
1.XSS跨站脚本分析：指攻击者在返回的html中嵌入了javascript脚本
攻击者将恶意脚本插入到网页中，网页会将这些恶意脚本当正常脚本来执行。所有可输入的地方没有处理输入的数据，就可能存在xxs漏洞。为了防护应该尽可能完善过滤体系。
iframe风险
iframe中的内容是由第三方来提供的，默认情况下他们不受我们的控制，他们可以在iframe中运行JavaScirpt脚本、Flash插件、弹出对话框等等，这可能会破坏前端用户体验。如果iframe中的域名因为过期而被恶意攻击者抢注，或者第三方被黑客攻破，iframe中的内容被替换掉了，从而利用用户浏览器中的安全漏洞下载安装木马、恶意勒索软件，这样就会有很大的安全隐患了。
2.SQL注入：通过非法运行而产生的攻击
通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。
防护措施：前端页面要校验用户的输入数据，后端不要使用动态SQL语句，不要直接存放机密数据。
3.CSRF跨站请求伪造：攻击者盗用了用户的身份，以用户的名义发送了恶意请求。CSRF攻击过程的受害者用户登录网站A，输入个人信息，在本地保存服务器生成的cookie。然后在A网站点击由攻击者构建一条恶意链接跳转到B网站,然后B网站携带着的用户cookie信息去访问B网站.让A网站造成是用户自己访问的假相,从而来进行一些列的操作,常见的就是转账.

Gem__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发常见面试问题(二)

C3的动画和jQuery动画的区别css3 animation与jQuery animate()区别在于实现机制不同:1.css3中的过渡和animation动画都是基于css实现机制的，属于css范畴之内，并没有涉及到任何语言操作。效率略高与jQuery中的animate()函数，但兼容性很差。2.jQuery中的animate()函数可以简单的理解为css样式的“逐帧动画”，是css样式...
复制链接

扫一扫