web前端技术面试复习题1

阳光穿透心脏的1/2处 2023-07-04 11:16 7阅读 0赞

## 展开 ##

1  
title : 前端技术（HTML、CSS、JS、JQuery等）  
前端技术  
在js中怎么样验证数字？  
通过正则表达式/\*$/  
reg.test(需要判断的字符串)

js中如何给string这个类型加方法？  
通过原型链添加方法：

String.prototype.go = function()\{//在string大对象上添加方法go  
console.log(this)  
\}  
‘sss’.go();//调用自定义的方法  
1  
2  
3  
4  
谈谈js的定时器？  
js给我们提供了两种定时器  
setTimeout(1000,function()\{\}) 每秒调用一次,但是在页面刷新的时候会出现第一秒不会调用的情况  
setIntever(1000,function()\{\})间隔一秒调用一次,直调用一次,但是没有空白期,所以我们在秒杀倒计时的时候是通过该定时器递归调用显示时间

请写几个javascript 里面的对象和对象的函数使用  
javascript对象

*  String对象  
    length:使用长度属性来计算字符串的长度。  
    var txt=“Hello world!”  
    document.write(txt.length)

indexOf() 方法:使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。  
var str=“Hello world!”  
document.write(str.indexOf(“Hello”) + “  
”)

match():使用 match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。  
var str=“Hello world!”  
document.write(str.match(“world”) + “  
”)

*  Date对象  
    Date():返回当日的日期和时间  
    document.write(Date());  
    setFullYear:使用 setFullYear() 设置具体的日期。  
    var d = new Date()  
    d.setFullYear(1992,10,3)
 *  Array对象  
    for…in:使用 for…in 声明来循环输出数组中的元素。  
    for (x in mycars)  
    \{  
    document.write(mycars\[x\] + “  
    ”)  
    \}  
    1  
    2  
    3  
    4  
    5  
    6  
    7  
    8  
    9  
    10  
    11  
    12  
    13  
    14  
    15  
    16  
    17  
    18  
    19  
    20  
    21  
    22  
    23  
    24  
    25  
    26  
    27  
    请写几个html元素以及相应控制效果

# ... #

###### :控制标签字体大小  ：段落标签，独占一行 :展示图片标签 无序标签：  有序标签：  :超连接标签 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ajax的实现机制 XMLHttpRequest发送异步请求先open,再send;判断响应状态码200和状态4然后设置回调函数 由于每个浏览器之间存在差异所以我们对不同的浏览器需要创建不同的XMLHttpRequest对象 ######

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。XMLHttpRequest是ajax的核心机制

由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。

示例代码：  
function CreateXmlHttp() \{

//非IE浏览器创建XmlHttpRequest对象
    if (window.XmlHttpRequest) {
        xmlhttp = new XmlHttpRequest();
    }
    
    //IE浏览器创建XmlHttpRequest对象
    if (window.ActiveXObject) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
            try {
                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
            }
            catch (ex) { }
        }
    }

