Web前端初级面试题总结 - 好文

Web篇：

1.常见的浏览器内核有哪些？

IE：Trident内核          FireFox：gecko内核                Opera ：
原是用Presto，现改用Blink

Safari ：webkit内核      Chrome：Blink（WebKit的分支）

2.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html     表示层 CSS     行为层 js

3.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

    sessionStorage 和 localStorage 是HTML5 Web Storage API
提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。

    sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个”浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时”独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的

     cookies会发送到服务器端。其余两个不会。

4.ajax的缺点

ajax不支持浏览器back按钮。

安全问题 AJAX暴露了与服务器交互的细节。

对搜索引擎的支持比较弱。

破坏了程序的异常机制。不容易调试。

5.怎样添加、移除、移动、复制、创建和查找节点。

1）创建新节点
createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点2）添加、移除、替换、插入 appendChild() removeChild()
replaceChild() insertBefore() //并没有insertAfter()3）查找 getElementsByTagName()
//通过标签名称 getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

HTML5篇：

1.html5有哪些新特性、移除了那些元素？

新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage
长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。

    内容元素，article、footer、header、nav、section。

    表单控件，calendar、date、time、email、url、search。

    控件元素，webworker, websockt, Geolocation。

    移出的元素有下列这些：

    显现层元素：basefont，big，center，font, s，strike，tt，u。

    性能较差元素：frame，frameset，noframes。

2.如何处理HTML5新标签的浏览器兼容问题？

处理兼容问题有两种方式：

    (1)    IE8/IE7/IE6支持通过document.createElement方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

    (2)    最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

3.如何区分 HTML 和HTML5？

DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

4.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

    行内元素有：a b span img input select strong

    块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

    知名的空元素：

    <br> <hr> <img> <input> <link> <meta>

    鲜为人知的是：

    <area> <base> <col> <command> <embed> <keygen> <param> <source> <track>
<wbr>

5.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

<style type="text/css" media="all">@import "../fouc.css";</style>

而引用CSS文件的@import就是造成这个问题的罪魁祸首。

IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，

因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。

CSS3篇：

1.CSS清除浮动的几种方法（至少两种）

使用带clear属性的空元素;        使用CSS的overflow属性；

使用CSS的:after伪元素；         使用邻接元素处理；

2.页面导入样式时，使用link和@import有什么区别？

link属于HTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

JavaScript篇：

1.javascript的typeof返回哪些数据类型?

string、number、boolean、Ｏbject、underfind、function ;

2.js的数据类型都有哪些？

字符串、数字、布尔、数组、对象、Null、Undefined、Symbol

3.例举3种强制类型转换和2种隐式类型转换?

强制类型转换：parseInt,parseFloat,number

隐世类型转换：==和===

4.数组方法pop() push() unshift() shift()

Push()尾部添加            pop()尾部删除

Unshift()头部添加        shift()头部删除

5.谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。

但是有一个总原则，那就是this指的是调用函数的那个对象。

this一般情况下：是全局对象Global。作为方法调用，那么this就是指这个对象

Webpack篇：

1.Webpack是什么？

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

2.loader的作用：

实现对不同格式的文件的处理，比如说将scss转换为css，或者typescript转化为js

转换这些文件，从而使其能够被添加到依赖图中

3.优化插件：

OccurenceOrderPlugin: 为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块，然后为他们分配最小的ID
UglifyJsPlugin: 压缩代码

热门工具换一换