前端面试（简答）2

以下是需要知道的，加油吧朋友 T T

HTML&CSS：
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、
HTML5、CSS3、Flexbox

JavaScript：
数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、
DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs

其他：
移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力

1 Doctype作用？标准模式与兼容模式各有什么区别?

2 html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
（1）HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websockt, Geolocation;

（2）移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；

（3）支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
当然最好的方式是直接使用成熟的框架、比如html5shim;

<!--[if lt IE 9]>
        <script>     src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
 <![endif]-->

3 行内元素有哪些？块级元素有哪些？空(void)元素有那些？
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：
br hr img input link meta
鲜为人知的是：
area base col command embed keygen param source track wbr

4 iframe缺点
iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

5 如何实现浏览器内多个标签页之间的通信? (阿里)
调用localstorge、cookies等本地存储方式

6 如何在页面上实现一个圆形的可点击区域？
（1）map+area或者svg
（2）border-radius
（3）纯js实现需要求一个点在不在圆上简单算法、获取鼠标座标等等

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:#ccc"></div>

7 css3新增伪类有那些？
p:first-of-type 选择属于其父元素的首个p 元素的每个p元素。
p:last-of-type 选择属于其父元素的最后p 元素的每个p 元素。
p:only-of-type 选择属于其父元素唯一的p 元素的每个p元素。
p:only-child 选择属于其父元素的唯一子元素的每个p 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个p元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

8 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？有待验证
居中div用 margin:0 auto;这里不说了
居中浮动元素

 确定容器的宽高 宽500 高 300 的层
  设置层的外边距

 .div {
      width:500px ; height:300px;//高度可以不设
      margin: -150px 0 0 -250px;
      position:relative;         //相对定位
      background-color:pink;     //方便看效果
      left:50%;
      top:50%;
 }

居中绝对定位元素

  position: absolute;
  width: 1200px;
  background: none;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

9 CSS3有哪些新特性？

10 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？有待解决

11 用纯CSS创建一个三角形的原理是什么？有待验证

把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

12 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
出现问题前提：前提是需要将li标签设置为display:inline-block;
较为可信的原因是：浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格
参考：http://www.iyaxi.com/2016-06-30/1019.html

13 DOMContentLoaded 与onload区别
当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。
当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。

14 position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

15 移动端的布局用过媒体查询吗？

16 encodeURIComponent
encodeURIComponent() 函数与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。
而encodeURI() 目的是对 URI 进行完整的编码，因此对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的：;/?:@&=+$,#

encodeURI("http://www.w3school.com.cn/My first/")
// "http://www.w3school.com.cn/My%20first/"
encodeURIComponent("http://www.w3school.com.cn/My first/")
// "http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F"

17 JSON转换

var person={"name":"zhangsan","sex":"男","age":"24"}//json对象
var person='{"name":"zhangsan","sex":"男","age":"24"}';//json字符串

json字符串转json对象,调用parse方法：
var person='{"name":"zhangsan","sex":"男","age":"24"}';//json字符串
var personObject = JSON.parse(person);

json对象转为json字符串，调用stringify方法：
var person={"name":"zhangsan","sex":"男","age":"24"};//json对象
var personString = JSON.stringify(person);

18 简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

