html,css,http面试题

浏览器内核

1、IE浏览器内核：Trident内核，也是俗称的IE内核； 2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核； 3、Firefox浏览器内核：Gecko内核，俗称Firefox内核； 4、Safari浏览器内核：Webkit内核

如何水平垂直居中一个元素

text-algin:center;line-height:height
popsition:absolute;left:50%;top:50%
display:flex;margin:auto

link和@import的区别

link属于html标签。@import在css中使用表示导入外部样式表；页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

link方式的样式的权重 高于@import的权重；

link 支持使用javascript改变样式 （document.styleSheets），后者不可

如何初始化css样式

为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。

 最简单的初始化方法就是： * {padding: 0; margin: 0;} 

重置样式表

sass和less的区别

先sass和less都是css的预编译处理语言，他们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用

sass和less主要区别:在于实现方式 less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。

display的值和作用

https://blog.csdn.net/qq_40413670/article/details/106832122

display: none;是CSS1规范，无兼容性问题，该属性值表示此元素不会被显示，依照词义是真正隐藏元素，使用这个属性，被隐藏的元素不占据任何空间，用户交互操作例如点击事件都不会生效，读屏软件也不会读到元素的内容，这个元素的任何子元素也会同时被隐藏。

display: block;是CSS1规范，无兼容性问题，该属性值表示此元素将显示为块级元素，此元素前后会带有换行符，元素独占一行，封闭后自动换行，默认宽度为100%，可以指定宽度和高度，内外边距对于四个方向有效。

display: inline;display: inline-block;display: table;display: flex;

css盒子模型和区别

CSS3新增了box-sizing属性来改变盒模型的类型
content-box为默认值，代表W3C盒模型：盒子定义宽高 = 内容宽高（content）
border-box代表IE盒模型：盒子定义宽高 = 内容宽高（content） + 内边距 （padding）+ 边框（border）

line-height的理解

line-height【行高】顾名思意指一行文字的高度，用来指定行间的距离，具体来说是指两行文字间基线之间的最小距离。

line-height 不允许设置负值

浏览器如何对h5的离线缓存资源进行管理和记载

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

display:inline-block甚麽时候不会显示间隙

1：父亲设置font-size=0
2: 删除空格，但是会不利于阅读
3：添加注释
4：设置letter-spacing 设置字母之间的间隙为-4px 去抵消字母与字母之间的空格
5：设置word-spacing 单次之间的间隙

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

position定位的常见

1.static

positon定位的默认值，没有定位

2.relative

生成相对定位的元素，相对于其正常位置进行定位，一般在子元素设置absoute定位时，给父元素设置relative

元素的位置通过top、right、bottom、left  控制，其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)

3.absoute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位

元素的位置通过top、right、bottom、left  控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角

4.fixed  （ie6不兼容）

生成绝对定位的元素，相对于浏览器窗口进行定位，和absoute的区别是fixed不会跟随屏幕滚动(常见的各种贴屏广告)

元素的位置通过top、right、bottom、left  控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角

html全局属性

全局属性：对于任何一个标签都是可以使用的属性  class,id,style,lang,title,is,hidden,

css样式写在body里起作用吗

优先级不同，就近原则，离标签越近的style优先级越高，body的优先级高于head，而在这个程序中，在同时打开两个style的时候，由于body的优先级高于head，body里的style离界面的dom结点更近，故先按照body里面的style渲染页面。

建议在head内引用外部css文件，因为放在body或者body之后的话，浏览器就要再重新渲染一遍儿页面。

padding和margin能是负值吗

css中的padding是不能有负值出现的

1.margin-left,margin-right为负值

1）元素本身没有宽度，会增加元素宽度

2）元素本身有宽度，会产生位移

2.margin-top为负值，不管是否设置高度，都不会增加高度，而是会产生向上的位移

3.margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度.

ajax的原理和作用

