前端笔试题Q&A

时间 2019-11-20

标签前端笔试 q&a 栏目快乐工作繁體版

原文原文链接

这是一篇前端岗位笔试题，我总结了相应的答案。若有疏漏和错误，欢迎指出。javascript

1、HTML部分css

1.Doctype做用？标准模式与兼容模式有什么区别?html

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪一个 HTML 版本进行编写的指令，能够避免不一样浏览器以不一样的模式来呈现文档。
标准模式（严格模式）用于呈现遵循最新标准的网页。
兼容模式（怪异/松散模式）页面以宽松的向后兼容的方式显示。前端

2.HTML5为何只须要写<!DOCTYPE HTML>？html5

HTML5以前是基于SGML的，须要对DTD进行引用。而HTML5并不基于SGML，因此不须要DTD进行引用，但须要doctype来规范浏览器的行为。java

3.行内元素有哪些？块级元素有哪些？空元素有哪些？node

（1）行内元素有：a span img input select strong等jquery

（2）块级元素有：div ul ol li h1 p等web

（3）空元素有：<br/><img/><hr/><link/><meta/><input/><source/><base/>等算法

4.页面导入样式时，使用link和import有什么区别？

（1）link属于XHTML标签，除了加载css外，还能够用于定义RSS，定义rel链接属性等做用，而@import是css提供的，只能用于加载css；

（2）页面被加载时，link就会被加载，而@import须要网页彻底载入之后才会加载。

（3）link是XHTML标签，无兼容问题；@import在低版本的浏览器不支持。

（4）link支持使用javascript控制DOM去改变样式；而@import不支持。

5.html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的兼容问题？

主要是关于图像，位置，存储，多任务等功能的增长。绘画canvas；音视频元素audio和video；
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；
sessionStorage的数据在浏览器关闭后自动删除；
增长语义化标签，如header,footer,nav,article,section等
增长了一些表单控件：calendar、date、time、email等
新的技术：webworker、websocket、Geolocation

html5移除了一些纯表现的元素：big、font、s、strike等；还移除了一些会影响性能的元素：frame、frameset。noframes

6.HTML5的离线缓存有哪些？

2、CSS部分

1.介绍一下CSS的盒子模型？

盒子模型（框模型）包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个元素。

它有两种模式，标准模式和怪异模式。
标准模式会被设置的padding撑开，而怪异模式则至关于将盒子的大小固定时，再将内容装入盒子，这样盒子的大小就不会被padding所撑开。
标准模式：盒子总宽度 = 内容区宽度 + padding + border + margin
怪异模式：盒子总宽度 = width + margin

2.CSS选择符有哪些？哪些属性能够继承？优先级算法如何计算？ CSS3新增伪类有哪些？

css选择符有以下：
1.元素选择符：*、类型选择符E、ID选择符E#id、类选择符E.class
2.关系选择符：包含选择符(E F)、子选择符(E>F)、相邻选择符(E~F)
3.属性选择符：E[att]、E[att='val']、E[~='val']、E[att^='val']、E[$='val']、E[*='val']、E[att|='val']
4.伪类选择符：E:link、E:visited、E:hover、E:active、E:focus、E:first-child、E:nth-child(n)等
5.伪对象选择符：E:first-letter、E:first-line、E:before、E:after、E::placeholder、E::selection

能够继承的样式有：font-size,font-family,color,text-indent
不能够继承的样式有：border,padding,margin,width,height

优先级算法：
1.就近原则，同权重状况样式定义最近者为准
2.载入样式以最后载入的样式为准
3.！important > id > class > tag
4.!important权重最高，其次内联样式，最后样式表样式

CSS3新增伪类有：
p:first-of-type p:only-of-type p:nth-child :enabled :checked等

3.如何居中div？如何居中一个浮动元素？

块级元素：
水平居中：设置宽度，左右外边距为auto
垂直居中：1.绝对定位法一：top:50%;margin-top:50%;
　　　　　2.绝对定位法二：top:50%;transform:translate(-50%,-50%);
　　　　 3.基于视口法： margin:50vh auto 0; transform: translateY(-50%);
　　　　 4.弹性盒子法：父元素：display:flex;　　子元素：margin:auto;

浮动元素：
1.计算法：啊哈，就是精确计算其外边距使其居中
2.包裹法：让一个div包裹该元素，而后让div居中

4.absolute的containing block计算方式跟正常流有什么不一样？

absolute的包含快是离之最近的position属性非static的祖先元素

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

6.display:inline-block 何时会显示间隙？

两个inline-block元素水平呈现时，中间如有空格或换行就会形成元素间有一块间隙。这并不是是bug而是符合规范的表现。
想查看去除这个空隙的方案，请戳这里 >> : chlick me!

3、JS部分

1.说几条写javascript的基本规范？

全部标签都应当闭合；使用tab键来进行缩进；减小全局变量；变量声明写在对应做用域的顶部；
使用有意义的命名；函数应该短小精悍，一个函数只作一件事；学会写注释.........
推荐查看书籍：《clean code》

2.null和undefined的区别？

null是一个表示“无”的对象，转成数值时为0；undefined是一个表示“无”的原始值，转成数值时为NaN。

3.node.js的适用场景？

node.js拥有很强的处理并发的能力，但处理计算和逻辑的能力反而很弱。
因此node.js适用于须要对高并发进行高性能处理时的情景。例如实时聊天，本地化的音乐应用。

4.介绍js的基本数据类型？

js的数据类型分为基本类型和引用类型。
基本类型有：number、string、boolean、null、undefined

5.['1','2','3'].map(parseInt) 答案是多少？

答案是 [1,NaN,NaN] 。

6.什么是闭包，为何要用它？

闭包是指有权访问另外一个函数做用域中变量的函数，建立闭包的最多见方式是在一个函数内建立另外一个函数，经过另外一个函数访问这个函数的局部变量，利用闭包能够突破做用域链，将函数内部的变量和方法传递到外部。

7.‘use strict’;是什么意思？使用它的好处和坏处分别是什么？

表示使用严格模式，经过严格模式，在函数内部选择进行较为严格的全局或局部的错误条件检测。

使用严格模式的好处是能够提前知道代码中存在的错误。
严格模式只有在js代码的第一行才会生效，多个js文件合并时可能会致使失效。

8.js延迟加载的方式有哪些？

1.使用setTimeout延迟方法的加载时间
2.将js文件放在页面的底部
3.在script标签中使用defer属性
4.在script标签中使用async属性
5.动态建立DOM方法
6.使用jquery的getScript()方法

9.如何解决跨域问题？

跨域问题：它是因为javascript语言安全限制中的同源策略形成的。
同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

解决办法：
1.使用跨域资源共享（CORS）
2.使用jsonp
3.document.domain + iframe
4.使用window.name + iframe
5.使用window.postMessage方法

10.json对象转成json字符，json字符转换成json对象的实现方法？

1.JSON.parse(jsonstr); //能够将json字符串转换成json对象2.JSON.stringify(jsonobj); //能够将json对象转换成json字符串3.使用 eval(); 将字符串转换成json（慎用）