html css js题目

BFC的布局规则

1.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
2.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
3.计算BFC的高度时，浮动元素也参与计算。

解释css sprites，如何使用？

答：Css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量。

怎么实现跨域问题？

同源策略:协议 端口 域名要相同，如果是协议和端口造成的跨域问题“前台”是无能为力的。

1.jsonp

JSONP原理利用 script 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。

2. JSONP和AJAX对比

JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）

3. JSONP优缺点

JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。

4. JSONP的实现流程

声明一个回调函数，其函数名(如show)当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的data)。
创建一个

// index.html
function jsonp({ url, params, callback }) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script')
    window[callback] = function(data) {
      resolve(data)
      document.body.removeChild(script)
    }
    params = { ...params, callback } // wd=b&callback=show
    let arrs = []
    for (let key in params) {
      arrs.push(`${key}=${params[key]}`)
    }
    script.src = `${url}?${arrs.join('&')}`
    document.body.appendChild(script)
  })
}
jsonp({
  url: 'http://localhost:3000/say',
  params: { wd: 'Iloveyou' },
  callback: 'show'
}).then(data => {
  console.log(data)
})

上面这段代码相当于向http://localhost:3000/say?wd=Iloveyou&callback=show这个地址请求数据，然后后台返回show(‘我不爱你’)，最后会运行show()这个函数，打印出’我不爱你’

// server.js
let express = require('express')
let app = express()
app.get('/say', function(req, res) {
  let { wd, callback } = req.query
  console.log(wd) // Iloveyou
  console.log(callback) // show
  res.end(`${callback}('我不爱你')`)
})
app.listen(3000)

注意：JSONP只支持GET请求

2.cors

CORS 需要浏览器和后端同时支持
请求方法是以下三种方法之一：
HEAD
GET
POST。

针对简单请求的 CORS，服务器需要返回的字段有：
Access-Control-Allow-Origin —— 允许的域名，这个字段是必须的，* 代表允许所有域名；
Access-Control-Allow-Credentials——CORS 请求是否发送 Cookie；
Access-Control-Expose-Headers —— 除了 6 个基本的头字段 Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，XMLHttpRequest 对象的 getResponseHeader() 可以获取的额外的头。
测试非简单请求
不符合上述两个条件的都是非简单请求，例如 PUT，DELETE，或者请求头中有额外的 Header，我们还是用话题列表接口，这次增加一个头信息。
针对非简单请求的 CORS，服务器需要返回的字段有：

Access-Control-Allow-Origin —— 允许的域名，这个字段是必须的，* 代表允许所有域名；
Access-Control-Allow-Methods—— 该字段必需，表示支持的所有 HTTP 请求方法，如 GET, POST, PUT；
Access-Control-Allow-Headers—— 支持的所有头信息字段；
Access-Control-Allow-Credentials——CORS 请求是否发送 Cookie；
Access-Control-Max-Age—— 本次预检请求的有效期。

3. nginx反向代理

现原理类似于Node中间件代理，需要你搭建一个中转nginx服务器，用于转发请求。

使用nginx反向代理实现跨域，是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能。

实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。

先下载nginx，然后将nginx目录下的nginx.conf修改如下:

// proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

什么是事件冒泡/捕获？

答：

事件冒泡：子元素事件的触发会影响父元素事件；

开关事件冒泡：

A，开启事件冒泡：element.addEventListener(eventName，handler，false)；

B，关闭事件冒泡：假设传统方式事件的返回值为 e，就可以通过 e.stopPropagation()来关闭事件冒泡；事件捕获：父元素的事件会影响子元素的事件；

开启事件捕获：element.addEventListener(eventName，handler，true)
addEventListener第三个参数默认是false，也就是开启了事件冒泡

请说说事件委托机制？这样做有什么好处？

答：事件委托，就是某个事件本来该自己干的，但是自己不干，交给别人来干。就叫事件委托。打个比方：一个 button 对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己的点击事件。

