2022年前端面试题及答案汇总HTML.docx

《2022年前端面试题及答案汇总HTML.docx》由会员分享，可在线阅读，更多相关《2022年前端面试题及答案汇总HTML.docx（12页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精品学习资源2021 前端面试题及答案汇总1 、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content）， 元素的内边距（ padding），元素的边框（ border），元素的外边距（ margin）四个部分；这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区 域或区域； 4 个部分一起构成了css 中元素的盒模型；2 、行内元素有哪些？块级元素有哪些？空void元素有那些？行内元素： a、b 、span 、 img 、input、strong、select 、label 、em 、button、textar ea块级

2、元素： div 、ul 、li 、dl 、dt 、dd 、p 、h1-h6、blockquote空元素：即系没有内容的HTML 元素，例如： br 、meta 、hr 、link 、input、 img3 、CSS 实现垂直水平居中一道经典的问题，实现方法有很多种，以下是其中一种实现：HTML 结构：CSS ：.wrapperposition:relative;.contentbackground-color:#6699FF;width:200px;欢迎下载精品学习资源height:200px;position: absolute;/父元素需要相对定位top: 50%;left: 50%;ma

3、rgin-top:-100px ;/二分之一的 height，width margin-left: -100px;4 、简述一下 src 与 href 的区分href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接， 用于超链接；src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素；当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、 执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内；这也是为

4、什么将 js 脚本放在底部而不是头部；5 、什么是 CSSHack.一般来说是针对不同的浏览器写不同的 CSS, 就是 CSS Hack ；IE 浏览器 Hack 一般又分为三种，条件 Hack 、属性级 Hack 、选择符 Hack （详细参考 C SS 文档： css 文档）；例如：/ 1、条件 Hack欢迎下载精品学习资源.testcolor:red;/ 2、属性 Hack.testcolor:#0909; /* For IE8+ */*color:#f00; /* For IE7 and earlier */_color:#ff0; /* For IE6 and earlier */

5、3、选择符 Hack* html .testcolor:#090;/* For IE6 and earlier */* + html .testcolor:#ff0;/* For IE7 */6 、简述同步和异步的区分同步是堵塞模式，异步是非堵塞模式；同步就是指一个进程在执行某个请求的时候，如该请求需要一段时间才能返回信息，那么这个进程将会始终等待下去，直到收到返回信息才连续执行下去；异步是指进程不需要始终等下去，而是连续执行下面的操作，不管其他进程的状态； 当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率；7 、px和 em的区分px 和 em 都是长度单位， 区分是， px 的

6、值是固定的， 指定是多少就是多少，运算比较简洁；em 得值不是固定的，并且em 会继承父级元素的字体大小；欢迎下载精品学习资源浏览器的默认字体高都是16px；所以未经调整的浏览器都符合:1em=16px；那么 12p x=0.75em,10px=0.625em8 、什么叫文静降级和渐进增强？渐进增强progressiveenhancement：针对低版本浏览器进行构建页面，保证最基本的功能， 然后再针对高级浏览器进行成效、交互等改进和追加功能达到更好的用户体验；文静降级gracefuldegradation：一开头就构建完整的功能，然后再针对低版本浏览器进行兼容；区分：a. 文静降级是从复杂的

7、现状开头，并试图削减用户体验的供应b. 渐进增强就是从一个特殊基础的，能够起作用的版本开头，并不断扩充，以适应将来环境的需要c. 降级（功能衰减）意味着往回看；而渐进增强就意味着朝前看，同时保证其根基处于安全地带9 、浏览器的内核分别是什么 .IE:trident内核Firefox：gecko内核Safari： webkit内核Opera ：以前是 presto内核， Opera现已改用 GoogleChrome的 Blink内核Chrome：Blink基于 webkit，Google与 OperaSoftware共同开发 欢迎下载精品学习资源1 、怎样添加、移除、移动、复制、创建和查找节点？

8、1 ）创建新节点createDocumentFragment /创建一个 DOM片段createElement /创建一个详细的元素createTextNode /创建一个文本节点2 ）添加、移除、替换、插入appendChild /添加removeChild /移除replaceChild /替换insertBefore /插入3 ）查找getElementsByTagName /通过标签名称getElementsByName /通过元素的 Name 属性的值getElementById /通过元素 Id ，唯独性2 、实现一个函数 clone ，可以对 JavaScript 中的 5 种主

