前端笔试面试汇总（一）

1.CSS中@import和link的区别

//link引入
<link href="CSS文件" />

//@import引入
<style>  
@import url("CSS文件");   
</style>

相同点：两者都可以引入外部样式
不同点：
1、从属关系不同
link标签是HTML中标签，不仅可以加载样式，还可以定义一些属性ref和RSS等其他事务
@import是css提供语法规则，其作用只有一个引入外部样式

【注】RSS是WEB内容联合的一种格式，是Really Simple Syndication（真正简单的聚合）的缩写。RSS文件用XML表示，必须满足XML1.0的文件规范。

2、加载顺序不同
link标签引入的CSS与页面同时加载
@import引入的css样式，是在页面加载完毕后样式才被加载（所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候挺明显）

3、兼容性不同
link属于HTML中的标签，无兼容问题
@import是css2.1才有的语法，兼容IE5+

4、DOM操作不同
link是一个标签，可以通过DOM操作这个标签，引入样式
@import是css样式层的东西，没有办法进行DOM操作

【注】对link标签进行操作

<link rel="stylesheet" href="demo.css">

//js
const link = document.getElementsByTagName('link')[0]
console.log(link.getAttribute('href')) 
link.setAttribute('href','demo2.css')
console.log(link)

5、权重区别

link引入的样式权重大于@import引入的样式

2.cookie和session的区别

1.认识cookie

• 什么是cookie

cookie是指某些网站为了辨别用户身份、进行session跟踪而存储在用户本地终端上的数据（通常经过加密）

当客户端访问浏览器时，浏览器生成一个票据给客户端，客户端保存票据，以后客户端每次访问服务器的时候，都携带该票据，这个票据就是cookie。

• cookie的特点

客户端存储的，能手动清除的，用在不重要的地方，用明文存储信息，存储量很小，单个cookie不超过4k，有效期很短，20分钟左右。

• cookie的分类

按照在客户端中存储的位置，cookie可以分为内存cookie和硬盘cookie。内存cookie由浏览器维护，保存在内存中，浏览器关闭后就消失了，存在时间是短暂的。硬盘cookie保存在硬盘里，有一个过期时间，除非用户手工清理或到了过期时间，硬盘cookie不会被删除，其存在时间是长期的。

• 工作原理：

1. 创建cookie

   当用户第一次浏览某个使用Cookie的网站时，该网站的服务器就进行如下工作：

   ①该用户生成一个唯一的识别码（Cookie id），创建一个Cookie对象；

   ②默认情况下它是一个会话级别的cookie，存储在浏览器的内存中，用户退出浏览器之后被删除。如果网站希望浏览器将该Cookie存储在磁盘上，则需要设置最大时效（maxAge），并给出一个以秒为单位的时间（将最大时效设为0则是命令浏览器删除该Cookie）；

   ③将Cookie放入到HTTP响应报头，将Cookie插入到一个 Set-Cookie HTTP请求报头中。

   ④发送该HTTP响应报文。

2. 设置存储Cookie

   浏览器收到该响应报文之后，根据报文头里的Set-Cookied特殊的指示，生成相应的Cookie，保存在客户端。该Cookie里面记录着用户当前的信息。

3. 发送Cookie

   当用户再次访问该网站时，浏览器首先检查所有存储的Cookies，如果某个存在该网站的Cookie（即该Cookie所声明的作用范围大于等于将要请求的资源），则把该cookie附在请求资源的HTTP请求头上发送给服务器。

4. 读取Cookie

   服务器接收到用户的HTTP请求报文之后，从报文头获取到该用户的Cookie，从里面找到所需要的东西。

• cookie的作用

在客户端存储用户访问网站的一些信息。典型应用有：记住密码，下次自动登录；购物车功能；记录用户浏览数据，进行商品或广告推荐。

• cookie的缺点

1. cookie会被附加在每个http请求中，所以无形中增加了流量。
2. 由于在HTTP请求中的cookie是明文传递的，所以安全性成问题（除非用HTTPS）
3. cookie的大小限制在4KB左右，对于复杂存储不够用。

2.认识session