好处：

A，提高性能：列如，当有很多 li 同时需要注册事件的时候，如果使用传统方法来注册事件的话，需要给每一个 li 注册事件。然而如果使用委托事件的话，就只需要将事件委托给该一个元素即可。这样就能提高性能。

B.新添加的元素还会有之前的事件；

http请求中get和post方法的区别

get和post本质都是tcp/ip，但是除了http外层外，在tcp/ip层面也有区别。get会产生1个tcp数据包，post产生2个tcp数据包。
具体就是：
（1）get请求时，浏览器会把header和data一起发送出去，服务器响应200（返回数据）。
（2）post请求时，浏览器首先发送headers，服务器响应100 continue，浏览器再发送data，服务器响应200（返回数据）。
1.最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。
为什么get比post更快
1.post请求包含更多的请求头
2.最重要的一条，post在真正接收数据之前会先将请求头发送给服务器进行确认，然后才真正发送数据
3.get会将数据缓存起来，而post不会
区别回答：
（1）post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）

（2）post发送的数据更大（get有url长度限制）

（3）post能发送更多的数据类型（get只能发送ASCII字符）

（4）post比get慢

（5）post用于修改和写入数据，get一般用于搜索排序和筛选之类的操作（淘宝，支付宝的搜索查询都是get提交），目的是资源的获取，读取数据。

一道题目

setImmediate(function(){
    console.log(1);
},0);
setTimeout(function(){
    console.log(2);
},0);
new Promise(function(resolve){
    console.log(3);
    resolve();
    console.log(4);
}).then(function(){
    console.log(5);
});
console.log(6);
process.nextTick(function(){
    console.log(7);
});
console.log(8);

结果34687521

new Promise在实例化的过程中所执行的代码都是同步进行的，而then中注册的回调才是异步执行的。 在同步代码执行完成后才回去检查是否有异步任务完成，并执行对应的回调，而微任务又会在宏任务之前执行。
异步执行优先级process.nexttick>promise.then

异步加载js的几种方式

1.< script >标签的async="async"属性
async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持
async属性规定一旦脚本可用，则会异步执行
async属性仅适用于外部脚本
此方法不能保证脚本按顺序执行
他们将在onload事件之前完成

<script type="text/javascript" src="xxx.js" async="async"></script>

2.< script >标签的defer="defer"属性
defer属性规定是否对脚本执行进行延迟，直到页面加载为止
如果脚本不会改变文档的内容，可将defer属性加入到< script >标签中，以便加快处理文档的速度
兼容所有浏览器
此方法可以确保所有设置了defer属性的脚本按顺序执行

<script type="text/javascript" defer></script>

3.动态创建< script >标签

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName_r("head")[0].appendChild(script);

新的< script >元素加载file1.js源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。你甚至可以将这些代码放在< head >部分而不会对其余部分的页面代码造成影响。相当于添加了async属性。

同步脚本（标签中不含 async 或 defer）： <script src="***.js" charset="utf-8"></script>

当 HTML 文档被解析时如果遇见（同步）脚本，则停止解析，先去加载脚本，然后执行，执行结束后继续解析 HTML 文档。过程如下图：

defer 脚本：<script src="***.js" charset="utf-8" defer></script>

当 HTML 文档被解析时如果遇见 defer 脚本，则在后台加载脚本，文档解析过程不中断，而等文档解析结束之后，defer 脚本执行。另外，defer 脚本的执行顺序与定义时的位置有关。过程如下图：

async 脚本：

<script src="***.js" charset="utf-8" async></script>

当 HTML 文档被解析时如果遇见 async 脚本，则在后台加载脚本，文档解析过程不中断。脚本加载完成后，文档停止解析，脚本执行，执行结束后文档继续解析。过程如下图：

async下载完立即执行，只有执行js时才会阻塞页面

请谈谈你对性能优化的认识？