function Ustbwuyi() \{

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
函数首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。

对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：

a、向服务器提交数据的类型，即post还是get。

b、请求的url地址和传递的参数。

c、传输方式，false为同步，true为异步。默认为true。

Send方法用来发送请求。  
知道了XMLHttpRequest的工作流程，我们可以看出，XMLHttpRequest是完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，因为ajax无非是两个过程，发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。

如何在b.html页面获取a.html元素值  
通过静态或动态包含

javascript中如何判断数据类型，返回值分别是什么？  
typeof()进行判断  
返回值有  
String,Number,undefine,Object,boolean,function

用jq或者js获取复选框中选中的值  
jq可以通过选择器$("input\[type=“checkbox”\]).val()  
js可以通过document.getElementById(“复选框的id”).value;

jQuery中find方法和children方法的使用和区别  
find和children都可以用来查找一个元素的后代元素,children只能找子代元素,find可以找所有后代元素

J2EE基础  
Servlet属于线程安全的吗？  
不是,Tomcat底层机制是多线程的  
当Tomcat接收到Client的HTTP请求时，Tomcat从线程池中取出一个线程，之后找到该请求对应的Servlet对象并进行初始化，之后调用service()方法。要注意的是每一个Servlet对象再Tomcat容器中只有一个实例对象，即是单例模式。如果多个HTTP请求请求的是同一个Servlet，那么着两个HTTP请求对应的线程将并发调用Servlet的service()方法。所以此时如果Servlet中定义了实例变量或静态变量，那么可能会发生线程安全问题（因为所有的线程都可能使用这些变量）。

在JSP中，只有一行代码：<%=A+B %>，运行结果是()  
报错 因为A和B没有定义

jsp和servlet有什么关系？  
JSP本质上就是Servlet,JSP是实现了Servlet的接口的,但是jsp更优秀与动态数据的加载,加载JSP页面的时候实质上是加载了一个JSPServlet的类对象,通过out对象进行页面的渲染和其他内置作用域对象进行数据的填充,而Servlet更优秀于逻辑控制

iso8859-1如何转换成utf-8?  
通过String的构造器  
new String(“需要转换的字符串”.getBytes(“iso-8859-1”),“utf-8”);

你如何防止直接敲URL进行访问页面  
通过Filter，进行判断是否登陆，如果用户登陆了才放行，否则回到登陆页面

谈谈Jsp的9大内置对象  
四大作用域对象  
pageContext：  
取得任何范围的参数，通过它可以获取 JSP页面的out、request、reponse、session、application 等对象。pageContext对象的创建和初始化都是由容器来完成的，在JSP页面中可以直接使用 pageContext对象。

request：  
request 对象是 javax.servlet.httpServletRequest类型的对象。 该对象代表了客户端的请求信息，主要用于接受通过HTTP协议传送到服务器的数据。（包括头信息、系统信息、请求方式以及请求参数等）。request对象的作用域为一次请求。

session：  
由服务器自动创建的与用户请求相关的对象。服务器为每个用户都生成一个session对象，用于保存该用户的信息，跟踪用户的操作状态。session对象内部使用Map类来保存数据，因此保存数据的格式为 “Key/value”。 session对象的value可以使复杂的对象类型，而不仅仅局限于字符串类型。

application：  
application 对象可将信息保存在服务器中，直到服务器关闭，否则application对象中保存的信息会在整个应用中都有效。与session对象相比，application对象生命周期更长，类似于系统的“全局变量”。

page  
page 对象代表JSP本身，只有在JSP页面内才是合法的。 page隐含对象本质上包含当前 Servlet接口引用的变量，类似于Java编程中的 this 指针。

out  
out 对象用于在Web浏览器内输出信息，并且管理应用服务器上的输出缓冲区。在使用 out 对象输出数据时，可以对数据缓冲区进行操作，及时清除缓冲区中的残余数据，为其他的输出让出缓冲空间。待数据输出完毕后，要及时关闭输出流。  
exception：  
exception 对象的作用是显示异常信息，只有在包含 isErrorPage=“true” 的页面中才可以被使用，在一般的JSP页面中使用该对象将无法编译JSP文件。excepation对象和Java的所有对象一样，都具有系统提供的继承结构。exception 对象几乎定义了所有异常情况。在Java程序中，可以使用try/catch关键字来处理异常情况； 如果在JSP页面中出现没有捕获到的异常，就会生成 exception 对象，并把 exception 对象传送到在page指令中设定的错误页面中，然后在错误页面中处理相应的 exception 对象。  
config:  
config 对象的主要作用是取得服务器的配置信息。通过 pageConext对象的 getServletConfig() 方法可以获取一个config对象。当一个Servlet 初始化时，容器把某些信息通过 config对象传递给这个 Servlet。 开发者可以在web.xml 文件中为应用程序环境中的Servlet程序和JSP页面提供初始化参数。

response:  
对客户端的响应，主要是将JSP容器处理过的对象传回到客户端。response对象也具有作用域，它只在JSP页面内有效。

谈谈jsp的4个数据传输域以及他们的区别  
JSP四个域对象:pageContext,servletContext,request,sesssion  
主要区别是：  
1.生命周期不同，pageContext当前页面有效,request一次请求范围内有效，session本次会话范围内，servletContext作用于整个应用范围

谈谈jsp跟Servlet的区别  
JSP与Servlet主要有两方面的不同：  
编译：JSP修改后可以立即看到结果，不需要编译；而Servelt缺需要编译。  
转换：JSP是动态网页开发技术，是运行在服务器端的脚本语言，而Servlet是web服务器端编程技术。所以JSP运行时就是转换为Servlet，也就是java程序来执行。

谈谈Servlet的生命周期  
1.在容器初始化的时候，加载web.xml文件时候对配置好的servlet进行加载  
2.初始化，调用init()方法初始化  
3.请求处理阶段,service()接受请求调用doGet()和doPost()方法  
4.销毁，调用destory()方法进行销毁,一般是在服务器关闭的时候销毁  
当服务器不再需要Servlet实例或重新装入时，会调用destroy方法，使用这个方法，Servlet可以释放掉所有在init方法申请的资源。一个Servlet实例一旦终止，就不允许再次被调用，只能等待被卸载。

谈谈转发和重定向的区别  
1.位置不同，转发是服务器行为，重定向是浏览器行为  
2.转发可以携带请求数据，重定向不可以  
3.转发是一次请求，重定向是两次请求  
4.转发的地址栏不会改变，重定向的地址栏会改变  
5.转发只能站内，重定向还将有访问其他站点

谈谈MVC设计模式的理解  
M-Model 业务处理层，接受C层调用,获得参数,进行业务处理,调用Dao层访问数据，响应数据回C层  
V-View 接受客户请求,然后调用C层,最后接受C层响应渲染视图响应用户  
C-Controller 逻辑控制层,接受V层请求，调用M层然后获得响应，根据响应进行判断后返回页面到V层

谈谈cookie跟session的区别  
cookie是存放在客户端，session是存放在服务端的  
session本身是基于cookie的会话机制  
session数据大小远大于cookie，cookie只能是字符串类型，并且每个站点大概是20个总个数不能超过300个，总大小大概4k左右  
cookie数据是不安全的，session数据相对来说安全  
cookie的生命周期一般来说远长于session，session作用一次会话，cookie如果没有设置过期时间可以是永远存在磁盘上的

谈谈你用过的设计模式？？  
简单工厂模式，线程池…  
代理设计模式，spring的AOP，事务管理，日志记录等  
单例设计模式，Spring的Bean管理，简单购物车的实现  
装饰者设计模式，request过滤器解决get请求乱码问题，MyBatis的分页对象  
适配器设计模式，springboot的日志记录，使用了适配器模式，SpringMvc底层的HanlderAdapter

如何在XML文件中输出<,>,\#这些特殊字符  
CDATA强制不解析字符串

JSP页面中如何处理编码问题  
1、eclipse配置中的Text file encoding（文件编码），这是给java编译器用的，如果想在jsp页面中保存中文字符，必须将其设置为UTF-8格式。  
2.jsp页面中contentType指定了服务器响应给客户端的http内容类型，默认为”text/html“，charset指定了服务器发送给客户端时的内容编码。可以把charset设置成utf-8  
3.pageEncoding是jsp文件本身的编码,可以设置成utf-8

jsp中有几种注释方式，分别是什么？  
三种支持JAVA注释，HTML注释，还有JSP注释  
//和<!1-- -->和<% %>

jsp:forward与Window.location.href的区别?  
在jsp:forward标签对中使用jsp:param标签可以进行传值。  
jsp:forward动作指令之后的代码是不会执行的。  
使用动作指令跳转的页面，浏览器的地址还是跳转之前的页面地址。  
window.location.href通过请求地址携带参数，且页面地址会改变。

在jsp页面怎么获取url里面的请求参数？  
通过EL表达式,或者小脚本<% request.getParamter(“key”) %>

在tomcat项目根目录下有个文件images/logo.png，在web环境下怎么获取该文件路径？  
通过类构造器  
this.getClass().getClassLoad("/image/logo.png").getPath();  
通过ServletAPI

String path = getServletContext().getRealPath("/images/logo.png");  
File file = new File(path);  
1  
2  
数据库  
数据表的设计原则  
三大范式，  
1.第一范式，所有字段不可再分，即原子性  
2.第二范式，主键约束，每列都需要与主见相关  
3.第三范式，外键约束，直接相关  
在实际开发中最为常见的设计范式有三个：

第一范式是最基本的范式。如果数据库表中的所有字段值都是不可分解的原子值，就说明该数据库表满足了第一范式；  
第二范式在第一范式的基础之上更进一层。第二范式需要确保数据库表中的每一列都和主键相关，而不能只与主键的某一部分相关（主要针对联合主键而言）。也就是说在一个数据库表中，一个表中只能保存一种数据，不可以把多种数据保存在同一张数据库表中；  
第三范式需要确保数据表中的每一列数据都和主键直接相关，而不能间接相关。  
原生的jdbc怎么连接数据库？  
四大金刚  
ClassForname(驱动类);加载驱动类  
getConnection();获得连接对象  
Statement获得执行对象  
ResultSet()获得结果集  
close()关闭所有资源ResultSet->Statement->Connection

关系数据库中连接池的机制是什么？  
通过连接池获得Connection对象然后操作数据库,使用后放回连接池

J2EE服务器启动时会建立一定数量的池连接，并一直维持不少于此数目的池连接。客户端程序需要连接时，池驱动程序会返回一个未使用的池连接并将其表记为忙。如果当前没有空闲连接，池驱动程序就新建一定数量的连接，新建连接的数量有配置参数决定。当使用的池连接调用完成后，池驱动程序将此连接表记为空闲，其他调用就可以使用这个连接。  
实现方式，返回的Connection是原始Connection的代理，代理Connection的close方法不是真正关连接，而是把它代理的Connection对象还回到连接池中。

关系数据库中的主键和外键有什么关系？  
一般来说，表的主键就是关联表的外键

定义主键和外键主要是为了维护关系数据库的完整性。

主键是能确定一条记录的唯一标识，比如，一条用户记录包括身份证号，姓名等。身份证号是唯一能确定你这个人的，其他都可能有重复，所以，身份证号可以是主键。  
外键用于与另一张表的关联。是能确定另一张表记录的字段，用于保持数据的一致性,一表的外键是另一张表的主键或唯一字段。  
关系数据库中第一范式、第二范式和第三范式是什么？  
三大范式，  
1.第一范式，所有字段不可再分，即原子性  
2.第二范式，主键约束，每列都需要与主见相关  
3.第三范式，主键和列直接相关

Oracle 端口号？MySQL端口号？  
Oracle:1521  
mysql:3306

test1表中有ABC三列，用SQL语句实现：当A列大于B列时，选择A列否则选择B列，当B列大于C列时选择B列 否则选择C列。  
select  
(case A>B then A else B end) as t1,  
(case B>c then B esle C end) as t2  
from test1  
1  
2  
3  
4  
给定基本信息表baseInfo包括：学号、姓名、性别、年龄、籍贯（主键是学号），分数表scoreInfo包括：学号，科目，分数（主键是学号-科目）  
查询所有语文成绩大于85分的学生的学号、姓名、性别、年龄、语文分数、数学分数  
查询所有语文成绩大于85分、性别为女的学生的学号、姓名、各科分数  
Long类型怎么设计的表结构?Boolean类型怎么设计的表结构?  
请介绍下触发器的原理  
触发器利用了监听器的原理，一旦监听的操作执行就执行该触发器

触发器是由INSERT、UPDATE和DELETE等事件来触发某种特定操作。满足触发器的触发条件时，数据库系统就会执行触发器中定义的程序语句。这样做可以保证某些操作之间的一致性。例如，当学生表中增加了一个学生的信息时，学生的总数就必须同时改变。可以在这里创建一个触发器，每次增加一个学生的记录，就执行一次计算学生总数的操作。这样就可以保证每次增加学生的记录后，学生总数是与记录数是一致的。触发器触发的执行语句可能只有一个，也可能有多个。

存储过程里的语句是一条条按顺序执行的吗?  
存储过程里的语句并不是一条条按编写顺序执行。  
数据库在编译存储过程时会有一个优化的过程，在不改变存储过程最后结果的前提下，可能会对存储过程里的语句有一个顺序的调整。

如何写分组过滤的SQL语句，比如统计一个班级里面，按省份分组，统计每个省份的学员平均年龄或统计一个班级里面，按省份分组，要求只列出平均年龄大于20岁的省份信息  
如何解决SQL注入的问题  
通过预编译PrepareStatement对象，使用占位符而不是直接拼接的方式传参，隔离了参数和SQL语句之间的影响

请说说内连接和外连接的写法及区别  
内连接查询匹配的数据，左外连接以左边表的数据为准，即左边表的数据全部查出，右边表无匹配数据则以空代替。右外连接则相反。

inner join 表名 on  
left/right outer join 表名 on

向一张表插入100万条数据，该如何做？  
分批次插入，使用batchExecute

谈谈对数据库事务的理解？事务的边界应该放在哪一层？为什么？  
事务是逻辑控制的最小单位，表示一个逻辑命令控制，其中可能有多次操作，这些操作要么全部成功要么全部失败，应该放在service层，因为service就是用来操作Dao层也就是我们的数据，而事务就是为了保证数据一致性而产生的；

谈谈事务的特性ACID  
A:原子性，操作要么全部成功要么全部失败  
C:一致性，事务操作前后保证数据完整性  
I:隔离性，事务和事务之间是透明的互不影响的  
D:持久性，一旦事务提交那么数据将持久化到硬盘上

谈谈事务的隔离级别  
事务的隔离级别是用来解决一些事务中的安全隐患的  
1.读  
脏读：读未提交，读到了另外一个事务还没有提交的数据  
不可重复读：读已提交，读到了另外一个事务已经提交的数据  
幻读/虚读：读到另一个事务修改的数据  
2.写  
丢失更新，使用乐观锁解决  
隔离级别  
Read uncommitted 读未提交  
Read committed 读已提交  
Repeatable Read 可重复读  
Serializable 序列化

存储过程是什么？  
一组SQL,可以有逻辑判断和控制流语句,是存放在数据库中的，一处编译处处运行，避免了我们service层的复杂业务逻辑与数据库频繁交互带来的程序性能下降；但是可移植性很差，因为不同的数据库的存储过程的写法不相同

存储过程是SQL 语句和可选控制流语句的预编译集合，以一个名称存储并作为一个单元处理。存储过程存储在数据库内，可由应用程序通过一个调用执行，而且允许用户声明变量、有条件执行以及其它强大的编程功能。存储过程在创建时即在服务器上进行编译，所以执行起来比单个SQL语句快、

用过哪些数据库连接池，为什么要用数据库连接池？  
连接池主要减少数据库连接的创建时间和连接销毁时间  
DBCP,C3P0,DHCP,Druid

h5 cs3 部分

常用那几种浏览器测试？有哪些内核(Layout Engine)?  
答：  
浏览器：IE，Chrome，FireFox，Safari，Opera。  
　　 内核：Trident，Gecko，Presto，Webkit。

说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）  
答：  
行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。  
块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。  
兼容性：display:inline-block;\*display:inline;\*zoom:1;

清除浮动有哪些方式？比较好的方式是哪一种？  
答：  
（1）父级div定义height。  
（2）结尾处加空div标签clear:both。  
（3）父级div定义伪类:after和zoom。  
（4）父级div定义overflow:hidden。  
（5）父级div定义overflow:auto。  
（6）父级div也浮动，需要定义宽度。  
（7）父级div定义display:table。  
（8）结尾处加br标签clear:both。

box-sizing常用的属性有哪些？分别有什么作用？  
答：  
box-sizing: content-box|border-box|inherit;  
content-box:宽度和高度分别应用到元素的内容框。  
border-box:通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

HTML5 为什么只需要写<!　DOCTYPE html> ？  
答：  
　　HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

页面导入样式时，使用link和@import有什么区别？  
答：  
　　（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;  
　　（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;  
　　（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

html5有哪些新特性？  
答：  
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。  
　　(1)绘画 canvas;  
　　(2)用于媒介回放的 video 和 audio 元素;  
　　(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;  
　　(4)sessionStorage 的数据在浏览器关闭后自动删除;  
　　(5)语意化更好的内容元素，比如 article、footer、header、nav、section;  
　　(6)表单控件，calendar、date、time、email、url、search;  
　　(7)新的技术webworker, websocket, Geolocation;

简述一下你对HTML语义化的理解？  
答：  
　　用正确的标签做正确的事情。  
　　html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;  
　　即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;  
　　搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;  
　　使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

请写出一些前端性能优化的方式，越多越好  
答:  
1.减少dom操作  
2.部署前，图片压缩，代码压缩  
3.优化js代码结构，减少冗余代码  
4.减少http请求，合理设置 HTTP缓存  
5.使用内容分发cdn加速  
6.静态资源缓存  
7.图片延迟加载

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）  
答：  
输入地址  
1.浏览器查找域名的 IP 地址  
2.这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…  
3.浏览器向 web 服务器发送一个 HTTP 请求  
4.服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）  
5.浏览器跟踪重定向地址  
6.服务器处理请求  
7.服务器返回一个 HTTP 响应  
8.浏览器显示 HTML  
9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）  
10.浏览器发送异步请求

iframe有那些缺点？  
答：  
iframe会阻塞主页面的Onload事件；  
搜索引擎的检索程序无法解读这种页面，不利于SEO;  
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。  
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

什么情况会触发重排和重绘？  
答：  
添加、删除、更新 DOM 节点  
通过 display: none 隐藏一个 DOM 节点-触发重排和重绘  
通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化  
移动或者给页面中的 DOM 节点添加动画  
添加一个样式表，调整样式属性  
用户行为，例如调整窗口大小，改变字号，或者滚动

js部分  
13. 介绍js的基本数据类型  
　　答： Undefined、Null、Boolean、Number、String  
　　  
14. js设计模式  
答：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。  
结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。  
行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模

DOM怎样添加、移除、移动、复制、创建和查找节点。  
答：  
创建新节点  
　　createDocumentFragment()创建一个DOM片段  
　　createElement() 创建一个具体的元素  
　　createTextNode() 创建一个文本节点  
　　添加、移除、替换、插入  
　　appendChild()  
　　removeChild()  
　　replaceChild()  
　　insertBefore() 在已有的子节点前插入一个新的子节点  
　　 查找  
　　getElementsByTagName() 通过标签名称  
　　getElementsByName() 通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)  
　　getElementById() 通过元素Id，唯一性  
null和undefined的区别？  
答：  
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。  
undefined：  
　　（1）变量被声明了，但没有赋值时，就等于undefined。  
　　（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。  
　　（3）对象没有赋值的属性，该属性的值为undefined。  
　　（4）函数没有返回值时，默认返回undefined。  
null：  
　　（1） 作为函数的参数，表示该函数的参数不是对象。  
　　（2） 作为对象原型链的终点。  
call() 和 apply() 的区别和作用？  
答：  
apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。  
call()的第一个参数是上下文，后续是实例传入的参数序列。  
js跨域请求的方式，能写几种是几种  
答：  
1、通过jsonp跨域  
2、通过修改document.domain来跨子域  
3、使用window.name来进行跨域  
4、使用HTML5中新引进的window.postMessage方法来跨域传送数据（ie 67 不支持）  
5、CORS 需要服务器设置header ：Access-Control-Allow-Origin。  
6、nginx反向代理 这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求  
this对象的理解  
答：this总是指向函数的直接调用者（而非间接调用者）；  
　　如果有new关键字，this指向new出来的那个对象；  
　　在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。  
请描述一下 cookies sessionStorage和localstorage区别  
答：  
相同点：都存储在客户端  
不同点：  
1、存储大小  
cookie数据大小不能超过4k。  
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。  
2、有效时间  
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；  
sessionStorage 数据在当前浏览器窗口关闭后自动删除。  
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭  
3、 数据与服务器之间的交互方式  
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端  
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。  
JS数组去重的几种常见方法  
1、

## function uniq(array)\{   var temp = \[\];   for(var i = 0; i < array.length; i++)\{   if(temp.indexOf(array\[i\]) == -1)\{   temp.push(array\[i\]);   \}   \}   return temp;   \} ##

2、  
function uniq(array)\{  
var temp = \[\];  
var index = \[\];  
var l = array.length;  
for(var i = 0; i < l; i++) \{  
for(var j = i + 1; j < l; j++)\{  
if (array\[i\] === array\[j\])\{  
i++;  
j = i;  
\}  
\}  
temp.push(array\[i\]);  
index.push(i);  
\}  
console.log(index);  
return temp;  
\}  
3、  
function uniq(array)\{  
var temp = \[\];  
for(var i = 0; i < array.length; i++) \{  
if(array.indexOf(array\[i\]) == i)\{  
temp.push(array\[i\])  
\}  
\}  
return temp;  
\}  
4、  
function uniq(array)\{  
array.sort();  
var temp=\[array\[0\]\];  
for(var i = 1; i < array.length; i++)\{  
if( array\[i\] !== temp\[temp.length-1\])\{  
temp.push(array\[i\]);  
\}  
\}  
return temp;  
\}

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
48  
49  
50  
51  
52  
JS哪些操作会造成内存泄露  
1、意外的全局变量引起的内存泄露  
2、闭包引起的内存泄露  
3、没有清理的DOM元素引用  
4、被遗忘的定时器或者回调  
5、子元素存在引起的内存泄露

什么是闭包，如何使用它，为什么要使用它？  
闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。  
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。  
使用闭包的注意点：  
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。  
闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

1.如何用原生js给一个按钮绑定两个onclick事件？  
q：btn.addEventListener(“click”,hello);

2.document.write和innerHTML的区别；  
q：document.write是直接写入到页面的内容流，会导致页面被重写。innerHTML将内容写入某个DOM节点，不会导致页面全部重绘；

3.ajax的步骤；  
q：(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.  
??  
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.  
??  
(3)设置响应HTTP请求状态变化的函数.  
??  
(4)发送HTTP请求.  
??  
(5)获取异步调用返回的数据.  
??  
(6)使用JavaScript和DOM实现局部刷新.

4.xml和json的区别；  
q：json数据体积小，传递速度快，JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互，XML对数据描述性比较好；

5.清楚浮动的方法；（常见）  
q：(1).父级div定义 height ;(如果高度和父级div不一样时，会产生问题)  
(2).结尾处加空div标签 clear:both;  
(2).父级div定义 伪类:after 和 zoom;(IE8以上和非IE浏览器才支持:after)  
(2).父级div定义 overflow:hidden;(不能和position配合使用)

6.box-sizing常用的属性;  
q：· box-sizing：content-box；(默认属性值，W3C)  
· box-sizing：border-box;(IE盒模型)  
· box-sizing：inherit;  
(box-sizing属性在FireFox中存在兼容问题，所以需要使用-moz-box-sizing做一下兼容)

7.undefined 和 null 区别；  
q：null： Null类型，代表“空值”代表一个空对象指针，使用typeof运算得到 “object”  
undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。(null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。)

8.常见的HTTP状态码；  
q：2开头 （请求成功）、3开头 （请求被重定向）、4开头 （请求错误）、5开头（服务器错误）

9.网站性能优化；  
q：1. JavaScript 压缩和模块打包

2. 按需加载资源
    
    
      3. 缓存
    
      4. 使用索引加速数据库查询
    
      5. 使用更快的转译方案
    
      6. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
    
      7. 图片编码优化

10.JS哪些操作会造成内存泄露；  
q：1）意外的全局变量引起的内存泄露；  
2）闭包引起的内存泄露；  
3）没有清理的DOM元素引用；  
4）被遗忘的定时器或者回调；  
5）子元素存在引起的内存泄露；

11.什么是闭包，如何使用它，为什么要使用它；  
q：闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”；由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

12.JavaScript的同源策略；  
q：同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。

13.浏览器是如何渲染页面的；  
q：1.解析HTML文件，创建DOM树。

? ?自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
    
    
     3.将CSS与DOM合并，构建渲染树（Render Tree）；
    
     4.布局和绘制，重绘（repaint）和重排（reflow）；

14.从输入url到显示页面，都经历了什么；  
q：1、首先，在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
    
    
      3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
    
    
      4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）
    
    
      5、握手成功后，浏览器向服务器发送http请求，请求数据包。
    
    
      6、服务器处理收到的请求，将数据返回至浏览器
    
    
      7、浏览器收到HTTP响应
    
    
      8、读取页面内容，浏览器渲染，解析html源码
    
    
      9、生成Dom树、解析css样式、js交互
    
    
      10、客户端和服务器交互
    
    
      11、ajax查询

15.对标签有什么理解，meta的作用  
q：可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务；meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容

16.怎么去设计一个组件封装；  
q：1)组件封装的目的是为了重用，提高开发效率和代码质量  
2)低耦合，单一职责，可复用性，可维护性  
3)前端组件化设计思路