ajax的工作原理就是通过XmlHttpRequest对象来向服务器发出异步请求，从服务器中获得数据，然后用Javascript来操作DOM从而更新局部页面

Ajax是一种无需重新加载整个网页，能够更新部分网页的技术。

html中的onfocus和onblur是什么属性？怎么使用？

onfocus 属性在元素获得焦点时被触发，即：获得焦点事件；常用于 、 以及 标签中。

onblur 属性在元素失去焦点时触发，即：失去焦点事件；常用于表单验证代码（例如用户离开表单字段）中。

a标签的href和onclick属性存在时哪个先被触发

• onclick的事件被先执行，其次是href中定义的（页面跳转或者javascript）
• 同时存在两个定义的时候（onclick与href都定义了），如果想阻止href的动作，在onclick必须加上return false; 一般是这样写οnclick="xxx();return false;".

• 在href中定义的函数如果有返回值的话，当前页面的内容将被返回值代替

1. 如果页面过长有滚动条，且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);，而不要是 #，这可以防止不必要的页面跳动；

cookie和session的区别

HTTP是一个无状态协议，因此Cookie的最大的作用就是存储sessionId用来唯一标识用户

session和cookie的作用有点类似，都是为了存储用户相关的信息。不同的是，cookie是存储在本地浏览器，而session存储在服务器。存储在服务器的数据会更加的安全，不容易被窃取。但存储在服务器也有一定的弊端，就是会占用服务器的资源,

cookie详解

document.cookie获取cookie字符串

cookie本身就是存储在浏览器中的字符串。但这个字符串是有格式的，由键值对 key=value构成，键值对之间由一个分号和一个空格隔开。

"key=name; expires=Thu, 25 Feb 2016 04:18:00 GMT; domain=ppsc.sankuai.com; path=/; secure; HttpOnly"

签名(signed)cookie和令牌(token)cookie

对于用来登录的cookie，有两种常见的方式可以将登录信息存储在cookie里面：一种是签名(signed)cookie,另一种是令牌(token)cookie

签名cookie通常会存储用户名，可能还有用户ID、用户最后一次成功登录的时间，以及网站觉得有用的其他任何信息。
令牌cookie会在cookie里面存储一串随机字节作为令牌，服务器可以根据令牌在数据库中查找令牌的拥有者。

签名cookie
优点：验证cookie所需的一切信息都存储在cookie里面。cookie可以包含额外的信息(additional information)，并且对这些信息进行签名也很容易。
缺点：正确地处理签名很难。很容易忘记对数据进行签名，或者忘记验证数据的签名，从而造成安全漏洞

令牌cookie
优点：添加信息非常容易，cookie的体积非常小，因此移动终端和速度较慢的客户端可以更快地发送请求。
缺点：需要在服务器中存储更多信息。如果使用的是关系数据库，那么载入和存储cookie的代价可能会很高

cookie和storage的区别

web Storage的特点当在前端网页需要进行一些数据存储时，我们最常用到的就是Storage存储：

重要的是

优点：

localStorage解决了cookie存储空间太小的问题。

相比于cookie的4KB大小存储空间，localStorage的存储空间大小来到了5MB，相当于一个前端的数据库。

格式

Storage存储的格式是键值对（key-value）的格式。

并且浏览器会将所有Storage的值类型限定为string类型，所以需要进行一些转换。

缺点

低版本的ie浏览器会不支持Storage。

Storage存储数据所占空间太多会影响性能。导致页面变卡。

Storage并不会被搜索引擎的爬虫所抓取到。

localStorage和sessionStorage的区别

localStorage的存储是永久性的，只有在手动删除或者浏览器被卸载后才会被清除。

sessionStorage的存储保存同一窗口或者标签页的数据，当窗口或者页面关闭后会被清除。

cookie的特点

cookie就是服务端发送给客户端的特殊信息，然后保存在客户端的文本信息。当用户给服务器发送信息的时候会携带cookie。

特点

