面试总结与学习(上)

http 请求的方式， HEAD 方式
head: 类似于 get 请求，只不过返回的响应中没有具体的内容，用户获取报头。
options: 允许客户端查看服务器的性能，比如说服务器支持的请求方式。
web Quality（无障碍）
能够被残障人士使用的网站才能称得上一个易用（易访问）的网站，比如：使用 alt 属性
1
<img src="person.jpg" alt="this is a person"/>
- 有时候浏览器无法显示图像，具体的原因有：
- 用户关闭了图像显示
- 浏览器是不支持图形显示的迷你浏览器
- 浏览器是语音浏览器，如果您使用了alt 属性，那么浏览器至少可以显示或读出有关图像的描述。
对 HTML 语义化标签的理解
HTML5 语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如 nav 表示导航条，类似的还有 article，header，footer等标签。
iframe 是什么？有什么缺点？
定义：iframe 元素会创建另一个文档的内联框架
提示：可以将提示文字放在<iframe> </iframe> 之间，来提示某些不支持 iframe 的浏览器。
缺点：回阻塞主页面的 onload 事件；搜索引擎无法解读这种页面，不利于 SEO；iframe 和主页面共享连接池，而浏览器对相同区域有限制所以影响性能。
Cookie 和 Session 的区别
http 是一个无状态协议，因此 Cookie 的最大作用就是存储 sessionid用来唯一标识用户。
click 在 ios 上有 300ms 延迟，原因及如何解决？

暴力解决 - 禁用缩放

1	<meta name="viewport" content="width=device-width, user-scalable=no">

利用 FastClick
检测到 touchend 事件后，like触发模拟 click 事件，并且把浏览器 300ms 之后真正触发的事件给阻塞掉。

Cookie, sessionStroage, localStroage 的区别
共同点：都是保存在浏览器端，并且都是同源的。
Cookie: cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。cookie 数据还有路径(path)的概念，可以限制 cookie 只属于某个路径下，存储的大小很小只有 4k 左右（key：可以在浏览器和服务器来回传递，储存容量小，只有 4k 左右）。
sessionStorage: 仅在当浏览器窗口关闭前有效，自然也就不可能持久保持。
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据; cookie 只在设置的 cookie 过期时间之前一直有效，及时窗口或浏览器关闭。(key：本身就是一个回话过程，关闭浏览器后消失，session 为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话)。
localStorage： localStorage 在所有同源窗口都是共享的; cookie 也是在所有同源窗口共享的。（key: 同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否始终生效）。
cookie的作用：
保存用户登录状态。例如将用户 ID 存储在一个 cookie 内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie 还可以设置过期时间，当超过过期时间后，cookie 就会自动消失，因此，系统往往可以提示用户保持登录状态的时间。
跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次需要选择所在地是繁琐的，当利用了 cookie 后就会显得很人性化了，系统能够用记住上一次访问的地区，当下次再打开你该页面时，他就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为没够用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或者更换布局的功能，name可以使用 cookie 来记录用户的选项，例如：背景色，分辨率等，当用户下次访问时，仍然可以保存上一次访问的界面风格。
讲讲 304
304：如果客户端发送了一个带条件的 GET 请求且该请求被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个 304 状态码。
前端优化
降低请求量：合并资源，减少 http 请求数， minify/gzip 压缩， webP, lazyLoad.
加快请求速度：预解析 DNS，减少域名数，并行加载， CDN 分发。
缓存：http 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。
渲染：JS/CSS 优化，加载顺序，服务端渲染， pipeline。
GET 和 POST 的区别
- get参数通过url传递，post放在request body中。
- get请求在url中传递的参数是有长度限制的，而post没有。
- get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
- get请求只能进行url编码，而post支持多种编码方式
- get请求会浏览器主动cache，而post支持多种编码方式。
- get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。
- GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
- GET产生一个TCP数据包；POST产生两个TCP数据包。
HTTP 支持的方法

GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT

画一个三角形

div {
  width:0px;
  height:0px;
  border-top:10px solid red;
  border-right:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid transparent;
}

