web前端面经

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/JaRiS_jade/article/details/79913043

一、http和https的区别

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

https和http的区别主要如下：
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

二、http和https哪个请求更快？

http。

原因：
1、https协议握手阶段比较费时，需要身份认证等（客户端发送请求，服务端返回证书公钥，客户端随机产生对称秘钥，使用公钥对秘钥加密再发送给服务端），会使页面的加载时间延长近50%，增加耗电。
2、https连接缓存不如http高效。

三、flex的了解

http://www.runoob.com/w3cnote/flex-grammar.html

四、html5

1. HTML5 一些新的规则：
   新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
   减少对外部插件的需求（比如 Flash）
   更优秀的错误处理
   更多取代脚本的标记（新增了一些语义化的标签： 在HTML4当中，很明显的一个形象就是用DIV来进行任何的布局。）
   HTML5 应该独立于设备 （对于各个移动设备说来，也是完美兼容的）
   开发进程应对公众透明 。

2. 新特性：
   HTML5 中的一些有趣的新特性：
   新的特殊内容元素，比如 article、footer、header、nav、section
   新的表单控件，比如 calendar、date、time、email、url、search
   用于媒介回放的 video 和 audio 元素
   用于绘画的 canvas 元素
   对本地离线存储的更好的支持

3. HTML5新增标签（常用的）
   如何去理解标签：
   （1） 基本语境（语义化），用在场景是什么？
   （2） 默认样式、是否块/行内元素、是否是闭合元素。

1.header 页眉（网页（部分区域）的头部 顶部 导航区域等等），闭合标签；块元素；
默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性； 

2.nav 导航链接部分；闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟 DIV标签，可以说是完全一样的特性。 

3.section 标签定义网页中的区域（部分）。比如章节、页眉、页脚或文档中的其他部分。闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性； 

4.footer 页脚（网页（部分区域）的底部|版权区域等等），闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性； 

5.article 内容是引用其他地方的。一个区域中的，另外一部分内容；闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性 

6.aside 跟 article 是一起使用；是辅助 article 区域的内容。也可以理解为整个网页的辅助区域；（最常见的京东的右侧的工具栏） 

7.hgroup 给标题分组，为标题或者子标题进行分组，通常与h1-h6元素组合使用。如果文章中只有一个标题，则不使用hgroup。 
闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性； 

8.figure 对多个元素进行组合。通常与figcaption联合使用。
闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上跟DIV标签，可以说是完全一样的特性；

9.figcaption 定义figure元素组的标题，必须写在figure元素中。一个figure元素内最多只允许放置一个figcaption元素。闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性； 

10.audio 播放声音文件，比如音乐或其它音频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
闭合标签；行内元素；默认的宽:controls的宽度300px；高:controls的高度32px；autoplay:autoplay 如果出现该属性，则音频在就绪后马上播放。controls:controls 如果出现该属性，则向用户显示控件，比如播放按钮。preload:preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。src:url 要播放的音频的 URL。 

11.video 播放视频文件，比如电影或其它视频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
闭合标签；行内元素；默认的宽：300px 高：150px。
autoplay:autoplay 如果出现该属性，则视频在就绪后马上播放。controls:controls 如果出现该属性，则向用户显示控件，比如播放按钮。height 设置视频播放器的高度。loop:loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。preload:preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。src:url 要播放的视频的 URL。width 设置视频播放器的宽度。 

12.source为媒介元素（比如 video 和 audio）指定多个播放格式与编码，浏览器会自动选择第一个可以识别的格式。
非闭合标签，只有开始标签，没有结束标签。source 行内元素，默认无宽度和高度。media 定义媒介资源的类型，供浏览器决定是否下载。src 媒介的 URL。type 定义播放器在音频流中的什么位置开始播放。默认，音频从开头播放。 

13.canvas定义图形，比如图表和其他图像。 
闭合标签；行内元素；默认情况下，canvas创建的画布宽：300px;高：150px; 

14.datalist 定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。 
闭合标签；行内元素；默认无宽度和高度。 

15.embed 定义嵌入的内容，比如插件。用来插入各种多媒体，格式可以是MIDI、MP3等。 
非闭合标签，只有开始标签，没有结束标签。行内元素；默认的宽：300px；高：150px。 

16.time 定义日期或时间，或者两者。闭合标签；行内元素，默认情况下，宽：内容的宽度；高：内容的高度； 

17.address 为文档或 section 定义联系信息，比如：电子邮箱、地址、电话、QQ、微信号等。 
闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性； 

18.map定义客户端的图像映射。图像映射是带有可点击区域的图像。 
闭合标签；行内元素；默认情况下，无宽度和高度； 

19.area area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。 
闭合标签，行内元素；只有结束标签，没有开始标签。默认情况下，无宽度和高度； 

20.mark定义页面中需要突出显示或高亮显示的内容，通常在引用原文时，使用此元素，目的就是引起当前用户的注意。
闭合标签；行内元素；默认情况下，宽：内容的宽度；高：内容的高度； 

21.details 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。(备注信息)，
块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性； 但是有一个动态的效果，点击可以显示(展开)内容，再点击可以隐藏(收起)内容； 

五、localstorage和sessionstorage

localStorage ：存储的数据没有时间限制（一般浏览器支持每条数据存储空间5M）。第二天、第二周或下一年之后，数据依然可用。
sessionStorage ：针对一个 session 进行数据存储（一般浏览器支持每条数据存储空间5M）。当用户关闭浏览器窗口后，数据会被删除。

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储（每条cookie的存储空间为4k），因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。

六、移动端有什么事件

1、touchstart：当手指触碰到屏幕的时候触发
2、touchmove：当手指在屏幕上滑动的时候触发
3、touchend：当手指离开屏幕的时候时候触发