cookie是名值对方式进行存储。当设置cookie时没有指定expries的过期时间，cookie就会在整个浏览器窗口关闭时被删除。

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

cookie的存储数据大小一般为4KB。

简述受控组件和非受控组件

受控组件，顾名思义：就是受我们控制的组件。

其实就是我们对某个组件状态的掌控，他的值是否只能由用户设置，而不能通过代码控制。

非受控组件，顾名思义：就是不受我们控制的组件。

css性能优化

性能优化中有一个重要的指标——首次有效绘制（First Meaningful Paint，简称FMP）即指页面的首要内容（primary content）出现在屏幕上的时间。

CSS会阻塞渲染，在CSS文件请求、下载、解析完成之前，浏览器将不会渲染任何已处理的内容。

1 文件压缩,文件的大小会直接影响浏览器的加载速度,webpack、gulp/grunt、rollup等也都支持CSS压缩功能。压缩后的文件能够明显减小，可以大大降低了浏览器的加载时间。

2 找到并删除代码中无用的CSS。一般情况下，会存在这两种无用的CSS代码：一种是不同元素或者其他情况下的重复代码，一种是整个页面内没有生效的CSS代码。

3 减少使用昂贵的属性

在浏览器绘制屏幕时，所有需要浏览器进行操作或计算的属性相对而言都需要花费更大的代价。当页面发生重绘时，它们会降低浏览器的渲染性能。所以在编写CSS时，我们应该尽量减少使用昂贵属性，如box-shadow/border-radius/filter/透明度/:nth-child等。

优化重排与重绘
在网站的使用过程中，某些操作会导致样式的改变，这时浏览器需要检测这些改变并重新渲染，其中有些操作所耗费的性能更多。我们都知道，当FPS为60时，用户使用网站时才会感到流畅。这也就是说，我们需要在16.67ms内完成每次渲染相关的所有操作，所以我们要尽量减少耗费更多的操作。
3.1 减少重排
重排会导致浏览器重新计算整个文档，重新构建渲染树，这一过程会降低浏览器的渲染速度。如下所示，有很多操作会触发重排，我们应该避免频繁触发这些操作。

改变font-size和font-family
改变元素的内外边距
通过JS改变CSS类
通过JS获取DOM元素的位置相关属性（如width/height/left等）
CSS伪类激活
滚动滚动条或者改变窗口大小

3.2 避免不必要的重绘
当元素的外观（如color，background，visibility等属性）发生改变时，会触发重绘。在网站的使用过程中，重绘是无法避免的。不过，浏览器对此做了优化，它会将多次的重排、重绘操作合并为一次执行。不过我们仍需要避免不必要的重绘，如页面滚动时触发的hover事件，可以在滚动的时候禁用hover事件，这样页面在滚动时会更加流畅。

不建议使用@import主要有以下两点原因。

首先，使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。这就导致浏览器无法并行下载所需的样式文件。

其次，多个@import会导致下载顺序紊乱。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。

所以不要使用这一方法，使用link标签就行了。

canvas和svg的区别

1.1 Canvas

通过js绘制2D图形

逐像素进行渲染

位置发生改变会重新进行绘制

1.2 SVG

一种使用XML描述的2D图形的语言

SVG继续XML意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加js事件处理器

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

1.3 区别

Canvas依赖分辨率，SVG不依赖

Canvas不支持事件处理器，SVG支持

Canvas弱的文本渲染能力，SVG适合带有大型渲染区域的应用程序（比如谷歌地图）

Canvas最适合图像密集型的游戏，其中的许多对象会被频繁重绘 SVG不适合游戏应用

Canvas能够以 .png 或 .jpg 格式保存结果图像

SVG复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

canvas绘制基础

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}

table和div+css布局的区别

内容和形式分离

改版网站更简单容易了，不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。

搜索引擎更友好，排名更容易靠前。

css动画开发

