实际面试题合集1

妖狐艹你老母 2022-12-27 04:56 329阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1][]

*  **ajax的优势是什么？**

1.  最大的优点就是页面无刷新，用户的体验非常好；
2.  使用异步方式与服务器通信，具有更加迅速的相应能力；
3.  可以把以前的一些服务器负担的工作转嫁到客户端，利用客户端限制的能力来处理，**减轻服务器和带宽的负担，节约空间和带宽租用成本，并且减轻服务器的负担Ajax的原则是“按需取数据”，可以最大程度地减少冗余请求和相应对服务器造成的负担；**
4.  基于标准化的并被广泛支持的技术，不需要下载插件和小程序；

*  **javascript对象有几种创建方式**

**第一种：Object构造函数创建**

var Person = new Object();
    Person.name = 'Nike';
    Person.age = 29;

**第二种：使用对象字面量表示法**

var Person = {};//相当于var Person = new Object();
    var Person = {
     name:'Nike';
     age:29;  
    }

**第三种：使用工厂模式创建对象**

function createPerson(name,age,job){
     var o = new Object();
     o.name = name;
     o.age = age;
     o.job = job;
     o.sayName = function(){
      alert(this.name); 
     };
     return o; 
    }
    var person1 = createPerson('Nike',29,'teacher');
    var person2 = createPerson('Arvin',20,'student');

**第四种:使用构造函数创建对象**

function Person(name,age,job){
     this.name = name;
     this.age = age;
     this.job = job;
     this.sayName = function(){
     alert(this.name);
     }; 
    }
    var person1 = new Person('Nike',29,'teacher');
    var person2 = new Person('Arvin',20,'student');

*  **怎么理解js的内存泄露**

**什么是内存泄露？：**

内存泄漏（Memory Leak）是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。

内存泄漏问题很常见的，通俗表现就是用着用着任务管理器里的内存占用越来越大~~~越来越大

**常见泄漏点：**

闭包：闭包的概念是我有个代码区域，使用了外层区域某个变量，那么这个代码区域执行完之前，外层的那个变量肯定不能被释放，这就是闭包。

*详细说明：[https://zhuanlan.zhihu.com/p/67843006][https_zhuanlan.zhihu.com_p_67843006]*

*  vue的生命周期

![587911c1b1cad73e372d73e97e0adba1.png][]![f7ee1eba35021b37af6f0e0247521912.png][]

*  **json和xml的区别**

1.  数据体积方面，JSON相对XML来讲，数据的体积小，传递的速度更快些
2.  数据交互方面，JSON与JavaScript的交互更加方便，更容易解析处理，更好地进行数据交互
3.  数据描述方面，JSON对数据的描述性比XML较差
4.  传输速度方面，JSON的速度要远远快于XML

*  **谈谈你对webpack的看法**

**什么是webpack？**

WebPack 是一个**模块打包工具**，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。（比如编译一些ts,less,scss等文件）让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。

**特点：**

1）code splitting（可以自动完成）

2）loader 可以处理各种类型的静态文件，并且支持串联操作

*  **XSS和CSRF有什么区别**

**XSS:**

xss：中文名称跨站脚本攻击，通常出现在搜索框、留言板、评论区等地方

分类：反射性、存储型、DOM型

攻击方式：构造恶意链接，诱骗用户点击盗取用户的cookie信息

漏洞危害：xss蠕虫、会话、流量劫持、网站挂马、盗取cookie

防护方法：设置黑名单和白名单、对用户输入进行过滤、入参字符过滤、出参字符转义、设置httponly

**CSRF漏洞:**

csrf漏洞：中文名称跨站请求伪造，攻击者冒充用户身份执行用户操作

危害：盗用用户身份、执行用户操作，修改信息

防护方法：

1、设置referer字段；但是并不是所有服务器在任何时候都可以接受referer字段，所以这个方法存在一定的局限性

2、设置验证码；在用户操作的过程中设置身份确认的验证码，该方法会很有用，不过验证码频繁的话会影响用户体验

3、设置token值，在用户请求中设置一个随机没有规律的token值可以有效的防止攻击者利用漏洞攻击

**区别:**

xss：跨站脚本攻击、诱骗用户点击恶意链接盗取用户cookie进行攻击、不需要用户进行登录、xss除了利用cookie还可以篡改网页等

csrf：跨站请求伪造、无法获取用户的cookie而是直接冒充用户、需要用户登录后进行操作

*  **常见的web防护原理**

1.  sql注入原理
2.  XSS原理及防范
3.  CSRF攻击攻击原理

*  **什么是MVVM?**

M：model 数据层

V: view 视图层

VM: viewModel

![SouthEast][]

**MVVM优点：**

1.  **低耦合**，视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2.  **可重用性**，可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3.  **独立开发**，开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。
4.  **可测试**，界面向来是比较难于测试的，而现在测试可以针对ViewModel来写。

*  **CSS3有哪些新特性**

**1.CSS3的选择器：**

1）E:last-child 匹配父元素的最后一个子元素E。  
2）E:nth-child(n)匹配父元素的第n个子元素E。   
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

**2.圆角**

boder-radius:

**3.阴影**

text-shadow

box-sadow

**4.线性渐变**

background:linear-gradient(direction,color-stop1,color-stop2,……);

**5.边框图片**

border-image

*  **语义化的理解：**

1.让代码易读

2.有利于seo

3.用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

*  **如何实现浏览器多个标签页之间的通信**

**localStorage**

*（只能实现同一浏览器相同域名、相同协议、相同端口下的多个标签页之间的通信。不同浏览器没有该效果。）*

**`cookie+setInterval()`**

*`详细参考：`[https://blog.csdn.net/meijory/article/details/76358570][https_blog.csdn.net_meijory_article_details_76358570]*

*  **js延迟加载的方式有哪些**

**1.defer属性**

**2.async属性**

**3.动态创建DOM方式 (使用的最多)**

**4.使用setTimeout延迟**

**5.让JS最后加载**

*详细参考：[https://blog.csdn.net/meijory/article/details/76389762][https_blog.csdn.net_meijory_article_details_76389762]*

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201208105602118.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]: /images/20221120/60f4197dfc06416fa610949b462018c5.png
[https_zhuanlan.zhihu.com_p_67843006]: https://zhuanlan.zhihu.com/p/67843006
[587911c1b1cad73e372d73e97e0adba1.png]: https://img-blog.csdnimg.cn/img_convert/587911c1b1cad73e372d73e97e0adba1.png
[f7ee1eba35021b37af6f0e0247521912.png]: /images/20221120/53bf3e30ea9048688f7abf8df6b5c6b6.png
[SouthEast]: /images/20221120/7ac6ea12bf89494e8b7efab1f1279f25.png
[https_blog.csdn.net_meijory_article_details_76358570]: https://blog.csdn.net/meijory/article/details/76358570
[https_blog.csdn.net_meijory_article_details_76389762]: https://blog.csdn.net/meijory/article/details/76389762