LinDaiDai的 2019 面试准备

时间  2019-11-16
标签 lindaidai 面试 准备 栏目 快乐工作 繁體版
原文   原文链接

前言

最近在掘金上刷到jsliang小伙的一篇文章jsliang 的 2019 面试准备,深受启发,恰巧本身最近也在准备面试,因此趁着此黄金时期写下此文章,作一些前端方面的总结,巩固知识的同时也但愿对行走在路上的大家有所帮助。javascript

1.HTML

1. 什么是HTML5?

首先,咱们知道HTML5其实就是对HTML标准的第五次修改,咱们广义上说的HTML5,实际是包过HTML,CSS,JavaScript在内的一套技术组合.css

它的主要目标呢就是将互联网语义话,以便更好的被人类还有机器阅读,同时可以更好地支持各类媒体的嵌入,好比图片,连接,音乐等非文字元素.html

我认为,它有俩大特色:首先,强化了web网页的表现性能.其次,追加了本地数据库等web应用的功能,提供了更多能支持网络应用的标准集.前端

拓展:vue

web数据库?

web数据库呢实际上就是以web查询接口方式访问的数据库资源,它将数据库技术和web技术融合在一块儿,使数据库成为了web的重要有机组成部分.html5

它的工做过程能够简单的描述成:用户经过浏览器的操做界面以交互的方式经由web服务器来访问数据库.java

web?

万维网的简称web,node

Web的工做步骤以下。webpack

（1）用户打开客户端计算机中的浏览器软件（例如Internet Explorer）。css3

（2）用户输入要启动的Web主页的URL地址，浏览器将生成一个HTTP请求。

（3）浏览器链接到指定的Web服务器，并发送HTTP请求。

（4）Web服务器接到HTTP请求，根据请求的内容不一样做相应的处理，再将网页以HTML文件格式发回给浏览器。

（5）浏览器将网页显示到屏幕上。

HTML语言?

超文本标记语言,就是建立网页的计算机语言 HTML(Hyper Text Markup Language)

咱们所说的网页其实就是一个HTML文档,文档内容由文本和HTML标记组成,扩展名是.html或.htm

HTML标记:它的做用是告诉浏览器咱们页面的结构和格式.若是将特定的英文单词放入标记中就是标签

HTML程序:放在中,由文件头和文件体组成.

HTML规范:也就是HTML标准,是由W3C(万维网联盟)制定的.

HTML程序的编辑环境:任何文本编辑器.

HTML程序的运行环境:任何的浏览器

XML语言?

可拓展标记语言,是用来定义其它语言的一种元语言.

XML文档,由字符数据和标记组成.它的语义约束是DTD

DTD?

文档类型定义,基本格式:

咱们知道浏览器解析css的俩种模式是: 标准模式和怪异模式

标准模式是指按w3c的标准解析执行代码,而怪异模式是指浏览器按它本身的方式解析执行.

而浏览器以哪一种模式解释就是与你网页中的DTD声明有关.

若没有写DTD的话会使页面进入怪异模式.

HTML5不须要DTD?

由于HTML5没有使用SGML或者XHTML,是一个全新的东西,因此不须要参考DTD

HTML和XML区别?

结构上大体相同,本质上不一样:

1.语法要求不一样,html中不区分大小写,xml中更严格.

2.标记不一样,html使用固有的标记,xml没有固有的标记.

3.做用不一样,html显示数据,xml描述数据,盛放数据.

注:

XML不是HTML的替代品,由于它们是俩种不一样用途的语言.

XHTML和HTML?

XHTML是更严格更纯净的 HTML 版本,但如今已经再也不使用XHTML。

.html? .htm?

.htm与.html没有本质上的区别,表示的是同一种文件,只是适用于不一样的环境之下.DOS(磁盘操做系统)只能识别8 + 3的文件名,因此只能识别.htm而不能识别.html

2. HTML5与HTML4或更早的HTML的区别

1.文档声明上:html4比较复杂,而html5只有一小段<!DOCTYPE html>

2.结构语义上:html4没有体现语义化的标签,而html5有

3.同时h5又新添了不少表单元素的属性和类型

4.功能上HTML5更增强大,好比能够利用canvas标签配合js来实现绘图功能,也好比新增的视频标签video,以及新增的表单元素类型,像email,number,range,data等

H5新特性?

1.新的文档类型

2.脚本和连接无需type

3.语义标签Header和Footer

4.Hgroup标签，对h1~h6进行分组。

5.标记元素mark高亮标签

6.图形元素figure和figcaption

7.新的表单控件，好比data,number,range,color等等

8.新的表单属性，好比autofocus、autocomplete、multiple、 placeholder、pattern等等

9.新的功能性标签：audio、vidio

10.强大的绘图标签canvas

11.离线存储localstorage和sessionstorage

css3新特性？
  1. CSS3实现圆角（border-radius），阴影（box-shadow），
  2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
  3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
  4. 增长了更多的CSS选择器 多背景 rgba
  5. 在CSS3中惟一引入的伪元素是 ::selection.
  6. 媒体查询，多栏布局
  7. border-image
ES6新特性？

1.默认参数

2.字符串模板

3.多行字符串

4.拆包表达式

5.改进的对象表达式

6.箭头函数

H5的离线储存?

离线存储表示的是用户没有与因特网连接时,能够正常访问站点或应用.

原理是基于一个新建的.appcache文件的缓存机制,经过这个文件上的解析清单离线存储资源,这些资源就会像cookie同样被保存下来,当在没有网络的状况下,浏览器就会经过被离线存储的数据进行页面展现.

在咱们H5中提供了俩种在客户端存储数据的新方法:

localStorage和sessionStorage

