前端面试整合

发布于 / 前端 / 1 条评论

HTML&CSS

1.从 URL 输入到页面展现背后发生了什么事?

- DNS 解析:将域名解析成 IP 地址
- TCP 连接:TCP 三次握手
- 发送 HTTP 请求
- 服务器处理请求并返回 HTTP 报文
- 浏览器解析渲染页面
- 断开连接:TCP 四次挥手

2.浏览器是如何渲染页面的

1.处理HTML标记并构建DOM树
2.处理CSS标记并构建CSSOM树
3.将DOM和CSSOM合并成一棵渲染树
4.根据渲染树来布局,计算每个节点的布局信息
5.将各个节点绘制到屏幕上

3.浏览器的内核有几种

1、Trident内核:IE最先开发或使用的,也称IE内核,360浏览器使用的也是IE内核;
2、Webkit内核:谷歌chrome浏览器最先开发或使用,也叫谷歌内核,枫树浏览器、太阳花使用的也是谷歌内核;
3、Gecko内核: Netscape6开始采用的内核,后来的Mozilla FireFox (火狐浏览器) 也采用了该内核,K-Meleon浏览器也是使用这种内核;
4、Presto内核:目前只有Opera浏览器采用该内核

4.刷新页面,JS 请求一般会有哪些地方有缓存处理?

dns缓存,cdn缓存,浏览器缓存,服务器缓存

5.DOCTYPE怎么写,有什么作用

<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
HTML5的Doctype是<!DOCTYPE html>,现在的浏览器都支持这个写法,不需要再像HTML4一样区分三种Doctype(严格、松散、框架)了。因为HTML4基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型,而HTML5 不基于 SGML,因此不需要引用DTD,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)

6.img的alt和title属性的作用

alt用于图片显示不出来时提示文字
title用于鼠标悬浮时提供的文字

7.对于web标准和W3C标准的理解与认识

web标准简单来说可以分为结构(html)、表现(css)和行为(js)。
W3C对web标准提出了规范化的要求
1)标签字母要小写
2)标签要闭合
3)标签不允许随意嵌套
2.对于css和js来说
1)尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块,符合规范。同时提高页面渲染速度,提高用户的体验。
2)样式尽量少用行间样式表,使结构与表现分离,标签的id和class等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版
3)不要随意变动页面内容

8.meta属性

元数据(metadata)是关于数据的信息。
标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
标签始终位于 head 元素中。
-元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务

content必须属性 name和http-equiv,scheme为可选属性

9.如何在页面显示html字符

用<xmp></xmp>标签

10.前端需要注意哪些SEO

它是由英文Search Engine Optimization缩写而来,中文意思是“搜索引擎的优化”。
1、 合理的title,description,keyswords 搜索引擎对这三项的权重逐个减小,title 值强调重点即可,重要的关键
词出现不要超过两次,而且要靠前。
2 、不同页面的tilte要有所不同;description把页面的内容高度概括,长度合适,不可过分堆叠关键词,不同页面
description有所不同。keyswords列举出重要的关键词即可。
3、语义化的HTML代码,符合W3C 规范:语义化代码有利于搜索引擎理解网页。
4 、重要的内容HTML代码放在前面:搜索引擎抓取HTML 的顺序是从上到下,有的搜索引擎对抓取长度有限制,保
证重要内容一定会被抓取。
5 、重要的内容不要用js输出,爬虫不会执行js获取内容。
6 、尽量少用iframe ,搜索引擎不会抓取iframe中的内容。
7 、非装饰的图片必须加alt 。
8 、提高网站速度:网站速度是搜索引擎排序的一个重要指标。

11.CSRF 攻击是什么?如何防范?

中文全称是叫跨站请求伪造。一般来说,攻击者通过伪造用户的浏览器的请求,向访问一个用户自己曾经认证访问过的网站发送出去,使目标网站接收并误以为是用户的真实操作而去执行命令。
防范措施:
使用验证码   token验证

12.css加载方式

1.外部式样表
通过Link引用CSS
导入式样, @impoint
2.内部式样表
<style></style>
3.内联样式

