定义

一.何谓SEO

1.提供搜索引擎能抓取的格式2.将ass与as等脚本文件以引用方式进行处理
3.提供搜索引擎能阅读的内容4.善用图片或者图像的Alt属性
5.经常更新页面内容6.使用唯一的元数据
7.适当地使用标题标签8.遵守W3C标准

二.请描述一下cookies，sessionStorage和localStorage的区别？

⒈local长期存储数据，浏览器关闭数据后不丢失；

⒉sessionStorage数据在浏览器关闭后自动删除；

⒊cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）。cookie始终在同源的HTTP请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。session storage和local storage不会自动把数据发给服务器，仅在本地保存；

⒋存储大小：cookie数据大小不会超过4K，session storage和local storage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更多；

⒌有期时间：local storage存储持久数据，浏览器关闭后数据不丢失，除非自动删除数据。session storage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭；

三：jquery绑定click的方法有几种

Bind，on ，live，delegate

四：XSS攻击和CSRF攻击

<1. XSS攻击–跨站脚本攻击

场景：比如在正常发表文章，或评论他人文章时，注入恶意脚本。待他人查看时触发恶意脚本达到攻击目的.

1. 通过注入的标签事件触发
2. 通过注入的带有Sript属性的标签触发（防御：利用正则检查输入内容进行过滤）

<2. CSRF攻击–跨站请求伪造攻击

场景：CSRF攻击者在用户已经登录A网站之后，诱使用户访问一个B页面，利用A网站对用户的信任，以用户身份在B页面对目标网站发起伪造用户操作的请求，达到攻击目的。

(防御：使用token)

五.HTTP和HTTP有什么区别

1、HTTP协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。

1. HTTPs协议：是具有安全性的SLR加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。

3、HTTP协议：HTTP的连接很简单，是无状态的。

4、HTTPs协议：是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网络协议。

5、HTTP协议：使用的端口是80。

6、HTTPs协议：使用的端口是443．

7、HTTP协议：免费申请。

8、HTTPs协议：需要到ca申请证书，一般免费证书很少，需要交费。

六：发送 Ajax 请求的五个步骤

（1）创建异步对象。即 Frequentest 对象。

（2）设置请求的参数。包括：请求的方法、请求的Burl。

（3）发送请求。

（4）注册事件。 noninterchangeable事件，状态改变时就会调用。

（5）获取返回的数据。

七：post和get的区别？

1、get是从服务器上获取数据。

2、post是向服务器传发送数据。

1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。

2、post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

务器端用Request.Form获取提交的数据。

3、get传送的数据量较小，不能大于2KB。

4、post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。

5、get安全性非常低。6、post安全性较高。

八：HTTP常见响应状态码及解释、常用请求头及解释

2XX Success(成功状态码)3XX Redirection(重定向状态码)

4XX Client Error(客户端错误状态码)

403 该状态码表明对请求资源的访问被服务器拒绝了。
404 该状态码表明服务器上无法找到请求的资源

5XX Server Error(服务器错误状态码)
500 该状态码表明服务器端在执行请求时发生了错误。
503 该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求

九：web前端性能优化

使用CDN代理

减少外部HTTP请求

压缩HTML、CSS和JavaScript

优化图片，使用字体图标，优化图片大小

少用全局变量、缓存DOM节点查找的结果。减少IO读取操作

十：new操作符具体干了什么

1、创建一个 空对象，并且this变量引用该对象，同时还继承了该函数的原型

2、属性和方法被加入到this引用的对象中

3、新创建的对象由this所引用，并且最后隐式的返回this

十一：：页面导入样式时，使用link和@import有什么区别？

区别1：link是XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本(IE5及以下)的浏览器不支持。

区别4：link支持使用Java script控制DOM去改变样式；而@import不支持。

十二：伪类和伪元素

1. :hover和:active，：focus，：link伪类使用单冒号
2. 伪元素种类 比如::before和::after等伪元素使

十三：原型，原型链

原型链:

1. 每一个构造函数都有一个prototype属性，称之为显示原型
2. 每一个引用类型都有一个_proto_属性，称之为隐示原型
3. 每一个引用类型的_proto_指向他的构造函数prototype
4. 每一个构造函数都有自己的_proto_,因为函数本身就是一个引用类型，这个构造函数的_proto_又指向他自己狗展函数的prototype，这样一级一级向上就形成了原型链

原型：简单来说就是一个构造函数，当用这个构造函数new一个实例的时候，这个实例的原型就是这个构造函数，js所有的引用类型都有自己的构造函数