而在这以前呢,这些功能都是由cookie完成的,只不过cookie的存储量过小了最多也才4k,因此不适合大量数据的存储.

cookie

设置cookie

document.cookie = "user=wangxiansheng"
alert(document.cookie)
复制代码

设置过时时间

//expires:过时时间, 接受一个日期对象
        var d  = new Date()
        d.setTime(d.getTime() + 2 * 24 * 60 * 60 * 1000)
        var expires = d.toUTCString();
        //一个条目包含保存的键值对和过时时间
        document.cookie = `demo=wangpei;expires=${expires}`;
        console.log(document.cookie);
复制代码
localStorage和sessionStorage?

它们俩都是H5新添的离线存储方法,而且两种方式保存的数据都仅限于该页面的协议,但不一样之处在于:

localStorage它的存储没有时间限制,一周或者一个月一年,数据仍然存在.

而sessionStorage里面存储的数据会在浏览器会话结束时被清除

在兼容性上,各浏览器支持localStorage和sessionStorage的容量上限不一样.在ie8以上是支持的,不包过ie8.

chrome4支持localStorage,chrome5支持sessionStorage.

cookie与它俩的区别?

第一点,在存储量上,cookie过小了,最多只能存储4K.

第二点,cookie能够设置过时时间,若是没有设置则默认是在关闭窗口或者回话窗过时,但localStorage和sessionStorage没有提供设置过时时间的功能,但咱们能够在存储的时候加上时间,之后在取值的时候判断一下localStorage是否过时就能够了.

浏览器对离线存储的管理和加载?

在线状态下,浏览器要是发现html头部有manifast属性的话,它会请求manifast文件,如果第一次访问app,那么浏览器就会根据mainfest文件的内容下载对应的资源进行离线存储

离线状态下,已经访问过app而且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,而后浏览器会对比新的manifest文件与旧的manifest文件,若是文件没有发生改变,就不作任何操做,若是文件改变了,那么就会从新下载文件中的资源并进行离线存储.

userData?

ie支持userData存储数据.可是基本已经不多使用了,除非有很强的浏览器兼容需求.

浏览器对H5的支持性?

在几个主流的浏览器中,好比ie浏览器,ie8如下是不支持的,ie9支持部分,好比video标签是支持的.ie10以上支持

还有像Chrome这样的高级浏览器,它的3-5支持大部分,在6以上就所有支持了.

H5中的form如何关闭自动完成功能?

咱们知道,表单元素的自动完成功能就是输入框输入内容的时候,浏览器会从你之前的同名输入框的历史记录中查找出相似的内容并列举在输入框下面,当有时咱们但愿使用AJAX技术从数据库搜索并列举而不是根据浏览器的历史记录搜索,因此此时咱们就须要将form的自动完成功能给关闭.

在ie浏览器下,咱们能够在浏览器的设置中的internet选项菜单内容中将自动完成功能中的设置.

也能够在form标签中经过设置autocomplete为"on"或者"off"来开启或关闭自动完成功能.

3. a标签的四个伪类是什么?

a标签的四个伪类分别是未访问link,已访问visited,鼠标悬停hover,鼠标点击瞬间active

四个伪类的顺序是:分别是link,visited,hover,active.

其实link和visited的顺序实际上是无所谓的,由于不可能同时触发未访问和已访问.

可是link是必定要在hover或者active以前.

visited要在hover以前.

而hover要在active以前.

关于兼容性的话,必需要在ie8包含ie8以上才有用.

4. HTML中文乱码

乱码缘由?

第一点多是由于没有设置HTML编码,也就是没有在meta标签中设置charset属性.

第二点也多是使用了记事本编辑html,直接使用记事本编辑很容易形成html编码乱码

怎么解决?

能够在meta标签中设置charset属性为"utf-8",另外尽可能使用sublime等编辑器编辑代码,而不是用记事本.

5. input属性有哪些？

input的属性目前在w3c上发布的是有23种,像比较常见的有定义输入字段的初始值value,规定输入字段为只读的readonly,还有规定字段禁用的disabled.

另外还有一些给input限制的标签,好比像size规定字段的尺寸,maxlength规定输入字段容许的最大长度

在咱们H5中有给input添加了不少的属性,好比规定form自动完成功能的autocomplete,自动获取焦点的autofocus.

还有max和min规定元素的最大最小值等等.

input中readonly和disabled的区别

俩个都是表单的属性,都能作到使用户不能更改表单域中的内容.但他们也有一些差异.

第一点:readonly只针对type为text,password,textarea有效,而disabled对全部的表单元素都有效.

第二点:readonly能够进行表单提交,而disabled不能.

input的兼容性问题

首先在样式上,当type为text的时候,在ie浏览器下和在火狐等浏览器下高度不一样,ie下为24px,火狐下为22px

type为submit也会不一样.

同时在低版本的ie浏览器(ie8如下)下,input中的文本内容都会偏上一点.解决方案是给其添加padding-top.也能够给其设置高度和行高相等,可是在火狐下不行.

type为button时,value不能为空,不然它就不会和其余的表单元素头部对其,而是向上一些.解决方案:最后不要给value为空.

6.内联块元素有哪些?

经常使用的内联块元素有img标签,input标签

内联块元素有哪些特征?

首先内联块元素是和块元素同样能够设置宽高的,可是却能够像内联元素同样放在同一行显示,代码空格换行也会被解析.

内联块元素之间为何会有小间隙?

那是由于内联元素的空格和换行会被解析

解决方案能够手动将回车空格给去除,可是这样会影响代码的美观,因此若是是像img这种不须要文本内容的内联块元素能够给它的父级的font-size设为0,也能够将它的宽高都设为100%.

7. 如何优化网页

对于咱们前端的网页优化来讲,一方面是提升咱们页面的加载速度,还一方面可能就是提升咱们页面的表现性.