19 什么是CSS Hack?
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。

    // 1、条件Hack
   <!--[if IE]>
      <style>
            .test{color:red;}
      </style>
   <![endif]-->
   // 2、属性Hack
    .test{
    color:#090\9; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
    }
   // 3、选择符Hack
    * html .test{color:#090;}       /* For IE6 and earlier */
    * + html .test{color:#ff0;}     /* For IE7 */

20、如何将伪数组转化为标准数组？
典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

21、bgcolor背景色会渲染哪些？
会渲染content、padding、border
把border样式设为dotted或有透明度的，就能看到背景色了

22、


(function() {
var x=foo();
var foo=function foo() {
return “foobar”
};
return x;
})();

输出 TypeError
因为变量提升，但是函数表达式不会提升。
x在foo之前定义，此时foo是undefined。运行到x = foo（）；时，当然会报错。
如果把x定义放在foo的后面，就不会报错。

23、==
JS在做==运算时会将操作数转换为Number类型之后再操作，而’ ‘，false，0，[]都能转换为为数字类型0，而{}却转换不了，转换后为NaN,而NaN做任何运算返回都是false

24、

["1", "2", "3"].map(parseInt);
//结果不是想象中的[1，2，3]

map有三个参数val, index, arr
parseInt 要两个参数，所以执行的是parseInt(val, index)

parseInt("1", 0, ["1", "2", "3"]);
parseInt("2", 1, ["1", "2", "3"]);
parseInt("3", 2, ["1", "2", "3"]);
// 而我们根据parseInt函数的语法, 得知最后一个参数将直接被忽略
// 于是原题, 相当于这样
parseInt("1", 0); // 这是特例, 按照 0 进制转成数, 直接得本身
parseInt("2", 1); // 直接NaN, 因为计数的进制至少也是 2 进制
parseInt("3", 2); // 也是NaN, 右边参数是2, 大家千万不要理解成
// 把10进制的3转成2进制是多少? No, 大错特错.

// 正确的理解是, 右边参数是2, 函数会认为左边的字符串参数是由0, 1
// 等组成的2进制数, 结果发现出现了3, 无法转换, 结果就是NaN
// 像这样才能正常输出console.log(parseInt("10", 2)); // 2

25、px,em,rem,vh,vm区别
px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

26、requestAnimationFrame作用和应用场景
http://www.cnblogs.com/xiaohuochai/p/5777186.html
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。。
如果您想在下一个重绘时为另一个框架设置动画，您的回调例程必须调用 requestAnimationFrame()。
…………………………
用它可以实现间隔渲染，得到流畅的动画，
它可以取代计时器来做动画

27、网站登录态如何保持？完整登录态如何实现？
cookie和session都可以用来保存登录态。
COOKIE由于存储在客户端,有被随意篡改的风险。所以如果用cookie需要加密，并且可以被识别，但不可以解密。需要将它发到服务器端进行比较或解密。
所以其实服务器判断用户登陆状态,一般都是用SESSION的…SESSION的数据存储在服务器中,但是必须通过客户端的COOKIE来找到对应的SESSION。

所以用户登录的过程实际上是
1:用户输入用户名密码,POST数据到服务器
2:服务器判断用户名密码是否正确,若正确,则在客户端创建一个存储SESSION_ID的COOKIE,并且在服务器中创建一个相对应的SESSION_ID的SESSION,SESSION里面的数据可能为用户的数据
3:以后该用户进行操作时,先从客户端取出SESSION_ID,找到服务器相对应的SESSION,取出数据,进行校验后再进行下一步操作

28、JSONP跨域设置cookie

29、CORS跨域
阮一峰大神写的CORS

php设置两个网址来的请求可以跨域：

$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; 

$allow_origin = array( 
 'http://blog.pkcms.cn', 
 'http://blog.pkcms.cn' 
); 

if(in_array($origin, $allow_origin)){ 
 header('Access-Control-Allow-Origin:'.$origin); 
 header('Access-Control-Allow-Methods:POST'); 
 header('Access-Control-Allow-Headers:x-requested-with,content-type'); 
}

29、为什么利用多个域名来存储网站资源会更有效?
1、CDN缓存更方便

2、突破浏览器并发限制

3、节约cookie带宽

4、节约主域名的连接数，优化页面响应速度

5、防止不必要的安全问题

30、websocket
简单讲解demo

hcy48

发布了36 篇原创文章 · 获赞 6 · 访问量 1万+

私信关注

前端面试（简答）2

如何使用 JS 判断用户是否处于活跃状态

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

❤️‍🔥 Solon Cloud Event 新的事务特性与应用

Bootstrap學習小小小小筆記

前端面試（計算機網絡、數據算法、Linux）

jQuery中以0/1編號

【轉】常見瀏覽器兼容

AngularJS學習筆記

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結