web前端面试题
HTML
• HTML5新增了哪些内容或API，使用过哪些
Html5 的目的是将互联网内容语义化，更好的为人类和机器阅读，同时更好的支持各种媒体的嵌入。
新的API：
• HTML Geolocation //获取用户的地理位置
• HTML Drag and Drop
• HTML Local Storage
• HTML Application Cache
• HTML Web Workers
• HTML SSE // server-send events (单向的服务器向客户端推送信息)
• HTML Canvas/WebGL
• HTML Audio/Video
新的语义元素：
section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。
• input和textarea的区别
<input type="text" value="入门狗" size="10" Maxlength="15">
<textarea row="3" col="4">入门狗的博客园</textarea>
一个单行文本输入，一个多行文本输入。
• 用一个div模拟textarea的实现
#textarea {
width:300px;
border:1px solid #ccc;
min-height:150px;
max-height:300px;
overflow: auto;
font-size: 14px;
outline: none;
}
<div id="textarea" contenteditable="true"></div>
• 移动设备忽略将页面中的数字识别为电话号码的方法
<meta name=”format-detection” content=”telephone=no” />
-------------------------------------------------------------------
CSS
• 左右布局：左边定宽、右边自适应，不少于3种方法
.left{float:left}.right{width:100%}
.wapper{display:flex}.right{flex:1}
.left{float：left}.right{float:left;width”calu(100vw-200px)}
.right{margin-left:-100%}
• CSS3用过哪些新特性
CSS3 是CSS的升级版本，提供更加丰富且使用的规范：盒子模型，列表模块，超链接方式，语言模块，背景和边框，文字特效，多栏布局等等。
1.新的选择器
tbody:nth-child(even),tbody:nth-child(odd) //偶数行，奇数行。
：not(.textiput) //不是class为textinput的节点
div:first-child || last-child //div的第一个节点
2.新的特性
@font-face
用来加载字体样式，而且还能加载服务器的字体样式，让客户端显示没有安装的字体。
Word-wrap：break-down
设置文字到大容器边缘是否换行。
Text-overflow:clip | ellipsis (省略号)
设置当前行到达容器边缘时如何显示。
Text-decoration
{
Text-fill-color:文字内部填充颜色
Text-stroke-color:文字边界填充颜色
Text-stroke-width:文字边界宽度
}
3.CSS3多栏布局
column-count:表示布局几列
column-rule:表示列与列之间的间隔条样式
column-gap:表示列与列之间的间隔
4.边框和颜色
关于颜色css3已经提供了透明度的支持
color:rgba(255,0,0,0.75);
background:rgba(0,0,255,0.75);
其中a代表透明度。
还支持hsla(112,72%,33%,0.68)颜色申明方式及其透明度。
对于border,提供了圆角支持
border-radius:15px;
5.css3的渐变效果
-webkit-gradient();linear,radial
6.css3的阴影(shadow)和反射(reflect)效果
text-shadow:
box-shadow:
-webkit-box-reflect:below 10px;
7.背景(background)
背景的覆盖面
多图片背景：background:url() 10px center no-repeat,url() 10px center repeat-x;
8.css3的盒子模型
display:-webkit-box;
display:-moz-box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;// 实现div的水平排列
-webkit-box-flex:2 //设置div如何填充剩下的位置
-moz-box-flex:2
9.css3的transition，transforms和animation
transition
transitopn-property:用于指定过度的性质
transition-duration：用于指定这个过度持续的时间
transition-delay:用于指定延迟过度时间
transition-timing-function:用于指定过度类型
transforms
其实就是指拉伸、压缩、旋转、偏移等等一些图形学里的基本变换。
animation
让CSS脱离静止的前提。
• BFC、IFC
FC 定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位以及和其他元素的关系和相互作用。
IFC(行内格式上下文)
inline box 水平排列，水平方向上的margin,border和padding在框之间得到保留。
display：inline | inline-table | inline-block会形成IFC
BFC(块级格式上下文)
1.消除浮动
2.消除文字环绕，实现两栏布局
3.消除margin合并
满足以下条件形成BFC
float不为none，float：left | right
绝对定位元素，position:absolute | fixed;
非块级元素具有display:inline-block,table-caption,flex,inline-flex
块级元素具有overflow,且值 ！= visible
• 对栅格的理解
bootsrap通过CSS3的媒体查询语句来实现响应式的栅格布局。
1.布局容器
.container会利用媒体查询改变页面的宽度。
.container-fluid没有媒体查询，始终是100%的width,没有左右margin.
两类容器都有15px的内边距。
2.栅格系统
一行最多分为12列，利用float实现流动布局。
使用%宽度，让内容宽度平滑渐变。
使用媒体查询
• （水平）居中有哪些实现方式
行内元素，text-align:center;
块级元素，margin：0 auto;
• 1像素边框问题
设备物理像素可以理解为分辨率；设备独立像素为程序可以处理的像素(1:px)
如iphone6 的设备独立像素为(375*667)即显示屏的width*height,但是iphone6
的分辨率为 750*1334，即两个物理像素显示一个独立像素。
由于retina视网膜屏的设备物理像素/设备独立像素 = 2 或者更大，就会出现
边框为2的情况。
只有ios8+才支持0.5px，其余移动系统会显示为0px.
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
v = parseFloat(v);
return v * rem;
};
window.px2rem = function(v) {
v = parseFloat(v);
return v / rem;
};
window.dpr = dpr;
window.rem = rem;
-------------------------------------------------------------
Javascript
1.图片懒加载
图片的延迟加载的原理就是先不设置img的src属性，等合适的时机(比如滚动、
滑动)再把图片真实的url放到img的src属性上。
过多的图片会严重影响网页的加载速度，移动网络下的消耗巨大，而且新图片的
载入会导致页面重绘，延迟加载几乎是标配。
<1>移动还会涉及到图片元素的宽高比自适应的问题
<stylt> .lazyload{width:100%;height:0;padding-top:75%;background-size:100%} </style>
当margin/padding取形式为百分比的值时，无论是left/right,还是top/bottom
都是以父元素的width为参照物。
<2><img>标签并不会在网页中插入图像，而是从网页中链接图像。
<img>创建的是被引用图像的占位空间。
lazysizes
<script src="lazysizes.min.js" async=""></script> // 非响应式 例子 <img data-src="image.jpg" class="lazyload" /> // 响应式 例子，自动计算合适的图片data-srcset相应加载最适应的图片 <img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" class="lazyload" />
2.实现页面加载进度条
目前没有任何浏览器可以直接获取正在加载对象的大小，所以无法通过数据的小大
来实现0-100%的显示加载过程。
解决方案是在页面中设置节点，当加载到设置的节点时显示相应的加载进度。
<body> <div class = 'loading'></div> <div id="header"> 页头部分 </div> <script type="text/javascript"> $('.loading').animate({'width':'33%'},50); //第一个进度节点 </script> <div id="mainpage"> 左侧内容 </div> <script type="text/javascript"> $('.loading').animate({'width':'55%'},50); //第二个进度节点 </script> <div id="sider"> 右边侧栏 </div> <script type="text/javascript"> $('.loading').animate({'width':'80%'},50); //第三个进度节点 </script> <div id="footer"> 页脚部分 </div> <script type="text/javascript"> $('.loading').animate({'width':'100%'},50); //第四个进度节点 </script> </body> .loading{ background:#FF6100; //设置进度条的颜色 height:5px; //设置进度条的高度 position:fixed; //设定进度条跟随屏幕滚动 top:0; //将进度条固定在页面顶部 z-index:99999 //提高进度条的优先层级，避免被其他层遮挡 }
3.事件委托
事件捕获，与事件冒泡。在父元素响应事件。
4.实现extend函数
var isObj = function (o) {
return Object.prototype.toString.call(o) === "[object Object]";
}
_$.fn.extend = function (obj) {
if (isObj(obj)) {
for (var i in obj) {
this[i] = obj[i];
}
}
};
5.为什么会有跨域的问题以及解决方式
同源策略：允许浏览器某个网页上的js 请求来自另外一个网页的数据，当且仅
当两个网页来自相同的域。它是出于安全性考虑，为避免XSS跨站点
脚本攻击和CSRF跨站点请求伪造。
当一个网页的ajax请求一个不在自身域的数据时，即为跨域请求。
域：由协议内型，域名，端口号组成，任何一个不同都会形成跨域。
解决方案：
1.jsonp
<script src =''>请求方式可以绕过同源策略，请求的同时将解析函数传过去 <script type="application/javascript" src="http://server.demo.com/Users/1234?callback=parseResponse"></script> parseResponse({"Name": "Foo", "Id": 1234, "Rank": 7});
2.跨域资源共享(CORS)
1.简单请求
浏览器发现ajax是简单的跨域请求，就会自动在头信息之中添加一个Origin
字段，用来说明本次请求来自哪个域，服务器根据这个值，决定是否同意这次
请求。如果他服务器同意，则会响应头部添加Access-Control-Allow-Origin
字段，表示同意跨域请求。
2.复杂请求
比简单请求多一个预检查请求。
6.jsonp原理、postMessage原理
postMessage 用作跨域通信。postMessage实现跨域的话原理就类似于jsonp，动态插入iframe标签，再从iframe里面拿回数据。
iframe是HTML内联的框架元素，表示嵌套的浏览上下文，有效地将另一个HTML页面
嵌入到当前页面中。
7.实现拖拽功能，比如把5个兄弟节点中的最后一个节点拖拽到节点1和节点2之间
8.动画：setTimeout何时执行，requestAnimationFrame的优点
实际上浏览器负责进行排序，指派某段程序在某个时间点运行的优先级。单线程
强制资源不共享，所以到了某个时间点，还得等当前的程序执行完，所以设置的时间并不精确。
1)requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。2)在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
9.手写parseInt的实现：要求简单一些，把字符串型的数字转化为真正的数字即可,但不能使用JS原生的字符串转数字的API，比如Number()
10.编写分页器组件的时候，为了减少服务端查询次数，点击“下一页”怎样能确保还有数据可以加载（请求数据不会为空）？
11.ES6新增了哪些特性，使用过哪些，也有当场看代码说输出结果的
（1）指定参数的默认值
（2）模板表达式，在字符串中嵌入变量
（3）多行字符串
（4）拆包表达式
（5）对象表达式
（6）箭头函数
（7）promise对象
（8）块级作用域的let和const
（9） ES6中的类class
（10）ES6中的模块化 export，import
ES6新特性使javascript 更加简洁优雅。
12.JS模块化的实践
js按<script>标签分块，并且按块加载执行，因此一个在一个js块中引用下一个js块的内容会
出现错误，但是不同的快都属于一个全局作用域，也就是块与块之间的变量和函数是可以共享的。
单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。
从单页应用的特点来看，它比页面型网站更加依赖于JavaScript，而由于页面的单页化，各种子功能的JavaScript代码聚集到了同一个作用域，所以代码的隔离、模块化变得很重要。
1.基本对象实现命名空间的划分
缺点没有私有属性，都可以随意修改该模块。
var util = { _prefix:'我想说：', log:function(msg){ console.log(_prefix +msg)} /* 其他工具函数 */ };
2.闭包立即执行函数，实现私有变量和模块化
缺点：加载次序问题，依赖关系问题。
1 var util = (function(window){ 2 var _prefix = '我想说：'; 3 return { 4 log:function(msg){ console.log(_prefix +msg)} 5 } })(window);
3.模块加载器，AMD(Asynchronous Module Definition)require.js，CMD(Common
Module Definition)sea.js
CMD（用时会自动加载）
define(function(require, exports, module){ var _prefix = '我想说：'; module.exports = { log:function(msg){ console.log(_prefix +msg)} } }) ///main.js define(function(require, exports, module){ var util = require('util') util.log('我是模块主代码，我加载好了') })
///index.html <html> <head> <script src="seajs.js"></script> </head> <body> <script type='text/javascript'> seajs.use(["main"]) </script> </body> </html>
AMD
<script src="js/require.js" defer async="true" ></script>
<script src="js/require.js" data-main="js/main"></script>
main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
math.js 定义模块
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};});
main.js引入模块
require(['math'], function (math){
alert(math.add(1,1));
});
异同：sea.js是使用时加载，require.js是异步按依赖次序加载。
13.require.js的实现原理（如果使用过webpack，进一步会问，两者打包的异同及优缺点）
目的：
（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。
webpack
对应不同文件类型的资源，webpack有对应的模块 loader ，比如对于 less， 使用的是 less-loader，你可以在这里找到 所有loader. webpack 具有requireJS 和 browserify 的功能，但仍有自己的新特性： 1、对 CommonJS、AMD、ES6的语法做了兼容； 2、对js、css、图片等资源文件都支持打包； 3、串联式模块加载器以及插件机制让其具有更好的灵活性和拓展性，例如对 coffeeScript、ES6的支持； 4、有独立的配置文件 webpack.config.js;
5、可以将代码切割成不同 chunk，实现按需加载，降低了初始化时间； 6、支持 SourceUrls 和 SourceMaps，易于调试； 7、具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活； 8、webpack 使用异步 IO 并具有多级缓存，使得 webpack 在增量编译上更快！
14.promise的实现原理，进一步会问async、await是否使用过
promise对象对异步调用流程进行管理。
1.异步任务返回一个promise对象
2.使用then方法添加回调函数
function search(term) { var url = 'http://example.com/search?q=' + term; var xhr = new XMLHttpRequest(); var result; var p = new Promise(function (resolve, reject) { xhr.open('GET', url, true); xhr.onload = function (e) { if (this.status === 200) { result = JSON.parse(this.responseText); resolve(result); } }; xhr.onerror = function (e) { reject(e); }; xhr.send(); }); return p; } search("Hello World").then(console.log, console.error);
链式调用接收前一个回调函数的返回值。
15.实现gulp的功能
16.使用前端框架（angular/vue/react）带来哪些好处，相对于使用jQuery
17.vue双向数据绑定的实现
18.单页应用，如何实现其路由功能
