js

TypeScript

为什么使用Typescript

类型检测，类型是最好的注释
代码提示

为什么不用Typescript

框架支持不足，与框架有冲突。如vue生态一般，vue周边工具不支持Typescript
项目小，没必要

什么时候用Typescript

大项目，长期维护
react

Promise

reduce 实现串行执行promise

const promisesArray = [promise1, promise2, promise3];
promisesArray.reduce((prePromise, nextPromise) => {
    return prePromise.then(() => {
        return nextPromise();
}

浏览器

css阻塞

可以看到css加载、解析和DOM解析是并行的，css解析不会阻塞DOM解析。但Render Tree必须结合DOM和cssom tree,所以css解析会阻塞页面渲染，会阻塞dom的渲染。

js的执行可能查询样式，所以css解析会阻塞js执行。

DomContentLoaded 与 onLoad

参考DOMContentLoaded与load的区别 load是所以资源加载完毕：css，js，图片，视频...... DomContentLoaded指DOM解析完毕。也就是DOM树生成完毕，css解析不会阻塞DOM解析，HTML中只有css很快.但是DOM解析过程是从上到下一行一行的读HTML文档，DOM解析完需要HTML文档解析完，HTML如果存在js,js的加载和解析会阻塞HTML的解析，然后js的执行又会依赖于css解析完毕。

结论是文档中没有js,只要文档解析完就触发DomContentLoaded。文档中有js，需要先加载和解析js,如果js之前还有css,还要加上css的加载解析时间才能触发DomContentLoaded。任何时候，DomContentLoaded不需要等待其他图片等其他资源的加载。

为什么js放尾部，css放头部

css会影响dom树渲染，所以放头部。js放哪里，都会中断HTML文档的解析，都会阻塞dom树的解析。js放尾部的原因是现代浏览器为了更快的显示内容，会firstPaint,先渲染一部分不完整的dom tree和cssom tree。js放前面会阻塞firstPaint.

firstPaint触发时，HTML文档的解析并未完成。

事件先后顺序是：firstPaint,DomContentLoaded,onLoad.

css

实现水平垂直居中

position absolute + 负margin.需要知道子元素宽高，

margin-top: -50px; 
margin-left: -100px; 
width: 100px;
height: 200px;

position absolute + margin auto
position absolute + transform: translate(-50%, -50%);
calc top:calc(50% - 50px);
flex

display: flex;
justify-content: center;
align-items: center;

实现垂直居中

行内元素。line-height等于content height
实现水平垂直居中的五种
table-cell

div{display:table-cell; vertical-align:middle;} 
div img{vertical-align:middle;}

inline-block

.child {
    display: inline-block;
    vertical-align: middle;
}

层叠

遇到两个元素先看是否在同一个层叠上下文，是按层叠顺序比较，不是比较层叠上下文的层叠顺序.

产生层叠上下文：position不为static,z-index是数值。父元素display flex,子元素z-index不是auto。

层叠顺序：background、负z-index、块级、浮动、内联、z-index.

css性能优化

压缩，gzip
内联关键css，减少首屏时间
去除无用css
不用*，属性选择器，嵌套层级不要过多。注意：css选择器的匹配时从右向左的，这是为了更快排除，如果最右边是P，就会很慢
减少昂贵属性，如filter,box-shadow
减少reflow(不改font-size,font-family),repaint
动画：硬件加速translateZ(0), requestAnimationFrame根据浏览器性能自动使用合理间隔

前端面试查漏补缺

js