七、click和tap的区别

两者都会在点击时触发，但是在web手机端，click会有200-300ms的延时，所以要用tap代替click作为点击事件，singleTap和doubleTap分别作为单次点击和双击，但是使用tap会带来点透事件(事件穿透)。
执行完上层绑定的tap事件后，下层如果绑定这click事件或者本身就存在点击事件（a/input）也会默认触发，这就是tap点透事件。
click是点，tap是有范围的两次click（点击穿透）。

下面正规解释下tap点透事件发生的场景：
当A/B两个层上下Z轴叠层，上层的A点击后消失或者移开（原因接下来会讲），当B元素本身默认有click事件或者绑定click事件，这种情况下，点击A/B重叠的部分，就会出现点透事件

点透现象出现的原因：

首先要知道tap事件是通过监听绑定document上的touch事件来模拟的，并且tap事件是冒泡到document上才触发的；
touchstart：在这个dom上用手触摸就能开始
click：在这个dom上用手触摸，且手指未曾移动，且在这个dom上手指离开屏幕，且触摸和离开时间很短（有的浏览器可能不检测时间间隔，照样可以触发click），才开始触发。

也就是说在移动端的事件触发从早到晚排序：touchstart touchstop click 。 所以click的触发是有延时的，about 300ms。

由于我们在touchstart阶段就已经隐藏了A，当click被触发时，能够被点击的就是B。

click事件的触发规则：

触发当前有click的元素，且该元素面朝用户的最前端，才会触发click。
上面B中，由于B绑定了click或者B本身存在click，所以B也被触发了，（因为在touchstart阶段就已经隐藏了A），于是就产生了点透事件。

点透事件的解决方法：

1.github上有一个叫做fastclick的库https://github.com/ftlabs/fastclick

$(function(){  
    new FastClick(document.body);  
});

然后给需要的元素绑定click事件，这样就不会延时啦，据说还会比tap更快。

2.为元素绑定touchend事件，并在内部加上e.preventDefault();

$A.on('touchend',function(e){//而touchend是原生的事件，在dom本身上就会被捕获触发  
    $demo.hide(); 
    e.preventDefault();  
});

监听touchend事件，阻止A元素的touchend的默认行为，从而阻止click事件的产生。

八、ES6比ES5多了什么

1、默认参数
（避免参数为0时，用了默认参数：

var demo = function(width,height){
    var width = width || 10;
    var height = height || 10;
    ...

）

var demo = function(width = 10,height = 10){
    ...
}

2、模板表达式
在反引号包裹的字符串中，使用$(NAME)语法来表示模板字符：

var first = 'jaris';
var name = `My name is ${first}`;

3、多行字符串
利用反引号实现多行字符串

var str = `hi,man!
           how are you?`;

4、拆包表达式
假如说你有一个简单的赋值表达式，把对象中的house和mouse赋值为house和mouse的变量。

var data = $('body').data(),//假设data中有mouse和house
house = data.house,
mouse = data.mouse;

另一个拆包的实例（Node.js)：

var jsonMiddleware = require('body-parser').json;
var body = req.body,//body中有用户名和密码值
username = body.username,
password = body.password;

但在ES6中我们可以用以下语句替换：

var { house,mouse } = $('body').data();
var {jsonMiddleware} = require('body-parser');
var {username,password} = req.body;

//数组中也能用
var [col1,col2] = $('.column'),
[line1,line2,line3,line5] = file.split('n');

5、改进的对象表达式
6、箭头函数
使用箭头函数可以让我们不再用that = this或者self = this或者_this = this或者.bind(this)这样的代码

$('.btn').click((e)=>{
    ...
});

7、Promise
eg：延迟setTimeout

setTimeout(function(){
    console.log('Hi!');
    setTimeout(function(){
        console.log('World!');
    },1000);
},1000);

用ES6中的Promise重写：

var wait =()=>new Promise((resolve,reject)={setTimeout(resolve,1000)});
wait()
    .then(function(){
        console.log('Hi!');
        return wait();
    })
    .then(function(){
        console.log('World!');
    });

8、块级作用域let和const
let是一个更新的var，可以让你把变量作用域限制在当前块里。我们用{}来定义块，但是在ES5中这些花括号起不到任何作用。

9、类
方法名不用加上function了，且参数都用默认参数；
可使用 NAME extends PARENT_NAME语法，继承类；

class baseModel {
    constructor(options = {},data=[]){//构造函数
        this.name = 'Base';
        this.options = options;
        this.data = data;
    }
    getName(){
        console.log(`Class name:${this.name}`);
    }
}
//继承类
class aModel extends baseModel{
    constructor(options,data){
        ...

调用父类构造函数时，只需带上参数调用super()方法。

super({private:true},['123','321']);

10、模块化
ES6之前JavaScript并没有对模块化有过原生的支持。AMD，RequireJS，CommenJS等等，现在终于有import和export运算符来实现了。
export 暴露模块module：

export function fn(){
    ...
}
export var port = 8080;

import引用模块,用import {名称} from ‘模块’语法：

import {fn,port} form 'module';

九、怎么封装组件

用sea.js引用封装的组件。

十、css怎么做到兼容各大浏览器

https://blog.csdn.net/websoftware/article/details/50127001

十一、响应式布局怎么实现

1.bootstrap的栅格布局
2.display:flex
3.@media 媒体查询

十二、当你打开浏览器时，页面一篇空白，是为什么？

因为js代码写在前面（浏览器有两个引擎，一个是html引擎，一个是js引擎；js引擎优先级比html引擎高，所以js写前面会导致先解析完js代码，才渲染html元素）。