17.线程，进程  
q： 1)线程是最小的执行单元，进程是最小的资源管理单元  
2)一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程

18.vue数据的双向数据绑定；  
q：vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

19.get与post 通讯的区别；  
q：1).Get 请求能缓存，Post 不能；  
2).Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的；  
3).Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术；  
4).URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的；  
5).Post 支持更多的编码类型且不对数据类型限制；

20.页面导入样式时，使用link和@import有什么区别；  
q：（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;  
　 （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;  
　 （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

21.this对象的理解；  
q：this总是指向函数的直接调用者（而非间接调用者）；  
　 如果有new关键字，this指向new出来的那个对象；  
　 在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。

22.eval是做什么的；  
q：它的功能是把对应的字符串解析成JS代码并运行；  
　　应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。  
　　由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(’(’+ str +’)’)。

23.--------------什么叫优雅降级和渐进增强-------------------  
q：优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。  
　 渐进增强：针对低版本的浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的体验效果。

24.如果解决ajax无法后退的问题；  
q：1).html5里引入了新的API，即：history.pushState,history.replaceState  
2).可以通过pushState和replaceSate接口浏览器历史，并且改变当前页面的URL  
3).onpopstate监听后退

25.事件委托；  
q：利用冒泡原理，把事件加到父级上，触发执行效果  
可以大量节省内存占用，减少事件注册  
可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定

