前端日常积累（1）

该文档是日常上网查找记录看视频以及自己总结，如有错误可以在评论区指出，欢迎改正谢谢

1script标签的async defer以及默认属性

script标签一般用来加载js脚本，默认的话，当浏览器解析到Script标签，则会停止先下载js脚本然后立即执行。
加上async是异步加载，不会阻塞DOM树加载。并且js文件下载完后立马执行。
defer属性也是异步加载，并且会等DOM树加载完后再执行。

2 文档模式 混杂模式，标准模式

HTML文档第一句一般是

用来告诉浏览器以什么类型渲染该html。混杂模式是向后兼容的，就是保证能正常渲染。
标准模式是以浏览器的最高标准进行渲染，可能出现不兼容情况。

3React生周

加载阶段：constuctor->getDerivedStateFromProps->render->componentDidMount
更新阶段：getDerivedStateFromProps->shuoldComponentUpdate->render->getSnapshotBeforeUpdate->componentDidUpdate
卸载阶段：componentWillUnMount

4为什么React选择jsx

个人理解，react认为UI跟逻辑是连在一起的，引入像Vue的模板会分散技术栈，再者引入模板会引入其他指令，如v-for等，违背了React本身只负责构建视图的原则。而且JSX具有JS的全部功能，并且其是React.createElement的语法糖。

5React useMemo useCallback的区别于用处。

useCallback主要用于优化处理，他接受两个参数，第一个是函数，第二个是以来的值，返回的是一个函数。当依赖的值不变的情况下，返回的函数不变，这就保证了每次我们如果传入子组件的函数，在依赖的值不变的情况下，传入的函数都是同一个函数，可以避免不必要的渲染。当然useCallback也是会浪费一点性能，因为他要保存副本，当不变的情况下直接返回副本。但是其带来的作用远远大于这点浪费。所以以后如果要传函数给子组件，一定要用useCallback包裹起来。
useMemo的作用与useCallbakc类似，但其是返回一个值，有点类似于Vue的computed，当依赖的值不变的情况下，返回的值也是一样，而且他是会运行第一个参数，也就是我们传入的函数。而useCallback是返回。

6 memo PureCompoent的作用。

相信学过react的都知道，一开始学类组件都是继承于Component，而后面学到优化时都是继承于PureComponent，并且当我们用函数组件是，最后是用memo进行包裹。为什么呢？
有一个生命周期，叫shouldComponentUpdate，这个函数有什么用呢，它可以接受更新前后的两个props，返回一个布尔值来决定组件充不重新渲染。我们可以自己在里面做判断，当props不变的情况下，我们希望组件不要重新渲染，此时就可以返回一个false来阻止组件的渲染。一般的逻辑是在每个组建的shuoldComponentUpdate都返回false,当条件成立时才返回ture。但是每个组件都写这个未免太过麻烦。所以raect提供了PureComponent和Mome，当我们的组件用这两个时，里面是默认实现了shouldComoponentUpdate函数，做一个浅层判断，所以memo 和 PureComponent的作用主要适用于优化。

7 CSS性能优化

css利用的好，也是能优化很多性能。

1 首屏关键CSS，将首次渲染所要展示的样式内敛到Html文件中，因为LINK引入的外部CSS文件是在HMTL文件下载完执行到才下载。而内联css是在HTML文件下载完后就可以解析渲染。又因为若HTML文件过大请求也会变慢。所以我们一般将关键的CSS直接内敛到Html,其他Css则通过标签引入。网上有工具可以帮我们提取这些关键CSS

2 CSS压缩文件，如webpack等，可以压缩我们的css文件，请求的时候更快

3 去除无用的css，如公共的Css代码抽离，没有生效的css去除，多多利用css继承属性。

4 优先选择CSS选择器，尽量不要嵌套太多css选择器，而且尽量不要使用通配符如*，标签选择器，因为css选择器是从右像左找的，会先找到所有标签，然后再继续往左找。

5 减少不必要的回流重绘。

6 减少使用@improt,会影响浏览器的并行加载，多个@import会引发下载顺序絮乱。

后面几点根据自己项目选择即可。

css 布局

普通布局，内容居中，两栏布局（float+margin右边自适应），三栏布局（左右float中间自适应），
圣杯布局（float+padding+positon），双飞翼布局（float+margin）

flex属性

盒子属性：
flext-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
flex-flow: flex-direction + flex-wrap

…未完待续