前端常见面试题

小鱼儿 2023-02-21 11:46 161阅读 0赞

![format_png][]

前端面试常考试题

![format_png 1][]

Hello，安雅兮又来啦！！！现在是网络招聘的高峰期，过完年的部分小伙伴们可能面临着求职的问题。哈哈哈，Don't worry。贴心的小编姐姐已经给小主们整理好常问的面试题目啦。请系好安全带，车要开啦![format_png 2][]

*1*

![format_png 3][]

**web storage和cookie的区别**

1.Web Storage能提供5M的存储空间（不同浏览器不同），Cookie提供4K的空间

2.Web Storage中数据仅仅是本地存储，不会与服务器发生任何交互，而Cookie的内容会随着请求一并发送到服务器，每请求一个新的页面时，Cookie都会被发送过去，无形中造成宽带浪费

3.Web Storage提供了许多丰富易用的接口，拥有setItem，removeItemgetItem，clear，key等方法，操作数据更简单。然而Cookie需要自己封装setCookie，getCookie等

![format_png 4][]

*2*

![format_png 3][]

**html常见兼容性问题？**

1. png24位的图片在iE6浏览器上出现背景 ? ? ?

解决方案：做成PNG8，也可以引用一段脚本处理.

2. 浏览器默认的margin和padding不同 ? ? ?

解决方案：加一个全局的 \*\{margin:0;padding:0;\} 来统一。

3.IE6双边距bug：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍 ? ? ?

解决方案:在float的标签样式控制中加入 \_display:inline; 将其转化为行内属性。( \_ 这个符号只有ie6会识别)

![format_png 4][]

*3*

![format_png 3][]

**html5有哪些新特性**

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

1. 拖拽释放(Drag and drop) API

2. 语义化更好的内容标签(header,nav,footer,aside)

3. 音频、视频API(audio,video)

4. 画布(Canvas) API

5. 地理(Geolocation) API

6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

7. sessionStorage 的数据在浏览器关闭后自动删除

8. 表单控件search  、date、time、email、url

9. 新的技术webworker, websocket, Geolocation

![format_png 4][]

*4*

![format_png 3][]

**什么是闭包和原型**

闭包其实主要考的是变量作用域的问题。我们有时候需要得到函数内的局部变量。但是，正常情况下，这是办不到的，只有通过变通方法才能实现 咱们举例说明：

function f1(){
       var n=999;
       function f2(){
        alert(n);
        }
       return f2;
      }
      var result=f1();
      result(); // 999

原型：

![format_png 5][]

使用function定义的对象与使用new操作符生成的对象之间有一个重要的区别。这个区别就是function定义的对象有一个prototype属性，使用new生成的对象就没有这个prototype属性，我们一般称为普通对象！

Person是一个对象，它有一个prototype的原型属性，prototype属性有自己的prototype对象，而pototype对象肯定也有自己的constuct属性，construct属性有自己的constuctor对象，神奇的事情要发生了，这最后一个constructor对象就是我们构造出来的function函数本身！

![format_png 6][]

原型给我们最实际的用处就是我们可以用它来创建对象的属性和方法！最重要的是：我们可以通过给原型添加属性和方法来给给对象添加属性或方法！

Hero.prototype.name;  
    Hero.prototype.sayMe = function()\{"添加对象的方法其实就是添加函数"\}

![format_png 4][]

*5*

![format_png 3][]

**前端创建对象的几种方式**

1.对象的字面量表现形式

![format_png 7][]

2.使用new Object()的方式, 内置构造函数的方式

![format_png 8][]

3.使用简单工厂方法创建对象.

![format_png 9][]

4.自定义构造函数来创建对象, 因为系统的构造函数都是首字母大写的, 所以我们模仿一下, 我们自定义的构造函数也尽量大写.

![format_png 10][]

![format_png 4][]

![format_png 11][]

**受小主们的宠爱，突然有点小紧张**

![format_png 4][]

获取更多学习资料，扫描二维码关注我们哦～

![format_png 12][]

**Java患者**

长按识别二维码关注我们

更多精彩内容

![format_png 13][]

