前端面试题总结

一、关于HTML

1、HTML5有哪些新特性

• 绘画canvas
• 本地离线存储localstarage、sessionStarage
• 语义化标签的使用，如footer、header、nav、article、section等
• video和audio
• 新的技术webworker(专用线程) 
• 表单控件，如time、date、email、url等 
• websocket通信 
• Geolocation 地理定位

2、HTML5拖拽如何实现

http://www.w3school.com.cn/html5/html_5_draganddrop.asp

3、哪些是行内元素、哪些是块状元素

行内元素：span、a、input、button、b、i、img、textarea、select等    

块状元素：div、footer、header、article、section、p、ol、ul、form、h1~h6、li等

4、渲染页面的顺序

创建DOM树  —>  解析CSS样式  —>  创建渲染树（不可见的元素不渲染）—> 绘制到屏幕上

5、回流和重绘

回流：布局引擎为frame计算图形的过程，发生在初始化、改变大小、样式改变和渐进(里面的元素变了)

重绘：发生在元素的可见性发生变化时，如背景色

回流—>重绘

如何减少回流？

• 避免逐项更改样式（将样式定义成class，并一次性更改class属性）
• 避免循环操作DOM
• 避免循环读取offsetLeft（循环前存储）
• 绝对定位具有复杂动画的元素

6、同源：协议、主机、端口相同

 

二、关于CSS

1、position的值， relative和absolute分别是相对于谁进行定位的？

    absolute (相对于最近一级的 定位不是 static 的父元素来进行定位)
    fixed     （老IE不支持）通常相对于浏览器窗口或 frame 进行定位
    relative   (相对于其在普通流中的位置进行定位)
    static       默认值。没有定位，元素出现在正常的流中
    sticky      生成粘性定位的元素，容器的位置根据正常文档流计算得出

2、渐进增和优雅降级

   渐进增强  针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
    优雅降级  一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

3、浏览器内核和css前缀

  Trident：IE   -ms-   
  Gecko：Firefox   -moz-  
  Webkit：Safari，曾经的Google   -webkit-
  Presto：Opera   -o-
  Blink：Google

4、实现水平居中

方法1：固定宽度，左右margin auto

.center{
    width:100px;
    margin:0 auto
}

方法2：父元素text-align:center，子元素display：inline-block

.parent{
    text-align:center;
    font-size:0;           // 为了解决inline-block的空白问题
}
.child{
    display:inline-block;
    font-size:16px;        // 在子元素上重新定义font-size的值
}

// 重新定义font-size来解决inline-block的空白问题在safari下依然存在
// 解决inline-block的空白问题
<ul>
    <li>
    标签1</li><li>
    标签2</li><li>
    标签3</li><li>
    标签4</li>
</ul>

方法3：float+position实现

.parent{
    float:left;
    position:relative;
    left:50%;
}
.child{
    float:left;
    position:relative;
    right:50%;
    margin:0 auto;
}

方法4：绝对定位实现

.el{
    width:500px;
    position:absolute;
    left:50%;
    margin-left:-250px;
}

方法5：flex

.parent{
    display:flex;
    justify-content: center;
}

 

5、实现垂直居中

方法1、父元素高度不确定的文本、图片、块级元素的垂直居中，通过设置相同的padding-top和padding-bottom

.parent{
    width:300px;
    padding-top:20px;
    padding-bottom:20px;
}
.child{
    width:20px;
    height:30px;
}

方法2：绝对定位实现

.parent{
    position:relative;
    height:300px;
    width:400px;
}
.child{
    width:300px;
    height:100px;
    position:absolute;
    top:50%;
    margin-top:-50px;
}

方法3：使用绝对定位和transform

.parent{
    position:relative;
    height:300px;
    width:400px;
}
.child{
    width:300px;
    position:absolute;
    top:50%;
    transform:translate(0,-50%);
}

方法4：绝对定位+margin

.parent {
    width: 300px;
    height: 300px;
    position: relative;
}
.child {
    height:100px;          // 必须设置，若内容为高度自带的图片，则可不设置
    line-height:100px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

方法5：flex

.parent{
    display:flex;
    align-items: center;
}

方法6：line-height实现单文本垂直居中

方法7：使用display:table 和 vertical-align: middle;

.parent {
    width: 300px;
    height: 300px;
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
}

 

6、css布局

• 盒模型（IE content包含border和padding）
• 流动模型（块状元素宽度100%  行内元素从小到大）
• 浮动模型
• 层模型（绝对定位、相对定位、固定定位）
• flex布局（子元素的float、clear和vertical-align失效）

7、css选择器

class、ID、*、元素、>(父元素的所有)、+（紧跟在元素后的）、[title~=flower]、p:first-child、p:nth-child()

 

三、关于JavaScript和jQuery

1、JavaScript的基本数据类型

string、boolean、null、undefined、number  

2、JavaScript中字符串和对象的相互转换(???)

3、get和post请求方式的区别

GET请求的数据会暴露在地址栏中,URL的编码格式采用的是ASCII编码，在使用GET请求时，传输数据会受到URL长度的限制。
POST请求的数据不会暴露在地址栏中，对于POST，由于不是URL传值，理论上是不会受限制的，但是实际上各个服务器会规定对POST提交数据大小进行限制，Apache、IIS都有各自的配置。
POST的安全性比GET的高。这里的安全是指真正的安全，而不同于上面GET提到的安全方法中的安全，上面提到的安全仅仅是不修改服务器的数据。比如，在进行登录操作，通过GET请求，用户名和密码都会暴露再URL上，因为登录页面有可能被浏览器缓存以及其他人查看浏览器的历史记录的原因，此时的用户名和密码就很容易被他人拿到了。除此之外，GET请求提交的数据还可能会造成Cross-site request frogery攻击；
HTTP中的GET，POST，SOAP协议都是在HTTP上运行的。

四、关于框架

 

五、关于其他

1、性能优化

• 减少请求资源大小或次数(压缩合并css/js、字体图标代表png图、图片延迟加载、用雪碧图、减少cookie、用json格式发送、避免使用iframe)
• 避免使用闭包
• 减少DOM操作，减少重绘和回流
• 避免嵌套和死循环