13.css选择器

1、标签选择器(如:body,div,p,ul,li)
2、.类选择器(如:class="head",class="head_logo")
3、ID选择器(如:id="name",id="name_txt")
4、全局选择器(如:*号)
5、.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)
6.继承选择器(如:div p,注意两选择器用空格键分开)
7、伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)
8、字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

14.@charset作用

在css中@charset规则用于指定样式表中使用的字符编码;它必须是样式表中的第一个元素,如果定义了多个@charset规则,则只会使用第一个。

15.link和@import区别

import只能加载css
link和页面加载同时加载css,而import需要在页面加载完成以后
link支持使用Javascript控制DOM去改变样式;而@import不支持

16.伪类和为元素的区别

伪类:用于向某些选择器添加特殊的效果,存在DOM文档中
伪元素:用于将特殊的效果添加到某些选择器,不存在DOM文档中
其实根本意思就是就是对那些不能通过class、id等选择元素的补充

17.选择器的优先级

单个选择器优先级从高到低分别是:
1.!important:在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2.内联样式:style="..."
3.ID选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义

18.什么是css继承?哪些属性能继承,哪些不能?

一、能继承的属性
1. 字体系列属性:font、font-family、font-weight、font-size、font-style;
2. 文本系列属性:
(1)内联元素:color、line-height、word-spacing、letter-spacing、text-transform;
(2)块级元素:text-indent、text-align;
3. 元素可见性:visibility
4. 表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout;
5. 列表布局属性:list-style
6. 生成内容属性:quotes
7. 光标属性:cursor
8. 页面样式属性:page、page-break-inside、windows、orphans;
9. 声音样式属性:speak、speech-rate、volume、voice-family、pitch、stress、elevation;

二、不能继承的属性
1. display:规定元素应该生成的框的类型;
2. 文本属性:vertical-align、text-decoration;
3. 盒子模型的属性:width、height、margin 、border、padding;
4. 背景属性:background、background-color、background-image;
5. 定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip;
6. 生成内容属性:content、counter-reset、counter-increment;
7. 轮廓样式属性:outline-style、outline-width、outline-color、outline;
8. 页面样式属性:size、page-break-before、page-break-after;
9. 声音样式属性:pause、cue、play-during;

19.px、em、rem、vh、vw的区别是什么?

px代表物理屏幕上能显示出的最小的一个点,
em 是相对于父级的字体大小,
rem是相对于HTML根元素的字体大小,
vh 和vw相对于视口的高度和宽度,1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度

20.line-height: 2和line-height: 200%有什么区别?

line-height: 2 表示单行文本的行高为它本身的两倍
line-height: 200% 表示单行文本的行高为系统默认字体的200%

21.inline-block特性

既呈现 inline 特性(不占据一整行,宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高,内外边距)
默认情况下,inline-block元素之间就有空隙出现

22.让一个元素“看不见”的方式及区别

display:none,这种方式可以使元素彻底从文档中删除,会造成浏览器的回流与重绘
visibility:hidden,元素会从页面中消失,它原本占据的空间会被保留,会造成浏览器的重绘,适用于希望元素隐藏又不影响页面布局的场景,但是该属性会被子元素继承,所以若不希望子元素隐藏,还需在子元素中设置visibility:visible。
opacity:0   不推荐 因为元素还在文档中

23.显示…

单行:
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
多行:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

23.浮动元素的特征,影响

特征:
浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示
浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐,但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
浮动元素后面的内联元素会向此浮动元素的外边距靠齐
float造成的影响:
1、对其父元素的影响
对于其父元素来说,元素浮动之后,它脱离当前正常的文档流,所以它也无法撑开其父元素,造成父元素的塌陷
2、对其兄弟元素(非浮动)的影响
如果兄弟元素为块级元素,该元素会忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层(并且无法通过z-index属性改变他们的层叠位置),但它的内部文字和其他行内元素都会环绕浮动元素。
如果如果兄弟元素为内联元素,则元素会环绕浮动元素排列。
3、对其兄弟元素(浮动)的影响
同一个方向的浮动元素:当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时,它会紧跟在它们后面
反方向的浮动元素:互不影响,位于同一条水平线上,当空间不够时会被挤下
4、对子元素的影响
当一个元素浮动时,在没有清除浮动的情况下,它无法撑开其父元素,但它可以让自己的浮动子元素撑开它自身,并且在没有定义具体宽度情况下,使自身的宽度从100%变为自适应(浮动元素display:block)。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值