• 什么是session

session：服务端存储，默认失效时间为30分钟；是另一种记录客户状态的机制，基于Cookie实现；

session是一种特殊的cookie，当客户端第一次请求服务器时，服务器生成一份session保存在服务端，将该session的id以cookie的形式传递给客户端。以后的每次请求，浏览器都会携带cookie（session数据id）来访问服务器

• 工作原理

1. 创建Session

   当用户访问到一个服务器，如果服务器启用Session，服务器就要为该用户创建一个session，在创建这个session的时候，服务器首先检查这个用户发来的请求里是否包含了一个sessionID，如果包含了一个sessionID则说明之前该用户已经登陆过并为此用户创建过session，那服务器就按照这个sessionID把这个session在服务器的内存中查找出来（如果查找不到，就有可能为他新创建一个），如果客户端请求里不包含有sessionID，则为该客户端创建一个session并生成一个与此session相关的sessionID。这个sessionID是唯一的、不重复的、不容易找到规律的字符串，这个sessionID将被在本次响应中返回到客户端保存，而保存这个sessionID的正是cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。

2. 使用session

   我们知道在IE中，我们可以在工具的Internet选项中把Cookie禁止，那么会不会出现把客户端的Cookie禁止了，那么sessionID就无法再用了呢？找了一些资料说明，可以有其他机制在cookie被禁止时仍然能够把Session id传递回服务器。

   1. 经常被使用的一种技术叫做URL重写，就是把Session id直接附加在URL路径的后面一种是作为URL路径的附加信息,表现形式为：

   http://.../xxx;jSession=ByOK3vjFD75aPnrF7C2HmdnV6QZcEbzWoWiBYEnLerjQ99zWpBng!-145788764;
   

   2. 另一种是作为查询字符串附加在URL后面，表现形式为：

   http://.../xxx?jSession=ByOK3vjFD75aPnrF7C2HmdnV6QZcEbzWoWiBYEnLerjQ99zWpBng!-145788764
   

   3. 还有一种就是表单隐藏字段。就是服务器会自动修改表单，添加一个隐藏字段，以便在表单提交时能够把Session id传递回服务器。

• session的应用

session的根本作用是在服务端存储用户和服务器会话的一些信息。典型应用有：判断用户是否登录；购物车功能。

3.二者区别：

1. 存储位置不同。cookie存放在浏览器，session存放在服务器。

2. 安全性不同。cookie不安全，容易被篡改、删除、禁用，session的数据保存在服务器，返还给客户端的是一个id，安全性比较高。所以可以考虑将登录信息等重要信息存放为session，其他信息可以放在cookie。（Google、Baidu是将cookie进行加密，提交到服务器之后再进行解密）

3. 对服务器造成的压力不同。

   session保存在服务器上，每个用户都会产生一个session，假如并发访问的用户很多，就会产生很多session，耗费大量内存。

   cookie保存在客户端，不占用服务器资源。

   如果并发访问用户很多，cookie是很好的选择。

4. 存储大小不同。单个cookie保存的数据不超过4k，很多浏览器限制最多保存20个cookie

5. 生命周期不同。

   cookie的生命周期是累计的，从创建时就开始计时，默认20分钟后cookie的生命周期结束。也可以给cookie设置过期时间为一个很大很大的数字，cookie就可以保存很久。

   session依赖于名为JSESSIONID的cookie，而cookie JSESSIONID的过期时间默许为-1，只需关闭浏览器（一次会话结束），该session就会失效。

6. 访问范围不同。session为一个用户浏览器独享，cookie为多个用户浏览器共享。

7. 存取方式不同。

   cookie中只能保管ASCII字符串，假如需要存储Unicode字符或者二进制数据，需要先进行编码。cookie中也不能直接存取Java对象等复杂信息。

   session能够存取任何类型的数据，包括但不限于String、Integer、List、Map等。session中也能够直接保管Java Bean乃至任何Java类、对象等，运用起来十分方便。

