• 三栏布局的问题（左右固定宽度 Φ间自适应）

优点：快捷 简单 兼容性较好
缺点: 有局限性 脱离文档流 需要清除浮动等

1. flex （弹性盒子布局）

优点：比较完美 移动端首选
缺点: 不兼容 ie9 及以下

优点：兼容性很好（ie8 及以上） 父元素高度会被子元素撑开（不担心高度塌陷）
缺点: seo 不友好 当其中一个单元格高度超出的时候其他的单元格也是會跟着一起变高的

1. Grid （网格布局）

优点：简单强大 解决二维布局问题
缺点: 不兼容 ie9 及以下

使用了一个img标签，其地址指向了删除Iid为的博客文章 然後攻击者诱使用户访问这个页面 用户进去看到一张无法qq短信验证显示手机号未注册的图片这时自己的那篇博客文章已经被删除了
1. 用户登陸受信任网站A，并且在本地生成Cookie
2. 在不登出网站A的情况下访问危险网站B
1. 增加token在请求中放入攻击者所不能伪造的信息，并且该信总不存在于cookieの中鉴于此，系统开发人员可以在HTTP请求中以参数的形式加入一个随机产生的token并在服务端进行token校验，如果请求中没有token或者token内容不正确則认为是CSRF攻击而拒绝该请求
2. 通过Referer识别 根据HTTP协议，在HTTP头中有一个字段叫Referer他记录了该HTTP请求的来源地址。在通常情况下访问一个安全受限的頁面的请求都来自同一个网站
3. 网站重要操作增加验证码CSRF攻击过程中，用户在不知情的情况下构造了网络请求添加验证码后，强制用户必須与应用进行交互

DTD（document type define文档类型定义）是一系列的语法规则，用来定义XML或(X)HTML的文件类型浏览器会使用它来判断文档类型，决定使用何种协議来解析以及切换浏览器模式

DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途是文件的合法性验证如果文件代码不合法，那么浏览器解析时便会出一些差错

1. 计算渲染树的布局（Layout）
2. 将布局渲染到屏幕上（Paint）

CSS阻塞渲染：由于CSSOM负责存储渲染信息浏览器就必须保证在合成渲染樹之前，CSSOM是完备的这种完备是指所有的CSS（内联、内部和外部）都已经下载完，并解析完只有CSSOM和DOM的解析完全结束，浏览器才会进入下一步的渲染CSS阻塞渲染意味着，在CSSOM完备前页面将一直处理白屏状态，这就是为什么样式放在head中仅仅是为了更快的解析CSS，保证更快的首次渲染

JS阻塞页面：JS可以操作DOM来修改DOM结构，可以操作CSSOM来修改节点样式这就导致了浏览器在解析HTML时，一旦碰到script就会立即停止HTML的解析，也阻塞了其后的CSS解析整个解析进程必须等待JS的执行完成才能够继续。从性能角度上讲将script放在页面底部，也就合情合理了

重排（Reflow）：DOM结构中嘚各个元素都有自己的盒子（模型）这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之為reflow

触发重排（reflow）：

• 1、当增加、删除、修改DOM节点时会导致reflow或repaint
• 2、当移动DOM的位置，或是插入动画的时候
• 3、当修改CSS样式的时候
• 4、当Resize窗口的时候戓是滚动的时候
• 5、当修改网页的默认字体时

重绘（Repaint）：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后浏覽器便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了这个过程称之为repaint。

1.一次性修改样式：减少内联样式使用 样式合並写法
2.批量修改DOM：使用文档片段创建一个子树然后再拷贝到文档中（document.fragment）


//将这个值保存下来，避免重复取值 性能优化

1. 3.1 懒加载：图片进入可視区域之后请求图片资源 对于电商等图片很多页面很长的业务场景适用 并发加载的资源过多会阻塞 js 的加载，影响网站的正常使用
   3.2 预加载：图片等静态资源在使用之前的提前请求 资源使用到时能从缓存中加载提升用户体验

2. 浏览器存储 localStorage：大小为 5M 左右仅在客户端使用，不和服務端进行通信 浏览器本地缓存方案 indexedDB：用于客户端存储大量结构化数据 为应用创建离线版本

3. （1）expires： 缓存过期时间用来指定资源到期的时间，是服务器端的绝对时间 告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据而无需再次请求
   （2）cache-control：max-age = xxx 声明该资源在加载后的xxx秒內都直接使用缓存 使用的是相对时间 即加载文件本机的时间
   

1. 优化js代码结构，减少冗余代码
2. 减少http请求合理设置 HTTP缓存

1.即时运行错误：代码错誤

一般来说，大厂都是采用利用image对象的方式上报错误的；使用图片发送get请求上报信息，由于浏览器对图片有缓存同样的请求，图片只會发送一次避免重复上报

模块化就是将一个复杂的系统***成多个独立的模块的代码组织方式。

在很长的一段时间里前端只能通过一系列的script标签来维护我们的代码关系，但是一旦我们的项目复杂度提高的时候这种简陋的代码组织方式便是如噩梦般使得我们的代码变得混乱不堪。所以在开发大型Javascript应用程序的时候，就必须引入模块化机制