HTML5新增的元素
首先 HTML5 为了更好的实践 web 语义化，增加了 header, footer, nav, aside,section等语义化标签，在表单方面，为了增强表单，为 input 提供了 color,email, data, range 等类型，在存储方面，提供了 sessionStorage, localStorage 和离线存储，通过这些村存储方式方便数据在客户端的存储和获取，在多媒体方面规定了音频和视频元素 audio 和 vedio, 另外还有地理定位， canvas 画布, 拖放，多线程编程的 web worker 和 websocket 协议。
在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？
输入url后，首先需要找到这个url域名的服务器ip,为了寻找这个ip，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存 –> 系统缓存 –> 路由器缓存，缓存中没有则查找系统的hosts文件中是否有记录，如果没有则查询DNS服务器，得到服务器的ip地址后，浏览器根据这个ip以及相应的端口号，构造一个http请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个http请求封装在一个tcp包中，这个tcp包会依次经过传输层，网络层，数据链路层，物理层到达服务器，服务器解析这个请求来作出响应，返回相应的html给浏览器，因为html是一个树形结构，浏览器根据这个html来构建DOM树，在dom树的构建过程中如果遇到JS脚本和外部JS连接，则会停止构建DOM树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐JS代码应该放在html代码的后面，之后根据外部央视，内部央视，内联样式构建一个CSS对象模型树CSSOM树，构建完成后和DOM树合并为渲染树，这里主要做的是排除非视觉节点，比如script，meta标签和排除display为none的节点，之后进行布局，布局主要是确定各个元素的位置和尺寸，之后是渲染页面，因为html文件中会含有图片，视频，音频等资源，在解析DOM的过程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一般是4-6个，当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。 Cache-Control和Expires的区别在于Cache-Control使用相对时间，Expires使用的是基于服务器端的绝对时间，因为存在时差问题，一般采用Cache-Control，在请求这些有设置了缓存的数据时，会先查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验，如果一致，继续校验 Last-Modified，没有设置ETag则直接验证Last-Modified，再决定是否返回304.
总结：DNS解析; TCP连接; 发送HTTP请求; 服务器处理请求并返回HTTP报文; 浏览器解析渲染页面; 连接结。
cache-control的值有哪些
cache-control是一个通用消息头字段被用于HTTP请求和响应中，通过指定指令来实现缓存机制，这个缓存指令是单向的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。
浏览器在生成页面的时候，会生成那两颗树？
构造两棵树，DOM树和CSSOM规则树。当浏览器接收到服务器相应来的HTML文档后，会遍历文档节点，生成DOM树; CSSOM规则树由浏览器解析CSS文件生成。
怎么看网站的性能如何
检测页面加载时间一般有两种方式:
被动去测：就是在被检测的页面置入脚本或探针，当用户访问网页时，探针自动采集数据并传回数据库进行分析;
主动监测的方式，即主动的搭建分布式受控环境，模拟用户发起页面访问请求，主动采集性能数据并分析，在检测的精准度上，专业的第三方工具效果更佳，比如说性能极客.
200和304的区别

200 OK 请求成功。一般用于GET与POST请求
304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源。

HTML5和CSS3用的多吗？你了解它们的新属性吗？有在项目中用过吗？
HTML5:
- 标签增删：
  8个语义元素 header section footer aside nav main article figure。
  新的表单控件：calander date time email url search
  新的 input 类型：color data datetime datetime-local email
  移除过时的标签：big font frame frameset

canvas 绘图：支持内联 SVG，支持 MATHML
多媒体 audio video source embed track
本地离线存储，把需要离线存储在本地的文件爱你列在一个 manifest 配置文件
web 存储 localStorage sessionStorage
CSS3
边框： border-radius,box-shadow 等;
背景： background-size,background-origin
2D, 3D 转换： transform
动画：animation

画一条 0.5px 的线

采用 meta viewport 方式

1	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

采用border-image的方式
采用transform: scale()的方式

垂直居中的方法
margin: auto; 定位为上下左右为0，margin：0可以实现脱离文档流的居中.

<div>
  <img src="mm.jpg">
