前端笔试题Q&A
这是一篇前端岗位笔试题,我总结了相应的答案。如有疏漏和错误,欢迎指出。
一、HTML部分
1.Doctype作用? 标准模式与兼容模式有什么区别?
<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令,可以避免不同浏览器以不同的模式来呈现文档。
标准模式(严格模式)用于呈现遵循最新标准的网页。
兼容模式(怪异/松散模式)页面以宽松的向后兼容的方式显示。
2.HTML5为什么只需要写<!DOCTYPE HTML>?
HTML5之前是基于SGML的,需要对DTD进行引用。而HTML5并不基于SGML,所以不需要DTD进行引用,但需要doctype来规范浏览器的行为。
3.行内元素有哪些?块级元素有哪些?空元素有哪些?
(1)行内元素有:a span img input select strong等
(2)块级元素有:div ul ol li h1 p等
(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的离线缓存有哪些?
二、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!
三、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(慎用)