Web前端笔试面试题总结

1.行内元素有哪些？块级元素有哪些？空元素（单标签）有哪些？

行内元素：a（锚点）、b（加粗）、span（常用内联容器，定义文本内区块）、img（图片）、input（输入框）、strong（粗体强调）、select（项目选择）、label（表格标签）、em（倾斜）、button（按钮）、textarea（文本域）

块级元素：div（盒子列表）、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：（即系没有内容的HTML元素）br、meta、hr、link、input、img

2.简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

3.px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小

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

相同点：都存储在客户端
不同点：

1.存储大小

• cookie数据大小不能超过4k。
• sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

• localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
• sessionStorage  数据在当前浏览器窗口关闭后自动删除。
• cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

• cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

5.一次完整的HTTP事务是怎样的一个过程？

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

6.JavaScript实现二分法查找（代码实现）

二分法查找要求线性表必须采用顺序存储结构，而且表中元素按关键字有序排列。 有两种方法实现:
一:递归法

var arr = [1, 5, 7, 10, 18, 45, 50, 55, 75, 400];
        function binary_search(find, arr, low, high) {
            if (low <= high) {
                if (arr[low] == find) {
                    return low;
                }
                if (arr[high] == find) {
                    return high;
                }
                var mid = Math.ceil((low + high) / 2);
                if (arr[mid] == find) {
                    return mid;
                } else if (arr[mid] > find) {
                    return binart_search(find, arr, low, mid - 1);
                } else {
                    return binart_search(find, arr, mid + 1, high);
                }
            }
            return -1;
        }
        console.log(binary_search(55, arr, 0, arr.length - 1));//7
二:非递归法

function binary_search(arr, find) {
            var low = 0;
            var high = arr.length - 1;
            while (low <= high) {
                var mid = parseInt((low + high) / 2);
                if (find == arr[mid]) {
                    return mid;
                } else if (find > arr[mid]) {
                    low = mid + 1;
                } else if (find < arr[mid]) {
                    high = mid - 1;
                } else {
                    return false;
                }
            }
        }
        var arr = [1, 5, 7, 10, 18, 45, 50, 55, 75, 400];
        console.log(binary_search(arr, 50));//6
两种方法实现二分法查找,在数据量大的时候推荐非递归法,普通数据用递归法.

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

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]ll

8.iframe有哪些缺点

1.页面样式调试麻烦，出现多个滚动条；

2.浏览器的后腿按钮失效；

3.过多会增加服务器的HTTP请求；

4.小型的移动设备无法完全显示框架；

5.产生多个页面，不易管理；

6.不容易打印；

7.代码复杂，无法被一些搜索引擎解读

9.CSS选择符有哪些？哪些属性可以继承？

1、CSS选择符有哪些？

     类型选择符（body）、群组选择符（h1，h2，h3，span）、包含选择符（h2 span）、ID选择符（#id）、Class选择符（.content）

2、哪些属性可以继承？

    CLASS属性，伪类A标签，列表ul、li、dl、dd、dt可以继承

3、优先级算法如何计算？

     优先级就近原则

10.margin和padding分别合适什么场景使用？

何时使用margin：
  需要在border外侧添加空白
  空白处不需要背景色
  上下相连的两个盒子之间的空白，需要相互抵消时。
何时使用padding：
  需要在border内侧添加空白
  空白处需要背景颜色
  上下相连的两个盒子的空白，希望为两者之和。
兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决

11.介绍js的基本数据类型（介绍js有哪些内置对象）

基本数据类型：Undefined  Null  Boolean  Number  String （Object一种复杂数据类型）

内置对象：Object是Javascript中所有对象的父对象

               数据封装对象：Object  Array  Boolean   Number  String

               其他对象：Function  Argument  Math  Date  RegExp Error、

javaScript 内置对象列表：
Arguments 函数参数集合、  Array 数组、  Boolean 布尔对象、  Date 日期时间、  Error 异常对象、  Function 函数构造器、  Math 数学对象、Number 数值对象、  Object 基础对象、  RegExp 正则表达式对象、  String 字符串对象

12.说几条写JavaScript的基本规范

（1）不要在同一行声明多个变量。

（2）请使用===/!==来比较true/false或者数值

（3）使用对象字面量替代new Array这种形式

（4）不要使用全局函数。

（5）Switch语句必须带有default分支

（6）函数不应该有时候有返回值，有时候没有返回值。

（7）For循环必须使用大括号

（8）If语句必须使用大括号

（9）for-in循环中的变量应该使用var关键字明确限定作用域，从而避免作用域污染。

13.如何实现数组的随机排序？

javascriptvar arr = [1,2,3,4,5,6,7,8,9,10];

function randSort1(arr){ for(var i = 0,len =arr.length;i < len; i++ ){

var rand = parseInt(Math.random()*len);

var temp= arr[rand];

arr[rand] = arr[i];

arr[i] = temp;

}

return arr;

}

console.log(randSort1(arr));

14.null，undefined的区别？

null表示一个对象是“没有值”的值，也就是值为“空”；

undefined表示一个变量声明了没有初始化(赋值)；

undefined不是一个有效的JSON，而null是；

undefined的类型(typeof)是undefined；

null的类型(typeof)是object；

Javascript将未赋值的变量默认值设为undefined；

Javascript从来不会将变量设为null。它是用来让程序员表明某个用var声明的变量时没有值的。

typeof undefined

//"undefined"

undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回undefined；

例如变量被声明了，但没有赋值时，就等于undefined

typeof null

//"object"

null :是一个对象(空对象,没有任何属性和方法)；

例如作为函数的参数，表示该函数的参数不是对象；

注意：

在验证null时，一定要使用===，因为==无法分别null和undefined

null == undefined // true

null=== undefined // false

15.使用JS实现获取文件扩展名？

<script language="JavaScript">var a="abc.jpg";function test(file_name){var result =/\.[^\.]+/.exec(file_name);return result;}var b=test(a);alert(b);</script>

16.列举几个你知道的JS框架？能讲出他们各自的优点和缺点？

17.你用的得心应手用的熟练地编辑器&开发环境是什么样子？

18.请简要介绍下Dom文档流，请指出document.onload和document.ready的区别

(1) 解析HTML结构。 
(2) 加载外部脚本和样式表文件。 
(3) 解析并执行脚本代码。 
(4) 构造HTML DOM模型。//ready 
(5) 加载图片等外部文件。 
(6) 页面加载完毕。//load

1、加载程度不同

document.ready：是DOM结构绘制完毕后就执行，不必等到加载完毕。意思就是DOM树加载完毕就执行，不必等到页面中图片或其他外部文件都加载完毕。

onload：是页面所有元素都加载完毕，包括图片等所有元素。

2、执行次数不同

document.ready可以写多个.ready，可以执行多次，第N次都不会被上一次覆盖。

onload只能执行一次，如果有多个，那么第一次的执行会被覆盖。

3、执行速度不同

onload除了要等待DOM被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在onload事件上的代码在执行时有明显的延迟。

document.ready函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。

19.在css中position定位属性都有哪些值，哪些定位会使元素脱离文档流？

①absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

②relative ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

③fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。

④static ：默认值；默认布局。