26.let和const的区别；  
q：let声明的变量可以改变，值和类型都可以改变，没有限制；  
const声明的变量不得改变值；

27.常见的ES6语法；  
q：let，const，箭头函数，字符串模板，class类，模块化，promise

28.介绍promise；  
q：就是一个对象，用来传递异步操作的消息。有三种状态：pending(进行中)，resolved(已完成)和rejected(失败)  
有了promise对象，就可以将异步操作以同步操作的流程表示出来，避免了层层嵌套的回调函数

29.vue父子组件通信；  
q：父组件是通过props属性给子组件通信，在子组件里面emit，在父组件监听；

30.移动端兼容问题；  
q：IOS移动端click时间300ms的延迟响应；  
一些情况下对非可点击元素如（label,span）监听click时间，ios下不会触发，css增加cursor:poiner就搞定了；

31.cookie和session有什么联系和区别；  
q：cookie数据存放在客户的浏览器上，session数据放在服务器上  
session比cookie更安全  
单个cookie保存的数据不能超过4k，很多浏览器都限制一个站点最多保存20个cookie  
一般用cookie来存储sessionid

32.移动端性能优化；  
q：1\_ 尽量使用css3动画，开启硬件加速  
2\_ 适当使用touch事件代替click事件  
3\_ 避免使用css3渐变阴影效果  
4\_ 可以用transform: translateZ(0) 来开启硬件加速  
5\_ 不滥用float。float在渲染时计算量比较大，尽量减少使用  
6\_ 不滥用web字体。web字体需要下载，解析，重绘当前页面  
7\_ 合理使用requestAnimationFrame动画代替setTimeout

33.Cookie的弊端；  
q：　cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但是有很多局限性；  
第一：每个特定的域名下最多生成20个cookie  
第二：IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie

34.常见兼容性问题；  
q：1\_ png24位的图片在ie6浏览器上出现背景，解决方案是做成png8，也可以引用一段脚本处理；  
2\_ 浏览器默认的margin和padding不同，解决方案是加一个全局的\*\{margin: 0;padding:0;\}来统一；  
3\_ IE6双边距BUG：块属性标签float后，又有横行的margin情况下，在ie6显示margin得比设置的大；  
4\_ IE5-8不支持opacity；  
5\_ IE6只支持a标签的:hover伪类；（使用js为元素监听mouseenter,mouseleave事件，添加类实现效果）  
6\_ ol内的序号全为1，不递增；（为li设置样式display: list-item）  
————————————————  
版权声明：本文为CSDN博主「树尚」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/Peng\_wl/article/details/94383068