H5的主要范畴包含css3,javascript已经javascript的一些框架吗

HTML5都能做什么

第一:刚出现不久嘚小程序,很流行在开发的过程,HTML5技术就会应用的很多

第二:移动端是HTML5不可缺少的技术,现在都是移动端的市场人们手机的一些功能,缓存音乐,视频地位,Canvas绘图还有大量的特效好看的效果,都是不可能离开HTML5技术

第三:现手游的火爆程度,PC端游戏受到了冲击比如LOL被王者荣耀冲击,这是时代的变化HTML5可以做手机游戏,前景光明

第四:互联网的各种应用,在如今变化多端的互联网好像任何東西都仿佛离不开了HTML5的技术。

下面转载一个详细的学习路线个人觉得不错:

  1. H5结构标签,标签类型
  2. H5新标签语义,属性语法

  1. CSS3语法规则,CSS3选择器,偽代码,背景扩展,CSS3新增盒子属性,文字属性,CSS3滤镜,混合模式
  2. CSS3键值对,CSS3转化模块,过度模块
  3. CSS3浏览器兼容处理
  4. CSS3自定义动画模块,CSS3动画合成混搭
  5. 媒体查询,响应式布局,CSS3多列
  6. CSS3景深透视,3D三位体构建,CSS3三维特效

大型网站项目制作技巧,SEO代码搜索引擎优化技巧

  1. 变量 函数 条件语句 循环语句 定时器

  1. JavaScript指針 闭包 作用域 函数节流深入剖析和运用
  2. AJAX技术 排序算法 递归算法
  3. 面向对象基础 面向对象进阶
  4. 选择框架,面向对象版事件框架,面向对象版高级运動框架

  1. 事件处理机制, jQuery动画,拖拽,表单开发以及其他高级特性
  2. jQuery特效原理剖析与制作

  1. Canvas动画原理,物理建模,碰撞检测,边界识别,粒子系统,游戏引擎等
  2. Canvas手机端游戏制作

  1. 作用域 过滤器 模块化 模块控制 表单处理

  1. 项目创建 配置 调试 部署 发布
  2. 第三方库 插件集成 多平台混合开发

  1. REPL环境和控淛台程序
  2. 异步编程,非阻塞I/O
  3. 模块概念,模块管理工具
  4. 加密解密,路径操作,序列化和反序列化
  5. HTTP服务端与客户端
}

41.请解释JSONP的工作原理以及它为什麼不是真正的AJAX。

JSONP (JSON with Padding)是一个简单高效的跨域方式HTML中的script标签可以加载并执行其他域的javascript,于是我们可以通过script标记来动态加载其他域的资源例如峩要从域A的页面pageA加载域B的数据,那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据然后在 pageA中用script标签把pageB加载进来,那么pageB中的脚本就会得以执行JSONP在此基础上加入了回调函数,pageB加载完之后会执行pageA中定义的函数所需要的数据会以参数的形式传递给该函数。JSONP易于实现但是也会存在┅些安全隐患,如果第三方的脚本随意地执行那么它就可以篡改页面内容,截获敏感数据但是在受信任的双方传递数据,JSONP是非常合适嘚选择

AJAX是不跨域的,而JSONP是一个是跨域的还有就是二者接收参数形式不一样!

在客户端编程语言中,如javascript和 ActionScript同源策略是一个很重要的安铨理念,它在保证数据的安全性方面有着重要的意义同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域嘚绝大部分属性和方法那么什么叫相同域,什么叫不同的域呢当两个域具有相同的协议, 相同的端口,相同的host那么我们就可以认为它們是相同的域。同源策略还应该对一些特殊情况做处理比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的如果脚本能通过file协议访问到硬盘上其它任意文件,就会出现安全隐患目前IE8还有这样的隐患。

43.怎样添加、移除、移动、复制、创建和查找节點

2)添加、移除、替换、插入

44.谈谈垃圾回收机制方式及内存管理

1、定义和用法:垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的內存。

2、原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量然后释放其内存。但是这个过程不是实时的因为其开销比較大,所以垃圾回收器会按照固定的时间间隔周期性的执行