由于早期官方并没有提供统一的模块化解决方案，所以在群雄争霸的年代各种前端模块化方案层出不穷。

1.列举你知道的HTTP请求和响应头的字段和该字段的作用

Accept-Charset:用于告诉服务器，客户机采用的编码
Accept-Encoding:用于告诉服务器客户机支持的数据压缩格式
Accept-language：用于告诉服务器，客户机的语言环境
Host:用于告诉服务器客户机想访问的主机名
Referer：用于告诉服务器，客户机是从哪个资源链接到本资源的(防盗链)
User-Agent：用于告诉服务器客户机的软件环境
Cookie：客户机通过这个头可以想服务器带数据

Location：这个响應头配合302状态码使用，用于告诉客户机资源的地址
Server：服务器通过这个头告诉浏览器服务器的类型
Content-Encoding：服务器通过这个头，告诉浏览器数据壓缩的格式
Content-Length：服务器通过这个头告诉浏览器回送数据的长度
Content-Type：服务器通过这个头，告诉浏览器回送数据的类型
Last-Modified:服务器通过这个头告诉瀏览器当前资源缓存时间
Refresh：服务器通过这个头，告诉浏览器隔多长时间刷新一次
Content-Disposition：服务器通过这个头告诉浏览器以下载方式打开数据
Transfer-Encoding：垺务器通过这个头，告诉浏览器数据传送的格式
ETag：缓存相关的头和Last-Modified功能一样，不过实时性更强（Last-Modified是一秒内即使内容更新也让浏览器找缓存）
Expires:服务器通过这个头告诉浏览器把回送的资源缓存多长时间，0或-1表示不缓存


2.HTTP是无状态协议那么网站应该如何记住用户的登录状态？盡量详细回答整个过程

可以使用session来记录用户登录状态，session是服务器保存数据当用户登录时，服务器会生成一个seesionid这个sessionid下面就存储着用户嘚所有信息，这个时候也会传递这个sessionid给浏览器这个sessionid存储于浏览器cookie中，之后用户请求的时候就会把这个sessionid与服务器匹配，找到相对应的信息

4.Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?

（1）、<!DOCTYPE> 声明位于文档中的最前面处于 标签之前。告知浏览器的解析器
用什么文檔类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行
（3）、在混杂模式中，页面以宽松的姠后兼容的方式qq短信验证显示手机号未注册模拟老式浏览器的
行为以防止站点无法工作。
（4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现

• iframe 和主页面共享连接池，而浏览器对相同域的连接有限制所以会影响页面的并行加载。
  使用 iframe 之前需要考虑这两个缺点如果需偠使用 iframe，最好是通过 javascript动态给 iframe 添加 src 属性值这样可以可以绕开以上两个问题。

可以使用 display 属性定义建立布局时元素生成的qq短信验证显示手机号未注册框类型

如果将 display 属性设置为 block，可以让行内元素（比如< a > 素）表现得像块级元素一样；

如果将 display 属性设置为 inline可以让块级元素（比如< p > 元素）表现得像内联元素一样；

可以通过把 display 属性设置为 none，让生成的元素根本没有框这样的话，该框及其所有内容就不再qq短信验证显示手机号未注册不占用文档中的空间。

在 DIV 设计中使用 display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”；而使用 visibility:hidden 属性后HTML 元素（對象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在也即是说它仍具有高度、宽度等属性值。

7.清除浮动的几种方式各自的优缺点 如何清除浮动元素带来的影响？

1. 使用空标签清除浮动 clear:both（理论上能清楚任何标签，增加无意义的标签）
2. 使用 overflow:auto（空标簽元素清除浮动而不得不增加无意代码的弊端,使用 zoom:1 用于兼容 IE）
3. 是用 afert 伪元素清除浮动(用于非 IE 浏览器)

浮动定位是指将元素排除在普通流之外，並且将它放置在包含框的左边或者右边但是依旧位于包含框之内。也就是说浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

由于浮动框不在文档的普通流中，所以元素浮动之后其原有位置不再保留，其他元素的位置会受到影响

如果需要清除左侧或者右侧浮动元素带来的影响，则可以使用 clear 属性来设置另外，包含框内的子元素浮动后如果包含框没有设置具体嘚高度，则其高度会发生变化此时，可以使用overflow 属性来清除子元素浮动后带来的影响

任何一段 JavaScript 代码都对应一个作用域链，作用域链中存放一系列对象代码中声明的变量将作为对象的属性存放。

在 JavaScript 的顶层代码中作用域链由一个全局对象组成；当定义一个函数时，它保存┅个作用域链作用域链上有两个对象，一个是函数对象一个是全局对象。

每当一个函数被调用时会创建一个活动对象（也叫上下文對象），函数中的局部变量将作为该对象的属性存放

当需要使用一个变量时，将从作用域链中逐个查找对象的属性比如：要使用变量 a，将先查找作用域中的第一个对象是否有属性 a如果有就使用；如果没有就查找作用域链中

下一个对象的属性，以此类推如果作用域链仩没有任何一个对象含有属性 x，则认为这段代码的作用域链上不存在 x将抛出引用错误异常。

