前端面试题以及答案

最新推荐文章于 2024-07-24 10:10:12 发布

肖肖肖丽珠

最新推荐文章于 2024-07-24 10:10:12 发布

阅读量2.2k

点赞数

分类专栏：前端小知识前端面试、笔试题文章标签：网络 javascript css3

本文链接：https://blog.csdn.net/qq_33769914/article/details/76291979

版权

本文详细解答了前端面试中常见的问题，涵盖JavaScript语法、DOM操作、跨域解决方案、HTML5新特性、CSS样式、模块化开发、浏览器兼容性、性能优化等多个方面，旨在帮助开发者深入理解前端核心技术并提升面试能力。

摘要由CSDN通过智能技术生成

console.log(0===""); console.log(0==="0"); console.log(null===undefined); console.log(false==="false"); console.log(false==="0");

结果全是false。===值相同数据类型相同。

如果把上面的全部替换成==。console.log(0==""); console.log(0=="0"); console.log(null==undefined); console.log(false=="false"); console.log(false=="0")

结果是 true true true false true 因为"false"这是个字符串。

ES6原生提供了Promise对象，Promise主要提供哪种功能？解决异步编程造成的回调陷阱等问题
dom 的操作，常用的有哪些，如何创建、添加、移除、移动、复制、查找节点？
前端两种主流跨域方案：JSONP 与 CORS。请问使用两种方案在 a.com 向 b.com 发起跨域请求时，b.com 的服务端能否解析到跨域请求携带的 cookie。 jsonp能稳定解析到；CORS需要进行withCreDentials参数配置后可以解析到，否则不能。
如何使页面整体document处于可编辑状态。使用js设置document.designMode="on";
ajax两种请求方式。get和post 。get请求的参数跟在url的后面通过?参数名=值&参数名=值的方式传递。安全性太差。一般用于页面链接的跳转。get传送的数据量较小，不能大于2KB。

get是作为http消息的实体内容传递给服务端的。安全性较高。传递的数据量较大一般默认不受限。但是也受服务器的影响

我们在提交表单的时候我们通常用post方式,当我们要传送一个较大的数据文件时,需要用post。当传递的值只需用参数方式(这个值不大于2KB)的时候,用get方式即可。

JavaScript 中有哪些方案可以优化回调陷进问题？

Promise Generator(Yield) async/await

Doctype作用？严格模式与混杂模式如何区分？
答：DOCTYPE 位于文档的最前面，html标签之前，告诉浏览器以何种方式解析该文档。
不同的文档模式主要影响css的呈现，尤其是盒模型的解析。所谓的混杂模式指的是浏览器以相对宽松的方式向后兼容，模拟老式浏览器站点的行为。以防止老式站点无法工作；严格模式的js的运作模式和排版是以浏览器的最高标准来执行的。一般以标准模式呈现页面
浏览器根据doctype是否存在以及使用的哪种DTD来选择要使用的呈现方式，如果班阔完整的doctype则以标准模式呈现页面，不存在或者是形式不正确则会导致页面以混杂模式呈现。
HTML5 为什么只需要写 <!doctype html>？
答：h5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为。
html4.01基于SGML，所以需要对DTD的引用，才能让浏览器知道该文档所使用的引用类型。
行内元素有哪些？块级元素有哪些？行内元素与块级元素的区别？怎么转换？空(void)元素有那些？可变元素？
行内元素：span、a、img、input、b、strong、label、select、code、textarea、br
块级元素：div、p、h标签、ul、ol、dt、dd、dl、table、form、tr、th、tbody、thead、noscript、
可变元素：可以根据上下文语境决定是块元素还是行内元素 button、iframe、ins、map、object、script、del
页面导入样式时，使用link和@import有什么区别？
(1)link是xhtml标签，不存在兼容性的问题，@import是css2.1提出的，低版本（IE5以下）的浏览器不支持
(2)页面加载时，link引入的文件会同时加载，@import引入的文件会在页面加载完成之后再加载
(3)link支持js操控DOM改变样式，@import不支持
介绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？
浏览器内核包括两部分，渲染引擎和js引擎。渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面，js引擎是解析执行js获取网页的动态效果。
IE：Trident
firefox：Gecko
chrom、safari：webkit
Opera：Presto
Microsoft Edge：EdgeHTML
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
h5新特性主要包括：
(1)用于网页绘图的Canvas，svg
(2)用于离线存储的localstorage和sessionstorage
(3)用于媒体播放的vedio和audio
(4)语义化标签：eg ： footer header、nav、code、section
(5)表单控件：calendar、date、time、email、url
(6)新技术：webSocket、webWorker、Geolocation
移除的元素举例：font、center、big、frame、noframe、frameset
IE9以下版本的浏览器不谦容h5标签，解决办法：
(1)IE支持document.createElement()创建的元素，所以可以通过document.createElement()创建h5标签。
(2)可以使用IE条件注释