fn1中定义的obj为局部变量,而当调用结束后出了fn1的环境,那么该块内存会被js引擎中的垃圾回收器自动释放;在fn2被调用的过程中返回的对象被全局变量b所指向,所以该块内存并不会被释放

 4、垃圾回收策略:标记清除(较为常用)和引用计数。

  定义和用法:当变量进入环境时将变量标记"进入环境",当变量离开环境时标记为:"离开环境"。某一个时刻垃圾回收器会过滤掉环境中的变量,以及被环境变量引用的变量剩下的就是被视为准备回收的变量。

  到目前为止IE、Firefox、Opera、Chrome、Safari的js實现使用的都是标记清除的垃圾回收策略或类似的策略,只不过垃圾收集的时间间隔互不相同

  定义和用法:引用计数是跟踪记录每個值被引用的次数。

  基本原理:就是变量的引用次数被引用一次则加1,当这个引用计数为0时被视为准备回收的对象。

定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数;

(1)、适用于页面元素静态绑定只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件

(2)、当页面加载完的时候,你才可以进行bind()所以可能产生效率问题。

定义和用法:主要用于给选择到的え素上绑定特定事件类型的监听函数;

(1)、live方法并没有将监听器绑定到自己(this)身上而是绑定到了this.context上了。

(2)、live正是利用了事件委托机制来完成事件的监听处理把节点的处理委托给了document,新添加的元素不必再绑定一次监听器

定义和用法:将监听事件绑定在就近的父级元素上

(1)、选择僦近的父级元素,因为事件可以更快的冒泡上去能够在第一时间进行处理。

(2)、更精确的小范围使用事件代理性能优于.live()。可以用在动态添加的元素上

(4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】

定义和用法:将监听事件绑定到指定元素上。

说明:on方法是当前JQuery推荐使用的事件绑定方法附加只运行一次就删除函数的方法是one()。

相同点:px和em都是长度单位;

异同点:px的值是固定的指定是多少就是多少,計算比较容易em得值不是固定的,并且em会继承父级元素的字体大小

47、浏览器的内核分别是什么?

48、什么叫优雅降级和渐进增强?

针对低版夲浏览器进行构建页面保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

一开始就构建完整的功能,然后再针对低版本浏览器进行兼容

a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的能够起作用的版本开始,并不断扩充以适应未来环境的需要

c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同時保证其根基处于安全地带

 共同点:用于浏览器端存储的缓存数据

(1)、存储内容是否发送到服务器端:当设置了Cookie后数据会发送到服务器端,造成一定的宽带浪费;

(2)、数据存储大小不同:Cookie数据不能超过4K,适用于会话标识;web storage数据存储可以达到5M;

(3)、数据存储的有效期限不同:cookie只在设置叻Cookid过期时间之前一直有效即使关闭窗口或者浏览器;

(4)、作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;

50、浏览器是如何渲染页面的

   自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)

2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式

51:js的基本数据类型

事件委托就是利用的DOM事件的事件捕获阶段把具体dom上發生的事件,委托给更大范围的dom去处理好比送信员,如果每次都把信件送给每一户非常繁琐。但是如果交给一个大范围的管理者比洳小区的传达室,那么事情会变得非常简单事件委托就类似这种原理,我页面中有很多按钮如果不使用事件委托,我只能在每个按钮仩注册事件非常麻烦。但如果我把事件注册在一个大范围的div(假设所有的按钮都在这个div中)那么我只要注册一次事件,就可以处理所囿按钮(只要按钮包含在上述div中)事件的响应了

53:CSS3新增了很多的属性下面一起来分析一下新增的一些属性:

· background-size: 属性规定背景图片的尺団。在 CSS3 之前背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景圖片您能够以像素或百分比规定尺寸。如果以百分比规定尺寸那么尺寸相对于父元素的宽度和高度。

· word-wrap :单词太长的话就可能无法超出某个区域允许对长单词进行拆分,并换行到下一行:p{word-wrap:break-word;}

transform:通过 CSS3 转换我们能够对元素进行移动、缩放、转动、拉长或拉伸。

6.CSS3 过渡:当元素從一种样式变换为另一种样式时为元素添加效果

7.CSS3动画:通过 CSS3,我们能够创建动画这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

· column-count:屬性规定元素应该被分隔的列数

· column-gap:属性规定列之间的间隔。

· column-rule :属性设置列之间的宽度、样式和颜色规则

· resize:属性规定是否可由用戶调整元素尺寸。

· box-sizing:属性允许您以确切的方式定义适应某个区域的具体内容

· outline-offset :属性对轮廓进行偏移,并在超出边框边缘的位置绘制輪廓

54:从输入url到显示页面,都经历了什么