8. 跨域支持不同。

   cookie支持跨域访问，例如将domain属性设置为".baidu.com"，则以".baidu.com"为后缀的一切域名均能够访问该cookie。跨域名cookie如今被普遍用在网络中。

   而session不会支持跨域名访问，session仅在它所在的域名内有效。

vue.js两大核心

数据驱动和组件系统

• 数据驱动：

数据的双向绑定，用于保证数据和视图的一致性。

• 组件系统：

能够把页面抽象成多个相对独立的模块；可以实现代码重用，提高开发效率和代码质量，便于代码维护。

vue为什么data是函数形式

Vue 中的 data 必须是个函数，因为当 data 是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变
简单来说，就是为了保证组件的独立性和可复用性，如果 data 是个函数的话，每复用一次组件就会返回新的 data，类似于给每个组件实例创建一个私有的数据空间，保护各自的数据互不影响

参考链接：https://www.cnblogs.com/Leophen/p/13805550.html

CSS3新特性

1. css3选择器

   • 属性选择器

   • E[att^=value] 开头

   • E[att$=value] 结尾

   • E[att*=value] 包含

   • 伪类选择器

   • E:last-child

   • E:nth-child(n)

   • E:nth-last-child(n)

   • ...

2. 边框特性

   支持圆角边框(border-radius)，多层边框，边框色彩与图片(border-image)

3. 多背景图

   CSS3允许使用多个属性（比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等）在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题，帮助Web前端开发者在不借助Photoshop的情况下实现对页面背景的设计，简化了背景图片的维护成本 。

4. 颜色和不透明度

   CSS3颜色模块的引入，实现了制作Web效果时不再局限于RGB和十六进制两种模式。CSS3增加了HSL、HSLA、RGBA几种新的颜色模式。这几种颜色模式的提出，在做开发的时候不仅可以设置元素的色彩，还能根据需要轻松地设定元素不透明度。

5. grid布局和flex布局

   CSS3多列布局属性可以不使用多个div标签就能实现多列布局。CSS3中的多列布局模块描述了如何像报纸、杂志那样，把一个简单的区块拆成多列，并通过相应属性来实现列数、列宽、各列之间的空白间距。

   弹性盒模型布局方便了Web前端开发者根据复杂的前端分辨率进行弹性布局，轻松地实现页面中的某一区块在水平、垂直方向对齐，是进行响应式网站开发的一大利器。

6. CSS3变换

   在CSS2.1中，想让某个元素变形必须要借助JavaScript写大量的代码实现，在CSS3中加入了变形属性(transform)，该属性在2D或3D空间里操作盒子的位置和形状，来实现例如旋转、扭曲、缩放或者移位。变形属性的出现，使Web前端中的元素展示不仅仅局限在二维空间，Web前端开发者可以通过旋转、扭曲、缩放或者移位等操作实现元素在三维控件上的展示。通过变形元素，web前端中的内容展示更加形象、真实。

7. 过渡与动画

   CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。CSS3的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。过渡与动画的出现，使CSS在Web前端开发中不再仅仅局限于简单的静态内容展示，而是通过简单的方法使页面元素动了起来，实现了元素从静到动的变化。

8. web字体

   CSS3中引入了@font-face，@font-face是链接服务器字体的一种方式，这些嵌入的字体能变成浏览器的安全字体，开发人员不用再担心用户没有这些字体而导致网页在用户浏览器无法正常显示的问题。

9. 媒体查询

   CSS3中引入媒体查询（mediaqueries），可为不同分辨率的设备定义不同的样式。比如，在可视区域小于480像素时，可能想让原来在右侧的网站侧栏显示在主内容的下边，以往必须通过JavaScript判断用户浏览器的分辨率，然后再通过JavaScript修改CSS。CSS3中只需要通过媒体查询就可实现上述操作。

10. 阴影

    阴影主要分为两种：文本阴影（text-shadow）和盒子阴影（box-shadow）。文本阴影在CSS2中已经存在，但没有得到广泛的运用（CSS2.1中删除了）。CSS3延续了这个特性，并进行了新的定义，该属性提供了一种新的跨浏览器解决方案，使文本看起来更加醒目。CSS3中的盒子阴影的引入，可轻易地为任何元素添加盒子阴影。

