前端面试整理<特别多，耐心看基础面试题部分基本没有问题了！！！>

时间：2022-12-18 07:32:51

前端面试题整理（含答案）

小菜鸡在前端笔试的时候偷偷记下了一些面试题，今天有时间就整理下，有些公司的面试题也都是网上搜的，自己多上网刷刷就可以了…（只能应付简单的前端面试哦）

HTML+CSS部分

  • 对于WEB标准以及W3C的理解与认识？
    • WEB标准不是某一个标准，而是一系列标准的集合。
    • Web标准可以分为三个层次：结构、样式、行为，在前端主要由html、css 和 js文件组成，体现其层次结构。
    • W3C编辑要求
      a) js文件css样式要外链，文件分开，方便解析；
      b) css样式表在头部引入，js文件在脚部引入，这是根据浏览器解析的顺序相关的；
      c) 标签要闭合、不可随意嵌套，标签要小写，编写要规范（id、css样式见名知意）；
      d）少用行间样式
  • xhtml与html、html5的区别？
    • HTML是超文本标记语言，XHTML可拓展的超文本标记语言
    • HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。
    • HTML5 是 HTML、XHTML 以及 HTML DOM 的新标准。它仍处于完善之中。但目前为止的大部分现代浏览器已经支持 HTML5
    • XHTML 元素必须被正确地嵌套。
    • XHTML 元素必须被关闭。
    • XHTML 标签名必须用小写字母
    • XHTML 文档必须拥有根元素。
    • HTML5相比XHTML，新增一些特性：
      1. 用于绘画的 canvas 元素
      2. 用于媒介回放的 video 和 audio 元素
      3. 对本地离线存储的更好的支持
      4. 新的特殊内容元素，比如 article、footer、header、nav、section
      5. 新的表单控件，比如 calendar、date、time、email、url、search
  • 行内元素与块级元素有什么不同?
    • 设置宽度width 无效。
    • 设置高度height无效，盒子的宽度可以通过line-height来设置。
    • 设置margin 只有左右margin有效，上下无效。
    • 设置padding 只有左右padding有效，上下则无效。
  • 前端页面由哪三层构成，分别是什么？
    • 网页分成三个层次，即：结构层（html）、表示层（css）、行为层（js）。
  • 你做的页面在哪些流览器测试过?都是什么哪些内核？
  • Doctype严格模式与混杂模式-如何触发这两种模式？区分他们有什么意义？
    • DOCTYPE（是Document Type文档类型的简写）是一组机器可读的规则，它们指示(X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明）用以告诉其他人这个文档的类型风格
    • 区别：严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如
      ，混杂模式则是一种向后兼容的解析方法。
    • 触发：根据不同的DTD触发，如果没有声明，那么默认为混杂模式。
  • CSS的引入的方式有哪些？link和@import的区别是什么？
    • link方式： <style type="text/css" media="screen">
      @import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css");
      </style>
    • @import方式：<link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" />
    • 使用链接link和导入import的好处就是易于维护，但当网速比较慢的时候，会出现加载中断的情况，导致页面排版错误
    • *差别1：link属于XHTML标签，而@import完全是CSS提供的一种方式。
    • link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
    • *差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候比较明显
    • *差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
    • 差别4：使用DOM控制样式时的差别。当使用javascript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。
  • CSS选择器有哪些？哪些属性可以继承？优先级算法是如何计算的？内联和import哪个优先级比较高？
    • 从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之，大部分情况下CSS代码都是使用外联样式表。
    • 从样式选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。
    • 参考链接权重的计算方法、你应该知道的一些事情——CSS权重
  • CSS的基本语句构成？
    • 选择器{属性1:值1;属性2:值2;……}
  • 标签上的title和alt的区别?
    • alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明
    • 在firefox和ie8中，当鼠标经过图片时title值会显示，而alt的值不会显示;只有在ie6中，当鼠标经过图片时title和alt的值都会显示。
    • 搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片说明。
  • CSS中reset的作用和用途？
    • 作用 ： 因为浏览器的品种很多，每个浏览器的默认样式也是不同的。通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。
    • 有最简单的*{margin:0 ; padding:0}
    • 参考文档CSS中reset的作用
  • 解释CSS Sprites，如何使用？
    • CSS精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
  • 清除浮动的各种方式？以及各自的优缺点？

javascript部分

  • javascript的typeof都有哪些返回类型？
    • undefined
    • string
    • boolean
    • number
    • symbol(ES6)
    • Object
    • Function

  • 列举三种强制类型转换，和两种隐式类型转换？

    • 强制类型转换
    • Number(参数)把任何类型转换成数值类型
    • parseInt（参数1，参数2）将字符串转换成整数
    • parseFloat()将字符串转换成浮点数字
    • string(参数)：可以将任何类型转换成字符串

    • Boolean()可以将任何类型的值转换成布尔值

      • 隐式类型转换
        1.四则运算
        　　　　加法运算符+是双目运算符，只要其中一个是string类型，表达式的值便是一个String。
        　　　　对于其他的四则运算，只有其中一个是Number类型，表达式的便是一个Number。
        　　　　对于非法字符的情况通常会返回NaN:’1’*’a’ // => NaN,这是因为parseInt(a)值为NaN，1*NaN还是NaN
        2.判断语句
        　　　　判断语句中的判断条件需要是 Boolean类型，所以条件表达式会被隐式转换为Boolean。其转换规则则同Boolean的构造函数。比如:
var obj = {};if(obj){while(obj);}
  • split和join的区别？
  • 数组中pop、push、shift和unshift的区别？
    • Push()尾部添加 pop()尾部删除
    • Unshift()头部添加 shift()头部删除
  • IE和DOM事件流的区别？
  • IE和标准模式下有哪些兼容的写法？
    • Var ev = ev || window.event
    • document.documentElement.clientWidth||document.body.clientWidth
    • Var target = ev.srcElement||ev.target
  • ajax请求中get和post的区别？
    • 1.get请求需注意缓存问题,post请求不需担心这个问题
    • 2.post请求必须设置Content-Type值为application/x-form-www-urlencoded
    • 3.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数
    • 参考文档Ajax中Get请求与Post请求的区别
  • call和apply的区别？
    • 定义：调用一个对象的一个方法，以另一个对象替换当前对象。
    • 说明： call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
      如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
    • apply()应用某一对象的一个方法，用另一个对象替换当前对象。
    • 如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
      如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
    • 参考文档 JS中的call()和apply()方法
  • ajax如何解析json和xml数据？
  • 写出获取非行间样式的函数以及兼容写法？
  • 事件委托是什么？
  • 添加、删除、替换和插入到某个节点的方法？
    • obj.appendChidl()
    • obj.innersetBefore
    • obj.replaceChild
    • obj.removeChild
  • ==和===的区别？
    • 前者会自动转换类型，后者不会
  • 对string对象进行扩充使其具有删除前后空格的方法？
  • 对数组去重的写法？
  • 对字符串去重的方法？
  • 闭包的概念以及优缺点
  • 判断数据类型的方法及区别
    • typeof()
    • instanceof()
    • Object.prototype.toString.Call()

好多都是直接从网上拷的，前端的知识太多，太杂。等有时间还要再看一遍
还有一份比较齐全的前端面试题前端面试必知的50道题目汇总

promise知识点
标签：

相关文章