前端面试题(一)

1. 在html中，position取值有哪几种，默认值是什么？

position的几种属性值：static, relative, absolute, fixed, inherit

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

 结构层（html）   表现层（CSS） 行为层（javascript）

3. 页面布局中常听说的“结构与表现”分离，“结构”是指？“表现”是指？

 HTML标签给予内容含义。CSS表现层则是定义您的HTML该如何显示。JavaScript行为层为页面增加交互。

4. 怎么样从web前端方面优化性能？至少列举5点？

<1>减少http请求    <2>使用浏览器缓存   <3>服务器端启用压缩   <4>精简CSS和js文件   <5>CSS放在页面的最上面，JS放在页面的最下面  <6>使用JSON数据格式   <7>减少对DOM的操作  <8>减少Cookie传输  <9>使用CDN加速

 

5. 原型 原型链 闭包 es6 状态码 ajax 跨域

 

6.一个网页从地址栏输入url到最后在浏览器中显示，中间经过了那些过程？

<1>网络通信     <2>页面渲染

 

7.怎么判断一个东西是数组？

Object.prototype.toString

 

8.XSS和CSRF是什么？

XSS攻击全称跨站脚本攻击     CSRF 跨站请求伪造

 

9.什么是重绘？什么是重排？

重绘：repaint  当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。

重排：reflow   如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。

 

10.跨域问题怎么解决？

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域 。

<1>使用jsonp  <2>使用jQuery的jsonp插件  <3> 使用跨域访问技术CORS  <4>nginx反向代理

 

11.怎么让一个盒子垂直居中

方法1:宽度和高度已知的。             思路： 给父元素相对定位     给子元素绝对定位     left: 50%;top: 50%;    margin-left: 负的宽度一半。  margin-top: 负的高度一半；

方法2：宽度和高度自己未知            意思就是说子盒子本身还是有宽度和高度的，只是自己未知。 思路： 给父盒子相对定位   给子盒子绝对定位     top、right、bottom、left全为0     margin: auto;

方法3：flex布局

方法4：平移

 

12. javascript数据类型有哪几种？

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）

 

13.什么是http？get请求和post请求的区别

http://www.w3school.com.cn/tags/html_ref_httpmethods.asp

1.get是从服务器上获取数据的请求，post是向服务器传送数据的请求 

2.get传送的数据量较小，post可以传递的数据比get多 

3.get安全性低，post安全性较高，但执行效率比post好