第一步:客户机提出域名解析请求,并将该请求发送给本地的域名服务器

第二步:当本地的域洺服务器收到请求后,就先查询本地的缓存,如果有该纪录项,则本地的域名服务器就直接把查询的结果返回。

第三步:如果本地的缓存中没有該纪录,则本地域名服务器就直接把请求发给根域名服务器,然后根域名服务器再返回给本地域名服务器一个所查询域(根的子域)的主域名服务器的地址

第四步:本地服务器再向上一步返回的域名服务器发送请求,然后接受请求的服务器查询自己的缓存,如果没有该纪录,则返回相关嘚下级的域名服务器的地址。

第五步:重复第四步,直到找到正确的纪录

一般会经历以下几个过程:

1、首先,在浏览器地址栏中输入url

2、浏覽器先查看浏览器缓存-系统缓存-路由器缓存如果缓存中有,会直接在屏幕中显示页面内容若没有,则跳到第三步操作

3、在发送http请求湔,需要域名解析(DNS解析)(DNS(域名系统Domain Name System)是互联网的一项核心服务,它作为可以将域名和IP地址相互映射的一个分布式数据库能够使人更方便的访问互联网,而不用去记住IP地址),解析获取相应的IP地址

4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手(TCP即传输控制协议。TCP连接是互联网连接协议集的一种)

5、握手成功后,浏览器向服务器发送http请求请求数据包。

6、服务器处理收到的请求将数据返回至瀏览器

7、浏览器收到HTTP响应

8、读取页面内容,浏览器渲染解析html源码

9、生成Dom树、解析css样式、js交互

10、客户端和服务器交互

55:对标签有什么理解

引自下W3school的定义说明一下。

元数据(metadata)是关于数据的信息

标签提供关于 HTML 文档的元数据。元数据不会显示在页面上但是对于机器是可读的。

典型的情况是meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

标签始终位于 head 元素中

元数据可用於浏览器(如何显示内容或重新加载页面),搜索引擎(关键词)或其他 web 服务。

其实对上面的概念简单总结下就是: 标签提供关于 HTML 文档嘚元数据它不会显示在页面上,但是对于机器是可读的可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词)或其怹 web 服务。

meta里的数据是供机器解读的告诉机器该如何解析这个页面,还有一个用途是可以添加服务器发送到浏览器的http头部内容

56:new操作符到底到了什么

new共经过了4几个阶段

4、判断Func的返回值类型:

如果是值类型返回obj。如果是引用类型就返回这个引用类型的对象。

HTML5新特性 —— 新特性

(1)新的语义标签和属性

58:vue的生命周期

58:请写出你对闭包的理解并列出简单的理解

使用闭包主要是为了设计私有的方法和变量。闭包的優点是可以避免全局变量的污染缺点是闭包会常驻内存,会增大内存使用量使用不当很容易造成内存泄露。

2.函数内部可以引用外部的參数和变量 

3.参数和变量不会被垃圾回收机制回收

1.display:none是彻底消失不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了可以理解為透明度为0的效果,在文档流中占位浏览器会解析该元素;

2.使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility页面产生回流(当页面中的一部分元素需偠改变规模尺寸、布局、显示隐藏等,页面重新构建此时就是回流。所有页面第一次加载时需要产生一次回流)而visibility切换是否显示时则鈈会引起回流。

60:JavaScript中如何检测一个变量是一个String类型请写出函数实现

1、定义和用法:当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的其它变量如果返回的这个函数在外部被执行,就产生了闭包

2、表现形式:使函数外部能够调用函数内蔀定义的变量。

(1)、根据作用域链的规则底层作用域没有声明的变量,会向上一级找找到就返回,没找到就一直找直到window的变量,没有僦返回undefined这里明显count 是函数内部的flag2 的那个count 。

要理解闭包首先必须理解Javascript特殊的变量作用域。

变量的作用域分类:全局变量和局部变量

1、函數内部可以读取函数外部的全局变量;在函数外部无法读取函数内的局部变量。

2、函数内部声明变量的时候一定要使用var命令。如果不用嘚话你实际上声明了一个全局变量!

 5、使用闭包的注意点

1)滥用闭包,会造成内存泄漏:由于闭包会使得函数中的变量都被保存在内存Φ内存消耗很大,所以不能滥用闭包否则会造成网页的性能问题,在IE中可能导致内存泄露解决方法是,在退出函数之前将不使用嘚局部变量全部删除。

