前端面试整理

前端面试题整理(含答案)

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

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)。
  • 你做的页面在哪些流览器测试过?都是什么哪些内核?
    • IE内核浏览器:360,傲游,搜狗,世界之窗,腾讯TT。
    • 非IE内核浏览器:firefox opera safari chrome 。
    • Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
    • 具体的浏览器内核请参考博客主流浏览器内核介绍(前端开发值得了解的浏览器内核历史)
  • Doctype严格模式与混杂模式-如何触发这两种模式?区分他们有什么意义?
    • DOCTYPE(是Document Type文档类型的简写)是一组机器可读的规则,它们指示(X)HTML文档中允许有什么,不允许有什么,DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明)用以告诉其他人这个文档的类型风格
    • 区别:严格模式是浏览器根据web标准去解析页面,是一种要求严格的DTD,不允许使用任何表现层的语法,如
      ,混杂模式则是一种向后兼容的解析方法。
    • 触发:根据不同的DTD触发,如果没有声明,那么默认为混杂模式。
  • CSS的引入的方式有哪些?link和@import的区别是什么?
    • link方式:
    • @import方式:
    • 使用链接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精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量
  • 清除浮动的各种方式?以及各自的优缺点?
    • 参考文档CSS 中的浮动和清除浮动,梳理一下!
    • 参考文档css清除浮动clear:left-right-both示例效果
    • 参考文档浮动的原理是什么?浮动有什么影响?请列举常见的闭合浮动的方法。

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的区别?
    • 前者是切割成数组的形式,后者是将数组转换成字符串
    • 参考文档 JS中split()和join的区别
  • 数组中pop、push、shift和unshift的区别?
    • Push()尾部添加 pop()尾部删除
    • Unshift()头部添加 shift()头部删除
  • IE和DOM事件流的区别?
    • 参考文档DOM标准与IE的html元素事件模型区别
  • 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数据?
    • json: 使用eval parse,鉴于安全性考虑 使用parse更靠谱;
    • 参考文档 JS中Json数据的处理和解析JSON数据的方法详解
  • 写出获取非行间样式的函数以及兼容写法?
    • 参考文档 javascript中获取非行间样式的方法
  • 事件委托是什么?
    • 参考文档 js中的事件委托
  • 添加、删除、替换和插入到某个节点的方法?
    • obj.appendChidl()
    • obj.innersetBefore
    • obj.replaceChild
    • obj.removeChild
  • ==和===的区别?
    • 前者会自动转换类型,后者不会
  • 对string对象进行扩充使其具有删除前后空格的方法?
    • ”abc 123 def”.replace(/\s/g, “”) 正则表达式替换
    • 参考文档 去除string中的空格
  • 对数组去重的写法?
    • 参考文档 数组去去重的几种写法
  • 对字符串去重的方法?
    • 参考文档 对字符串去重的写法
  • 闭包的概念以及优缺点
    • 参考文档 闭包的使用场景及优缺点
  • 判断数据类型的方法及区别
    • typeof()
    • instanceof()
    • Object.prototype.toString.Call()

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

promise知识点

你可能感兴趣的:(面试题,面试题)