其它常见面试题汇总
- flex布局方法有什么？
一共6个，Flex-direction\flex-wrap\align-item\justyfy-content\align-content\flex-flow
- 后台接口没那么快做好怎么办？
用mock要开启服务器
-
用了less和sass的什么
（1）嵌套
（2）继承
（3）混合
（4）arguments变量
（5）模式匹配 -
性能优化？vue项目，jquery项目，react项目，小程序
-
前端加密
-
jquery的方法实现disabled
$(#div).attr(“disabled”)
- 怎么做自适应，rem，jquery
- zepto和jquery区别，jquery更新到哪了？
（1）DOM操作。添加id时jquery不会生效，zepto会
（2）事件触发区别。Jquery的load不会执行，zepto会
（3）事件委托的区别。
（4）宽高的差别：zepto由盒模型来决定，用.width()返回的是赋值的width，用.css(‘width’)返回的是加border等的结果。Jquery会忽略盒模型，返回内容区域的宽高。
（5）zepto无法隐藏元素宽高，jquery可以
（6）zepto的each方法只能遍历数组，不能遍历JSON对象
-
前端安全
（1）XSS
（2）密码安全
（3）使用验证码增加延时或者限制尝试次数 -
cookie、sessionstorage和localstorage的区别
（1）cookie:
a. cookie比较小，最多只能存4kb数据
b. 会被携带在同源的http请求中，cookie保存数据过多会造成性能问题
c. ccokie默认失效的时间是关闭浏览器之后，也可以设置自己的失效时间。
（2）session:
a. 可以存放5mb的数据
b. 只在浏览器中保存，只在请求时使用数据，不参与和服务器的通信
c. 在浏览器关闭之后失效，不同窗口的sessionstorage存储互相独立，互不干扰
（3）lacalstorage:
a. 可以存放5mb数据
b. 仅在浏览器中保存，只在请求时使用数据，不参与和服务器通信
e. sessionstorage和localstorage的增删改查的方法都一样。
-
为什么框架：
（1）避免重复引用外部js。使用框架开发比如vue，一般都会搭配构建工具比如webpack，整个项目运行时会有一个入口文件，当多个组件都会用到某个文件或插件，仅仅在这个入口文件引入一次即可。就算后期文件有改动，也是修改入口文件的应用即可。
（2）组件化。可以封装重用的代码块，比如轮播图，页面的头部顶部，节省了代码量，提高代码的重用性
（3）减少开发周期。使用框架开发，框架中封装了很多频繁使用的功能，前端的重点只要放在业务逻辑的处理即可，不需要花太多时间去操作DOM
（4）提高性能。大量操作DOM很浪费页面性能，框架将大量的DOM进行了处理和优化，例如VUE的虚拟DOM，通过数据驱动就能渲染DOM，大大提高了性能。 -
typescript常用语法
（1）基本数据类型：
Boolean, string number，array, enum（枚举），any(不确定类型), void
（2）基本语法
Class 继承，修饰符（private）
（3）模块化
（4）合并模块和类 -
盒子水平垂直居中
a. 子绝父相；top, right, bottom, left全部0；margin: auto;
b. flex: justify-content; align-item;
c. flex：父display：flex; 子auto;
d. 父display: table-cell和vertical-align、text-align，内部div设置display: inline-block
- 响应式布局原理
响应式就是为了可以使用一套代码实现多端显示，比如电脑端，移动端，并且可以适应不同尺寸的屏幕大小。
步骤：
a. 设置 Meta 标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。
b. 通过媒介查询来设置样式 Media Queries
Media Queries 是响应式设计的核心。 它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
设置多种试图宽度:
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
注意宽度需要使用百分比
- px rpx em rem 的区别
PX
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
特点：
IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
特点：
em的值并不是固定的；
em会继承父级元素的字体大小。
REM
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}
rpx
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。
无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。
微信小程序同时也支持rem尺寸单位， rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx
- 常用的css高度属性有什么？
clientheight、offsetheight、scrollheight
clientheight，内容的可视区域，不包含border。clientheight=padding+height-横向滚动轴高度。
offsetheight，它包含padding、border、横向滚动轴高度。
scrollheight，可滚动高度，就是将滚动框拉直，不再滚动的高度，这个很好理解。scrollHeight通常用在iframe自适应内容高度的情况。
- 说一下盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
css的两种盒模型:
a. W3C的标准盒模型
在标准的盒子模型中，width指content部分的宽度
b. IE的盒模型
在IE盒子模型中，width表示content+padding+border这三个部分的宽度
box-sizing的使用:
如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默认属性是content-box
- 说一下BFC
是什么？
我们在页面布局的时候，经常出现以下情况：
这个元素高度怎么没了？
这两栏布局怎么没法自适应？
这两个元素的间距怎么有点奇怪的样子？
…
归根究底是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念
BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：
内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素
触发条件
触发BFC的条件包含不限于：
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed
BFC实际就是页面一个独立的容器，里面的子元素不影响外面的元素
- 移动端怎么解决0.5px的问题
线条
/* 线条 */
.line {
height: 0;
border-botton: 1px solid gray;
transform: scaleY(0.5);
}
盒子：
/* 盒子 */
.box {
position: relative;
width: 300px;
height: 200px;
border-radius: 4px;
}
.box::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border: 1px solid #aaa;
border-radius: 8px;
transform-origin: 0 0;
transform: scale(.5);
pointer-events: none;
}
- 移动端开发时，让字体小于12px的方法
a. css3的transform,我们给其 添加一个属性！ postion: absolute; !!! 再通过left top 等来调节
transform:scale(0.875);
font-size: 12px;
b. svg标签,SVG由于是矢量的，因此，再怎么拉伸我们的文字效果都是清晰细腻的
div class="content">
<svg width="150" height="14" viewBox="0 0 150 14">
<text font-family="'PingFang SC','Microsoft Yahei'" font-size="10" x="4" y="1em" fill="#cd0000">测试测试测试测试测试十四个字</text>
</svg>
</div
- 说一下伪元素
注意区别伪元素和伪类
其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。
伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
伪元素选择符
伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。
伪类选择符
22. 重绘和回流的区别
回流：元素的大小或者位置发生改变（当页面布局发生改变的时候），触发了重新布局导致渲染树重新计算布局和渲染
1.页面第一次渲染 在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次回流。
2.浏览器窗口尺寸改变
3.元素位置和尺寸发生改变的时候
4.新增和删除可见元素
5.内容发生改变（文字数量或图片大小等等）
6.元素字体大小变化。
7.激活CSS伪类（例如：:hover）。
8.设置style属性
9.查询某些属性或调用某些方法。比如说：
offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight
除此之外，当我们调用getComputedStyle方法，或者IE里的currentStyle时，也会触发回流，原理是一样的，都为求一个“即时性”和“准确性”。
10页面一开始渲染的时候（无法避免）；
因为回流是根据视口大小来计算元素的位置和大小的，所以浏览器窗口尺寸变化也会引起回流
重绘：只改变自身样式，不会影响到其他元素
元素样式的改变(但宽高、大小、位置不变)
eg： visibility、color、background-color等
注意：回流一定会触发重绘，而重绘不一定会回流
优化：
样式集中改变
缓存布局信息
// bad 强制刷新 触发两次回流
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';
// good 缓存布局信息 相当于读写分离
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';
将position属性设置为absolute或fixed，position属性为absolute或fixed的元素，回流开销比较小，不用考虑它对其他元素的影响
让要操作的元素进行”离线处理”;处理完后一起更新使用DocumentFragment进行缓存操作,引发一次回流和重绘；JavaScript DocumentFragment(文档碎片)
- 怎么优化echart
a. 在mounted()方法和destroy()方法之间加一个beforeDestroy()方法释放该页面的chart资源，我也试过使用dispose()方法，但是dispose销毁这个图例，图例是不存在了，但图例的resize()方法会启动，则会报没有resize这个方法，而clear()方法则是清空图例数据，不影响图例的resize，而且能够释放内存，切换的时候就很顺畅了
beforeDestroy () {
this.
chart.
clear()
}
b. 第一次初始化一个对象，后面都复用这个对象；然后在每次轮询后，只重新set数据有变化的属性。
methods: {
RingDiagram(e) {
// 第一次设置公共不会变化的属性
if (this.times === 1) {
this.chart = this.$echarts.init(document.getElementById('RingDiagramTime'));
this.times++;
this.chart.setOption({
// 添加属性
});
}else{
// 只更改数据有变化的属性
this.chart.setOption({
series: [{
data: e,
}]
});
}
}
}
- 页面图片太多加载慢怎么优化
a. 图片懒加载
在页面添加滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者优先加载
、
惰性加载：JQuery插件：LazyLoad
vue项目可以使用vue-lazyload
npm install vue-lazyload -S
//1)引入插件
import VueLazyload from 'vue-lazyload'
//2)使用懒加载的插件
Vue.use(VueLazyload,{
loading: require('图片路径'), //在js中通过require来引入一张图片，作为loading过渡图片
})
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
react项目使用react-lazyload
yarn add react-lazyload
import LazyLoad from 'react-lazyload';
...
<Grid
data={categoryList}
columnNum={2}
square={false}
hasLine={false}
className="not-square-grid"
itemStyle={{height: '100px'}}
renderItem={(dataItem: any) => (
<LazyLoad
scrollContainer='.category_content'
scroll={true}
// offset={100}
height={100}
placeholder={<img width="100%" height="100%" src={DreamLogo} alt="logo"/>}
>
<img
src={dataItem.cover}
onClick={() => history.push(`/categoryPage/category/list?id=${dataItem.theme_id}`)}
style={{ width: '100%' }}
alt=""
/>
</LazyLoad>
)}
/>
scrollContainer -- 滚动区域
scroll -- 是否监听滚
offset -- 距离多少进行预加载
height -- 单个图片视图高度
b. 图片预加载
如果为幻灯片，相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
实现图片预加载的三大方法
方法一：用CSS和JavaScript实现预加载
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
将这三个ID选择器应用到(X)html元素中，我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变，当它们在web页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载（缓存）的图片。简单、高效，不需要任何JavaScript。
该方法虽然高效，但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载，增加了页面的整体加载时间。为了解决这个问题，我们增加了一些JavaScript代码，来推迟预加载的时间，直到页面加载完毕。代码如下：
// better image preloading @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
function preloader() {
if (document.getElementById) {
document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
方法二：仅使用JavaScript实现预加载
<div class="hidden">
<script type="text/javascript">
<!--//-->
</script>
</div>
方法三：使用Ajax实现预加载
上面所给出的方法似乎不够酷，那现在来看一个使用Ajax实现图片预加载的方法。该方法利用DOM，不仅仅预加载图片，还会预加载CSS、JavaScript等相关的东西。使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。
window.onload = function() {
setTimeout(function() {
// XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.js');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.css');
xhr.send('');
// preload image
new Image().src = "http://domain.tld/preload.png";
}, 1000);
};