24.清除浮动

 清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题
使用after伪元素清除浮动(推荐使用)
1.   .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法
      content: "";
      display: block;
      height: 0;
      clear:both;
      visibility: hidden;
  } */
2.增加一个div,设置clear为both

25.定位

定位 = 定位模式 + 边偏移
边偏移属性:top bottom left right
定位模式
static
relative 相对定位 相对原来的位置   保留原来的位置
absolute 绝对定位 以最近的带有定位的父级(不仅仅是父亲)元素来移动位置
fixed     特殊的绝对定位,只认浏览器,和父级没关系
position:定位模式 + 边偏移

26.z-index作用

z-index 属性指定一个元素的堆叠顺序。因为绝对定位的元素脱离了普通流,所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index有三个属性
auto 默认。堆叠顺序与父元素相等。
number设置元素的堆叠顺序。
inherit规定应该从父元素继承 z-index 属性的值。

27.BFC是什么

BFC:块级格式化上下文
形成BFCd的条件:
1、浮动元素,float 除 none 以外的值;
2、绝对定位元素,position(absolute,fixed);
3、display 为以下其中之一的值 inline-blocks,table-cells,table-captions;
4、overflow 除了 visible 以外的值(hidden,auto,scroll)

28.响应式布局

前端 响应式布局原理
重点学习
1、min-width样式
2、max-width样式
3、媒体查询---通过不同的媒体类型和条件定义样式规则
格式:@media screen and (min-width:800px){}
4、条件的格式写法
响应式布局就是根据屏幕的大小盒子也作出响应的变化
方便用户在不同的媒体上都有良好的交互体验
举例:
@charset "utf-8";
/*当显示器最小1001px时box宽度为33.33%也就是一排三个*/
@media screen and(min-width:1001px){
.box{width:33.33%}
}
/*当显示器大于651小于1000时box为50%也就是一排可以有两个*/
@media screen and (max-width: 1000px)and(min-width:651px) {
.box{
width: 50%;
}
}
/*当显示器小于650px时一排只有一个*/
@media screen and (max-width: 650px) {
.box{
width: 100%;
}
}

29.什么叫优雅降级和渐进增强?

渐进增强 progressive enhancement:
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation:
一开始就构建完整的功能,然后再针对低版本浏览器进行兼容

30.兼容问题

CSS Hack   浏览器兼容问题
https://caniuse.com/

在 CSS中常用特殊字符识别表:
(1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;
(2)!important: 除IE6不能识别 !important外, FF+IE8+IE7都能识别!important ;
(3)_ : 除IE6支持_ 外, FF+IE8+IE7都不支持_;
(4)\9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)

-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o代表opera私有属性

31.请指出document load和document ready的区别?

共同点:这两种事件都代表的是页面文档加载时触发。
异同点:
ready 事件的触发,表示文档结构已经加载完成(不包含图片等非文字媒体文件)。
onload 事件的触发,表示页面包含图片等文件在内的所有元素都加载完成。

32.理解cookie、session、localStorage、sessionStorage之不同

1579071329148

JavaScript

1.几条JavaScript的基本规范