答：
减少 http 请求次数
80%的响应时间花在下载网页内容(images， stylesheets， javascripts， scripts， flash 等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数。
延迟加载
这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。
减少 DNS 查询次数
DNS 查询也消耗响应时间，如果我们的网页内容来自各个不同的 domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些 domain 也需要消耗一定的时间。DNS 查询结果缓存在本地系统和浏览器中一段时间，所以 DNS 查询一般是对首次访问响应速度有所影响。下面是我清空本地 dns 后访问博客园主页 dns 的查询请求。

var a=[]； a[0]=0；a[1]=1；a[4]=4；请问 a.length 的值是多少？a[3]的输出结果是什么？
5 undefined

Doctype 作用?

声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么
文档类型 规范来解析这个文档。

link 和@import 的区别是？

（1）link 属于 XHTML 标签，而@import 是 CSS 提供的;
（2）页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;
（3）import 只在 IE5 以上才能识别，而 link 是 XHTML 标签，无兼容问题;
（4）link 方式的样式的权重 高于@import 的权重.

浏览器的内核分别是什么?

Gecko： Firefox浏览器
Trident：IE4~IE11浏览器
Blink：Chrome浏览器；
webkit:Safari浏览器

HTML5 的离线储存有几种方式？

localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 数据在浏览器关闭后自动删除。

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

cookie 在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会。
sessionStorage 和 localStorage 的 存 储 空 间 更 大 ； sessionStorage 和
localStorage 有更多丰富易用的接口；sessionStorage 和 localStorage 各自独立的存储空间。

盒子模型异同

相同点：盒子的宽高=盒子内容的宽高+边框+内边距
不同点：ie盒模型的width/height指的是盒子宽高。(border-box)
W3C盒模型的width/height指的是盒子内容宽高。（content-box）

javascript 的 typeof 返回哪些数据类型

在javascript中，typeof操作符可返回的数据类型有：“undefined”、“object”、“boolean”、“number”、“string”、“symbol”、“function”等。

数组方法 pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

”= =”和“===”的不同

前者会自动转换类型
后者不会

简述一下 src 与 href 的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间
的链接，用于超链接。
src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本img 图片和frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

状态码

1xx——指示信息，表示请求已接收，继续处理
2xx——成功，表示请求已被成功接收、理解、接受
3xx——重定向，要完成请求必须进行更进一步的操作
4xx——客户端错误，请求有语法错误或请求无法实现
5xx——服务器端错误，服务器未能实现合法的请求

回流与重绘

（1）Layout，也称为Reflow，即回流。一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树。
（2）Repaint，即重绘。意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就可以了。
回流的成本开销要高于重绘，而且一个节点的回流往往回导致子节点以及同级节点的回流， 所以优化方案中一般都包括，尽量避免回流。
1.页面渲染初始化
2.DOM结构改变，比如删除了某个节点
3.render树变化，比如减少了padding
4.窗口resize
5.最复杂的一种：获取某些属性，引发回流， 很多浏览器会对回流做优化，会等到数量足够时做一次批处理回流， 但是除了render树的直接变化，当获取一些属性时，浏览器为了获得正确的值也会触发回流，这样使得浏览器优化无效，包括
(1）offset(Top/Left/Width/Height)
(2) scroll(Top/Left/Width/Height)
(3) cilent(Top/Left/Width/Height)
(4) width,height
(5) 调用了getComputedStyle()或者IE的currentStyle
回流一定伴随着重绘，重绘却可以单独出现。
优化方案：
（1）减少逐项更改样式，做好一次性更改样式。或者将样式定义为class，并一次性更新。
（2）避免循环操作dom，创建一个documentFragment或div，在他上面进行所有的dom操作，最后添加到window.document中。
（3）避免多次读取offset等属性，无法避免就将他们缓存到变量中。
（4）将复杂的元素绝对定位或者固定定位，使他们脱离文档流，否则回流代价很高。
注意：改变字体大小会引起回流。
再看一个例子：

var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node，再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));