对于提升页面加载速度能够有这么几种方式:

1.减少Http请求的数量.

2.还能够运用css sprites技术将多个图片融合在一张大图上,另外也能够对图片进行压缩,好比png图片在www.tinypng.com上面进行压缩,而后在webpack进行转base64,只有图片大小不超过10k才会转.

3.使用CDN;

4.添加Expires头;

5.将样式表放在头部,减小页面首屏出现的时间,使内容逐步呈现,提升用户体验,能够防止"白屏"

6.将脚本放在底部,也是和样式表放在头部同样.由于js的下载会中断DOM的更新,因此script标签要是放在首屏范围内的HTML代码里是会截断首屏的内容的.另外也是为了保证脚本能按顺序执行.

7.避免css表达式

8.使用外部的javascript和css,由于当脚本或者css是从外部引用进来的时候,浏览器就有可能缓存它,在之后加载的时候就能够直接使用缓存.

9.减小DNS查找.

10.精简代码.

11.避免重定向.由于当页面发生了重定向的时候,就会影响整个HTML文档的传输.

12.使AJAX可缓存,也就是多用get而少用post,由于get是会在客户端进行缓存的,而post不会.

CDN?

CDN实际就是一组分布在不一样地理位置的Web服务器,能够更加有效的像用户发布内容.

CDN还能够进行数据备份,扩展存储能力,进行缓存.

同时也是有一些缺点的,好比响应时间是会受到其余网站流量的影响,而且若是CDN服务质量降低了,你的工做质量也会降低,同时它也没法控制组件服务器.

Expires头?

当咱们初次访问一个页面的时候,是会进行不少HTTP请求的,可是经过使用一个长久的Epires头,就可使这些组件被缓存下来,下次访问的时候就能够减小没必要要的HTTP请求.

重定向与打开新页面

相同点:

都实现了根据本身的条件实现的页面的跳转

区别:

重定向致使浏览器发出了新的请求,在重定向以前存储为请求属性的任何对象都会消失,因此跳转到应用内的某个页面,没有浏览记录,而打开新页面不会这也是二者最大的区别.

因此使用重定向后,返回按钮会失效,除非在设置返回按钮时给它一个指定的路径.

为了提升网页的性能,应该避免重定向.

重定向?

重定向是用户从一个URL从新路由到另外一个URL.经常使用的重定向的类型有永久重定向,临时重定向.

永久重定向用于当网站的域名发生变动后,应该告诉搜索引擎域名已经变动了,从而不影响网站的排行.

而临时重定向主要是实现post请求以后告知浏览器转移到新的url,

应用的场景主要是

1.跟踪内部流量

2.跟踪出站流量

重定向如何损失性能的?

由于咱们知道重定向其实就是用户从一个URL从新路由到另外一个URL,因此就使浏览器发出了一个新的请求,这样是会延迟整个HTML文档的传输

8. 'data-'属性的做用是什么？

在介绍data-属性的做用以前我想先介绍一下data-,

data-属性是H5才新增的一种自定义属性,这些属性集能够经过对象的dataset属性获取,不支持该属性的浏览器能够经过 getAttribute方法获取

在兼容性上,dataset属性只有在IE11以上，Chrome8+浏览器中实现，因此在此期间最好用的getAttribute和setAttribute来操做。

为何使用它呢,咱们知道HTML标签是能够经过自定义属性来存储和操做数据的,可是这样在写法上就不太符合Html的规范,因此H5新添了这个自定义属性data

js中获取设置data-属性：

<div id = "user" data-uid = "12345" data-uname = "王先生" > </div>

    <script>
        var user = document.getElementById('user');
        
        // 1. data属性可以直接用getAttribute获取，但那样就失去了它的意义，因此不推荐使用
        var userName = user.getAttribute('data-uname');
        var userId = user.getAttribute('data-uid');
		console.log(userName);	// "王先生"
		// 设置的话能够用setAttribute();
        user.setAttribute('data-site', 'www.baidu.com');
        console.log(user.dataset.site); // www.baidu.com
        
        
		// 2. 定义了data-的属性应该用dataset来获取，获取的是整个含有data属性的对象
        var dataSet = user.dataset
        console.log(dataSet);// {uid:"12345",uname:"王先生"}
        
        // 这样咱们就能够用dataset来获取里面须要的data属性
        console.log(dataSet.uid); // "12345"
        
        // 要修改的话就直接修改
        dataSet.uname = "我是帅帅的王先生";
        console.log(dataSet.uname);

        // 使用in来判断一个属性是否是dataset中的属性
        console.log('someDataAtrr' in user.dataset); // false
        console.log('uname' in user.dataset);   // true

        // // 删除data属性
        delete user.dataset.uname; // 或者 user.dataset.user = null
        console.log(user.dataset.uname);

        // 选择全部包含 'data-uid' 属性的元素
        var dataUids = document.querySelectorAll ('[data-uid]') ;
        console.log(dataUids); // [div#user.users, div.users]
        console.log(dataUids[0]); // <div class="users" id = "user" data-uid = "12345" data-uname = "王先生" >我是王先生</div>

    </script>
复制代码

CSS中获取data-

<style>
        .users[data-uid="12345"]{
            color: red;
        }
    </style>
    
    <div class="users" id = "user" data-uid = "12345" data-uname = "王先生" >我是王先生</div>
    <div class="users" id = "user" data-uid = "54321" data-uname = "李先生" >我是李先生</div>
    
    // 只有王先生变红
复制代码

9. 怪异模式？