<!--[if lt IE 9]><div class = "header"></div><![endif]-->

通过DOCTYPE区分html和H5
7. 简述一下你对HTML语义化的理解？
HTML语义化是让页面的内容结构化，有利于搜索引擎解析，在没有css的情况下页面也会以一种文档格式呈现。
8. HTML5的离线储存怎么使用，工作原理能不能解释一下？
h5的离线缓存，只要在html头部加一个manifest属性即可。

<html manifest="cache.manifest">

cache文件：

CACHE MANIFEST
#v1.1.0
CACHE：
    js/app.js
    css/style.css
NETWORK:
    resource/log.jpg
FALLBACK:
    //offline.html

原理是：h5的离线存储基于一个“.appache”的文件缓存机制，通过该文件上的清单存储资源，离线时，浏览器通过离线存储的资源进行页面显示。
9. 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
在线时，如果发现html头部有manifest属性，会请求manifest文件，如果是第一次访问，会根据manifest文件下载相应资源并进行缓存，如果不是第一次访问，会使用离线存储的资源加载页面，同时对比新老资源，如果没有变化，不作操作，如果发现有变化，现在新的资源进行离线缓存。
10. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie：存储的数据量比较小，4kb左右，在与服务器通信时，携带在http请求头中，可以在同源的页面之间共享，有失效日期。
sessionStorage：只在当前会话窗口有效，窗口关闭sessionStorage清除，保存在客户端不与服务器进行通信。在不同浏览器的相同窗口也不会共享。
localStorage ：保存在客户端，不与服务器进行通信。只要不手动删除，长期有效。存储的数据量为5Mb或者是更大，可以在同源的页面之间共享。
11. Label的作用是什么？是怎么用的？
label通过for属性实现自身与其他表单控件的绑定，注意for属性要与相关元素的id属性相同。绑定之后，当选择label标签时，浏览器会自动把焦点放在与之绑定的控件上。
12. HTML5的form如何关闭自动完成功能？

<input autocomplete = "on">

如何实现浏览器内多个标签页之间的通信?
可以使用localStorage和cookie，localStorage和cookie在同源窗口之间可以共享，并且localStorage被修改、删除时都会触发storage事件，通过监听storage事件来控制值。
webSocket
实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

<div style = "height:1px;overflow:hidden;background:#000"></div>

介绍JavaScript的基本数据类型。
string number boolean null undefined
JS-变量命名的规范

1，数字字符下划线$符合组成。2，开头是字母和下划线。3，不能使用关键字。4，变量名称对大小写敏感

说说写JavaScript的基本规范？
1.一般将 html 代码和 js 代码分离，也就是将 js 代码全部写到一个独立的以 *.js 的文件中，再通过引入外部js 的方式引入到页面中
2.注意换行和缩进
3.注释简单明了。
4.命名规范，第一个字符必须是字母或下划线（_）或美元符号（$），其它字符可以是字母或下划线或美元符号或数字；个人常用camelCase命名法
5.使用var声明变量。
JavaScript原型，原型链 ? 有什么特点？
js每个对象都会在内部初始化一个prototype属性，当访问对象的某一属性时，优先查找对象是否有该属性，不存在时去原型里面找，prototype又有prototype，就这样一直找下去，这就是所谓的原型链的概念。
特点：js对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
JavaScript有几种类型的值？画一下他们的内存图？
包括原始数据类型和引用数据类型。
Javascript如何实现继承？
js中的继承主要是通过原型链来实现的。
1.原型链继承：主要方法是将父类的实例作为子类的原型，这样就实现了子类继承父类。

// 父类
function Animal (name) {
  this.name = name || 'Animal';
  this.sleep = function(){
    alert(this.name + '正在睡觉！');
  }
}
Animal.prototype.eat = function(food) {
  alert(this.name + '正在吃：' + food);
};
//子类
function Cat(){
}
Cat.prototype = new Animal();
//注意：要想为子类新增属性和方法，必须要在new之后执行，不能放到构造器中
Cat.prototype.name = 'cat';

优点：非常纯粹的继承关系，实例是子类的实例，也是父类的实例；
父类新增原型方法/原型属性，子类都能访问到；
简单，易于实现。
缺点：所有实例共享父类属性。
创建子类实例时，无法向父类构造函数传参。
2.借用构造函数实现继承：主要实现方法是在子类构造函数内部调用父类的构造函数。

//父类
function Animal(name){  
    this.name = name;
}
//子类
function Cat(){
    Animal.call(this,'cat');
}

优点：创建子类实例时，可以向父类构造函数传参。
可以实现多继承（c

最低0.47元/天解锁文章

肖肖肖丽珠

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录