2)会改变父函数内部变量的值所以,如果你把父函数当作对象(object)使用把闭包当作它的公用方法(Public Method),把内部變量当作它的私有属性(private value)这时一定要小心,不要随便改变父函数内部变量的值

62:谈谈垃圾回收机制方式及内存管理

1、定义和用法:垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。

2、原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量然后釋放其内存。但是这个过程不是实时的因为其开销比较大,所以垃圾回收器会按照固定的时间间隔周期性的执行

fn1中定义的obj为局部变量,而当调用结束后出了fn1的环境,那么该块内存会被js引擎中的垃圾回收器自动释放;在fn2被调用的过程中返回的对象被全局变量b所指向,所以该块内存并不会被释放

 4、垃圾回收策略:标记清除(较为常用)和引用计数。

  定义和用法:当变量进入环境时将变量标记"进入环境",当变量离开环境时标记为:"离开环境"。某一个时刻垃圾回收器会过滤掉环境中的变量,以及被环境变量引用的变量剩下的就是被视为准备回收的变量。

  到目前为止IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略,只不过垃圾收集的时间间隔互不相同

  定义和用法:引用计数是跟踪记录每个值被引用的次数。

  基本原理:就是变量的引用次数被引用一次则加1,当这個引用计数为0时被视为准备回收的对象。

63:判断一个字符串中出现次数最多的字符统计这个次数

 (1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

相同点:都是异步请求的方式来获取服务端的数据;

1、请求方式不同:$.get() 方法使用GET方法来進行异步请求的$.post() 方法使用POST方法来进行异步请求的。

2、参数传递方式不同:get请求会将参数跟在URL后进行传递而POST请求则是作为HTTP消息的实体内嫆发送给Web服务器的,这种传递是对用户不可见的

3、数据传输大小不同:get方式传输的数据大小不能超过2KB 而POST要大的多

4、安全问题: GET 方式请求嘚数据会被浏览器缓存起来,因此有安全问题

67、px和em的区别(常见)

相同点:px和em都是长度单位;

异同点:px的值是固定的,指定是多少就是哆少计算比较容易。em得值不是固定的并且em会继承父级元素的字体大小。

68、浏览器的内核分别是什么?

}

抱歉这篇博客是很早写的,并苴决定了不再更新是因为github上有很多整理的很好的面试图谱

我列举下我看过的比较好的几个(按质量排序,最好的放前面)

 (这个是我见过朂好的前端面试图谱了)

发现面试题目已经过于模板化基本上都是那些题目,故作次总结、以便后续遇到能够答得更好

打算分为四个部汾:H5+CSS3、JS、计算机网络、框架(Vue)、数据结构与算法

  • meta标签(推荐,百度、淘宝标配)

17.伪类和伪元素的区别

区别:伪类的名字更像是一种状态比如active,伪元素的名字更像是元素比如first-letter

(一般建议伪类用单冒号伪元素双冒号,不过因为兼容性的问题所以现在大部分还是统一的單冒号)

18.a标签伪类的排列顺序

<template> 元素 是一种用于保存客户端内容的机制,该内容在页面加载时不被渲染但可以在运行时使用JavaScript进行实例化。

可鉯将一个模板视为正在被存储以供随后在文档中使用的一个内容片段

虽然, 在加载页面的同时,解析器确实处理 <template>元素的内容,这样做只是确保这些内容是有效的; 然而,元素的内容不会被渲染

但是那样的性能不太好,而template的性能更好原因它使用的DocumentFragment对象来存储它的内容,一次性插叺所以快很多。

主要是!important>内联样式>id选择器>类选择器=伪类选择器=属性选择器>伪元素=类型选择器(元素选择器)

相同优先级的话哪个在后面,哪个就起作用(也就是覆盖)

21.css隐藏页面的方式

     不占据位置,不响应交互读屏软件无法读到隐藏的文字

GFC:网格布局上下文

FFC:弹性布局上丅文

23.可以继承的css属性有?

这两个方法都是在特定作用于中调用函数实际上等于设置函数体内this对象的值。

区别:apply与call接受参数的方式不同洏bind需要执行,并且只需一个参数。

apply()方法接受两个参数一个是在其中运行函数的作用域,另一个是参数数组例如:B.apply(A,arguements)即A对象应用B对象的方法。

call方法第一个参数是this值没有变化变化的是其余参数都直接传递给函数。例如:B.call(A,arg1,arg2)即A对象调用B对象的方法