9、要的数据类型（包括 Number 、String 、Object 、Array 、Boolean ）进行值复制；（ Obj ect.prototype.toString.call方法及面试应用 ）/* 对象克隆* 支持基本数据类型及对象欢迎下载精品学习资源* 递归方法*/欢迎下载精品学习资源3 、如何排除一个数组里面重复的元素？4 、想实现一个对页面某个节点的拖曳？如何做？（使用原生JS ）；留意： 为了让元素可拖动，需要使用HTML5draggable属性；提示： 链接和图片默认是可拖动的，不需要draggable属性；在拖放的过程中会触发以下大事：在拖动目标上触发大事 源元素 :ondra

10、gstart- 用户开头拖动元素时触发ondrag- 元素正在拖动时触发ondragend-用户完成元素拖动后触发释放目标时触发的大事:ondragenter- 当被鼠标拖动的对象进入其容器范畴内时触发此大事ondragover- 当某被拖动的对象在另一对象容器范畴内拖动时触发此大事ondragleave- 当被鼠标拖动的对象离开其容器范畴内时触发此大事ondrop- 在一个拖动过程中，释放鼠标键时触发此大事欢迎下载精品学习资源欢迎下载精品学习资源5 、在 Javascript中什么是伪数组？如何将伪数组转化为标准数组？伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行

11、为，但仍可 以对真正数组遍历方法来遍历它们；典型的是函数的argument参数，仍有像调用getEl ementsByTagName,document.childNodes之类的 , 它们都返回NodeList对象都属于伪数组；a. 使用 Array.prototype.slice.call;b. 使用 .slice.call ，明白 js 原型链的都知道，实际上这种方法和第一中方法是一样的，但上面第一种方式相对效率更高；c 使用 ES6 中 Array.from方法 ;6 、Javascript中 callee和 caller的作用？caller是返回一个对函数的引用，该函数调用了当前函数；

12、callee是返回正在被执行的function函数，也就是所指定的function对象的正文；欢迎下载精品学习资源7 、请描述一下 cookies， sessionStorage和 localStorage的区分sessionStorage用于本地储备一个会话（session）中的数据，这些数据只有在同一个会 话中的页面才能拜望并且当会话终止后数据也随之销毁；因此sessionStorage不是一种长期化的本地储备，仅仅是会话级别的储备；而localStorage用于长期化的本地储备，除非主动删除数据，否就数据是永久不会过期的；webstorage和 cookie的区分WebStorage的概

13、念和 cookie相像，区分是它是为了更大容量储备设计的；Cookie的大小是受限的， 并且每次你请求一个新的页面的时候Cookie都会被发送过去， 这样无形中铺张了带宽，另外cookie仍需要指定作用域，不行以跨域调用；除此之外， WebStorage拥有 setItem,getItem,removeItem,clear等方法，不像 co okie需要前端开发者自己封装setCookie，getCookie；但是 Cookie也是不行以或缺的： Cookie的作用是与服务器进行交互，作为HTTP 规范的一部分而存在，而 WebStorag e 仅仅是为了在本地“储备 ”数据而生；8 、手写数

14、组快速排序关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序“快速排序 ”的思想很简洁，整个排序过程只需要三步：（1 ）在数据集之中，选择一个元素作为”基准 ”（ pivot ）；（2 ）全部小于 ”基准 ”的元素， 都移到 ”基准 ”的左边； 全部大于 ”基准 ”的元素， 都移到 ”基准 ” 的右边；（3 ）对 ”基准 ”左边和右边的两个子集，不断重复第一步和其次步，直到全部子集只剩下一个元素为止；9 、统计字符串 ” aaaabbbccccddfgh” 中字母个数或统计最多字母数；欢迎下载精品学习资源10 、写一个 function，清除字符串前后的空格；（兼容全部浏览器）1 、一次

15、完整的 HTTP事务是怎样的一个过程？基本流程：a. 域名解析b. 发起 TCP 的 3 次握手c. 建立 TCP 连接后发起 http请求d. 服务器端响应http请求，浏览器得到html代码e. 浏览器解析 html代码，并请求html代码中的资源f. 浏览器对页面进行渲染显现给用户欢迎下载精品学习资源2 、对前端工程师这个职位你是怎么样懂得的？a.前端是最贴近用户的程序员，前端的才能就是能让产品从90分进化到 100分，甚至更好b.参与项目，快速高质量完成实现成效图，精确到1px ；c.与团队成员， UI 设计，产品经理的沟通；d.做好的页面结构，页面重构和用户体验；e.处理 hack ，兼容、写出漂亮的代码格式；f.针对服务器的优化、拥抱最新前端技术；欢迎下载