1.JavaScript中的定时器有哪些?
答:
1.setTimeout 只执行一次,在指定的时间数后调用函数或计算表达式
2.setInterval 会一直重复执行,按照指定的时间来调用函数或者执行表达式,此方法会不停的调用函数,直到clearInterval()被调用或者窗口被关闭
2.请写出你对闭包的理解,并列出简单的解释?
答:
使用闭包主要是为了设计私有的方法和变量。闭包的有点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存的使用量,使用不当容易造成内存泄露
闭包的三个特征
1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
3.有哪些方式可以对一个DOM设置它的CSS样式?
答:
1.外部样式表,引入一个外部CSS文件
2.内部样式表,将CSS代码放在< head >内部
3.内联样式
4.JavaScript的数据类型都有什么?
答:
基本数据类型:String,boolean,Number,Undefined,Null,Symbol(es6新添加的);
引用数据类型:Object(Array,Date,RegExp,Function)
5. 变量let和const
var
1.可以重复声明
2.无法限制修改
3.没有块级作用域
let
1.不能重复声明 ( 不能重复定义两个名字一样的)
2.变量-可以修改 (就是可以修改其中的值)
3.有块级作用域
const
1.不能重复声明 (不能重复定义两个名字一样的)
2.常量-不能修改 (完全不能修改)
3.有块级作用域
4.定义对象可以改变其中的值
6.Ajax中GET和Post的异同点
相同点:
都是将数据提交到远程服务器
不同点:
提交数据存储的位置不同
GET请求会将数据放到URL后面
POST请求会将数据放到请求头中
提交数据大小限制不同:GET请求对数据大小有限制,POST请求对数据大小没有限制
请求应用的场景:GET请求用于提交非敏感数据和小数据,POST请求用于提交敏感数据和大数据
7.cookie的优缺点
优点:
1.极高的扩展性和可用性
2.数据持久性
3.不需要任何服务器资源
4.简单,基于文本轻量结构
5.通过良好的编程,可以控制cookie中session的大小
6.只能通过加密技术传输SSL,减少被盗风险
7.cookie中不存放敏感数据,被盗也没有重大损失
缺点:
1.cookie有数量和长度的限制,不同的浏览器保存cookie的数量也不同,少的20个 多的50个
长度最大为4096个字节,但为了兼容性一般不超过4095
2.存在安全风险
3.可能有某些用户禁用了cookie
4.有些状态不可能保存在客户端
8.简述浏览器本地存储
html本地存储web storage包括了两种存储方式
一种是sessionStorage,用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也会销毁。因此sessionStorage不是一种持久化的本地存储
另一种是locaStorage用于持久化的本地存储,除非主动删除数据,否则数据永远不会过期
9.web Storage与cookie的区别
1.存储空间不同,web Storage能提供5M的存储空间,cookie只能提供4096字节
2.与服务器的交互,cookie常常会与请求一起发送到服务器,而web Storage仅仅存在本地,不与服务器发生交互
3.接口,web Storage提供了很多接口setItem 、getItem、removItem、clear等等方法,而cookie需要开发者自己封装setCookie、getCookie
4.跨域问题,cookie需要制定作用域,不能跨域调用
10.display:none和visbility:hidden的区别
display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,
就当他从来不存在。
visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。
如果给块级元素添加display:inline属性 则也不会显示出来
11.CSS中link和@import的区别是
1.@import属于HTML标签,而@import是CSS提供的
2.页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
3.import只在IE5以上才能识别,而link是HTML标签,无兼容问题;
12.position的absolute与fixed共同点与不同点
A:共同点:
1.改变行内元素的呈现方式,display被置为inline-block;
2.让元素脱离普通流,不占据空间;
3.默认会覆盖到非定位元素上
B不同点:
absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。
当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。
13.介绍一下CSS的盒子模型
盒子模型,content(中心),padding(填充),margin(边界),border(边框)
有两种盒子模型,一种是正常的盒子模型,另一种是IE盒子模型(这种模型的content包含了border和padding)
14.CSS的选择器有哪些?哪些可以继承?优先级算法如何计算?CSS3新增的伪类有哪些?
CSS选择器:
ID选择器 ("#")
class选择器(".")
标签选择器(div,h1,p)
相邻选择器(h1+p)
子选择器(ul>li)
后代选择器(li a)
通配符选择器(" * ")
属性选择器(a[rel = “external”])
伪类选择器(a: hover, li:nth-child)
不可继承的样式:
1.border
2.padding
3.margin
4.width
5.height
优先级算法:
1.优先级就近原则,同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高,但内联比 id 要高
CSS3新增伪类举例:
p:first-of-type 选择属于其父元素的首个 p元素的每个 p 元素。
p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素。
p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 p 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
15.列出display的值,说明他们的作用。position的值, relative和absolute分别是相对于谁进行定位的?
display 的值的作用:
1.block 象块类型元素一样显示。
2.inline 缺省值。象行内元素类型一样显示。
3.inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
4.list-item 象块类型元素一样显示,并添加样式列表标记。
position 的值的定位区别:
1.absolute 生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位。
2.fixed 生成固定定位的元素,相对于浏览器窗口进行定位(老IE不支持)。
3.relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。
4.static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。
5.inherit 规定从父元素继承 position 属性的值。
16.CSS3有哪些新特性?
- CSS3实现圆角(border-radius),阴影(box-shadow)
- 对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
- transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
- 增加了更多的CSS选择器 多背景 rgba
- 在CSS3中唯一引入的伪类是 ::selection.
- 媒体查询,多栏布局
- border-image
新增的选择器:
1)E:last-child 匹配父元素的最后一个子元素E。
2)E:nth-child(n)匹配父元素的第n个子元素E。
3)E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
@Font-face特性,可以从服务器上加载本地电脑没有的字体
17.为什么要初始化CSS样式
因为浏览器的兼容问题,不同的浏览器对某些标签的默认值是不同的,如果不进行初始化的话可能会出现样式的差异,
当然,样式初始化对SEO有一定的影响,通常力求在影响最小化的情况下完成初始化
最简单的初始化方法
{padding:0;margin:0;}
18.对BFC规范的理解?
BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的 margin 会发生折叠。
通俗理解
BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响。
浮动元素会创建BFC,则浮动元素内部子元素主要受该浮动元素影响,所以两个浮动元素之间是互不影响的。
形成BFC:
1.float的值不为none。
2.overflow的值不为visible。
3.display的值为table-cell, table-caption, inline-block中的任何一个。
4.position的值不为relative和static。
19.对语义化的理解
1.当样式无法加载的时候页面还能以清晰的结构呈现出来
2.有利于SEO(搜索引擎的抓取)
3.方便其他设备解析
4.方便维护
20.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
1.<!DOCTYPE>声明位于文档的最前面,处于< html>标签之前。它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令
2. 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
3. 在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
21.你知道多少种Doctype文档类型?
1.<!DOCTYPE> HTML5只有一种
2.< !DOCTYPE 4.01>有三种
22.解释下浮动和它的工作原理?清除浮动的技巧
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
-
使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。 -
使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 -
使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;
可以给父元素设置overflow:auto或者hidden
23.浮动元素引起的问题和解决办法?
浮动引起的问题:
1.父元素的高度无法被撑开,影响与父元素同级的元素
2.与浮动元素同级的非浮动元素会跟随其后
3.若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
清除浮动的方法:
1.额外标签法,< div style=“clear:both;”>< /div> (缺点:这个办法会增加额外的标签,使得HTML结构看起来不整洁)
2.使用after伪元素
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3.浮动外部元素
4. 设置overflow为hidden或者auto
24.IE8以下版本的浏览器中的盒子模型有什么不同
IE8以下版本的盒子模型与W3C的盒子模型有不同
content包含了padding和border
25.DOM元素怎样添加、移除、移动、复制、和查找节点
1.创建新节点
createDocumentFragment()//创建一个DOM片段
createElement()//创建一个具体的元素
createTextNode()//创建一个文本节点
2.添加、移除、替换、插入
appendChild()//添加节点
removeChild()//移除节点
replaceChild()//替换节点
insertBefore()//在已有的子节点前插入一个新的子节点
3.查找
getElementByTagName()//通过标签名称
getElementByName()//通过元素的Name属性的值
getElementById()//通过元素的ID,具有唯一性
26.HTML5有哪些新特性?移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
新特性:
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
- 拖拽释放(Drag and drop) API
- 语义化更好的内容标签(header,nav,footer,aside,article,section)
- 音频、视频API(audio,video)
- 画布(Canvas) API
- 地理(Geolocation) API
- 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
- sessionStorage 的数据在浏览器关闭后自动删除
- 表单控件,calendar、date、time、email、url、search
- 新的技术webworker, websocket, Geolocation
移除的元素:
- 纯表现的元素:basefont,big,center,font, s,strike,tt,u;
- 对可用性产生负面影响的元素:frame,frameset,noframes;
支持HTML5新标签:
- IE8/IE7/IE6支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式(当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架)
如何区分HTML和HTML5
文档头部DOCTYPE 如果是<!DOCTYPE>就是HTML5
27.iframe的优缺点?
优点:
- 解决加载缓慢的第三方内容如图标和广告等的加载问题
- Security sandbox
- 并行加载脚本
缺点:
- iframe会阻塞主页面的Onload事件
- 即时内容为空,加载也需要时间
- 没有语意
28.如何实现浏览器内多个标签页之间的通信?
使用localStorage和Cookie
29.线程与进程的区别
- 一个程序至少有一个进程,一个进程至少有一个线程
- 线程的划分尺度小于进程,使得多线程程序的并发性高
- 另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率
- 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制
- 从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别
30.你如何对网站的文件和资源进行优化?
期待的解决方案包括:
- 文件合并
- 文件最小化/文件压缩
- 使用 CDN 托管
- 缓存的使用(多个域名来提供缓存)
- 其他
使用多个域名存储网站的有点
1.CDN缓存更方便
2.突破浏览器并发限制
3.节约cookie贷款
4.节约主域名的连接数,优化页面相应速度
5.防止不必要的安全问题
31.null与undefined的区别
null是一个表示"无"的对象,转为数值时为0
undefined是一个表示"无"的原始值,转为数值时为NaN
当声明的变量还未被初始化时,变量的默认值为undefined
null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象
undefined表示 “缺少值”,就是此处应该有一个值,但是还没有定义。典型用法是:
- 变量被声明了,但没有赋值时,就等于 undefined
- 调用函数时,应该提供的参数没有提供,该参数等于 undefined
- 对象没有赋值的属性,该属性的值为 undefined
- 函数没有返回值时,默认返回 undefined
- 作为对象原型链的终点
null表示“没有对象”,即该处不应该有值。典型用法是:
- 作为函数的参数,表示该函数的参数不是对象
- 作为对象原型链的终点
32.new操作符具体干了什么?
1.创建一个空对象,并且this变量引用该对象,同时还继承了该函数的原型
2.属性和方法被加入到this引用的对象中
3.新创建的对象由this所引用,并且最后隐式的返回this
var obj={};
obj.__proto__=Base.prototype;
Base.call(obj);
33.对JSON的了解?
JSON是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小。
{"age":12,"name":"back"}
34.JS的延迟加载方式有哪些?
- defer和async
- 动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack)
- 按需异步载入js
35.如何解决跨域问题
- jsonp(jsonp 的原理是动态插入 script 标签)
- document.domain + iframe
- window.name、window.postMessage
- 服务器上设置代理页面
36.documen.write和 innerHTML 的区别
documenrt.write只能重绘整个页面,是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。
innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。
innerHTML将内容写入某个DOM节点,不会导致页面全部重绘
简单的说就是document.write会重绘整个页面,而innerHTML只会修改局部
37…call()和.apply()的作用?
改变this的指向
38.哪些操作会造成内存泄露?
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
- setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
- 闭包
- 控制台日志
- 循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
39.Node的优点和缺点?说说自己的看法
优点:
- 因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
- 与Node代理服务器交互的客户端代码是由javascript语言编写的,因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
缺点:
3. Node是一个相对新的开源项目,所以不太稳定,它总是一直在变。
40.ajax 的过程是怎样的
1 创建XMLHttpRequest对象,也就是创建一个异步调用对象
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新
41.Node.js 的适用场景
1.高并发
2.聊天
3.实时信息推送
42.JavaScript 原型,原型链 ? 有什么特点?
- 原型对象也是普通的对象,是对象一个自带隐式的 proto 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为 null 的话,我们就称之为原型链
- 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链
43.HTTP状态码
100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求,但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置
302 Found 临时性重定向
303 See Other 临时性重定向,且总是使用 GET 请求新的 URI
304 Not Modified 自从上次请求后,请求的网页未修改过
400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求
401 Unauthorized 请求未授权
403 Forbidden 禁止访问
404 Not Found 找不到如何与 URI 相匹配的资源
500 Internal Server Error 最常见的服务器端错误
503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)
44.Vue的响应式原理
当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。
2021/10/13更新
45.以下能被CSS继承的属性是
line-height
46.#ffff00是那种颜色
黄色
47.在css中div设置{width:100px;padding:20px;border:10px;},则该div的实际宽度是
140px
48.以下哪个在if判断中为true?
[ ] 在if判断中为true
49.数组a=[1,2,3,4,5];a.splice(2,1,6) a=
[1,2,6,4,5]
第一个参数2,开始的位置
第二个参数1,删除的个数
第三个参数6,添加的项
从第二个参数开始,删除一个项(3),添加一个项(6)
50.[1,2,11,12,2,20].sort输出的结果是
1,11,12,2,22
60.
let a=10.123
typeof a.toFixed(1)
输出的结果是String
61.如何判断属性来自自身还是原型链
obj.hasownProperty(属性)
2021/10/14更新
62.哪一部分的javascript会在页面加载的时候被执行
< body>部分标签
63.下列说法正确的有:
visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明;
display:none;不为隐藏的对象保留其物理空间;
64.let关键字的特点