js怎么操作DOM，增加，删除，移动，创建，修改，查找

//1.获取元素
document.getElementById() 
document.getElementsByClassName()[0]   //根据类名 
document.getElementsByName()[0]    //根据name属性 
document.getElementsByTagName()[0]   //根据标签 
document.querySelector() 
document.querySelectorAll()[0]

//2.获取内容
a.innerHTML     //获取所有内容，修改时容易导致XSS攻击，textContent不会
a.innerText     //获取文本内容，不包含隐藏元素，会导致回流
a.textContent   //获取文本内容，包含隐藏元素
a.value         //获取input的value值

<p>我是<span style="display: none;">p!</span> 标签</p>
<script>
    const p = document.querySelector('p')
    console.log(p.innerText)
    console.log(p.innerHTML)
    console.log(p.textContent)
</script>

//输出结果为:
我是 标签
我是<span style="display: none;">p!</span> 标签
我是p! 标签

//3.操作属性
a.setAttribute("属性名","属性值");   //添加或更改一个属性。
 
a.getAtrribute("属性名");  //获取属性的值。
 
a.removeAttribute("属性名"); //移除属性。

//创建、添加、移动、移除、替换、克隆
var div = document.createElement('div');

a.appendChild(); //向a中添加一个子元素。如果该子元素是已经存在的，那么会从原来的地方移动到a中

parentNode.insertBefore(newNode, referenceNode); //在referenceNode之前插入一个拥有指定父节点(parentNode)的子节点(newNode)。

a.removeChild(); //从a中删除一个子元素。

parentNode.replaceChild(newChild, oldChild); //用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

a.cloneNode()   //克隆节点，参数deep默认false，如果为true，则克隆所有后代节点。参数为false，不克隆任何后代节点，也不克隆该节点包含的文本，因为文本本身也是一个或多个Text节点

parentNode.insertBefore(newNode, referenceNode);

浮动的概念和原理？清除浮动的方法

浮动：盒子脱离文档流

清除浮动的策略：闭合浮动，只让浮动在父盒子内部受影响，不影响父盒子外面的其他盒子

方法：

1. 额外标签法

   在浮动元素末尾添加一个空的块级元素标签

   <div style="clear:both"></div>
   

2. 父级添加overflow，属性值设置为hidden，auto或scroll

3. :after伪元素法

   #parent:after {
     content: "";   
     /* 伪元素是行内元素，需要转变为块元素 */
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
   }
    
   #parent {
     /* 兼容IE6、7 */
     *zoom: 1;
   }
   

4. 双伪元素

   #parent:before, #parent:after {
     content: "";
     /* 把模式转换成表格 */
     display: table;
   }
    
   #parent:after {
     clear: both;
   }
    
   #parent {
     /* 兼容IE6、7 */
     *zoom: 1;
   }
   

延迟加载js的方法

1. defer属性

   在script标签上，设置defer属性，可以达到异步加载js文件，延迟执行js脚本文件的目的。
   1、defer属性只对外部文件有效，对本地js文件没有效果。
   2、defer属性是在遇到scirpt标签时，浏览器开始异步下载，当遇到标签时，表名页面加载完毕，开始执行js文件。
   3、并且js文件是按顺序执行的。

2. async属性

   在script标签上，设置async属性，可以达到异步加载js文件的目的。
   1、async属性只对外部文件有效，对本地js文件没有效果。
   2、async属性是遇到scirpt标签开始通知浏览器异步下载，下载完毕之后，就可以立即执行。
   3、async设置的js文件不是按照顺序的。

3. 动态创建DOM

   动态创建script标签，当页面的全部内容加载完毕后，在执行创建挂载。
   <script>
       function loadJS() {
           let element = document.createElement("script")
           element.src = "download.js"
           document.body.appendChild(element)
       }
       if(window.addEventListener) {
           window.addEventListener("load", loadJS, false)
       }else if(window.attachEvent) {
           window.attachEvent("onload", loadJS)
       }else {
           window.onload = loadJS
       }
   </script>
   

4. 使用setTimeout

5. js文件放在最后