var arr =[] 的时候 其实就是等于var arr= new Array（）

十四：继承

原型继承，构造函数继承，组合继承，寄生继承，寄生组合继承，class

十五：闭包

闭包就是有权访问一个函数内部变量的函数，也就是常说的函数内部嵌套函数，内部函数访问外部函数变量，从而导致垃圾回收机制没有将当前变量回收掉。这样的操作，有可能会带来内存泄漏。好处就是可以设计私有的方法和变量。

闭包就是一个函数，两个函数嵌套在一起，内部函数就是闭包。形成闭包的条件：内部函数需要通过return返回出来。

十六：深浅拷贝

1.Object.assign方法来实现

2.JSON.parse(JSON.stringify(object));

十七：script标签如何实现异步加载

1. defer：等到整个页面在内存中华正常渲染结束（DOM结构完全生成，以及其他脚本执行完成），才会执行；

2. async是一旦下载完成，渲染就会中断，执行这个脚本之后，再继续渲染。

十八：for in与for of用法及区别

for in 得到对象的key或数组，字符串的下标

For of 和for Each 直接得到值

For of 对象不能用

十九：px、em、rem的区别？

1、px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。

2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

3.rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。

二十：undefined与null的区别

相同点：undefined和null在if语句中，都会被自动转为false

不同点：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，

转化为数字问NaN

二十一：简单的闭包

function fn1(){
      function fn2(){
            alert(1)
      }
       return f2
 }
       f1()
1
2
3
4
5
6
7

二十二：那些操作会造成内存泄漏

1. 什么是内存泄漏

当有变量和对象，应该被回收，而没有被回收时，一直占用和停留在堆内存中，这就产生内存泄漏。

1. 内存泄漏影响
   内存泄漏会导致内存被占用过多无法释放，从而导致系统内存分配不足，造成了内存溢出从而导致应用Crash（浏览器崩溃）。
   3，前端造成内存泄漏的操作

1，闭包

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，过多的使用闭包，不及时释放，会导致内存泄漏。

2.意外全局

3.定时器

二十三：浏览器内核

IE浏览器内核：IE内核 Chrome浏览器内核：现在是Blink内核；

hrome浏览器内核：现在是Blink内核； Safari浏览器内核：Webkit内核；

css

一：CSS 盒子模型(Box Model)

外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

二：CSS之绝对定位与相对定位的区别

position: absolute

绝对定位：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。

position: relative

相对定位：相对位置的坐标参考系是以自己上一次的位置（x，y）作为原点（0，0）。

三：使一个div居中显示的三种方法

1. div{width: 200px;height: 200px;position: absolute; background-color: orchid;top: 50%;left: 50%; margin-top: -100px;margin-left: -100px;}
2. div1 {width: 700px;height: 600px;background-color: orange;display: flex;align-items: center;justify-content: center; }

四：清除浮动

父级div定义伪类：

1.after和zoom2.在结尾处添加空div标签clear:both

3.父级div定义height4. 5…父级div定义overflow:hidden

6.父级div也一起浮动

五：CSS3新特性有哪些？

文字阴影(text-shadow)3、边框：圆角（border-radius）边框阴影：box-shadow4、盒子模型：box-sizing6、渐变：linear-gradient、radial-gradient7、过渡：transition可实现动画8、自定义动画10、多媒体查询、多栏布局12、2D转换：

js

一.call和apply函数的作用

相同点：改变this的指向

不同点：apply()方法接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。

call()方法第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来

二.如何阻止事件冒泡和默认（行为）事件？

IE：

window.event.cancel Bubble = true;//停止冒泡

window.event.return Value = false;//阻止事件的默认行为

Firefox：

event.prevent Default();// 取消事件的默认行为

event.stoppropriation(); // 阻止事件的传播

三：conquer $(document).ready() 与window.download的区别

1.执行时间

window.download必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同

window.download不能同时编写多个，如果有多个window.download方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

四：数组去重的方法

方法一：

var arr=['1','2','3','3','4','3']

console.log([...new Set(arr)])
1
2
3

方法二：

var arr=['1','2','3','3','4','3']

console.log(Array.from(new Set(arr)))
1
2
3

方法三：双重for循环，splice去重

var arr=[1,2,3,4,5,6,2,3,4]

function fun(arr){

    for(var i=0;i

var arr=[1,5,7,9,16,18,3,13]
var tem;

for(var i=0;iarr[j+1])
          tem=arr[j]
          arr[j]==arr[j+1]      
          arr[j+1]==tem
    }
  
 }
console.log(arr)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15