1、不要在同一行声明多个变量
2、使用===或!==来比较
3、使用字面量的方式来创建对象、数组,替代new Array这种形式
4、不要使用全局函数
5、switch语句必须要带default分支
6、函数不应该有的时候有return,有的时候没有return
7、fon-in循环中的变量,用var关键字说明作用域,防止变量污染
8、变量的声明遵循驼峰命名法,用let替代val,声明构造函数时首字母大写,定义常量的时候尽量用大写字母,用_分割
9、三元表达式可以替代if语句
10、&&和||是可以短路的,使用&&时如果前面一个值是错的,那么后面的值不用判断,使用||时,如果前面一个值是对的,那么后面的值不用判断
11、比较数据类型以下6中情况是false,其他都是true------false、""、0、null、undefined、NaN
12、数据类型检测用typeof,对象类型检测用instanceof
13、异步加载第三方的内容
14、单行注释//,多行注释/**/
15、使用命名空间解决变量名冲突
16、多人协作开发,新建一个js文件,const声明常量,在js文件中引用,用常量名替代方法名,这样做可以防止命名冲突

2.严格模式的限制

严格模式主要有以下限制:
变量必须声明后再使用
函数的参数不能有同名属性,否则报错
不能使用with语句
不能对只读属性赋值,否则报错
不能使用前缀0表示八进制数,否则报错
不能删除不可删除的属性,否则报错
不能删除变量delete prop,会报错,只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字(比如protected、static和interface)
设立"严格模式"的目的,主要有以下几个:
消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
消除代码运行的一些不安全之处,保证代码运行的安全;
提高编译器效率,增加运行速度;
为未来新版本的Javascript做好铺垫。
注:经过测试IE6,7,8,9均不支持严格模式。

3.NaN属性

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
可以把 Number 对象设置为该值,来指示其不是数字值。
提示: 请使用 isNaN() 全局函数来判断一个值是否是 NaN 值。
console.log(isNaN("ld"))

4.几道计算题

var a = 1;
a+++a;
console.log(typeof a+2)   输出Number2

var d = (a = 3, b = 4)
console.log(d)   等于逗号后面的

5.JS中数据类型有哪几种?null 是对象吗?基本数据和复杂数据类型有什么区别?

原始数据类型 (不是对象且没有方法):
Boolean、Null、Undefined、Number、String、Symbol(ES6 新增)、 BigInt(ES10)
复杂数据类型:
Object
null不是对象,他只是表示缺少的标识,指示变量没有指向任何对象

区别:
内存的分配不同
基本数据类型存储在栈中。
复杂数据类型存储在堆中,栈中存储的变量,是指向堆中的引用地址。

访问机制不同
基本数据类型是按值访问。
复杂数据类型按引用访问,JS不允许直接访问保存在堆内存中的对象,在访问一个对象时,首先得到的是这个对象在堆内存中的地址,然后再按照这个地址去获得这个对象中的值。

复制变量时不同
基本数据类型:a=b;是将b中保存的原始值的副本赋值给新变量a,a和b完全独立,互不影响。
复杂数据类型:a=b;将b保存的对象内存的引用地址赋值给了新变量a;a和b指向了同一个堆内存地址,其中一个值发生了改变,另一个也会改变。

参数传递的不同(实参/形参)
函数传参都是按值传递(栈中的存储的内容):基本数据类型,拷贝的是值;复杂数据类型,拷贝的是引用地址。

6.比较type of 和 instanceof

(1)、typeof 一般只能返回如下几个结果:number,boolean,string,function,object,undefined。
(2)、typeof 来获取一个变量是否存在,如 if(typeof a!="undefined"){alert("ok")},而不要去使用 if(a) 因为如果 a 不存在(未声明)则会出。
(3)、对于 Array,Null 等特殊对象使用 typeof 一律返回 object,这正是 typeof 的局限性。
Instanceof定义和用法:instanceof 用于判断一个变量是否属于某个对象的实例

7.null和undefined的区别

null表示没有对象,即该处不应该有值
  1) 作为函数的参数,表示该函数的参数不是对象
  2) 作为对象原型链的终点
undefined表示缺少值,即此处应该有值,但没有定义
  1)定义了形参,没有传实参,显示undefined
  2)对象属性名不存在时,显示undefined
  3)函数没有写返回值,即没有写return,拿到的是undefined
  4)写了return,但没有赋值,拿到的是undefined
null和undefined转换成number数据类型
null 默认转成 0
undefined 默认转成 NaN

8.JS转换类型规则