</div>
div {
  position: relative;
  width: 400px;
  height: 400px;

  border: 1px solid #465468;
}
img {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

margin 负值法

.container{
  position: relative;
  width: 500px;
  height: 400px;
  border: 2px solid #379;
}
.inner{
  position: absolute;
  top: 50%;
  left: 50%;

  width: 480px;
  height: 380px;
  background-color: #746;

tabel-cell(未脱离文档流)：设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。

div{
  width: 300px;
  height: 300px;
  border: 3px solid #555;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
img{
  vertical-align: middle;
}

flex

.container{
  width: 300px;
  height: 200px;
  border: 3px solid #546461;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.inner{
  border: 3px solid #458761;
  padding: 20px;
}

说一下块元素和行元素
块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度
行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效

多行元素的文本省略号

div {
  display: -webkit-box
  -webkit-box-orient:vertical
  -webkit-line-clamp:3
  overflow:hidden
}

visibility=hidden, opacity=0，display:none 区别
opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的。
visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。
display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。
介绍一下盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
怪异盒模型：一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）
设置盒模型：box-sizing:border-box
position相关属性
固定定位fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。
相对定位relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
粘性定位sticky：元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
默认定位Static：默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。
inherit:规定应该从父元素继承position 属性的值。
如何实现图片在某个容器中居中的？

父元素固定宽高，利用定位及设置子元素margin值为自身的一半。
父元素固定宽高，子元素设置position: absolute，margin：auto平均分配margin
css3属性transform。子元素设置position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);即可。
将父元素设置成display: table, 子元素设置为单元格 display: table-cell。
弹性布局display: flex。设置align-items: center; justify-content: center

如何实现元素的垂直居中

父元素display:flex,align-items:center;
元素绝对定位，top:50%，margin-top：-（高度/2）
高度不确定用transform：translateY（-50%）
父元素table布局，子元素设置vertical-align:center;

三栏布局的实现方式，尽可能多写，浮动布局时，三个div的生成顺序有没有影响,
三列布局又分为两种，两列定宽一列自适应，以及两侧定宽中间自适应
两列定宽一列自适应：
float+margin：给div设置float：left，left的div添加属性margin-right：left和center的间隔px,right的div添加属性margin-left：left和center的宽度之和加上间隔
float+overflow：给div设置float：left，再给right的div设置overflow:hidden。这样子两个盒子浮动，另一个盒子触发bfc达到自适应
position：父级div设置position：relative，三个子级div设置position：absolute，这个要计算好盒子的宽度和间隔去设置位置，兼容性比较好，
table实现：父级div设置display：table，设置border-spacing：10px//设置间距，取值随意,子级div设置display:table-cell，这种方法兼容性好，适用于高度宽度未知的情况，但是margin失效，设计间隔比较麻烦，
flex实现：parent的div设置display：flex；left和center的div设置margin-right；然后right 的div设置flex：1；这样子right自适应，但是flex的兼容性不好
grid实现：parent的div设置display：grid，设置grid-template-columns属性，固定第一列第二列宽度，第三列auto.

对于两侧定宽中间自适应的布局，对于这种布局需要把center放在前面，可以采用双飞翼布局：圣杯布局，来实现，也可以使用上述方法中的grid，table，flex，position实现。
30. 有一个width300，height300，怎么实现在屏幕上垂直水平居中
对于行内块级元素，

父级元素设置text-alig：center，然后设置line-height和vertical-align使其垂直居中，最后设置font-size：0消除近似居中的bug
父级元素设置display：table-cell，vertical-align：middle达到水平垂直居中
采用绝对定位，原理是子绝父相，父元素设置position：relative，子元素设置position：absolute，然后通过transform或margin组合使用达到垂直居中效果，设置top：50%，left：50%，transform：translate（-50%，-50%）
绝对居中，原理是当top,bottom为0时，margin-top&bottom设置auto的话会无限延伸沾满空间并平分，当left，right为0时,margin-left&right设置auto会无限延伸占满空间并平分，
采用flex，父元素设置display：flex，子元素设置margin：auto
视窗居中，vh为视口单位，50vh即是视口高度的50/100，设置margin：50vh auto 0，transform：translate(-50%)。

设置一个元素的背景颜色，背景颜色会填充哪些区域？
background-color设置的背景颜色会填充元素的content、padding、border区域