大家好，欢迎来到IT知识分享网。
TCP和UDP的区别
tcp是传输控制协议，基于连接协议，给连接对方提供可靠的传输，一个tcp传输需要经过三次握手四次挥手才能建立会话；
优点：传输安全，不易丢包
缺点：传输效率低
udp是用户传输协议，不建立连接，不需要建立会话，直接发送数据，不可靠传输数据；
优点：传输效率高
缺点：易丢包，传输不安全
什么是语义化标签，为什么要语义化
什么是：旨在让标签有自己的含义。
为什么：
1),.即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构；
2).语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式；
3).方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4).提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：
5).爬虫依赖于标签来确定上下文和各个关键字的权重；
6).便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
7).通常语义化HTML会使代码变的更少，使页面加载更快。
清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法；
什么时候？对元素进行了浮动(float)时，我们的元素就会脱离文档流；
方法？方法一：添加新的元素 应用 clear：both；
方法二：父级div定义 overflow: auto
方法三： 据说是最高大上的方法 :after 方法
JavaScript有哪几种数据类型？
基本数据类型
1).字符串’String’;2.数字Number；3布尔’Boolean‘
引用数据类型
1).数组’Array‘
2).对象’Object‘
特殊数据类型
1).空对象null
2).未定义Undefined
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a b span img input select strong
块级元素：div ul li ol dl dt dd h1 p
空元素：<br> <hr> <img> <input> <link> <meta>
Label的作用是什么？如何使用？
作用：Label标签是用来定义表单控制间的关系
使用：当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单内容上
HTML5 为什么只需要写 ？
告知浏览器的解析器用什么文档标准解析这个文档
一个CSS文件如果过大的话，加载会很慢，占用过大带宽，如果解决？
1.去除空格和换行,压缩css代码;
2.尽量使用简写, 缩减代码;
3.将css文件分成多个文件
标签的隐藏（display:none和visibility:hidden）的区别？
display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；
visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
input中disabled与readonly有何区别？
1）、Readonly只针对input(text / password)和textarea有效，
而disabled对于所有的表单元素都有效，
2）、但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，
而readonly会将该值传递出去（readonly接受值更改可以回传，disable接受改但不回传数据）。
a标签的四个伪类是什么？如何排序？为什么？（link,visited,hover,active）
为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后 !
为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！
使用display:inline-block在IE6中不能正常显示，如何解决？
1.如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，
2.直接让块元素设置为内联对象呈递，然后触发块元素的 layout
img的alt和title有什么区别？
1)、alt是在图片不能正常加载时候显示的提示语，
2)、title属性是鼠标划上去显示的内容
css样式引用和js引入的位置问题（为什么会放在头部或者底部）。
因为页面在加载时，css加载时可以并发请求的（同页面中的图片，ie6除外），而js加载时需要等待一个js文件加载完成后才加载其他资源，为了页面的快速呈现，放置在尾部效果更好
某种效果，有两种实现方案都可以实现，
方案一：标签；
方案二：背景图，
两个方案如何取舍？衡量的标准是什么?
如果图像是内容的一部分或图表或人，使用img标签加上alt属性
如果你想打印页面并且你想要的图像包含默认情况下使用img
使用img（alt文本）图像有一个重要的语义化时
div+css与table布局的有何区别？
1).符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。
2).布局精准，网站版面布局修改简单。
3).加快了页面的加载速度（最重要的）。
4).节约站点所占的空间和站点的流量。
5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。
table的合并边框属性是什么？跨行是什么？跨列是什么？
合并边框“cellspacing” 跨行“rowspan”跨列“colspan”
split() join()的区别在哪？
1).join()函数获取一批字符串，然后用分隔符字符串将它们连接起来，从而返回一个字符串。
2).split()函数获取一个字符串，然后在分隔符处将其断开，从而返回一批字符串。
数组方法pop() push() unshift() shift()的区别在哪？
push()是用来在数组末端添加项，shift()在移除数组的第一个项
pop()在数组末端移除项，unshift()在数组前端添加项。
JavaScript的事件流模型都有哪些？
“事件冒泡”：事件开始由最具体的元素接收，然后逐级向上传播
“事件捕捉”：事件由顶层的dom开始向下传递，在底层最具体的元素接收
“事件委托”：当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
请按要求操作数组a：
i. 如何删除数组a中第2个元素（即：“B”）？
a.splice(1,1)
ii. 如何删除数组a中最后一个元素？
a.pop()
iii. 如何将“NEW”插入数组a的“B”和“C”之间？
a…splice(2,0,NEW);
请你谈谈Cookie的弊端
a. 每个特定的域名下最多生成的cookie个数有限制
b. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。
c.有些状态不可能保存在客户端。
d. cookie存储字段小，为了兼容性，一般不能超过4K
请说出三种减少页面加载时间的方法
a. 压缩合并Javascript、CSS代码
b.Javascript脚本放在文件末尾
c. 服务器开启gzip压缩
d.网址后加斜杠
e.减少http请求
列举IE与其他浏览器不一样的特性？
1)IE支持currentStyle
2)IE使用innerText;
3)滤镜方面：IE：filter:alpha(opacity= num
4)事件方面：attachEvent
5)鼠标位置：IE是event.clientX;
6)IE使用event.Element;
7)IE中消除list的原点仅需margin:0即可达到最终效果
前端页面有哪三层构成，分别是什么？作用是什么？
1)结构层，表现层，行为层
2作用：
a. 结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。
b. 表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。
c. 行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。
函数里的this什么含义，什么情况下，怎么用。
1）this是一个关键词，它始终指向一个对象，this像是一个指针。
2） 情况一：纯粹的函数调用
情况二：作为对象方法的调用
情况三： 作为构造函数调用
什么是闭包,闭包的特性、作用
闭包：闭包是指有权访问另一个函数作用域中变量的函数
作用：1）能够读取函数内部的变量
2）这些变量长期保存在内存中，不会在外部函数调用后清除
特性：1）函数套函数
2）内部函数可以直接使用外部函数的局部变量或参数
3)变量或参数不会被垃圾回收机制回收
undefined和 null 区别
1）类型不同
2）转化出的值不同
3）含义不同：
undefined：表示使用var声明变量但没有初始化
null：是个空指针对象
jQuery库中的 $ ()是什么?
就是jquery对象，$()就是jQuery()，在里面可以传参数，作用就是获取元素
jQuery中，如何阻止事件冒泡和浏览器默认行为？
1）阻止冒泡用stopagation
2）阻止浏览器默认行为用preventDefault
怎样添加,移除,移动,复制,创建和查找节点?
1）添加用appendChild（）
2）移除用removeChild（）
3）移动用cloneNode()
removeChild()
insertBefore()
4）复制用cloneNode()
5）创建用createElement(),createTextNode()
6）查找用getElementsByTagName()
getElementsByClassName()
getElementById()
什么叫优雅降级和渐进增强？
1)优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
2)渐进增强：针对低版本浏览器构建页面，保证最基本的功能，然后在针对高级浏览器进行效果，交互等改进和追加功能达到最好的效果
Javascript中的定时器有哪些？他们的区别及用法是什么？
1）setTimeout(),setInterval()
区别：setTimeout调用一次,setInterval反复调用
用法：都可以传入两个参数，一个函数名，另一个为毫秒数
innerHTML和outerHTML有什么区别
1）innerHTML:
从对象的起始位置到终止位置的全部内容,不包括Html标签。
2）outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
浏览器的标准模式和怪异模式究竟是什么？
a）标准模式：是浏览器按照W3C标准解析执行代码，这样用规定的语法去渲染，就可以兼容各个浏览器，保证以正确的形式展示网页。
b）怪异模式：是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
JQuery链式写法原理
答：jq的链式调用是通过return this的形式来实现的。通过对象上的方法最后加上return this，把对象再返回回来，对象就可以继续调用方法，实现链式操作了。如果需要链式的处理，只需要在方法内部返回当前的这个实例对象this就可以了，因为返回当前实例的this，就又可以访问自己的原型了。
$(document).ready() 是个什么函数？为什么要用它？
答：该函数会按照注册（绑定）的顺序一次执行，是事件模块中最重要的一个函数，可以极大的提高Web应用程序的响应速度，jQuery就是用(document).ready()方法来代替传统的JS的window.onload方法的
JavaScript window.onload 事件和 jQuery ready 函数有何不同？
答：前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。
另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。
$(this) 和 this 关键字在 jQuery 中有何不同?
a、this表示js的dom对象
b、$(this)表示的是用jquery封装好的当前对象,可以使用jquery提供的方法访问样式
IT知识分享网
px、em、rem的区别
IT知识分享网px: 像素px是相对于显示器屏幕分辨率而言的
em会继承父级元素的字体大小
rem会继承html元素的字体大小
js页面生命周期
DOMContentLoaded, 浏览器完成HTML的加载, 并构建DOM树,但是css和img等外部资源尚未加载完成。注意：这里的外部资源指的是需要发送http请求获得的资源，而不是自己文件中的资源
load, 浏览器加载完所有资源, 包括HTML文档, 图片, 样式等
beforeunload, 用户即将离开, 用来检查用户是否保存了修改, 并询问是否真的要离开
unload, 用户几乎已经离开, 但是可以启动一些操作, 比如发送统计数据
有关css属性position的属性值的描述
static：没有定位，元素出现在正常的流中，占据文档流空间
fixed：生成固定定位的元素，相对于浏览器可视窗口进行定位，不占据文档流空间
relative：生成相对定位的元素，相对于元素本身正常位置进行定位，占据文档流空间
absolute：生成绝对定位的元素，相对于static定位以外的第一个含有(relative, absolute, fixed, sticky)的祖先元素定位，不占据文档流空间
sticky: 黏贴定位，相对于浏览器可视窗口进行定位，占据文档流空间
主流浏览器、内核 、内核构成以及作用
IE * trident
Firefox(火狐) * gecko
Safari(苹果) * webkit
Chrome(谷歌) * webkit * blink (blink是webkit内核一个分支)
Opera(欧朋) * presto * webkit (2013改为webkit)
IT知识分享网内核构成:
渲染引擎：负责渲染HTML、CSS、图片等信息，然后输出到显示器
js引擎: 负责解析javascript脚本，实现页面动态效果
css具有继承属性
color, text-align, line-height, font-size, font-weight, font-style, font-family,
white-space, text-indent, text-decoration, text-transform等等
== 和 ===，null 和 undefined的区别
==: 值相等，类型可以不同
===: 值相等且类型相同
null: 表示暂且空值，未来有值，一般用于释放引用类型数据
undefined: 表示未定义，一般是指一个变量只是生声明而没有赋值
css优先级分配
含有!important的css的优先级最高
在相同选择器精度情况下：
id选择器的优先级 > class选择器大 > 元素选择器
内联样式 > 内部样式
内联样式 > 外部样式
HTML、XHTML、XML、HTML5区别
HTML: 超级文本标记语言，标签对大小写不敏感
XHTML: 严格的HTML，标签必须小写，标签必须闭合，标签必须嵌套正确
XML: 可扩展的标记语言，标签可以自定义，比如 <car></car>
HTML5: HTML4.0.1升级版
行内元素，行内块元素，块级元素的区别以及标签嵌套规范
行内元素: 不占满整行，不可以直接使用css设置宽度和高度，比如 a, i, span, b, strong, del, s等等
行内块元素: 不占满整行，可以直接使用css设置宽度和高度，比如 button, img, input, textarea, select等等
块级元素: 占满整行，可以直接使用css设置宽度和高度，比如 div, p, h1-h6, ul, ol, li, form等等
标签嵌套规范
行内元素可以嵌套行内元素
块级元素可以嵌套块级元素、行内块元素、行内元素
p元素不能嵌套p元素，p元素不能嵌套h系列的元素，h系列的元素不能嵌套h系列的元素
面向对象以及原型
面向对象
将需求抽象成一个对象，然后对其成员进行分析
面向对象三大特征
封装、继承、多态
面向对象的第一步是创建构造函数，第二步通过构造函数创建对象实例
原型：
对象的属性和方法，有可能是定义在自身，也有可能是定义在它的原型对象，由于原型本身也是对象，又有自己的原型，所以形成了一条原型链。
函数的原型是 prototype
对象的原型是 __proto__
对象的顶级原型为null， 即Object.prototype.__proto__ == null
外边距合并
在垂直方向，两个元素相遇，会发生外边距合并，合并时取最大外边距
对于父子元素外边距合并
如果父级元素没有内边距和边框，此时设置子元素的外边距，该外边距会和父元素的外边距发生合并
解决方法：
父元素设置边框
父元素设置内边距替换子元素的外边距
对于同级元素外边距合并
在垂直方向, 前一个元素设置margin-bottom,后一个设置margin-top, 此时两个元素会发生外边距合并
解决方法: 只设置元素最大值的外边距
a元素和label元素的作用
对于a元素
下载，跳转站外链接，跳转站内链接，回到顶部，锚点
对于label元素
label一般配合表单控件使用
使用label元素包裹的表单控件，点击label任何一个范围，相当于点击表单控件
使用label的for属性关联表单控件的id，点击label任何一个范围，相当于点击表单控件
判断数组六大方法
arr.constructor === Array
arr instanceof Array
Array.isArray(arr)
Array.prototype.isPrototypeOf(arr)
Object.getPrototypeOf(arr) === Array.prototype
Object.prototype.toString.call(arr) === '[object Array]'
CSS的盒子模型
盒子模型的组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)
内边距位于内容和边框之间，一般用于隔离内容，内边距可以填充背景色
外边距位于盒子和盒子之间，一般用于隔离盒子，使得盒子与盒子有一定的间距
边框位于内边距和外边距之间
js数据类型
js数据类型分为原始数据类型和引用数据类型
原始数据类型
number, string, boolean, null, undefined, symbol
引用数据类型
function, array, object
$(function() {}) 和 window.onload区别
window.onload是在页面所有的元素都加载完成后才触发 $(function(){})是在页面的dom结构加载完毕后就触发
dom里的内容不一定都已经加载完成
内部插入节点和外部插入节点
内部插入节点，节点关系为父子关系
在父节点尾部添加一个子节点
父节点.append(子节点)
子节点.appendTo(父节点)
在父节点顶部添加一个子节点
父节点.prepend(子节点)
子节点.prependTo(父节点)
外部插入节点，节点关系为同胞节点
在节点前面添加节点
节点1.before(节点2);
节点2.insertBefore(节点1);
在节点后面添加节点
节点1.after(节点2);
节点2.insertAfter(节点1);
== 和 ===，null 和 undefined的区别
==: 值相等，类型可以不同
===: 值相等且类型相同
null: 表示暂且空值，未来有值，一般用于释放引用类型数据
undefined: 表示未定义，一般是指一个变量只是生声明而没有赋值
瀑布流实现原理
先取第一行元素的高度为基准高度，
从第二行开始，在基准高度找出最小高度值，将下一个元素放在最小高度对应的元素的下面，元素完成位置设置后，将基准高度的最小高度重置为元素高度和最小高度之和
$.extend 和 $.fn.extend的区别
$.extend
如果只传递一个对象，表示在jQuery构造函数扩展属性和方法，jquery实例不能使用，只能jQuery构造函数本身使用
如果传递两个对象以上的，表示合并对象，并返回合并之后的对象
如果第一个参数为true，其他参数为对象时，则表示深度合并对象，并返回合并之后的对象
$.fn.extend
表示在jQuery构造函数的原型prototype扩展属性和方法, jquery实例能使用, jQuery构造函数本身不能使用
重绘和回流
重绘
当页面的元素需要更新属性，新的属性对元素的外观，风格的产生影响，这个更新的过程称为重绘
比如设置元素的background，color等等，都会重绘元素
回流
当页面的元素因为尺寸，位置、布局，隐藏等改变而需要浏览器重新构建的过程，这个重构的过程称为回流
比如设置元素的width，height，float，position等等，都会回流元素
display: none; 和 visibility: hidden;的区别
共同点：都是隐藏元素
不同点: 对于display: none;隐藏的元素不会占据文档流；visibility: hidden;隐藏的元素仍会占据文档流
浏览器的渲染页面机制
浏览器解析HTML文档和CSS样式表构建DOM树和和CSSDOM树(没有设置节点外观样式)
浏览器结合DOM树和CSSOM树构建渲染树(重绘元素)
浏览器在渲染树内对每个渲染元素进行布局处理，计算出每一个元素的大小和位置(回流元素)
遍历渲染树将实际的像素显示到屏幕(确认最终的回流元素样式)
加载优化
懒加载可视区域的数据
依赖的下载路径是否可靠，不可用时候是否会阻碍整个页面
脚本放在body结束标签之前执行
压缩html、图片、样式表、js
保证图片正常浏览时，图片分辨率要尽可能小
字体图标替换图片
css选择器尽量不要超过四个层级，由于css选择器越复杂，浏览器计算得越久
尽量减少js对DOM操作
bootstrap4响应式断点范围
超大PC xl: x >= 1200px
pc lg: x >= 992px
平板 md: x >= 768px
手机或者手机横屏 sm: x >= 576px
超小屏幕手机: x < 576
什么是XSS攻击
XSS(cross site script): 跨站脚本攻击
原理: 恶意攻击者往web页面插件恶意的HTML代码, 当用户浏览网页时, 嵌入恶意的html代码就会被执行
实现原理: 通过站内交互途径, 比如发布评论, 提交含有javascript的内容文本, 如果前端和服务器没有过滤或者没有转义这些脚本, 作为内容发布到网页上, 其他用户访问这个页面时会执行这些脚本, 从而被攻击
目的: 通过插入恶意脚本, 实现对用户浏览器的控制, 获取用户信息
怎样防止XSS攻击
输入过滤(长度验证, 格式验证)
输出转义(html转义编码)
将重要的cookie标记httponly, 避免XSS攻击利用javascript的document.cookie获取cookie
其中具有httponly标记的cookie无法获取，增强cookie的安全性
有关css属性position的属性值的描述
static：没有定位，元素出现在正常的流中，占据文档流空间
fixed：生成固定定位的元素，相对于浏览器可视窗口进行定位，不占据文档流空间
relative：生成相对定位的元素，相对于元素本身正常位置进行定位，占据文档流空间
absolute：生成绝对定位的元素，相对于static定位以外的第一个含有(relative, absolute, fixed, sticky)的祖先元素定位，不占据文档流空间
sticky: 黏贴定位，相对于浏览器可视窗口进行定位，占据文档流空间
前端如何定跳页面
利用a标签的href属性跳转页面
使用location跳转页面，跳转方式有三种
location.href
location.assign()
localtion.replace()
加载优化
懒加载可视区域的数据
依赖的下载路径是否可靠，不可用时候是否会阻碍整个页面
脚本放在body结束标签之前执行
压缩html、图片、样式表、js
保证图片正常浏览时，图片分辨率要尽可能小
字体图标替换图片
css选择器尽量不要超过四个层级，由于css选择器越复杂，浏览器计算得越久
尽量减少js对DOM操作
目前主流浏览器
IE 内核 ：trident
Firefox 内核：gecko
Safari (苹果) 内核：webkit
Opera（欧朋） 内核:webkit
Chrome (谷歌) 内核:webkit
内核构成：渲染引擎：负责渲染HTML,CSS,图片 等信息，然后输出显示器
js引擎：负责解析JavaScript脚本，实现页面动态效果
get请求和post请求的区别
get传输数据的速度快，安全性低
post传输速递低，安全性高
Sass、LESS 是什么？大家为什么要使用他们？
共同点：他们是CSS的预处理器，是CSS上的抽象层，是一种特殊语法，语言编译成CSS;
Less:是一种动态样式语言，将CSS设置成动态语言的属性，既可以在客户端运行，也可以在服务端运行；
Sass:
为什么使用？
a.结构清晰，便于扩展。
b.可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无c.意义的机械劳动。
d.可以轻松实现多重继承。
e.完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。
为什么要用面向对象？
1.便于项目的维护，拓展更新
2.可以实现属性和方法的继承
3.提高网页应用程序的性能，节省内存空间
什么是对象？
属性和方法的集合，属性和方法是对象的成员
js面向对象创建对象的几种方式：
1.直接量定义对象
2.工厂模式定义对象
优点：解决看创建相似对象的问题，
缺点：不能识别对象类型
3.构造函数定义对象
优点：创建自定义函数介意将它的实例标识为一种特定的类型
缺点：每个方法都要重新实例一遍
4.原型定义对象
优点：可以让所有的对象实例共享它所包含的属性和方法
缺点：原型中的所有属性都是共享的，但是实例一般都要有自己单独属性的
5.混合模型
三种方式定义一个函数
1.var fn1= new Function(‘代码块’);//调用fn1()
2.var fn2 =function(){代码块}；fn2()
3.function fn3(){代码块}；fn3（）
自执行函数
(function(){代码块})（）
回调函数
特点：把一个函数作为实参传递到另一个函数再调用
function fn1(callback){
callback();
}
fn1(function(data){代码块})
CSS中link和@import的区别是？
1.lin属于HTML标签，而@import是CSS提供的
2.link是标签没有兼容性问题，而@import需要ie5以上浏览器
3.页面被加载时，link标签被同时加载，而@import需要页面加载完再加载
4.link标签方式的权重高于@import
为什么要初始化样式？
由于兼容问题，不同浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异
BFC是什么？
独立的布局环境，其中的元素不受外界的影响，并在一个BFC中，块盒和行盒都会垂直沿其父元素的边框排列
对 WEB 标准以及 W3C 的理解与认识
W3C可分为结构层，行为层和表现层，而WEB标准是让三者独立，让其具有模块化
W3C对web标准提出了规范化
1.对于结构：
a.标签要闭合
b.标签要小写
c.标签不能随意嵌套
2.对于表现和行为：
a.尽量使用外链CSS和JS，符合规范提高渲染速度
b.不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性
作用域，作用域链？
a.作用域：就是变量与函数的可访问范围。作用域分为 全局作用域(所声明的变量全局都可以访问),局部作用域(所声明的变量只在其内部可以访问)。
b.作用域链：当我们在一个函数内部访问当前作用域内不存在的变量时，就会逐层向外查找，如果一直找不到就会报错。当我们在局部作用域中，调用外部变量时，就产生了作用域链。
JavaScript的三种强制转化类型
ParseInt()将一个字符串转化成一个整数
ParseFloat（）将一个字符串转化成一个浮点数
Number（）将变量转化成数值型
ajax的理解？
ajax的原理：原理：相当于在用户和服务器之间加一个中间层（ajax引擎),使用户操作与服务器响应异步化。
ajax的优点：在不刷新整个页面的前提下与服务器通信维护数据。不会导致页面的重载可以把前端服务器的任务转接到客服端来处理，减轻服务器负担，节省宽带。
ajax的劣势：对搜索引擎的支持比较弱；不容易调试。解决办法：通过location.hash值来解决Ajax过程中导致的浏览器前进后退按键失效
列举浏览器对象模型 BOM 里常用的至少 4 个对象，并列举 window 对象的 常用方法至少5个
对象：window document location screen history navigator
方法：alert() confirm() prompt() open() close() setInterval() setTimeout() clearInterval() clearTimeout()
如何阻止事件冒泡和默认事件 ：
a.阻止冒泡事件：e. stopPropagation();//标准浏览器
b.阻止默认事件：e.preventDefault();
javascript 的本地对象，内置对象和宿主对象
a.本地对象：array obj regexp 等可以 new 实例化
b.内置对象：gload Math 等不可以实例化的
c.宿主对象:浏览器自带的 document,window
Sass和Less的区别
只要区别是他们的实现方式不同LESS是基于javaScript运行,所以LESS是在客户端处理，Sass是基于Ruby的，在服务端处理的，很多开发者不选择LESS是因为LESS输出修改过的CSS浏览器需要依赖JavaScript引擎，而JavaScript引擎需要额外的时间处理代码
JQuery是什么？特点，优缺点？
什么是jQuery：
1.jQuery是一个优秀的JavaScript框架
2.是一个轻量级的js库，简洁的js库，能使用户更方便的处理dom，event，实现动画效果，并且方便为网站提供ajax交互
特点：
1.一款轻量级的js框架
2.丰富的dom选择器
3.链式表达式
4.事件。样式。动画支持
5.ajax操作支持
6.跨浏览器兼容
7.插件扩展开发
8.可拓展性强
优点：
1.实现脚本与页面分离
2.最少代码做最多的事情
3.性能支持比较好
缺点：
1.不能向后兼容
2.插件的兼容性
3.使用多个插件容易发生冲突
网络七层协议：
1.应用层
2.表示层
3.会话层
4.传输层
5.网络层
6.数据链路层
7.物理层
js的常用内置对象
1.array数组对象
2.string字符串
3.math对象
4.Date日期对象
js堆栈
含义：都是运行时内存分配的一个数据区，因此也被称为堆区和栈区
区别：
二者存储的数据类型和处理速度不同
1.堆用于复杂引用数据类型分配空间，存储速度慢；
2.栈主要用于存放基本数据类型，存储速度快；
垃圾回收机制
1.标记清除：当变量进入执行环境时，变量标记为进入环境，当离开环境时，标记为离开环境，
2.引用计数：引用计数的含义是跟踪记录每个值被引用的次数，当声明一个变量并将一个引用类型赋值给该变量时，这个值的引用次数就是1，相反，如果包含对这个值引用的变量又取得另外一个值，则这个值引用次数就-1；
js由三部分组成
ECMAscript：它是js语言的标准，规定了js的编程语法和基础核心知识
dom：文档对象模型，提供给js很多操作页面中元素的属性和方法
bom：浏览器对象模型，提供给很多操作浏览器的属性和方法，而这些方法都放在window浏览器对象下
Promise是什么
是一种异步编程的解决方案，从语法上看，Promise是一个对象，它可以获取异步操作的消息，从本意上看他是一种承诺，承诺一段时间会给你一个结果
同步加载与异步加载？
同步模式：
又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞
异步加载：
又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理
Promise的作用？
是一个对象，用来传递异步操作的消息，提供统一的api，可供进一步处理
vuex的五个属性有哪些（状态管理模式）
1.state：基本数据 （mapState辅助函数）
2.getters：从基本数据派生的数据
3.mutations：提交更改数据的方法
4.actions：像一个装饰器，包裹mutations，使之可以异步
5.mudules：模块化vuex
vue的虚拟dom 是什么
是js模拟dom结构，利用虚拟dom最后的状态去操作dom
常见的八大数据结构：
数组
栈
队列
链表
树
图
字典树（这是一种高效的树形结构，但值得单独说明）
散列表（哈希表）
foreach和map的区别
foreach返回的是一个undefined
map返回的是一个新数组
nodejs的优缺点：
优点：高并发
适合I/O密集型
缺点：不适合CPU密集型应用
只支持单核CPU
可靠性低
适合场景：RESTful API
统一web应用的UI层
大量的ajax请求的应用
页面导入样式时，使用link和@import有什么区别？
1.link属于XHTML标签，除了加载css外，还能定义rel链接起作用，而@import是css提出的只能加载css
2.页面被加载时，link会被同时加载，而@import引用的css需要页面加载完再加载
3.@import需要IE5以上才能识别，而link无兼容问题
原型是什么？
在JavaScript中原型是一个prototype对象，用于表示类型之间的关系。
原型链是什么？
在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。
什么是虚拟DOM？
使用js对象模拟DOM，在操作过程中不会直接操作DOM，等待虚拟DOM操作完成，仅仅比较开始和结束状态虚拟DOM有哪些变换，最终根据结束状态虚拟DOM去操作DOM。
Vue相对于jQuery在开发上有什么优点
a.Vue比JQuery减少了 DOM 操作
b.组件化模式，开发效率高,方便维护
jsonp原理？
使用script标签的src属性，利用get方式请求后台数据，将数据以参数的形式返回
怎样避免全局变量污染？
a.尽量少使用全局变量
b.使用闭包
Vue数据双向绑定的原理及其实现
原理是根据数据劫持和订阅者模式
实现过程是监听器，观察者和解析器
MVC与MVVM的理解
MVC
视图层（View）：主要是用户界面的展示
控制层（Controller）：主要是处理Model层和View层的交互
模型层（Model）：主要是对数据的CRUD操作辑的处理。
MVVM
视图层（View）：调用ViewModel的方法并响应变化。
视图模型层（ViewModel）：主要做业务的调度者，分割了View层和Model层。
模型（Model）：数据模型
GET、POST的区别？
a.get是从服务器上获取数据，post是向服务器传送数据。
b.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制
c.get安全性非常低，post安全性较高。
socket与web socket的区别？
Socket是传输控制层协议，WebSocket是应用层协议。
什么是深拷贝，什么是浅拷贝
深拷贝是两个对象在同一个内存空间，如果一个改变另一个会开辟新的内存空间，不受影响
浅拷贝是两个对象，如果一个改变，另一个也会发生改变
请讲述sessionStorage、localStorage、cookie的区别？
⒈localStorage长期存储数据，浏览器关闭数据后不丢失；
⒉sessionStorage数据在浏览器关闭后自动删除；
⒊cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。session storage和local storage不会自动把数据发给服务器，仅在本地保存；
⒋存储大小：cookie数据大小不会超过4K，session storage和local storage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更多；
如何解决浏览器兼容问题? 另外请详细讲述CSS hack。
可以通过初始化样式
csshack是通过不同css 代码在不同浏览器中兼容相同效果
讲一下 prototype 是什么东西，原型链的理解，什么时候用 prototype
prototype是js的对象由属性和方法组成
原型链是每个prototype对象指向父级对象，最终指向Obeject产生的原型链条
js中call(),apply(),bind()方法的区别
call()和apply()第二个传入的参数不同，call()传入的是字符串，apply()传入的是数组
bind()传参方式与call()相同，只不过call()和apply()调用后会立即执行，而bind()还需要再调用才会执行
什么是事件委托，它的作用？
就是讲子元素的事件，放在父元素去处理，他是原理是事件冒泡的实现
作用:减少for循环优化性能，减少内存
什么是函数防抖？
在单位时间内函数只执行最后一次，如果多次触发，则重新计算延迟时间
应用场景：
表单提交，输入框验证，搜索框
什么是函数节流？
在单位时间内多次触发一段时间只一次函数执行
应用场景:
dom元素的多次拖拽或滚动，抢购
什么重绘和回流？
重绘：当页面元素样式改变，不影响元素在文档流中的位置
回流：当操作的改变响应文档内容或者元素在文档流中的位置发生改变
优化：
减少dom操作
将样式放在head标签下而脚本放在body结束后
简洁优化css样式
事件冒泡和事件捕获的区别？
事件冒泡是给子元素绑定事件并触发时，父元素也会跟着触发
事件捕获是用addeventlistener（）绑定并触发子元素时，先触发父元素再传递给子元素
什么堆栈？它们的区别
堆主要存储引用数据类型，存放速度比较慢
栈主要存储基本数据类型，存取速度比较快
区别：
栈存储的是局部变量，堆存放的是实体
栈的存放速度比堆快
栈存放的变量生命周期结束就会被摄放，而堆会不定时被垃圾回收机制回收
什么是路由守卫？
路由守卫是路由跳转时被验证，通常用于登录验证
传入的参数有to(到哪个页面),from(从哪个页面来),next(回调函数)
请描述下你对vue框架的理解？
vue是一套用于构建用户界面的渐进式框架
特性：轻量级框架
双向数据绑定
插件化
优点：轻量高性能组件化的MVVM库，容易上手
缺点：不支持IE8
性能不如react和angular
var let const区别?
var的声明一般在全局作用域,会有变量提升,会造成变量污染
let的声明一般在块级作用域,不存在变量提升,形成暂时性死区,不能重复声明
const的声明一般在块级作用域,形成暂时性死区,不能重复赋值,原因是对简单数据类型的值保存在内存地址,而复杂的数据类型保存的是指向实际数据的内存地址
promise是什么?
作为异步编程操作,解决回调地狱,有三个参数,padding(进行中),fulfilled(已成功),rejected(已失败),一旦执行无法中途取消
Promise.prototype.then()等待上一个promise状态改变返回新的promise实例
Promise.prototype.catch()用于指定发生回调函数异步执行的错误
Promise.prototype.try()用于指定发生回调函数同步执行的错误
Promise.prototype.finally()不管 Promise 对象最后状态如何，都会执行的操作
Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例,一个执行失败则不会继续执行
Promise.race() 多个相同数据的接口哪个获取快,就先获取哪个的结果
Promise.allSettled()不管每一个操作是成功还是失败，再进行下一步操作
Promise.any()只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。
async/await是什么?
promise和Generater的语法糖,await必须放在async里面
好处:
1.简介,使异步代码看起来像同步代码
2.async/await 让 try/catch可以同时处理同步和异步的错误
箭头函数与普通函数的区别
1.普通函数存在变量提升的现象
2.箭头函数不能作为构造函数使用,没有new对象
3.两者this的指向不同,普通this指向绑定的事件,箭头函数的this指向所处环境的上下文,如果没有上下文指向最外层的对象window
Map和Set的区别?
1.Map保存键值对，任何值都可以作为键值的值。
2.Set保存的是类数组数据，是值的集合。
3.Map有get方法而Set没有get方法
原型和原型链的理解?
原型:每个函数都有prototype属性,该属性指向原型对象;使用原型对象的好处是所有对象实例共享它所包含的属性和方法
原型链:每个对象都有个原型对象,通过_proto_指针指向原型对象,并从中继承方法和属性,同时原型对象也有原型,这样一层一层最终指向null
原型的作用：
1.数据共享 节约内存内存空间
2.实现继承
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/12291.html