转数字转字符串转布尔值
undefinedNaN“undefined”false
null0“null”false
true1“true”
false0“false”
0“0”false
-0“0”false
NaN“NaN”false
Infinity“Infinity”true
-Infinity”-Infinity”true
1(非零)“1”true
{}(任意对象)见下文见下文true
0””true
99“9”true
”a”NaN使用.join()方法true
function(){}(任意函数)NaN见下文true

9.JS内置对象

JS内置对象分为数据封装类对象和其他对象
数据封装类对象:String,Boolean,Number,Array,和Object;
其他对象:Function,Arguments,Math,Date,RegExp,Error

10.闭包

一:什么是闭包?
闭包就是能够读取其他函数内部变量的函数,说白了闭包就是个函数,只不过是处于其他函数内部而已。
二:用途是什么?
1.访问函数内部的变量
2.防止函数内部的变量执行完城后,被销毁,使其一直保存在内存中。
例子:
function byField(field){ // 闭包写法
return function(user1, user2){
  return user1[field] > user2[field]
}
}
  var users = [
    {name: "John", age: 20, company: "Baidu"},
    {name: "Pete", age: 18, company: "Alibaba"},
    {name: "Ann", age: 19, company: "Tecent"}
    ]

  users.sort(byField("age"))
  users.sort(byField("company"))

11.垃圾回收机制

1.标记清除
js中最常用的垃圾回收方式就是标记清除。当变量进入环境时,例如,在函数中声明一个变量,就将这个变量标记为“进入环境”。从逻辑上讲,永远不能释放进入环境的变量所占用的内存,因为只要执行流进入相应的环境,就可能会用到它们。而当变量离开环境时,则将其标记为“离开环境”。
2.引用计数
引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时,则这个值的引用次数就是1。如果同一个值又被赋给另一个变量,则该值的引用次数加1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数减1。当这个值的引用次数变成0时,则说明没有办法再访问这个值了,因而就可以将其占用的内存空间回收回来。这样,当垃圾回收器下次再运行时,它就会释放那些引用次数为0的值所占用的内存。

12. 数组的哪些 API 会改变原数组?

var arr = []
arr.splice()
arr.reverse()
arr.fill()
arr.copyWithin()
arr.sort()
arr.push()
arr.pop()
arr.unshift()
arr.shift()

13.定义对象的方法

创建Object的方式有4种。
方式一:
通过对象字面量表示法(又称为直接量、原始方式)。
var obj = {name:"moyu"};
方式二:
通过new和构造函数Object()、String()等。
var obj = new Object();
方式三:
自定义一个对象的构造函数,然后实例化对象。
function a(o){
this.name = "moyu"
}
var obj = new a();
方式四:
通过Object.create()
var o1 = Object.create({x:1, y:2});     // o1继承了属性x和y

14.new的原理

构造/new调用函数的时候做了什么:
创建一个全新的对象。
这个新对象的原型(Object.getPrototypeOf(target))指向构造函数的prototype对象。
该函数的this会绑定在新创建的对象上。
如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。
我们称这个新对象为构造函数的实例。

通过 new 的方式创建对象和通过字面量创建有什么区别?
对于创建一个对象来说,更推荐使用字面量的方式创建对象(无论性能上还是可读性)。因为你使用 new Object() 的方式创建对象需要通过作用域链一层层找到 Object ,但是你使用字面量的方式就没这个问题。

15.js继承方法

原型链方法
<script>
function teacher(name){
this.name = name;
}
teacher.prototype.sayName = function(){
console.log("name is "+this.name);

}
var teacher1 = new teacher("xiaoming");
teacher1.sayName();
function student(name){
this.name = name;
}
student.prototype = new teacher()
var student1 = new student("xiaolan");
student1.sayName();
</script>

call方法
<script>
function teacher(name){
this.name = name;
this.sayName=function(){
console.log(this.name)
}
}
function student(name){
teacher.call(this, name)
}
var teacher1 = new teacher("xiaoming");
teacher1.sayName();
var student1 = new student("ld")
student1.sayName();
</script>

16.原型和原型链

