复习大纲
css相关
em和line-height em作为字体单位，相对与父元素字体大小 em作为行高，相对自身字体大小 line-height继承自父元素 line-height:2，表示为本身字体大小的倍数
<div class="p1">
<div class="s1">1</div>
<div class="s2">1</div>
</div>
<div class="p2">
<div class="s5">1</div>
<div class="s6">1</div>
</div>
.p1 {font-size: 16px; line-height: 32px;}
.s1 {font-size: 2em;}
.s2 {font-size: 2em; line-height: 2em;}
.p2 {font-size: 16px; line-height: 2;}
.s5 {font-size: 2em;}
.s6 {font-size: 2em; line-height: 2em;}
//答案
各个元素的字体大小，行高取值，重点看
p1：font-size: 16px; line-height: 32px
s1：font-size: 32px; line-height: 32px
s2：font-size: 32px; line-height: 64px
p2：font-size: 16px; line-height: 32px
s5：font-size: 32px; line-height: 64px
s6：font-size: 32px; line-height: 64px
复制代码js相关
闭包：
闭包
当函数可以记住并访问所在的词法作用域，
并且保持着对词法作用域的引用，即使函数是在当前作用域之外执行，
就会形成闭包。
闭包的形成
词法作用域是由函数声明时所在的位置决定的，
而闭包是词法作用域形成的自然结果。
当在函数内部声明了内部函数，并将内部函数作为值返回，就会产生闭包。
复制代码1. 强缓存
expires
cache-control：max-age
2. 协商缓存
response对应last-modified 无法处理文件一秒钟内被改变多次的情况
request对应if-modified-since
response对应etag
request对应if-none-match --
一般要保证分布式上生成etag的逻辑一致，才能用于分布式系统
计算etag需要性能损耗
复制代码1. 用nginx
2. 关闭浏览器跨域策略。因为浏览器发送了本质上是返回了。
正是因为options的预检导致的问题。所以关闭浏览器跨遇策略就是关闭了预检。
复制代码proxy && object.defineProperty
preload,dns-prefetch, perrendering,prefetch, preconnect
http2多路复用
HTTP2采用二进制格式传输，取代了HTTP1.x的文本格式，二进制格式解析更高效。
多路复用代替了HTTP1.x的序列和阻塞机制，所有的相同域名请求都通过同一个TCP连接并发完成。
在HTTP1.x中，并发多个请求需要多个TCP连接，浏览器为了控制资源会有6-8个TCP连接都限制。
HTTP2中
同域名下所有通信都在单个连接上完成，消除了因多个 TCP 连接而带来的延时和内存消耗。
单个连接上可以并行交错的请求和响应，之间互不干扰
复制代码如何找0-5的随机数，95-99呢
Math.floor(Math.random()*(max - min + 1)+min)
复制代码some、every、find、filter、map、forEach有什么区别
map():返回一个新的Array，每个元素为调用func的结果
filter():返回一个符合func条件的元素数组
some():返回一个boolean，判断是否有元素是否符合func条件
every():返回一个boolean，判断每个元素是否符合func条件
forEach():没有返回值，只是针对每个元素调用func
复制代码WebView和原生是如何通信
jsBridge
复制代码babel的原理: 解析 转换 生成
在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。
Proxy&&Reflect
迭代器
React框架
-
在React的setState函数实现中，会根据一个变量 isBatchingUpdate 来判断是直接同步更新this.state还是放到队列中异步更新 。React使用了事务的机制，React的每个生命周期和合成事件都处在一个大的事务当中。在事务的前置钩子中调用batchedUpdates方法修改isBatchingUpdates变量为true，在后置钩子中将变量置为false。原生绑定事件和setTimeout异步的函数没有进入到React的事务当中，或者当他们执行时，刚刚的事务已近结束了，后置钩子触发了，所以此时的setState会直接进入非批量更新模式，表现在我们看来成为了同步SetState。引用
-
Function Component,pureComponet
- 与 DOM 相关，建议使用父组件，类似于原生 HTML 编写
- 与 DOM 不相关，如校验、权限、请求发送、数据转换这类，通过数据变化间接控制 DOM，可以使用 HOC 抽象
- 交叉的部分，DOM 相关，但可以做到完全内聚，即这些 DOM 不会和外部有关联，均可
- React的生命周期
- componentWillReceiveProps的触发条件
- React VirtualDom
- React unMount&&reMount
- react内联函数与性能优化
- React Component && Element && Instance
- react和vue的区别
- react创建dom的方法
- react pureComponent使用
react-router, history模式
Webpack
- 使用过webpack里面哪些plugin和loader
HtmlWebpackPlugin
HotModuleReplacementPlugin
CommonsChunkPlugin
style-loader
css-loader
less-loader
ts-loader
复制代码- webpack里面的插件是怎么实现的
- dev-server
- 项目优化
- 抽取公共文件是怎么配置的
optimization: {
splitChunks: {
chunks: 'all'
}
}
动态导入import()
syntax dynamic Import Babel Plugin
webbpackChunkName
复制代码- webpack生命周期
- webpack打包的整个过程
- 使用import时，webpack对node_modules里的依赖会做什么
- import { Button } from 'antd' ，打包的时候只打包button，分模块加载，是怎么做到的
业界流行的组件库多是将每一个组件或者功能函数，都打包成单独的文件或目录
import clone from 'lodash/clone'
比较流行的组件库大哥如antd，element专门开发了babel插件，使得用户能以
import { Button, Message } form 'antd'
这样的方式去按需加载
复制代码当webpack打包时，会将一段hrm runtime代码打包到js中，
同时通过webpack-dev-server启动hrm服务器，服务器通过websocket与注入的runtime进行通信
当文件发生变化时，模块重新构建，同时通过ws与client进行通信，浏览器通过jsonp拉取更新模块，回调触发模块热更新逻辑
复制代码TypeScript
- 基本语法
- 相关配置
扫一扫
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
