前端面试笔试题

浏览器

1. 从输入URL到页面加载完成的过程中都发生了什么事情？

1. 输入地址（url/Ip）
2. 浏览器查找域名IP地址
   这一步包括DNS具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存。
3. 浏览器向web服务器发送TCP连接请求，执行三次握手
4. 浏览器向服务器发送http请求
5. 服务器处理请求并响应
6. 浏览器解析html文件，加载（再次发送http请求）静态资源（图片，js，css，音频等），渲染页面

参考：输入一个URL到页面呈现其中发生的过程——-http过程详解

2. 浏览器的渲染过程

渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程：
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

DOM Tree： 浏览器将HTML解析成树形的数据结构。
CSS Rule Tree： 浏览器将CSS解析成树形的数据结构。
Render Tree： DOM和CSSOM合并后生成Render Tree。
layout： 有了Render Tree，浏览器已经知道网页中各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
painting： 按照算出来的规则，通过显卡，把内容画到屏幕上。

参考：现代浏览器的工作原理

3. reflow（回流） 与repaint(重绘)

reflow(回流)：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。
　　reflow 会从 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。　　
　　鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint(重绘): 改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

注意：

1. display：none 的节点不会加入Render Tree，而visibilty：hidden则会，所以，如果某个节点最开始是不显示的，设为display：none是更优。
2. display：none会触发reflow，二visility：hidden只会触发repaint，因为没有发现位置变化。
3. 有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow或repaint一次，而是会把这样的操作积攒一批，然后做一次reflow，这叫做异步reflow或增量异步reflow。但是有些情况下，比如resize窗口，改变页面默认的字体等。对于这些操作浏览器会马上reflow。

参考：浏览器的渲染

4. 浏览器内核

内核 代表浏览器 私有前缀 Trident IE，360浏览器，搜狗浏览器 -ms- Gecko Mozilla（火狐），netscape6 -moz- Presto Opera7及以上 -o- webkit Safari（苹果），Chrome -webkit- Blink Chrome,Opera(现在) -webkit-

参考：浏览器内核（引擎）及css前缀

---

HTML

1. DOCTYPE声明的作用是什么？严格模式与混杂模式如何区分？

1. 声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式<！DOCTYPE>声明位于文档中的最前面，处于标签之前，告知浏览器的解析器，用什么文档类型规范来解析这个文档。

   document.compatMode：
   BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
   CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面

2. 在严格模式（标准模式）中，浏览器根据规范呈现页面；在混杂模式中，页面以向后兼容的方式显示，以防止老站点无法工作。
   如果HTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

DOCTYPE声明作用及用法详解

2. 如何理解html标签语义化？

　　语义化的主要目的在于，直观的认识标签(markup)和属性(attribute)的用途和作用。
可以概括为：用正确的标签做正确的事情。
　　Html语义化可以让页面的内容结构化，便于浏览器解析，便于阅读，便于搜索引擎解析，并提高页面的可维护度和可重用性。
比如，尽可能少的使用无语义的标签div，使用结构化标签<header>、<section>、<footer>。

3. 简要描述行内元素和块级元素的区别?

块级元素：
* 独占一行，在默认情况下，其宽度自动填满父元素的宽度
* 块级元素可以设置width、height属性
* 块级元素及时设置了宽度也是独占一行，块级元素可以设置margin、padding属性

行内元素：
* 行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道排不下，就制动换行，其宽度随内容变化
* 行内元素的width、height属性则无效
* 行内元素的margin、padding属性很清关，水平方向上的padding、margin都会产生边距效果，而垂直方向上的不产生边距效果。

4. 锚点的作用是什么？如何创建锚点？

锚点是文档中某行的一个记号，类似于书签，用于链接到文档中的某个位置。当定义锚点后，我们可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

<!-- 在使用<a>元素创建锚点时，需要使用name属性为其命名，代码如下所示： --> <a name=”anchorname1”>锚点一</a><!-- 然后就可以创建链接，直接跳转到锚点，代码如下所示： --><a href=”#anchorname1”>回到锚点一</a>

5. a标签连接空标签的方法