1581676993159
Person.prototype.constructor === Person   //true
Person.prototype === p.__proto__       //true

17.深浅拷贝

<script>
// 浅拷贝 拷贝对象属性

var obj = {
age:18,
arr:[1, 2, 3]
}
function qianCopy(obj1){
var obj2 = {}
for (var k in obj1){
obj2[k] = obj1[k]
}
console.log(obj2)
}
qianCopy(obj)
// 深拷贝
var obj3 = {}
function shenCopy(obj1, obj2){
for(k in obj1) {
if (typeof(obj[k])!="object"){
obj2[k] = obj1[k]
}else{
obj2[k] = (obj1[k].constructor==Array?[]:{})
shenCopy(obj1[k],obj2[k])
}
}
return obj3;
}
</script>

18.添加、移动,移除,替换,插入

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

removeChild() //移除
replaceChild() //替换
insertBefore() //插入


var mubiao = document.getElementById("b");  
mubiao.parentNode.insertBefore(a,mubiao);  
//插入到div b 前面。  
/*  
parentElement.insertBefore( newElement , targetElement );  
从上面语法可以看出, 父元素, 新元素,目标元素 是 insertBefore使用的3要素。  
其实我们可以不管 父元素, 因为 父元素我们 可以用 目标元素.parentNode 得到。  
那么insertBefore就很好用了。只要给2个参数 : 新元素 和目标元素。

19.如何判断当前浏览器类型

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

20.iframe的缺点,如何解决

① iframe会阻塞主页面的Onload事件;
② 搜索引擎的检索程序无法解读这种页面,不利于SEO;
③ 会影响页面的并行加载。

使用js动态给iframe的src加载页面内容,示例代码如下:
<iframe id="fram"></iframe>
document.getelementbyid("fram").src="a2.html"

21.setTimeout, setInterval 与 requestAnimationFrame 隐藏的各种坑

setTimeout(code, millseconds) 用于延时执行参数指定的代码,如果在指定的延迟时间之前,你想取消这个执行,那么直接用clearTimeout(timeoutId)来清除任务,timeoutID 是 setTimeout 时返回的;
setInterval(code, millseconds)用于每隔一段时间执行指定的代码,永无停歇,除非你反悔了,想清除它,可以使用 clearInterval(intervalId),这样从调用 clearInterval 开始,就不会在有重复执行的任务,intervalId 是 setInterval 时返回的;
requestAnimationFrame(code),一般用于动画,与 setTimeout 方法类似,区别是 setTimeout 是用户指定的,而 requestAnimationFrame 是浏览器刷新频率决定的,一般遵循 W3C 标准,它在浏览器每次刷新页面之前执行。

22.js异步加载的方式

共有:defer和async、动态创建DOM方式(用得最多)、按需异步载入js

defer属性:(页面load后执行)

HTML 4.01 为 <script>标签定义了 defer属性。
用途:表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕之后再执行。
在<script> 元素中设置 defer 属性,等于告诉浏览器立即下载,但延迟执行。
<head>
  <script src="test1.js" defer="defer"></script>
  <script src="test2.js" defer="defer"></script>
</head>
  

async属性:(页面load前执行)
HTML5 为 <script>标签定义了 async属性。与defer属性类似,都用于改变处理脚本的行为。同样,只适用于外部脚本文件。
目的:不让页面等待脚本下载和执行,从而异步加载页面其他内容。异步脚本一定会在页面 load 事件前执行。不能保证脚本会按顺序执行。
<head>
  <script src="test1.js" async></script>
  <script src="test2.js" async></script>
</head>
<body> 

23.DOM

DOM是“Document Object Model”的缩写,中文译为“文档对象模型”。它是一种跨平台、跨语言的编程接口,将HTML,XHTML,XML文档映射成树形结构,树的每一个节点都是一个对象。正因如此,面向对象的编程语言(如javascript)可以通过DOM对HTML,XHTML,XML文档进行操作。对于HTML文档来说,它的根结点为document对象,HTML元素为element对象,HTML元素的属性为attr对象。

24.DOM2事件传播机制

事件流:
事件流描述的是从页面中接收事件的顺序,主要有三种模型:事件冒泡模型,事件捕获模型,DOM事件流
事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素
事件捕获:不太具体的节点更早接收事件,而最具体的元素最后接收事件,和事件冒泡相反
DOM事件流:DOM2级事件规定事件流包括三个阶段,事件捕获阶段,处于目标阶段,事件冒泡阶段,首先发生的是事件捕获,为截取事件提供机会,然后是实际目标接收事件,最后是冒泡阶段

25.JS阻止冒泡和取消事件的默认行为

<script>
1..停止事件冒泡
JavaScript代码
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
return false;
2.阻止浏览器的默认行为
JavaScript代码
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.preventDefault )
//阻止默认浏览器动作(W3C)
e.preventDefault();
else
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
return false;
3.事件委托
ul.addEventListener("click",function(e) { 
    if(e.target && e.target.nodeName.toLowerCase() == "li") {  // 检查事件源e.target是否为Li 
        console.log("List item ",e.target.id.replace("post-","")," was clicked!");  // 打印当前点击是第几个item 
  } 
});
$(function(){
   $list = $('#list');
   $list.delegate('li', 'click', function() {
       $(this).css({background:'red'});
  });
})
...
<ul id="list">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>
</script>

26.this指向

1.普通函数   函数名()   this指向window
2.对象函数   对象.fun() this指向对象
3.构造函数   new Star() this指向实例
4.绑定事件函数 btn.onclick = function(){} this指向函数的调用者
5.定时器函数 setInterval(function(){},10000) this指向window
6.立即执行函数 (function(){})() this指向window

27.改变this指向

apply和call,bind都能改变this指向
区别在于 apply要求传入数组,call则是多个参数

***bind用法
Math.max.bind(numbers)(参数)   注意多一个括号

28.ES6

https://blog.csdn.net/cwh0908/article/details/91352915

29.Promise对象

1.三种状态
  1)pending 初始状态
  2)fulfilled 成功状态
  3)rejected 失败状态,
2.三个缺点
  1.无法取消Promise,一旦新建它就会立即执行,无法中途取消
  2.如果不设置回调函数,Promise内部抛出的错误,不会反映到外部
  3.当处于pending状态时,无法得知目前进展到哪一个阶段,是刚刚开始还是即将完成
举例:
var promise = new Promise(function(resolve,reject){
if(/* 异步操作成功 */){
resolve(value);
}else{
reject(error);
}
});