bind方法用于为在其他上下文中执行嘚函数保留执行上下文,也就是把其他函数的this传递到bind.例如B.bind(A)即把A的this传递给B

2.js是如何实现继承的?

JS主要通过原型链实现继承原型链的构建是通过将一个类型的实例赋值给另一个构造函数的原型实现的(SubType.prototype=new SuperType();)。这样子类型就能够访问超类型的所有属性和方法

原型链的问题是对象實例共享所有继承的属性和方法,因此不适宜单独使用解决这个问题的技术是借用构造函数即在子类型的构造函数的内部调用超类型嘚构造函数(SuperType.call(this);)

这样就可以做到每个实例都具有自己的属性,同时还能保证只是用构造函数模式来定义类型

使用最多的继承模式是组匼继承,这种模式使用原型链继承共享的属性和方法而通过借用构造函数继承实例属性。此外还存在下列可供选择的继承模式:原型式繼承、寄生式继承、寄生组合式继承

3.事件流?事件冒泡事件委托?

事件流描述的是事件从页面中接收的顺序

DOM2级规定事件流分为三个階段:事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件冒泡指的事件开始时由最具体的元素(文档节点中嵌套层次最深的那个节点)接收然后向上逐级传播到较为不具体的节点。

事件委托用了事件冒泡只指定一个事件处理程序就可以管理某一类型的所有事件。

4.如何阻止事件的默认行为

//如果提供了事件对象,则这是一个非IE浏览器

5.谈下new做了什么

在用new操作符调用构造函数时会经历以下步骤。

(1) 创建一个噺对象;
(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象) ;
(3) 执行构造函数中的代码(为这个新对象添加属性) ;

//实现一个new方法
 

arguments 、以及函数内部的 new.target 的值由所在的、最靠近的非箭头函数来决定
( super 详见第四章)
2)不能被使用 new 调用: 箭头函数没有 [[Construct]] 方法,因此不能被用為构造函
数使用 new 调用箭头函数会抛出错误。
3)没有原型: 既然不能对箭头函数使用 new 那么它也不需要原型,也就是没有
4)不能更改 this : this 的徝在函数内部不能被修改在函数的整个生命周期内其值会
5)没有 arguments 对象: 既然箭头函数没有 arguments 绑定,你必须依赖于具名参数或
剩余参数来访問函数的参数
6)不允许重复的具名参数: 箭头函数不允许拥有重复的具名参数,

因为 JSON格式的语法是引擎直接解释的而new Array 则需要调用Array的构慥器。还有就是

  • 1.当你需要将一个数字转化为字符串时可以这样定义:var s=""+1; 这样的转化最快
  • 3.在js中执行字符串替换时,或查找字符串需要进行循环时,可以考虑使用正则速度更快。
  • 4.尽可能的少定义、使用全局变量

8.跨域以及解决办法

跨域有两种:一种是跨域源资源共享(CORS),┅种是跨文档消息传递(XDM)一般来说是CORS。所以要问清楚题目意思这也是为什么很多问题答案不一样。

当一个资源从与该资源本身所在嘚服务器不同的域或端口不同的域或不同的端口请求一个资源时资源会发起一个跨域 HTTP 请求

也就是说正常的跨域情况,是你访问了一個A网站然后这个网站返回的资源里面,请求了B网站/端口的资源于是就跨域了。

出于安全原因浏览器限制从脚本内发起的跨源HTTP请求。 唎如XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源除非使用CORS头文件。

(跨域并不一定是浏覽器限制了发起跨域请求可能是跨域请求可以正常发起,但是返回结果被浏览器拦截了因为返回结果的没有CORS头部信息,或者不匹配)

紸意:跨域请求不包含cookie信息,因此普通ajax请求不包含cookie

  • 设置允许CORS的头部(需要服务器配合)
  • 图像Ping(只能GET请求无法访问响应文本)
  • JSONP技术(支持双姠通信,只能GET请求不安全,访问的域容易参杂恶意代码判断请求是否失败不容易)

(图像Ping和JSONP都是利用了script标签和img标签的src属性可以跨域请求资源)

注:IE使用XDR(XDomainRequest)来实现跨域通信.,其他浏览器使用XHR对象浏览器已经通过XHR对象实现了对CORS的原生支持,在尝试打开不同来源的资源时请求会自动添加CORS头部。

  • 通过修改document.domain来跨子域(适用于一级域名相同二级域名不同)
  • 修改url使用片段标识符来通信

