锦囊妙计（一）
- link和@import区别
- link是HTML标签，@import是css提供的。
- link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
- link没有兼容性问题，@import不兼容ie5以下。
- link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。
- CSS3新增属性
- HTML全局属性
- HTML5的文件离线存储怎么使用，工作原理是什么？
- 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
工作原理：基于一个新建的 .appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储下来。之后在网络处于离线状态时，浏览器会通过被离线存储的数据进行页面展示
使用：
- index.html中添加
- manifest文件的mime-type必须是 text/cache-manifest类型
- manifest清单格式：
CACHE MANIFEST#上面一句必须#v1.0.0#需要缓存的文件CACHE:a.jsb.css#不需要缓存的文件NETWORK:*#无法访问页面FALLBACK:404.html
- 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
- 在线的情况下，浏览器发现html头部有manifast属性，就会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源。
- iframe框架优缺点
优点：
- 用来实现长连接，在websocket不可用的时候作为一种替代；
- 跨域通信，浏览器多页面通信；
- 历史记录管理，解决ajax化网站响应浏览器前进后台方案，在html5的history api不可用时作为一种替代；
- 纯前端的utf8和gbk编码互转
- 实现无刷新文件上传，在FormData不可用时作为替代方案；
- 创建一个全新的独立的宿主环境。经 @EtherDream 大神提醒，iframe还可以用于创建新的宿主环境，用于隔离或者访问原始接口及对象，比如有些前端安全的防范会覆盖一些原生的方法防止恶意调用，那我们就能通过创建一个iframe，然后从iframe中取回原始对象和方法来破解这种防范。
- IE6下用于遮罩select
缺点： - window.onload 事件会在所有 iframe 加载完成后才触发，因此会造成页面阻塞
- 对浏览器搜索引擎不友好
- 每一个 iframe 都对应着一个页面，也就意味着多余的 css, js 文件的载入，会增加请求的开销
- BFC规范的理解（会计格式化上下文）
BFC是css中的一个渲染机制，BFC相当于一个盒子，内部的元素与外界元素互不干扰
形成条件：
- float不等于none
- position不等于static/relative
- display的值是inline-block、table-cell、flex、table-caption、inline-flex
- overflow不等于visible
特性：- 内部盒子垂直堆叠
- 同一个BFC的两个相邻的盒子的margin会发生重叠，与方向无关
- 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
- 清楚浮动的方法（解决盒子塌陷问题）
触发BFC或者clear:both
（1）原因：父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto，就会出现这种情况，如果父元素不包含任何的可见背景，这个问题会很难被注意到。
因为子元素设置了float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，因为内部没有其它盒子了，所以外部盒子只包裹文本节点内容，却把两个内部盒子扔在外面了；
（2）解决：
- 给父元素也设置浮动，把外部元素也从标准文档流中抽离；
- 在外部盒子内最下方添上带clear属性的空盒子(可以是div也可以是其它块级元素，把 放在盒内底部，用最下面的空盒子清除浮动，把盒子重新撑起来--------缺点：引入了冗余元素)
- overflow:hidden 清楚浮动
- 用after伪元素清除浮动
.clearfix {
*zoom: 1;}
.clearfix:before,.clearfix:after {
display: table;line-height: 0;content: "";}
.clearfix:after {
clear: both;}
- 优雅降级和渐进增强的理解
优雅降级：完善的具备完整体验的版本，再向下兼容
渐进增强：基本正常使用的版本，再慢慢丰富体验和内容
- 浏览器内多个标签页之间的通信方式：
网页消息通信
websocket（可跨域）- HTML5提供的一种在单个TCP连接上进行全双工通讯的协议
postMessage（可跨域）- window.postMessage()方法安全地启用Window对象之间的跨源通信。
localStorage
Cookie
BroadcastChannel IE不支持，类似广播
Server-Sent Events HTML5服务器发送时间，允许网页自动获取来自服务器的更新
SharedWorker
- px、em、rem
- px : 绝对固定的值
- em：相对父元素字体大小的倍数
- rem：相对根元素字体大小的倍数
- css常见布局方式
- 流式布局：最基本布局
- 绝对定位
- float布局：圣杯、双飞燕布局
- 栅格布局：row、col
- flex布局
- 网格布局
- JS内置对象
Date、String、MAth、Array、Number、Function、Object、Error、Boolean、Regex - 常见的浏览器内核
内核：渲染引擎（页面渲染）和JS引擎（执行解析JavaScript）
分类：
- Trident：IE内核
- Gecko：FireFox
- Presto：Opera
- Webkit：Chrome、Safari
- CSS盒子模型
基本概念：
- 标准盒模型：box-sizing:content-box
- IE 盒模型：box-sizing:border-box （content包含了margin和padding）
软技能
网页应用从服务器主动推送到客户端有那些方式？
SSE，EventSource接口，
- http状态码
2xx 成功
3xx 重定向
4xx 未找到资源
5xx 服务器异常
200 成功
301 重定向
304 （未修改）请求网页缓存
400 （错误请求） 服务器不理解请求语法
403 （禁止）服务器拒绝请求
404（未找到）
500 （服务器内部错误）
501 （尚未实施）服务器不具备完成请求的功能
502 错误网关
503 服务器不可用
504 网关超时
505 HTTP版本不受支持
- ::before和 :after中单引号和双引号区别是什么？这两个伪元素有什么作用？
:: 和 : 是 CSS3 中为了区别伪类和伪元素所用的不同的写法。:: 表示伪元素，目前两种写法都被兼容。
-
::before,::after 可以在一个 DOM 元素的前面和后面增加一个伪元素。可以用来清除浮动、为元素增加特殊效果（如前面有特殊符号等）。
-
::before 和 ::after 默认添加的是 inlne 元素，通过 content 属性来设置展示的内容，并且必须要设置 content 属性。content 属性可以利用 attr 与元素的相关内容做联动。
- 为什么HTML5只需要写就可以？
因为 HTML5 与 HTML4 基于的基准不同。HTML4 基于 SGML 因此需要除了 DOCTYPE 外还需要引入 DTD 来告诉浏览器用什么标准进行渲染。DTD 还分为标准模式、严格模式。如果什么都不写，就完全让浏览器自我发挥，会变成怪异模式。
HTML5 不基于 SGML，因此后面就不要跟 DTD，但是需要 DOCTYPE 来规范浏览器的渲染行为。
注：SGML 是通用标记语言的集合。其中有 HTML、XML，因此需要用 DTD 来指定使用那种规范。
- 什么是闭包？优缺点是什么？
有独立作用域，且作用域的变量不会在程序中释放。其实就是为了能访问函数A内部的变量值，需要在函数A中定义一个其他的函数B，并且将B返回给外部变量，那么外部变量就可以通过B来访问到函数A中的变量了
function(){
var a = 0;
return function(){
return a++
}
}
优点：使用闭包可以隐藏变量以及防止变量被篡改和作用域的污染，从而实现封装
缺点：由于保留了作用域链，会增加内存的开销（因此需要注意内存使用，不释放会内存泄露）
- 返回顶部的方法有哪些？
- window.scrollTo(0,0); //ie不支持，但好用
- document.documentElement.scrollTop = 0;
- location.href += ‘#’;
- margin边界叠加是什么？解决方案是？
margin的边界叠加只会发生在普通文档流的在竖直方向上，可以出发BFC来解决，或者padding代替margin或增加border值
- 相邻元素垂直外边距合并，合并之后取两者中最大值
- 嵌套块元素垂直外边距合并，合并之后形成一个外边距，合并到父元素的外边距并取其中的最大值（margin塌陷）
解决方案：为父元素定义1px的上边框或者上边距；为父元素添加overflow:hidden
- table的作用和优缺点
table 布局的好处在于样式好控制，特别是居中、对齐。
缺点在于会多处非常多的 DOM 节点（想想一个 td 里面再来一个 table），会导致页面加载变慢、不利于 SEO
- css sprites的原理和优缺点
原理：多个小图标合并成一张图，使用background-position+固定的宽高来布局
- 优点：减少请求次数，预先加载图标
- 缺点：难管理，容易错位
- typeof(‘abc’)和typeof 'abc’都是string, 那么typeof是操作符还是函数？
typeof 是操作符，不是函数。可以添加括号，但是括号的作用是进行分组而非函数的调用。
- “use strict”的理解和优缺点
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
严格模式
常见：
（1）禁止this关键字指向全局对象
（2）禁止在函数内部遍历调用栈
（3）全局变量必须显式声明
（4）arguments不再追踪参数的变化
- FOUC是什么？如何避免？
FOUC 即 Flash of Unstyled Content，是指页面一开始以样式 A（或无样式）的渲染，突然变成样式B。
原因是样式表的晚于 HTML 加载导致页面重新进行绘制。
- 通过 @import 方式导入样式表
- style 标签在 body 中
解决方法：把 link 标签将样式放在 head 中
- 怎么在页面上实现一个圆形的可点击区域
- map+area , demo
- 圆角属性（楼上的2.3.4）
- 判断圆心点和单击点的距离是不是在半径中。（楼上1方案）
- svg圆
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onclick="alert(3)"/>
</svg>
- html中只换元素和非置换元素
置换元素：不受css视觉格式化模型控制，css渲染并不考虑对此内容的渲染，且元素一般拥有固定的尺寸的元素。即浏览器根据元素的标签和属性，来决定元素的具体显示内容。
- 要让chrome致辞小于12px的字体则呢做？
- -webkit-text-size-adjust:none （高版本中已废除）
- 使用缩放：transform:scale(0.5,0,0.5)
- 做图片
- 重绘和重排，怎么优化？：
重排必定会引发重绘，但重绘不一定会引发重排
- 重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观
- 重排（回流）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建
关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘
优化：
（1）直接改变元素的className
（2）display：none；先设置元素为display：none；然后进行页面布局等操作；设置完成后将元素设置为display：block；这样的话就只引发两次重绘和重排；
（3）不要经常访问浏览器的flush队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流；
（4）使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
（5）将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素；
（6）如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document；
- 对new操作符的理解，手写一个new方法
new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一
new步骤：模拟new操作前，要先知道new操作是发生了什么，就拿new Object()举例:
- 创建一个新对象
- 把新对象的原型指向构造函数的prototype
- 把构造函数里的this指向新对象
- 返回这个新对象
构造函数：
function constructorFunction(name, age){
this.name = name;
this.age = age;
}
constructorFunction.prototype.say = function(){
return 'Hello '+ this.name
}
模拟new
function _new(Fn, ...arg) {
const obj = Object.create(Fn.prototype);
const obj1 = Fn.apply(obj, arg);
return obj1 instanceof Object ? obj1 : obj;
}
//或者
function newF(obj) {
const o = {
},
args = [].slice.call(arguments);
o.__ptoto__ = obj.prototype;
const res = obj.apply(o, args.slice(1));
return typeof res === 'object' ? res : o
}
- form表单的enctype属性
application/x-www-form-urlencoded
multipart/form-data
text/plain
application/json
- 判断浏览器的方法
let ua = navigator.userAgent;
// 移动端
isMobile: ("ontouchstart" in window || navigator.msMaxTouchPoints) ? true : false,
// 微信
isWechat: /micromessenger/gi.test(ua),
// qq
isQQ: /qq/gi.test(ua),
// VV音乐
isvvmusic: /vvmusic/gi.test(ua),
// 安卓
isAndroid: /android/gi.test(ua),
// iOS
isIOS: /iphone|ipad|ipod|itouch/gi.test(ua), // IOS
-
GBK和UTF-8的理解？页面产生乱码可能的原因
让你彻底搞定各种编码来源ASCII、ANSI、GBK、unicode、UTF-8等https://blog.csdn.net/wskzgz/article/details/88710263
web程序网页出现乱码的原因分析：https://blog.csdn.net/senlin1202/article/details/50800187 -
bind、call、apply的区别？并手写实现一个bind的方法
call和apply都是为了解决 this 指向的问题，作用都是一样的，只是传参方式不同
- bind
bind(context,arguments) 返回一个函数，不执行- call
call(context,arg1,arg2…) 指定作用域 同时执行函数- apply
apply(context,args) 指定作用域 同时执行函数，后面的参数是数组
实现bind
Function.prototype.myApply = function (context = window) {
context.fn = this;
var result
// 判断 arguments[1] 是不是 undefined
if (arguments[1]) {
result = context.fn(...arguments[1])
} else {
result = context.fn()
}
delete context.fn
return result;
}
- arguments是数组吗？
js中每个函数都会有arguments这个实例，它引用着函数的实参，可以用数组下标的方式"[]"引用arguments的元素。arguments.length为函数实参个数，arguments.callee引用函数自身。
-
特性：
（1）arguments对象和Function是分不开的，因为arguments这个对象不能显式创建。
（2）arguments对象只有函数开始时才可用：用来获取函数参数 [].slice.call(arguments) -
使用方法：
虽然arguments对象并不是一个数组，但是访问单个参数的方式与访问数组元素的方式相同
arguments[0],arguments[1]…
- arguments 是一个对象，不是数组，但是它有数组类似的length属性 可以通过 Arrary.from(arguments) 转化为数组。也可以通过Arrary.prototype.foEach.call(argunment),
- Arrary.from 能够转化类数组对象成为数组
- 说说你对影子(Shadow)DOM的了解
shadow Dom是html给出的一个用来封装的虚拟DOM与普通的DOM不相同，他更像伪类元素，去修饰DOM，或者说，他是一个DOM的HTML组件，常见标签为video等媒体标签（这些已经封装好的标签，有对应样式）。详情可以看这个网站 https://www.jianshu.com/p/e47b103f3b60
-
从一行代码里学点js
https://my.oschina.net/l3ve/blog/330358 -
在浏览器中输入url到页面显示出来的过程发生了什么？
https://blog.yyge.top/blog
https://dailc.github.io/2018/03/12/whenyouenteraurl.html -
opacity和rgba()的区别
opacity数属性，rgba是函数，计算之后是个属性值
- rgba一般作为背景色 background-color 或者颜色 color 的属性值，透明度由其中的 alpha 值生效，取值0-1；
- opacity作用于元素和元素的内容，内容会继承元素的透明度，取值0-1；
- 对meta标签的理解：
SEO 标签TDK，作为网站的信息介绍、作者、关键字、描述；做的较多的也是IE兼容
- 图片格式以及应用场景
- gif: 无损，适合动画
- jpeg：有损压缩，不支持透明，适合照片
- png：无损，适合其他任何种类——图表，buttons，背景，图表等等
- DOM和BOM有什么区别
都是浏览器提供给JavaScript的API接口
BOM —— 浏览器对象模型，描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本
DOM —— 文档对象模型，描述了处理网页内容的方法和接口，是 HTML 的API，DOM 把整个页面规划成由节点层级构成的文档。
- 造成内存泄露的操作有哪些？
- this指向问题（通常指的是当前运行环境的上下文）
this分为4类：
- 全局this——指向window
- 函数this——指向调用者
- 构造函数this——指向new之后的新对象
- call和apply bind的this指向第一个参数
- 前端优化的方案有哪些？（就像钱不够，省着用，一块搬开两块用）
向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询
- 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
- 减少DOM操作次数，优化javascript性能；
- 少用全局变量、减少DOM操作、缓存DOM节点查找的结果。减少IO读取操作。
- 延迟加载 | 延迟渲染
- 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳
- 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢
- 10.toFixed(10) 会报错
10后面的 . 有歧义，可能为小数点 修改（10）.toFixed(10) - 对于前端安全你了解多少？说说你对XXS和CSRF的理解
- cookie和session的理解
一般cookie在客户端产生存储，当然服务端也可以生成cookie。session在服务端产生，二者都可以用来鉴权：服务端产生session，以及对应的sessionid，传给客户端，可以存在cookie里面或者localstorage里面，每次请求携带sessionid，服务端去判定是否有权限访问。现在鉴权的方式一般cookie、session鉴权，token鉴权或者jwt鉴权
- 说说你对模块化的理解
模块化开发：封装细节，提供使用接口，每个模块都是实现某一特定的功能。模块化开发的基础就是函数，独立性是模块的重要特点。
- 水平居中和垂直居中的方法
- NodeJS的理解和用途
- 怎么能让图文不可复制
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
- 为什么有跨域问题？怎么解决跨域
跨域一句话的理解就是：服务端和请求端的地址不一样。
浏览器为了安全，产生了同源策略，协议、域名、端口有一个不同，就会产生跨域。
（1）JSONP：优点是可以兼容老浏览器，缺点是只能发送GET请求
（2）CORS：优点简单方便，支持post请求，缺点是需要后端的配合,不支持老版浏览器。。
（3）Server Proxy：优点是前端正常发送ajax请求，缺点是后端会二次请求。
关于跨域以及跨域的几种方式
- 说说你对IIFE的理解
js es5之前没有块级作用域啊，IIFE就干这个事，独立作用域，避免变量冲突问题，很多库就是这个写法
立即执行函数，函数被创建后即刻执行，所以也不需要函数名，然后释放。一般用于创建其他函数所依赖的环境，这里指闭包。
常见场景有 防抖， 节流以及关于 jsonp 的回调函数。 优点不用生成一个变量？ 缺点，在使用闭包时可能引起内存泄露，所以应当注意赋值时不要产生循环引用。
;(function(){
})()
- window对象和document对象有干什么区别？
- JQuery的源码看过吗？能不能简单概括一下它的实现原理？
- 幽灵空白节点应该是由font-size、line-height、vertical-align等相关的几个属性造成的，line boxes模型里面的span也算内联盒子，不过只是触发幽灵空白节点的必要条件之一而已！
- 说说你对http、https、http2的理解
http: 重复拨号的单对单电话
https: 安全点重复拨号的单对单电话
http2: 不需要重复拨号的单对多电话
-
深度克隆对象的方法有哪些?
递归调用拷贝。json.parse可以解决一般的对象深拷贝，但是函数类型的对象就不行了 -
xml和HTML的区别
- html不区分大小写，xml区分大小写
- html可以没有闭合标签，xml必须有闭合标签
- html可以拥有不带值的属性名，xml中所有的属性必须带值
- html是用于显示数据，xml主要用于描述，存放数据
- XML 的多个空格不会被合并成一个空格，而 HTML
- 你知道的等高布局有哪几种，列出来
- 集中创建对象的方式，区别是什么？
- const a = new Object() // 创建, 不推荐
- const b = {} // 赋值, 性能比a要好
- const c = createObj(val1,val2) //工厂模式，无法识别对象的类型
- const d = new Person(val1,val2…) //构造函数，可以创建特定类型的对象，但是多个实例重复创建方法
- const e = Object.create() // 继承创建, Object.create(null) 很多框架都有用来做性能优化
- document.write()会重绘整个页面，innerHTML只会替换DOM元素中的内容