前后端交互

1.http和https的区别

 HTTP协议传输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常不安全,为了保证这些隐私数据能加密传输,于是网景公司设计了SSL(Secure Sockets Layer)协议用于对HTTP协议传输的数据进行加密,从而就诞生了HTTPS。简单来说,HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,要比http协议安全。
HTTPS和HTTP的区别主要如下:
  1、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。
  2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
  3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
  4、http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

2.如何页面打开时每次清除缓存

加入头信息
<HEAD>
<META   HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META   HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META   HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>

ajax:
方法二,直接用cache:false,
$.ajax({
    url:'www.haorooms.com',
    dataType:'json',
    data:{},
    cache:false,
    ifModified :true ,
    success:function(response){
        //操作
    }
    async:false
});

3.Ajax

什么是AjAx?
异步的javascript和xml。

作用是什么?
通过AjAx与服务器进行数据交换,AjAx可以使用网页实现布局更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新

get,post举例
<script>
// GET
   var xhr = new XMLHttpRequest()
   xhr.open('GET','/weather.php?username = jirengu&password=123567',true)
   xhr.send()
   xhr.addEventListener('load',function(){
       if(xhr.status > 200 || xhr.status < 300 || xhr.status ===304){
           var data = xhr.responseText()
           console.log(data);  
      }else{
           console.log('error');
           
      }
  })

   // POST
   var xhr = new XMLHttpRequest()
       xhr.open('POST','/login',true)
       xhr.onload = function(){
           if(xhr.readyState ===4 && xhr.status ===200){
               var data = xhr.responseText()
               console.log(data);
          }else{
               console.log('error');
               
          }
      }