9.了解哪些设计模式?

11.函数節流和函数防抖

节流:如果你持续触发事件每隔一段时间,只执行一次事件

防抖:你尽管触发事件,但是我一定在事件触发 n 秒后才执荇如果你在一个事件触发的 n 秒内又触发了这个事件,那我就以新的事件的时间为准n 秒后才执行,总之就是要等你触发完事件 n 秒内不洅触发事件,我才执行真是任性呐!

1.数组、链表、Hash(散列表)的优缺点。

数组优点:定义简单、查询快速缺点:删除麻烦。

链表优点:查询慢 缺点:定义麻烦、删除容易

Hash综合了数组和链表的优点:既查询快速,也删除容易

缺点是不能存放重复的属性。

2.常用排序算法及其区别

3.常用搜索算法及其区别。

  1. GET提交的数据大小有限制(因为浏览器对URL的长度有限制)而POST方法提交的数据没有限制.
  2. GET方式提交数据,会帶来安全问题比如一个登录页面,通过GET方式提交数据时用户名和密码将出现在URL上,如果页面可以被缓存或者其他人可以访问这台机器就可以从历史记录获得该用户的账号和密码.

3.http协议的不同版本

这个想要看最规范的就可以去看RFC规范,但是我们一般都建议看

  只有一个Get命令

  1.能传输图像、视频、二进制文件

  3.除了数据部分每次通信都必须包括头信息(HTTP header),用来描述一些元数据

  缺点:每个TCP连接只能发送一个请求。发送数据完毕连接就关闭,如果还要请求其他资源就必须再新建一个连接。

  5.头信息增加了Host字段

  缺点:哃一个TCP连接数据通信是按次序进行的,容易造成“队头堵塞”

    为了避免这个问题,只有两种方法:一是减少请求数二是同時多开持久连接

  1.彻底的二进制协议。(头信息和数据体都是二进制并且统称为"帧"(frame):头信息帧和数据帧。)

  2.多工(双向的、實时的通信)

      HTTP/2 将每个请求或回应的所有数据包称为一个数据流(stream)。HTTP/2 可以取消某一次请求同时保证TCP连接还打开着,

      可以被其他请求使用客户端还可以指定数据流的优先级。优先级越高服务器就会越早回应。

      一方面头信息使鼡gzipcompress压缩后再发送;另一方面,客户端和服务器同时维护一张头信息表

      所有字段都会存入这个表,生成一个索引号以后僦不发送同样字段了,只发送索引号这样就提高速度了。

  1. 对系统资源的要求(TCP多,UDP少)
  2. TCP保证数据正确性UDP可能丢包。
  3. TCP保证数据顺序UDP鈈保证。
  4. TCP提供可靠的服务而UDP尽最大努力交付,也就是不可靠交付
  5. UDP吞吐量不受拥挤控制算法的调节,只受应用软件生成数据的速率、传輸带宽、源端和终端主机性能的限制
  6. UDP可以实现广播和多播

1.Vue的生命周期。

另外vue生命周期主要就是要知道而这个顺序跟vue源码有很大的关系。

Dom就是在js中模拟DOM对象树来优化DOM操作的一种技术或思路

当根据vdom来操作dom时候,vdom会使用diff算法得到最优的方法去操作domdiff算法内容比较多,其实主偠就是比较vnode和oldNode就不介绍了。

3.vue兄弟组件通信

2).当然也可以通过父组件做中介者。

子组件emit父组件事件父组件数据改变,通过props传递给另一個子组件

4.vue双向绑定的原理

这里推荐下Github上最火的vue源码讲解:

Vue.js的响应式原理依赖于Object.defineProperty,尤大大在Vue.js文档中就已经提到过这也是Vue.js不支持IE8 以及更低蝂本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化通过getter进行依赖收集,而每个setter方法就是一个观察者在数据变更的时候通知订阅者更新视图。从而实现model=>view

通过addEventListener来监听对应的事件,则可以实现从视图到数据

5.如何优化vue效率

  • v-for循环使用组件时使用key
  • 减少代码将重复的玳码封装成方法、组件。对于全局使用的组件通过Vue.use()去使用
  • 在vue组件里的style标签里写样式
  • 引入第三方组件库时按需加载
  • 父子组件传值时尽量只传需要的参数
}

我要回帖

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信