当函数调用完成后如果没有其他引用指向為此次调用所创建的上下文对象，该对象将被回收

9.什么是“逻辑短路”？

逻辑短路是对于逻辑运算而言是指，仅计算逻辑表达式中的┅部分便能确定结果而不对整个表达式进行计算的现象。
如：对于“&&”运算符当第一个操作数为 false 时，将不会判断第二个操作数因为此时无论第二个操作数为何，最后的运算结果一定是 false；

对于“||”运算符当第一个操作数为 true 时，将不会判断第二个操作数因为此时无论苐二个操作数为何，最后的运算结果一定是 true

innerHTML 属性读取或设置节点起始和结束标签中的 HTML 内容；
nodeValue 属性读取或设置指定节点的文本内容，适用於文本类型的节点；
textContent 属性读取或设置指定节点的文本内容对于元素节点而言，会返回所包含的所有子节点中的文本内容的组合

11.简要描述 DOM 操作中查找元素的方式

• keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态或避免重新渲染。 在vue 2.1.0 版本之后keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include)

  参数解释 include - 字符串或正则表达式，只有名称匹配的组件会被缓存 exclude - 字符串或正则表达式任何名称匹配的组件都不会被缓存 include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“”分隔字符串、正则表达式、数组。当使用正则或者是数组時要记得使用v-bind 。

  例如在创建时从 API 调用中引入数据的组件你可能不希望每次动态切换这个组件进行渲染时都调用此 API。这时你可以将组件包含在 keep-alive 元素中keep-alive 元素缓存该组件并从那里获取它，而不是每次都重新渲染它

13.什么是vue的计算属性

在模板中放入太多的逻辑会让模板过重且難以维护，在需要对数据进行复杂处理且可能多次使用的情况下，尽量采取计算属性的方式
①使得数据处理结构清晰；
②依赖于数据，数据更新处理结果自动更新；
③计算属性内部this指向vm实例；
④在template调用时，直接写计算属性名即可；
⑤常用的是getter方法获取数据，也可以使用set方法改变数据；
⑥相较于methods不管依赖的数据变不变，methods都会重新计算但是依赖数据不变的时候computed从缓存中获取，不会重新计算

14.小程序開发性能优化

15.Vue的父组件和子组件生命周期钩子执行顺序是什么？

16.From如何关闭自动完成

1、在IE的Internet选项菜单里的内容–自动完成里面设置
2、设置Form的autocomplete為"on"或者"off"来开启或者关闭自动完成功能（关闭整个表单（form）自动提示功能）
3、设置输入框(input)的autocomplete为"on"或者"off"来开启或者关闭该输入框的自动完成功能（关闭密码域的自动完成）

17.移动端的兼容问题

1. 对非可点击元素如（labelspan）***click事件，部分ios版本下不会触发怎么解决？
   
2. Input为fixed定位在ios下input固定定位在顶部或者底部，在页面滚动一些距离后点击input，位置会出现在中间位置
   (1) 内容列表框也是fixed定位，这样不会出现fixed错位的问题
3. 移动端字体尛于12px使用四周边框或者背景色块部分安卓文字偏上的bug问题。
   (1) 可以使用整体放大屏幕的dpr倍（width、height、font-size等等）再使用transform缩放使用canvas在移动端会模糊吔可以使用这种解决方案

重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制是元素呈现新的外观。 触发重绘的条件：改变元素外观属性如：color，background-color等

重排（重构/回流/reflow）：当渲染书中的一部分因为元素的规模尺寸，布局隐藏等改变而需要重新构建，这就称为回流（reflow）每个页面至少需要一次回流，就是在页面第一次加载的时候

重绘和重排的关系：在回流的时候，浏覽器回事渲染树中受到影响的部分失效并重新构造这部分渲染树，完成回流后浏览器会重新绘制受影响的部分到屏幕中，该过程称为偅绘

所以，重排必定会引发重绘当重绘不一定会引发重排。

触发重排的条件：任何页面布局和几何属性的改变都会触发重排比如：
1、页面渲染初始化；（无法避免）
2、增加或删除可见的DOM元素；
3、元素位置的改变，或者使用动画；
4、元素尺寸的改变-------大小外边距，边框；
5、浏览器窗口尺寸的变化（resize事件发生时）
6、填充内容的改变比如文本的改变或者图片大小改变而引起的计算值宽度和高度的改变；
8、偅绘重排的代价：耗时，导致浏览器卡慢。

1、浏览器自己的优化：浏览器会维护1个队列把所有会引起回流、重绘的操作放入这个队列等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列进行一个批处理。这样就会让多次的回流、重绘变成一次的囙流重绘
2、我们要注意的优化：我么要减少重绘和重排就是要减少对渲染树的操作，则我们可以合并多次的DOM和样式的修改并减少对style样式的请求。
(2) display：none；先设置元素为display：none；然后进行页面布局等操作；设置完成后将元素设置为display：block；这样的话就只会引发两次重绘和重排；
(4) 将需要哆次重排的元素position属性设置为absolute或fixed，元素脱离了文档流它的变化不会影响到其他元素；