在模式上，主要是有标准模式，和怪异模式。首先怪异模式ie下独有的一种模式。它和咱们的标准模式主要是在布局，样式解析和脚本的执行上有一些差别吧。就好比在怪异模式下，盒模型是按照怪异盒模型解析的，咱们知道怪异盒模型和咱们普通盒模型的差异仍是很大的，另外，还有好比像在怪异模式下，咱们经常使用的margin:0 auto；这种居中方式就没用了。

标准模式和怪异模式的转换

在css中设置属性

div {
	box-sizing: border-box;/*怪异*/
	box-sizing: content-box;/*标准*/
}
复制代码

怎样查看浏览器进入哪一种模式

使用 window.top.document.compatMode 可显示为何模式

10. 你如何理解HTML结构的语义化？

当页面样式加载失败的时候可以让页面呈现出清晰的结构

有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）

便于项目的开发及维护，使html代码更具备可读性，便于其余设备解析。

11. BFC?

什么是BFC

BFC是块级格式化上下文，是指在浏览器中建立了一个独立的渲染区域，这个区域内的元素布局不会影响到外面的元素，而且这个渲染区域只对块级元素起做用,而后利用这些规则咱们能够达到必定的布局效果。

BFC的生成

  • float的值不为none;

  • display为inline-block table-ceil table-caption

  • overflow的值不为visible

  • position的值为absolute fixed

BFC的应用

  • 防止margin重叠

  • 解决了浮动的相关问题，由于建立了BFC的元素，子浮动元素也会参与其高度的计算，这样就不会产生高度塌陷问题。

  • 实现多栏布局的一种方式，由于建立了BFC的元素，与浮动元素相邻也不会和它互相覆盖。好比能够设置俩侧宽度固定，中间元素随页面的宽度自适应。

12. 标签嵌套问题

a标签不能嵌套a标签（连接嵌套浏览器解析为兄弟级关系)

p标签不能嵌套块级标签 浏览器解析为兄弟级关系

如若须要进行连接嵌套，能够推荐使用area标签

2. css

1. css代码压缩?

在之前是使用一些压缩工具进行手动压缩,可是如今咱们都是直接使用webpack打包工具.

2.三层嵌套?

在ie6是不支持border-radius的,当咱们要在ie6下想作一个圆角就可使用三层嵌套.可是在咱们实际的开发中,要是只是为了达到一个圆角的效果而使用各类图片之类的有些太牵强了,因此在之前的开发中,我通常就是直接使用border-radius.

3.页面可见性(Page Visibility)?

Page Visibility是H5新增的API

主要是用来判断用户是否是在与页面进行交互,也就是好比页面最小化了或者隐藏在其它标签页后面了,那么此时就能够用上咱们的这个页面可见性.

这个API主要由三个部分组成:

第一个是document的hidden属性,表示页面是否隐藏的布尔值.

第二个是document的visibilityState属性,它有四个可能状态的值.

第三个是visibilitychange事件,当页面的可见性发生改变时会触发.

咱们能够监听document的visibilitychange事件,当该事件触发时,获取document.hidden的值来对页面进行一些操做.好比隐藏页面时让播放的歌曲暂停等等.

什么是页面隐藏?

页面的隐藏包过页面在后台标签页中或者浏览器最小化,

而页面被其余软件遮盖不算是隐藏

visibilityState?

visibilityState是判断页面状态的一个属性,有一下四个状态的值:

  • hidden：页面在后台标签页中或者浏览器最小化
  • visible：页面在前台标签页中
  • prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true
  • unloaded：页面正在从内存中卸载
H5以前如何获取页面隐藏?

在H5以前,咱们是靠监听document获取焦点和失去焦点来简单的认为页面是隐藏仍是显示的.

4. hack?

在css中,hack是指一种兼容css在不一样浏览器中正确显示的技巧.由于在不一样的浏览器中,对css的解析认识不一样,所以会致使生成的页面效果不一样.这时候咱们就须要针对不一样的浏览器取写对应的css样式.一些常见的特殊符号的应用.

IE6认识的hacker 是下划线 _ 和星号 *****

IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。

5.解决display:inline-block;在ie6/7中不能正常显示

若是是块元素的话给它设置inline-block没有效果的,解决方案:

直接让块元素设置为内联对象呈现,也就是设置display: inline,而后在触发块元素的layout,好比设置zoom为1等.

其余的内联元素好比a标签,span标签是能够正常显示的.

layout?

layout是ie的一个私有概念,它决定了一个元素如何显示以及约束其包含的内容等等.一个元素是否具备"layot"属性可能会致使不少问题,好比ie中不少常见的浮动bug,容器与它子孙元素的边距重叠问题等等.

如何触发layout?

给元素设置浮动,设置绝对定位,设置宽高,设置zoom,以及转换为inline-block,或者设置overflow等等均可以触发layout.

zomm?

是ie中网页缩放的比例

ie6/7下经过它来触发元素的hasLayout,解决大部分ie浏览器下的兼容问题.好比能够用来清除浮动,避免容器高度塌陷.

不过对于如今浏览器通常不必用它了,由于它只在ie浏览器下有用.

6.清除浮动?

给父级float:left; 会影响后面的元素

给父级height:500px; 子级高度改变父级也要改变

给父级overflow:hidden;不一样浏览器会有兼容性问题

给父级display:inline-block; 内联块的一堆问题还在 好比对齐之类的问题

给父级设置定位;

固然最好的办法就是在浮动元素的父级元素上使用伪类:after在其后面加上一个空元素并清除它的浮动就能够解决.

7.png图片有几种格式?

分别有3种不一样深度的格式:png8,png24,png32

png8表示的是8位索引色位图.png24就是24位索引色位图

在使用场景上,由于png8最多只能显示256种颜色,就更适合那些颜色比较单一的图片,好比纯色,logo,图标等等.

而png24能显示的颜色要比png8多的多,大概能有1600万.