![format_png 12][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9PalpmWGtUTTYxN1RiU0xSSjB4cjdNQTJiVUZybDlEbko4QlRJRThtTnY4cXRpYXpRejJ5RjNoYWZlbjluSE1ibzVtaHNLUUVTd2lieHZoalNuR2wwUE9RLzY0MA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9PalpmWGtUTTYxN1RiU0xSSjB4cjdNQTJiVUZybDlEbnlFUmVyd0paWHZCaWE2Zk13V1Q1SmlhWWlhZ3lqTzBNdHU5ZzJpY0pSR2NwOWpZOVR1cFZUT01tcUEvNjQw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yZXMud3gucXEuY29tL21wcmVzL2h0bWxlZGl0aW9uL2ltYWdlcy9pY29uL2NvbW1vbi9lbW90aW9uX3BhbmVsL3NtaWxleS9zbWlsZXlfNi5wbmc?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9PalpmWGtUTTYxN1RiU0xSSjB4cjdNQTJiVUZybDlEbjQ1OWxpYXh6aWFMYUc2ZWY4TmhpYWRISDJKRWJRbk9manVYaWNxY0QzeEFjR3R3M0hIMnlGbGZXN3cvNjQw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9PalpmWGtUTTYxN1RiU0xSSjB4cjdNQTJiVUZybDlEbmR1bldpYUIzOGljZWZFbXRzSHFLaWJWZDRpY1U0djJzQ2lhQ1BJUzh4M2ljYkQxSG9pYWRvZG5DR2czT2cvNjQw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9PalpmWGtUTTYxN1RiU0xSSjB4cjdNQTJiVUZybDlEbnJxcEVTTjlCYWlhc0FDc0pLVzRYbXBJRWQ2c0JTZUd1cEhCVzdKV3J0YXlrMFVVYUFHc2h1SUEvNjQw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9PalpmWGtUTTYxN1RiU0xSSjB4cjdNQTJiVUZybDlEbm5Od01xQUVSVndyYWliN2lhbGRmVnFITG81bEFhWm5qZWJzQkVVbEF1S29VeHRpYzVzaHVGWkRGdy82NDA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9PalpmWGtUTTYxN1RiU0xSSjB4cjdNQTJiVUZybDlEbjlCSnpKc2VmWU5OcnQ4Q0hpYkNpY0h4bTNkZmljemRCSjRkYUExbTB6NGRpYWRvdlhHOGdlSjd0Z3cvNjQw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9PalpmWGtUTTYxN1RiU0xSSjB4cjdNQTJiVUZybDlEbmhva1ZkRUxpY2ZRUVpTd2phcTBGM1lneUJCRXp2UGcxSHhabmxtT0JpY1YySlZvQzlYVnBxMlR3LzY0MA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9PalpmWGtUTTYxN1RiU0xSSjB4cjdNQTJiVUZybDlEbklXdVduSVBhYkNaSlU1ZTdZaGxpY29ENzJTY1RWUGhvMVRmOHlHQWF2cEtHaHdpY0UzZENIc1ZnLzY0MA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9PalpmWGtUTTYxN1RiU0xSSjB4cjdNQTJiVUZybDlEbllDaWJFekN6eU9rNWljc1l2RHRzajg3RTdHb09jdlNvRHlsVUQ5VmdzaHpFdUZKVzdjOXJKZmZRLzY0MA?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9PalpmWGtUTTYxN1RiU0xSSjB4cjdNQTJiVUZybDlEbjlDZk9OVmpobXBjN3RzamhGdndsdWpxY3IxbEhYdk0xekVzbFJtc2JId2R1WkM3emVKVnNxZy82NDA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9PalpmWGtUTTYxN1RiU0xSSjB4cjdNQTJiVUZybDlEbmFXcldKMEphZUkzYjRLOHM5UElEbVZoTkczUkU4ZnFhNGlhMlA3ZkVnSm9GaWF4MDlVSzZwTG9nLzY0MA?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9PalpmWGtUTTYxN1RiU0xSSjB4cjdNQTJiVUZybDlEbktGeDdpY2VEdVNPMFB2SHBmOHd5a2pqeWFvcVlaVkFpY2RsNkd2UEsxNjRSb3dZdkVOOXV2b2Z3LzY0MA?x-oss-process=image/format,png