</script>

4.标签通讯

1.localstorage
在一个标签页里面使用 localStorage.setItem(key,value)添加(修改、删除)内容;
在另一个标签页里面监听 storage 事件。
即可得到 localstorge 存储的值,实现不同标签页之间的通信。
<input id="name">  
<input type="button" id="btn" value="提交">  
<script type="text/javascript">  
   $(function(){    
       $("#btn").click(function(){    
           var name=$("#name").val();    
           localStorage.setItem("name", name);  
      });    
  });    
      $(function(){  
       window.addEventListener("storage", function(event){    
           console.log(event.key + "=" + event.newValue);    
      });    
  });  
2.webscoket

5.html5离线存储

只要在头部加一个manifest属性就ok了

1 <!DOCTYPE HTML>
2 <html manifest = "cache.manifest">
3 ...
4 </html>
然后cache.manifest文件的书写方式如下:
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

6.什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域

同源同源策略:
同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。
跨域:
一个域的页面去请求另一个域的资源;
解决方案:
最简单也最常见:使用jsonp ,即json with padding(内填充),顾名思义,就是把JSON填充到一个盒子里(所以通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的callback函数,并把把我们需要的json数据作为参数传入。在服务器端,当req.params参数中带有callback属性时,则把数据作为callback的参数执行,并拼接成一个字符串后返回。)
一劳永逸:直接在服务器端设置跨域资源访问 CORS(Cross-Origin Resource Sharing),设置Request Header头中Access-Control-Allow-Origin为指定可获取数据的域名
简单有效:直接请求一张图片
找”爸爸”:通过修改document.domain来跨子域
哥俩好:通过window.name来跨域接收数据
新石器时代:使用HTML5的window.postMessage方法跨域

jQuery

1.$()是什么

$() 函数是 jQuery() 函数的别称。$() 函数用于将任何对象包裹成 jQuery 对象

2.$(this) 和 this 关键字在 jQuery 中有何不同?

$(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用val() 获取值等等。
而 this 代表当前元素,它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法,直到它被 $() 函数包裹,例如 $(this)。

3.jquery怎么移除标签onclick属性?

获得a标签的onclick属性: $("a").attr("onclick")
删除onclick属性:$("a").removeAttr("onclick");
设置onclick属性:$("a").attr("onclick","test();");

4.JQuery选择器

(1)、基本选择器:#id,class,element,*;
(2)、层次选择器:parent > child,prev + next ,prev ~ siblings
(3)、基本过滤器选择器::first,:last ,:not ,:even ,:odd ,:eq ,:gt ,:lt
(4)、内容过滤器选择器: :contains ,:empty ,:has ,:parent
(5)、可见性过滤器选择器::hidden ,:visible
(6)、属性过滤器选择器:[attribute] ,[attribute=value] ,[attribute!=value] ,[attribute^=value] ,[attribute$=value] ,[attribute*=value]
(7)、子元素过滤器选择器::nth-child ,:first-child ,:last-child ,:only-child
(8)、表单选择器: :input ,:text ,:password ,:radio ,:checkbox ,:submit 等;
(9)、表单过滤器选择器::enabled ,:disabled ,:checked ,:selected

5.$(document).ready()方法和window.onload有什么区别?

 (1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数。

6.jquery中提交和​.post()提交有区别吗?

相同点:都是异步请求的方式来获取服务端的数据;
异同点:
1、请求方式不同:$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。
2、参数传递方式不同:get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的。
3、数据传输大小不同:get方式传输的数据大小不能超过2KB 而POST要大的多
4、安全问题: GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。

7.写出一个简单的$.ajax()的请求方式?

<script>
$.ajax({
   url:'http://www.baidu.com',
   type:'POST',
   data:data,
   cache:true,
   headers:{},
   beforeSend:function(){},
   success:function(){},
   error:function(){},
   complete:function(){}
});
</script>
转载原创文章请注明,转载自: ت » 前端面试整合
  1. avatar

    很有帮助!!!