显示效果上:png8支持索引透明和alpha透明,而png24不支持透明,png32都支持.

在兼容性上:咱们常常说的ie6下不支持PNG透明,指的是不支持png24的透明,可是支持png8的透明,就像支持gif同样的透明同样.也就是在ie6下png24的图片的透明部分会被蒙上一层灰色.(解决方案

索引色位图

计算机显示的图片中所使用的颜色,均有一个颜色体系,每个颜色与一个颜色表对应出来,索引色常使用16色.32色等,最多不超过256色.

切图是保存为何样的格式

1.色彩丰富的,大的图片切为gif;

2.尺寸小,并且色彩不是很丰富和背景透明的切成gif或者png8;

3.而半透明的切为png24

8.两栏自适应布局，右侧div宽高不定

好比左侧图片大小固定,右侧随父级宽度改变而改变

1.使用定位.

2.父级设定高度,子级高度100%,左侧图片大小固定并给左浮,右侧元素宽度给100%,由于左侧浮动了是压得住属性压不住内容的,因此若是有什么文字内容的是会环绕在图片周围,可是最好仍是加一个margin-left,以免右侧有背景图会被覆盖.

3.利用弹性布局,父级设定display: flex;左侧图片大小固定,右侧元素设定flex为1.

9. 如何垂直居中一个浮动元素？

第一种状况：已知元素的宽高

将元素设置定位absolute或者fixed，top和left为50%，margin-left和margin-top为负的宽高的一半。

将元素设置定位absolute或者fixed，top和left为50%，transform: translate()为负的宽高的一半或者-50%。

第二种状况：不知元素的宽高

将元素设置定位，四个方向定位都为0，而后设定margin: auto;

若是子元素是内联元素或者内联块元素也能够将父元素设定:(使图片居中最快的方式)

display: table-ceil;
text-align: center;
vertical-align: middle;
复制代码

第三种状况：一个浏览器页面中，只有一个div模块，让其上下左右居中

将元素设置定位absolute或者fixed，top和left为50%，margin为auto。

###10.响应式布局是什么？

响应式布局就是界面可以适应不一样的设备,不一样的屏幕大小,让同一个页面在在不一样的大小比例里看上去仍是温馨的,不一样分辨率上看上去仍是合理的,不一样的操做方式体验应该是统一的.

3. JS

1.同步和异步

####用本身的话描述一下对“异步“和”同步“的理解

对“异步”和“同步”我是这样理解的，首先，咱们知道JS是一门单线程语言，也就是不能同时进行不少的事。

全部的任务都得排队，要前一个任务完成以后才能执行下一个任务。但若是咱们的任务列表中有像定时器，ajax请求这一类耗时程序的时候，不得不等结果出来以后再往下执行。因此这时候咱们的JS就想到能够将这些耗时耗性能的任务提取出来而后先无论它们让他们处于等待状态，等那些不耗时的任务执行完以后再来执行这些耗时的任务。

因此像前面我说的那些不耗时的任务的就是==同步任务==，盛放他们的列表就是==主线程==。而另外一些就是==异步任务==，它们天然是不在主线程中的，而是在==任务队列==。因此只要主线程空了，就会去读取"任务队列"。

异步编程的四种方式

第一种是异步编程最基本的方法，采用==回调函数==的方式，将不耗时的任务或者说是函数做为耗时的函数的回调函数，这种方式的优势是简单，容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合，流程会很混乱，而且每一个任务只能指定一个回调函数。

另外一种思路是采用==事件驱动==的方式，任务的执行不是取决于代码的顺序，而是取决于某个事件是否发生，这种方法的优势是比较容易理解，能够绑定多个事件，而且每一个事件均可以指定多个回调函数，去除了耦合，有利于实现模块化。缺点是整个程序都变成了事件驱动，运行流程会变得不清晰。

第三种能够采用==发布/订阅==的方式，或者说是观察者模式，这种方法的性质与"事件监听"相似，可是明显优于后者。由于咱们能够经过查看"消息中心"，了解存在多少信号、每一个信号有多少订阅者，从而监控程序的运行。

最后一种就是咱们ES6的==promise==对象，它是CommonJS工做组提出的一种规范，目的是为异步编程提供统一接口。简单说，它的思想是，每个异步请求都会返回一个Promise对象，该对象会有一个then方法，容许指定回调函数。它的优势在于回调函数变成了链式写法，程序的流程能够看到很清楚，而且也有一整套配套的方法，实现不少强大的功能，好比指定多个回调函数，指定发生错误时候的回调函数fail等等。而且它也有其余三个方法没有的一点就是若是一个任务已经 完成了，再添加回调函数，这个回调函数是会当即执行的，这样就不用担忧是否错过了某个事件或信号。它的缺点就是有些难理解。

2. HTTP

http协议

首先http是一个基于请求与响应模式的、无状态的、应用层的协议

咱们的http协议主要包括了2部分，一部分是==请求协议==，也就是浏览器向服务器端发送请求的时候，还有一个是==响应协议==，也就是服务器向浏览器响应的时候。

同源

嗯，同源策略是浏览器的一个安全机制，为了保护用户的信息安全，防止恶意的网站窃取数据，也就是一个url的协议，域名，端口号三个都相同状况下，才被判断为同源。

它最初也就是使用在不一样源的状况下不能读取其余网站的Cookie，可是随着互联网的发展，同源策略也变得愈来愈严格，目前的话，若是非同源的状况下，不只像Cookie、Localstorage这种本地储存不能获取，连DOM也不能获取，同时也不能发Ajax请求。

跨域

虽然它有它的好处可以保护用户信息安全，但有时也是挺不方便的。

第一种：

好比咱们知道cookie是服务器写入浏览器的一小段信息，只有同源的网页才能共享，可是当俩个网页一级域名相同，只是二级域名不一样的状况下，咱们也想共享这个cookie。这时就能够经过设置相同的document.domain来共享cookie，也能够在服务器设置cookie的时候，指定cookie的所属域名为一级域名(Set-Cookie: domain=.example.com)，这样二级，三级域名不用作任何的处理也能读取到这个cookie。

第二种：

还有一些请求是像iframe窗口和window.open方法打开新窗口的时候，若是打开的这个窗口与父窗口不一样源的时候，是不能与父窗口进行通信。也就是对于彻底不一样源的网站，想解决这种跨域的窗口通信问题，该怎么办。

目前其实也是有三种解决方案的。

1.第一种是利用片断标识符，咱们知道片断标识符指的就是URL的#后面的部分，改变这个片断标识符是不会从新刷新的，这样父窗口就能够把信息写入子窗口的片断标识符中。

2.第二种是利用window.name属性，由于咱们知道这个属性最大的特色就是不管是否同源，只要在同一个窗口，前一个页面设置了这个属性，后面一个网页也能读取到它。它的优势就是window.name容量很大，能够存储很是常的字符串，缺点是要监听子窗口的window.name，这样就影响了网页的性能。

3.固然，咱们H5为了解决这个问题，就引入了一个全新的跨文本通讯的API.这个API为window对象新增了一个window.postMessage方法，容许俩窗口通讯，不管这俩个窗口是否同源。这样就也能够获取LocalStorage和cookie了。

可是在有src属性的标签是不受同源策略的影响的，好比咱们的img、script、ifame、link标签。

jsonp

原理：

jsonp的优势是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，同时兼容性也更好，在更加古老的浏览器中均可以运行，不须要XMLHttpRequest或者ActiveX的支持，而且在请求完毕以后能够经过一个回调函数callback的方式回传结果。

同时它也有一些缺点，首先它只支持get请求而不支持post等其余类型的HTTP请求，另外它只支持跨域HTTP请求这种状况，不能解决不一样域的俩个页面之间如何进行JavaScript调用的问题。

http状态码

http状态码由三位数字组成，第一位表示的是一个大状态，后面两个数字表示该大状态的一个子状态。

好比200就是请求成功，3开头的表示重定向，4开头的状态码客户端出错，5开头的是服务器错误。

又好比常见的404资源未找到，403被请求的页面禁止访问等等。

互联网的分层

实体连接网络传输应用

TCP协议

首先，TCP协议是以太网协议和IP协议的上层协议，也是应用层的下层协议。

它的做用呢，简单来讲就是为了保证数据通讯的完整性和可靠性，防止丢包。

参考阮一峰互联网协议入门

其余协议

以太网协议

最底层的以太网协议（Ethernet）规定了电子信号如何组成数据包（packet），解决了子网内部的点对点通讯。

IP协议

IP协议的做用有两个：

1·为每台计算机分配IP地址，

2.肯定哪些地址是在同一个子网络。

解决的就是多个局域网互相通讯，好比路由器就是基于IP协议的。

ARP协议

IP数据包是放在以太网数据包中的，因此咱们必须知道俩个地址，一个是对方的IP地址，一个是MAC地址。

获取MAC地址的俩种状况：

一、俩台主机不在一个子网络，将数据包交给“网关”，让“网关”处理。

二、俩台主机在一个子网络中，利用==ARP协议==获取同一个子网络中的主机的MAC地址。

###3.AJAX

ajax的原理简单来讲其实就是经过==XMLHttpRequest==对象来向服务器发异步请求，从服务器获取数据。而这个XMLHttpRequest就是咱们Ajax的核心机制，它是在ie5中首先引入的，是一种支持异步请求的技术，简单来讲，就是javascript可以及时向服务器请求和处理响应，而不阻塞用户，达到无刷新的效果。

大体流程就是建立一个==XMLHttpRequest对象==，而后调用这个对象的==open==方法来指向请求的类型，有get方式或者是post方式来链接服务器，接着可使用==send==来发送请求，同时能够用==onreadystatuschange==来监听请求的状态。如果成功获取到数据的话再用回调函数拿到数据。

能够看到Ajax的==优势==也很明显，最大的一点就是页面无刷新，给用户的体验很是好，同时也可使用异步的方式，提升响应能力，减轻了服务器的负担，进一步促进页面和数据的分离。

但同时它也是有一些缺点的，并且这些缺点也是它先天产生的。首先它干掉了==back==按钮，即对浏览器后退机制的破坏。还有一点就是==安全问题==，可能开发者在不经意间就暴露了比之前更多的数据和服务器逻辑。另外他它对==搜索引擎==的支持也比较弱

首先，咱们知道同源策略规定了，Ajax的请求只能发给同源的网址，不然就会报错。

除了设置==代理服务器==，还有三种方式来规避这种限制。

第一种也就是咱们经常使用的方法==jsonp==,它最大的优势就是简单适用，老式的浏览器也全都能用。

第二种呢就是能够利用==WebSocket==这种通讯协议。

第三种可使用==CORS==,它比jsonp要更强大一些，由于jsonp是只支持GET请求的，而它却支持全部类型的HTTP请求。可是咱们知道CORS他的兼容性不是很好，一些老牌浏览器像IE10如下的它就不支持。

####1.ajax的事件？

ajaxComplete(callback)

ajaxError(callback)

ajaxSend(callback)

ajaxStart(callback)

ajaxStop(callback)

ajaxSuccess(callback)

4.模板引擎

是最先期为了取代ajax把数据拿来而后渲染到页面上，在性能上也没有作任何的优化，常常看到的模板引擎好比==Mustache、Underscore、 Templates==等等。但随着像React Angular 以及最近比较火的Vue的出现，能够说彻底的被取代了。并且这些前端框架作到的不只仅是它能作到的，同时在性能上优化了不少，功能上也更加的强大。

5. 经常使用的webapk打包工具

老点的有phoneGap

app和webapp区别

app是能够点击安装的，是基于操做系统，webapp是基于浏览器的

6.闭包

咱们知道，在咱们JS中是没有块级做用域的，js文件与js文件之间定义的变量也是能够互相访问的，这样在咱们开发中就很容易形成命名冲突从而引发咱们程序的一系列异常。

​ 但要知道若是在函数内部定义一个变量的话这个变量就只有在其内部能访问到也就是咱们常说的局部变量了，那么OK，若是咱们用一个外部的函数将一个内部函数包裹起来，那么如今若是在外部函数里定义一个变量，这个变量就只有这个外部函数和它里面的内部函数可以访问到。

主要是为了设计私有的方法和变量。它的优势也很明显，能够避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易形成内存泄露。

​ 因此它主要是有这三个特性：

1.函数嵌套函数 2.函数内部能够引用外部的参数和变量 3.参数和变量不会被垃圾回收机制回收

7. 继承？

首先咱们js里是没有真正像其它面向对象语言同样概念的继承，js中的继承都是模拟继承。

像咱们常见的继承方式有：

第一种，能够采用构造函数绑定的方式，就是使用apply、call来借调要继承的那个父对象的构造函数。

第二种，能够利用prototype属性来实现继承，能够将要继承的那个子构造函数的原型对象指向父构造函数建立出来的实例对象。可是这种方式会致使继承链的紊乱。

第三种，第三种方式是第二种方式的一种改进吧，就是直接将要继承的那个子构造函数的原型对象指向父构造函数

的原型对象。它相比于第二种效率要高点，可是因为如今俩个构造函数的原型对象指向的都是同一个，因此若是更改任意一个原型对象中的属性的话都会映射到另外一个函数中。

因此能够有第四种改进方案，利用一个空对象来做为中介。建立一个空对象而后这空对象中是一个函数，咱们将这个空对象的原型对象指向父构造函数的原型对象，接下来用这个空的构造函数建立一个实例对象，再将子构造函数的原型对象指向它，实现了继承。

第五种咱们能够采用拷贝的方式来实现继承。拷贝的话又分深拷贝和浅拷贝。

深拷贝浅拷贝

  • 深浅拷贝概念

咱们知道js中数据类型是分为基本数据类型和引用数据类型，这些基本数据类型是能够直接访问的，它们是存放在咱们栈内存中，而咱们的引用数据就是那些存储在堆内存中的对象。

因此其实当咱们进行将一个对象赋值给另外一个对象的过程实际只是将整个对象的地址传递给了，此时它们俩指向的都是同一个地址，这样若是我改变其中一个对象中的属性的话是也会影响另外一个对象的，这也就是咱们说的浅拷贝。

那么深拷贝呢，它就是解决了上面那种状况，是将父对象拷贝到子对象中，并且俩者的内存和之后的操做都互不干扰。

  • 有哪些是浅拷贝？
  1. 简单的赋值语句
  2. ES6的新函数Object.assign()
  3. 对象的解构：{ ...object }
  • 有哪些深拷贝的方法？
  1. 进行浅拷贝的递归
function deepClone(obj) {
  let objClone = Array.isArray(obj) ? [] : {};
  if(obj && typeof obj === "object") {
    for(key in obj) {
      if(obj.hasOwnProperty(key)) {
        // 判断 obj 子元素是否为对象，若是是，递归复制
        if(obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
        } else {
          // 若是不是，简单复制
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

let a = [1, 2, 3, 4];
let b = deepClone(a);
a[0] = 2;
console.log(a, b);

// Console
// a = [2, 2, 3, 4];
// b = [1, 2, 3, 4];
复制代码

该方法实际就是经过typeof判断如下对象中属性的类型是否是object，若是是的话则在进行接下去的判断。(这里就直接借鉴jsliang小伙的写法了)

  1. JSON.parse(JSON.stringify(obj))

固然你也能够采用JSON.parse(JSON.stringify(obj))的方式来进行拷贝，可是这种拷贝是存在兼容问题的，由于咱们只这俩种方法是只有在ie8以上才支持的，而且它不支持拷贝值为function、symbol和undefined的属性。

8. null

console.log(Number(null));
		console.log(parseInt(null));
		console.log(typeof null);

		console.log(Number(undefined));
		console.log(parseInt(undefined));
		console.log(typeof undefined);
		
		
		demo.html:14 0
        demo.html:15 NaN
        demo.html:16 object
        demo.html:18 NaN
        demo.html:19 NaN
        demo.html:20 undefined
复制代码

9.TypeScript和JavaScript的对比

TypeScript 与JavaScript二者的特性对比，主要表现为如下几点：

  • TypeScript是一个应用程序级的JavaScript开发语言。（这也表示TypeScript比较牛逼，能够开发大型应用，或者说更适合开发大型应用）
  • TypeScript是JavaScript的超集，能够编译成纯JavaScript。这个和咱们CSS离的Less或者Sass是很像的，咱们用更好的代码编写方式来进行编写，最后仍是有好生成原生的JavaScript语言。
  • TypeScript跨浏览器、跨操做系统、跨主机、且开源。因为最后他编译成了JavaScript因此只要能运行JS的地方，均可以运行咱们写的程序，设置在node.js里。
  • TypeScript始于JavaScript，终于JavaScript。遵循JavaScript的语法和语义，因此对于咱们前端从业者来讲，学习前来驾轻就熟，并无太大的难度。
  • TypeScript能够重用JavaScript代码，调用流行的JavaScript库。
  • TypeScript提供了类、模块和接口，更易于构建组件和维护。

10. Async/await相比于Promise好在哪里？

  • 写法上更加简洁干净，对于代码量的节省很明显。避免了嵌套，提高可读性。
  • 错误处理更强大,Async/await使得处理同步+异步错误成为现实。
  • 能够容许中间值。
  • Promise链中返回的错误栈没有给出错误发生的位置的线索,而Async/await中的错误栈会指向错误所在的函数。这样在咱们分析生产环境的错误日志时很是有用。
  • Async/await可以使得代码调试更简单。2个理由使得调试Promise变得很是痛苦:1.不能在返回表达式的箭头函数中设置断点；2.在.then代码块中设置断点，点击下一步调试器不会跳到下一个.then而是直接跳过异步代码。

想了解具体区别的小伙能够移步：async/await比promise好的缘由

4. Canvas

1.canvas基本写法

var drawing = document.querySelector('#drawing');
if (drawing.getContext) {
	var context = drawing.getContext("2d");	
	context.beginPath();
}	

复制代码

2. canvas绘制钟表

var drawing = document.querySelector('#drawing');
		if (drawing.getContext) {
			var context = drawing.getContext("2d");
			
			// 绘制外圆
			context.beginPath();
			context.arc(100, 100, 99, 0, 2 * Math.PI, false);
			// 内圆
			context.moveTo(194, 100);
			context.arc(100, 100, 94, 0, 2 * Math.PI, false);

			// 变换原点
			context.translate(100, 100);
			
			// 旋转表针
			context.rotate(1);
			
			context.moveTo(0, 0);
			context.lineTo(0, -85);

			context.moveTo(0, 0);
			context.lineTo(-65, 0);

			context.stroke();
		}
复制代码

3. canvas获取像素点

let imageData = context.getImageData(0, 0, image.width, image.height);
复制代码

5. vue

1.生命周期

  • 什么是vue的生命周期

我理解的生命周期是，每个vue实例被建立以前都要通过一系列 的初始化过程。好比须要设置数据监听，编译模板，还有数据变化时更新DOM等等。同时在这个过程当中，就会运行一些就叫作生命周期钩子的函数，用来给予用户在一些特定的场景下添加代码。

  • Vue的生命周期分为哪几种？

主要分为如下8种：

  1. 建立前/后：在 beforeCreated 阶段，Vue 实例的挂载元素 $el 和数据对象 data 以及事件还未初始化。在 created 阶段，Vue 实例的数据对象 data 以及方法的运算有了，$el 尚未。

  2. 载入前/后：在 beforeMount 阶段，render 函数首次被调用，Vue 实例的 $el 和 data 都初始化了，但仍是挂载在虚拟的 DOM 节点上。在 mounted 阶段，Vue 实例挂载到实际的 DOM 操做完成，通常在该过程进行 Ajax 交互。

  3. 更新前/后：在数据更新以前调用，即发生在虚拟 DOM 从新渲染和打补丁以前，调用 beforeUpdate。在虚拟 DOM 从新渲染和打补丁以后，会触发 updated 方法。

  4. 销毁前/后：在执行实例销毁以前调用 beforeDestory，此时实例仍然能够调用。在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 Vue 实例已经解除了事件监听以及和 DOM 的绑定，可是 DOM 结构依然存在。

  • 第一次页面加载会触发 Vue 哪几个钩子？

会触发 4 个生命钩子：建立前/建立后、挂载前/挂载后。

2.slot

我对slot的理解就是当组件中的某一项须要单独定义的时候，那么就应该使用slot。

好比说在一个模态框中，付款成功和付款失败，这个模态框仅仅是差了一个字或者是图片不同，

那么这个时候利用slot就会是不错的选择。

单个的slot都没有问题，若是组件中想要使用多个slot的时候就应该使用具名slot。具名slot呢也就是使用一个特殊的特性name来进一步配置如何分发内容。咱们能够在组件中定义slot的时候给一个name属性，而后在调用组件时候在匹配内容内用slot属性来匹配对应的name。同时它也容许有一个匿名的slot,也就是默认插槽，它是做为找不到匹配内容片断的备用插槽，如果没有这个默认插槽的话，那么这些内容片断就会被抛弃。

3.vue中的双向数据绑定原理

vue是经过数据劫持的方式来进行双向数据绑定的，最核心的方法就是ES5的Object.defineProperty()方法，使用getter/setter监测对数据的操做。

它的操做呢大体能够分为三步：

第一步：利用get实现一个数据监听器，对数据对象的全部属性进行监听。

第二步：实现一个指令解析器，对全部元素的节点指令进行解析。

第三步：实现一个观察者，可以订阅并收到每一个属性变化的通知，而后执行相应的回调函数，从而更新视图。

4. Angular和vue的区别

相同点：

  • 都支持指令：内置指令和自定义指令。
  • 都支持过滤器：内置过滤器和自定义过滤器。
  • 都支持双向数据绑定。
  • 都不支持低端浏览器。

不一样点：

  • 实现双向数据绑定的原理不一样：Angular实现双向数据绑定主要是依赖于脏值监测，也就是存储旧数值，而后在检测时把当前时刻的新值和旧值进行比对来达到是否更新视图的效果；而在vue中，采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty()来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应的监听回调。

  • vue须要提供一个el对象进行实例化，后续的全部做用范围也是在el对象之下，而angular而是整个html页面。一个页面，能够有多个vue实例，而angular好像不是这么玩的。

后语

知识产权无价，支持原创。

内容也会同步更新自个人我的博客:lindaidai.wang

参考文章：

jsliang 的 2019 面试准备

async/await比promise好的缘由

vue面试题总汇

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程