在写页面时，想把a标签设置成空链接，方便后面数据的连接可以有几种方法。
1. <a herf=""></a>
这种方法会默认打开本页面，重新刷新一次页面。
2、<a herf="#"></a>
这种方法会在地址栏的后面添加一个#号，然后回到页面顶部。
3、<a herf="###"></a>
这种方法可以再chrome和ie11中，不再跳回页面顶部，但是还是会修改地址栏。
4、使用javascript伪协议

<a href="javascript:void(0);"></a><a href="javascript:void(0)"></a><a href="javascript:;"></a><a href="javascript:"></a>

上面使用javascript的伪协议的作用相同，会使a标签链接到一个js方法，但这个方法是void（0），则不会触发。
“在IE6下面，未加分号的方案被点击后，IE6会使得页面中的gif暂停，并且触发onbeforeunload事件，IE6认作这个页面有了重定向，并abort之后所有的请求。所以假如你在此之后替换了一个的src，IE6完全不会完成这个新的请求。”

6. href和src有什么区别？

href（HyperText reference）：表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
src（source的缩写）：表示引入资源，表示替换当前元素，用在img，script，iframe(替换元素)上，src是页面内容不可缺少的一部分。

src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部

<link href="common.css"rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import

---

CSS

1. link和@import的区别

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• ink支持使用Javascript控制DOM去改变样式；而@import不支持。

2. 什么是盒子模型?

　　所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
　　先说说我们在网页：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

* margin（外边距）：清除边框外的区域，外边距是透明的
* border（边框）：围绕在内边距和内容外的边框。
* padding（内边距）：清除内容周围的区域，内边距透明。
* content：盒子的内容，显示文本或图像。

3. display：none和visible：hidden的区别？

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

4. px，em，rem的区别。

5. 常用css样式

盒子垂直居中布局

    /* 这个是常用方法 */    .parent{        position:relative;    }    .child{        position:absolute;        top:50%;        left:50%;        transform:translate(-50%,-50%);        -webkit-transform:translate(-50%,-50%);        -ms-transform:translate(-50%,-50%);    }

    /* 该方法会让子元素大小与父元素相同，覆盖 */    .parent{        postition:relative;    }    .child{        position:absolute;        top:0;        left:0;        right:0;        bottom:0;        margin:auto;    }

内容垂直居中

父元素高度确定的单行文本

    /*  设置  height = line-height*/    .container{        height:50px;        line-height:50px;    }

父元素高度确定的多行文本

    /*方法一：使用插入table（包括tbody、tr、td）标签*/    .container{            width: 500px;            height:400px;            background:#ccc;            /*line-height: 400px;*/            /*display:table-cell;IE8以上及Chrome、Firefox*/            /*vertical-align:middle;IE8以上及Chrome、Firefox*/        }    td{        height:400px;background:#ccc    }    <div class="container">        <table><tbody><tr><td>        <div>            <p>看我是否可以居中。</p>            <p>看我是否可以居中。</p>            <p>看我是否可以居中。</p>            <p>看我是否可以居中。</p>            <p>看我是否可以居中。</p>        </div>        </tbody></td></tr></table>    </div>

    /**/    .container{            width: 500px;            height:400px;            background:#ccc;            /*line-height: 400px;*/            display:table-cell;/*IE8以上及Chrome、Firefox*/            vertical-align:middle;/*IE8以上及Chrome、Firefox*/    }    <div class="container">        <!-- <table><tbody><tr><td> -->        <div>            <p>看我是否可以居中。</p>            <p>看我是否可以居中。</p>            <p>看我是否可以居中。</p>            <p>看我是否可以居中。</p>            <p>看我是否可以居中。</p>        </div>        <!-- </tbody></td></tr></table> -->    </div>

多列布局

两端对齐

    .container{            text-align: justify;        }        .container .col {            display: inline-block;            width: 100px;            height: 100px;            background-color: blue;        }        .container:after {            content: "";            display: inline-block;            position: relative;            width: 100%;        }    <div class="container">        <div class="col"></div>        <div class="col"></div>        <div class="col"></div>        <div class="col"></div>        <div class="col"></div>    </div>

参考：css实现两端对齐的3种方法

…省略多余文字

按钮组

---

JS