@keyframes example {

from {background-color: red;}

to {background-color: yellow;}

}

transform属性能对元素对象进行变形操作，主要包括以下几种：旋转rotate、缩放scale、移动translate、倾斜skew以及矩阵变形matrix。

Transation呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。

display: none与visibility: hidden的区别

display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留

visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

visibility: hidden可以提前为图标占位,给下一个人提示有东西

弹性盒子属性

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

解析url地址的过程

• 浏览器查找本地缓存,有新的资源直接加载,没有进行dns域名解析
• 发起TCP的3次握手

• 建立TCP连接后发起http请求
• 服务器响应http请求

• 浏览器解析htm代码,并请求html代码中的资源(如js、css、图片等）
• 断开TCP连接

• 浏览器对页面进行渲染呈现给用户

解析url地址的过程,返回的object包含域与window location相同

/**
 * 解析一个url并生成window.location对象中包含的域
 * location:
 * {
 *      href: '包含完整的url',
 *      origin: '包含协议到pathname之前的内容',
 *      protocol: 'url使用的协议，包含末尾的:',
 *      username: '用户名', // 暂时不支持
 *      password: '密码',  // 暂时不支持
 *      host: '完整主机名，包含:和端口',
 *      hostname: '主机名，不包含端口'
 *      port: '端口号',
 *      pathname: '服务器上访问资源的路径/开头',
 *      search: 'query string，?开头',
 *      hash: '#开头的fragment identifier'
 * }
 *
 * @param {string} url 需要解析的url
 * @return {Object} 包含url信息的对象
 */
function parseUrl(url) {
    var result = {};
    var keys = ['href', 'origin', 'protocol', 'host',
                'hostname', 'port', 'pathname', 'search', 'hash'];
    var i, len;
    var regexp = /(([^:]+:)\/\/(([^:\/\?#]+)(:\d+)?))(\/[^?#]*)?(\?[^#]*)?(#.*)?/;

    var match = regexp.exec(url);

    if (match) {
        for (i = keys.length - 1; i >= 0; --i) {
            result[keys[i]] = match[i] ? match[i] : '';
        }
    }

    return result;
}

解析url获取参数

getUrlParam('http://xxx?type=list','type')

function getUrlParam(urlStr, urlKey) {
    const url = new URL(urlStr)
    var reg = new RegExp('[\?\&]' + urlKey + '=([^\&]*)(\&?)', 'i')
    var r = url.search.match(reg)
    return r ? r[1] : ''
}

正则表达式解析url各部分

?: 表示不捕获
[A-Za-z] 表示匹配大小写字母，
[A-Za-z] + 表示可连续匹配一个以上大小写字母
([A-Za-z]+) 表示捕获括号中的匹配内容
([A-Za-z]+):)? 表示可匹配0-1次？前面内容
//{0,3} 表示可连续匹配“/”0至3个
[0-9./-A-Za-z]+ 表示连续匹配一个以上的大小写字母、0-9数字以及“.”、”/”、“-”
/d+ 表示连续匹配数字
(?::(/d+)) 表示匹配“：”和数字，不捕获外边括号的内容，捕获里边括号的内容
[^?#]* 表示连续匹配除“？”和“#”的内容

var parse_url = /^(?:([A-Za-z]+):)?(//{0,3})([0-9./-A-Za-z]+)(?::(/d+))?(?://([^?#]*))?(?:/?([^#]*))?(?:#(.*))?$/;  

var url = "http://www.baidu.com/?loehuang";  
var result = parse_url.exec(url);  

var names = ['url','scheme','slash','host','port','path','query','hash'];  

var blanks = "         ";  
for(var i=0;i<names.length;i++){  
  document.writeln(names[i] + ":" +        blanks.substring(names[i].length),result[i])  
 }  

http请求中form data和request payload的区别

https://www.jianshu.com/p/dab2f33c958a

Form Data形式
当POST请求的请求头里设置Content-Type: application/x-www-form-urlencoded(默认), 参数在请求体以标准的Form Data的形式提交，以&符号拼接，参数格式为key=value&key=value&key=value.

如果使用AJAX原生POST请求,请求头里设置Content-Type:application/json，请求的参数会显示在Request Payload中，参数格式为JSON格式：{"key":"value","key":"value"...}，这种方式可读性会更好。

• 如果请求头里设置Content-Type: application/x-www-form-urlencoded，那么这个请求被认为是表单请求，参数出现在Form Data里，格式为key=value&key=value&key=value...

• 原生的AJAX请求头里设置Content-Type:application/json，或者使用默认的请求头Content-Type:text/plain;参数会显示在Request payload块里提交。

http状态码

• 200 - 请求成功
• 301 - 资源（网页等）被永久转移到其它URL
• 302重定向
• 304：如果客户端发送了一个带条件的GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个304状态码。

• 404 - 请求的资源（网页等）不存在
• 401状态码：当前请求需要用户验证
• 403 服务器理解请求客户端的请求，但是拒绝执行此请求
• 500 - 内部服务器错误

1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

接口一直处于pedding状态

        接口有问题,浏览器有问题,

        请求是异步的,可能刚发出请求，还未收到返回报文，刷新动作完成，导致返回的报文找不到刚刚是谁发的请求，请求也是一直在等待状态。

甚麽是http2比http1.1有什莫优势

HTTP/2是HTTP协议自1999年HTTP1.1发布后的首个更新，主要基于SPDY协议

header压缩,二进制传输,多路复用,服务器推送

简述v8的内存分代和回收算法

Node程序运行中，此进程占用的所有内存称为常驻内存（Resident Set）。

常驻内存由以下部分组成：

代码区（Code Segment）：存放即将执行的代码片段

栈（Stack）：存放局部变量

堆（Heap）：存放对象、闭包上下文

堆外内存：不通过V8分配，也不受V8管理。Buffer对象的数据就存放于此。

除堆外内存，其余部分均由V8管理。

栈（Stack）的分配与回收非常直接，当程序离开某作用域后，其栈指针下移（回退），整个作用域的局部变量都会出栈，内存收回。

最复杂的部分是堆（Heap）的管理，V8使用垃圾回收机制进行堆的内存管理，也是开发中可能造成内存泄漏的部分，是程序员的关注点。

V8将堆中的对象分为两类：

新生代：年轻的新对象，未经历垃圾回收或仅经历过一次

在V8引擎的内存结构中，新生代主要用于存放存活时间较短的对象。新生代内存是由两个 semispace(半空间) 构成的，内存最大值在 64 位系统和 32 位系统上分别为 32MB 和 16MB ，在新生代的垃圾回收过程中主要采用了 Scavenge 算法。

Scavenge 算法是一种典型的牺牲空间换取时间的算法，对于老生代内存来说，可能会存储大量对象，如果在老生代中使用这种算法，势必会造成内存资源的浪费，但是在新生代内存中，大部分对象的生命周期较短，在时间效率上表现可观，所以还是比较适合这种算法。

老年代：存活时间长的老对象，经历过一次或更多次垃圾回收的对象

get和post的区别

GET用来获取资源，它只是获取、查询数据，不会修改服务器的数据,地址栏拼接,大小2k,保存在历史里,只用ASCII字符,长度最长2048字节,一个tcp数据包

POST则是可以向服务器发送修改请求，进行数据的修改的,request请求体,大小不限制,不保存历史里,两个tcp数据包,，post 会将 header 和 body 分开发送，先发送 header，服务端返回 100 状态码再发送 body。

同步和异步的区别

  同步：执行一个操作之后，等待结果，然后才继续执行后续的操作。

  异步：执行一个操作后，可以去执行其他的操作，然后等待通知再回来执行刚才没执行完的操作

  阻塞：进程给CPU传达一个任务之后，一直等待CPU处理完成，然后才执行后面的操作

  非阻塞：进程给CPU传达任务后，继续处理后续的操作，隔断时间再来询问之前的操作是否完成。这样的过程其实也叫轮询。

1、同步的执行效率会比较低，耗费时间，但有利于我们对流程进行控制，避免很多不可掌控的意外情况；

2、异步的执行效率高，节省时间，但是会占用更多的资源，也不利于我们对进程进行控制

readystate状态码

整个XMLHttpRequest对象的生命周期应该包含如下阶段：

创建－0初始化请求－1发送请求－2接收数据－3解析数据－4完成 。

开发中默认使用”===”来避免抛出异常。

ajax兼容性问题

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/statics/demosource/ajax_info.txt",true);
xmlhttp.send();

axios和ajax的区别

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios。

网站优化

减少HTTP请求,使用CDN,添加Expires头,压缩组件,将样式表放在头部将脚本放在底部,避免CSS表达式,使用外部的JavaScript和CSS,减少DNS查找.,精简JavaScript,避免重定向

反向代理

反向代理是充当Web服务器网关的代理服务器。当您将请求发送到使用反向代理的Web服务器时，他们将先转到反向代理，由该代理将确定是将其路由到Web服务器还是将其阻止。

这意味着有了反向代理，您永远不会与使用它的Web服务器进行直接通信。可以将它们看作web服务器或服务器集群的某种包装器。通过负载平衡和缓存，它们可以保护web免遭攻击，并提供更好的web性能。

json对象与数组表达上的不同

1、JSON可以有两种格式

一种是对象格式的：

{"name":"JSON","address":"北京市西城区","age":25}//JSON的对象格式的字符串

另一种是数组对象

[{"name":"JSON","address":"北京市西城区","age":25}]//数据对象格式

从上面的两种格式可以看出对象格式和数组对象格式唯一的不同则是在对象格式的基础上加上了[]，再来看具体的结构，可以看出都是以键值对的形式出现的，中间以英文状态下的逗号（,）分隔。

在前端和后端进行数据传输的时候这种格式也是很受欢迎的，后端返回json格式的字符串，前台使用js中的JSON.parse()方法把JSON字符串解析为json对象，然后进行遍历，供前端使用。

字符串和json对象和json对象数组相互转换
var jsonStr = "{\"userId\":\"001\"}"; // json对象字符串
var jsonArryStr = "[{\"userId\":\"001\"},{\"userId\":\"002\"}]"; // json数组字符串
var jsonObj = JSON.parse(jsonStr); // 字符串转为json对象
var jsonArry = JSON.parse(jsonArryStr); // 字符串转为json数组
var jsonStr = JSON.stringify(jsonObj); // json对象转为字符串
var jsonArryStr=JSON.stringify(jsonArry);// json数组转为字符串
alert(jsonStr);
alert(jsonArryStr);
alert(jsonObj.userId);
alert(jsonArry[0]['userId']);

JSON.stringify(obj) 将JSON对象转为字符串。
JSON.parse(string) 将字符串转为JSON对象格式。

JSON数组的操作

1、定义 var josnArry=[];

2、添加 jsonArry.push(jsonObj);

3、删除 delete jsonArry[0]; splice(index,length):

4.循环访问数组

json对象与字符串的不同

、Json对象

• 最显著的特征：对象的值可以用 “对象.属性” 进行访问；
• typeOf(json对象) ===> Object类型

• var person={"name":"tom","sex":"男","age":"24"}//json对象 console.log(person.name);//在控制台输出tom

alert(typeof(person));//object

Json字符串（所谓字符串：单引号或者双引号引起来）

node的了解

Node.js 是一个基于 Chrome V8 引擎的JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

Node.js 的包管理器 npm，成为世界上最大的开放源代码的生态系统。

cnpm是什莫

cnpm是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。既然都一样，那么cnpm为什么要出现呢？

由于npmjs.org的服务器在国外（即在“墙”外），国（墙）内开发者做项目的时候，很多“包”的下载速度极慢，在这种环境下阿里巴巴为了众多开发者的便捷便挺身而出推出了淘宝镜像（即cnpm），它把npm官方的“包”全部搬到国内，供广大开发者使用。

配置代理

"proxy": {
	"api": {
		"target": "http://localhost:7000/",
		"changeOrigin": true,
		"pathRewrite": { "^/api/v1": "" }
	}
}

Web Workers是什么

Web Workers是JavaScript运行在浏览器中的一种能力,它允许在主线程创建Worker线程,主线程执行的同时,Worker线程在后台运行,互不干扰,这并不是说JavaScript本身具有多线程的能力,是js运行在webkit浏览器中,浏览器为其启动了新的线程,从而实现多线程的功能.

Web Workers中主要的两种线程为专用线程Dedicated Worker和共享线程 Shared Worker,专用线程供单页面使用,即专用线程不能被多个不同的页面使用,共享线程能被多个不同的页面使用.

内存溢出怎么解决 内存溢出和内存泄露有哪些区别

内存泄露 是指程序在申请内存后，无法释放已申请的内存空间，一次内存泄露危害可以忽略，但内存泄露堆积后果很严重，无论多少内存，迟早会被占光。

. 内存溢出 out of memory ，是指程序在申请内存时，没有足够的内存空间供其使用，出现 out of memory ;比如申请了一个 integer ， 但给它存了 long 才能存下的数，那就是内存溢出。. memory leak 会最终会导致 out of memory !

重绘与回流

reflow:当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程，叫做回流

repaint:当诸如颜色背景等不会引起页面布局变化，而只需要重新渲染的过程叫做重绘

回流一定伴随着重绘，而重绘却可以单独出现

三、减少回流

1. 避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。
2. 避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。

1. 避免多次读取offsetLeft等属性。无法避免则将它们缓存到变量。
2. 将复杂的元素绝对定位或固定定位，使它脱离文档流。否则回流代价十分高

补充：改变字体大小会引发回流

回到网易的问题，并适当做延伸：display:none和visibility：hidden会产生回流与重绘吗？

display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint

visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint

seo优化

title,description,keyword,语义化标签,使用友情链接,提交爬虫链接

模板引擎渲染,服务端渲染

浏览器渲染过程

• 浏览器工作流程：构建DOM -> 构建CSSOM -> 构建渲染树 -> 布局 -> 绘制。
• CSSOM会阻塞渲染，只有当CSSOM构建完毕后才会进入下一个阶段构建渲染树。
• 通常情况下DOM和CSSOM是并行构建的，但是当浏览器遇到一个不带defer或async属性的script标签时，DOM构建将暂停，如果此时又恰巧浏览器尚未完成CSSOM的下载和构建，由于JavaScript可以修改CSSOM，所以需要等CSSOM构建完毕后再执行JS，最后才重新DOM构建。通常是异步进行

浏览器分为js引擎和渲染引擎,遇到js文件,停止渲染并解析js

JS文件不只是阻塞DOM的构建，它会导致CSSOM也阻塞DOM的构建。

前端获取设备机型

navigator.userAgent

百度网盘分享市get分享,不带信息

cookie防范xss脚本攻击

XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击，需要在HTTP头部配上，set-cookie：

httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。

secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。

缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定。

强缓存相关字段有expires，cache-control。如果cache-control与expires同时存在的话，cache-control的优先级高于expires。

协商缓存相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match

	获取资源形式	状态码	发送请求到服务器
强缓存	从缓存取	200（from cache）	否，直接从缓存取
协商缓存	从缓存取	304（not modified）	是，通过服务器来告知缓存是否可用

 前端优化

降低请求量：合并资源，减少HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。

加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。

缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。

渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline。

计算机网络结构

应用层,运输层,网络层,数据层,物理层