coderwhy - WEB前端线上系统课全程直播课

链接: https://pan.baidu.com/s/1d6YONkCi4u7T1ZBm1yZLYg 提取码: iamh
作者-\/ 307570512

前端性能优化建议

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。

前端性能的一个重要指标是页面加载时间，不仅事关用户体验，也是搜索引擎排名考虑的一个因素。

来自Google的数据表明，一个有10条数据0.4秒能加载完的页面，变成30条数据0.9秒加载完之后，流量和广告收入下降90%。
Google Map 首页文件大小从100KB减小到70-80KB后，流量在第一周涨了10%，接下来的三周涨了25%。
亚马逊的数据表明：加载时间增加100毫秒，销量就下降1%。

尽量减少 HTTP 请求个数——须权衡
使用CDN（内容分发网络）
为文件头指定 Expires 或 Cache-Control ，使内容具有缓存性。
避免空的 src 和 href
使用 gzip 压缩内容
把 CSS 放到顶部
把 JS 放到底部
避免使用 CSS 表达式
将 CSS 和 JS 放到外部文件中
减少 DNS 查找次数
精简 CSS 和 JS
避免跳转
剔除重复的 JS 和 CSS
配置 ETags
使 AJAX 可缓存
尽早刷新输出缓冲
使用 GET 来完成 AJAX 请求
延迟加载
预加载
减少 DOM 元素个数
根据域名划分页面内容
尽量减少 iframe 的个数
避免 404
减少 Cookie 的大小
使用无 cookie 的域
减少 DOM 访问
开发智能事件处理程序
用代替 @import
避免使用滤镜
优化图像
优化 CSS Spirite
不要在 HTML 中缩放图像——须权衡
favicon.ico要小而且可缓存
保持单个内容小于25K
打包组件成复合文本

前端框架vue、react源码如何深入学习

第一步：可以从lodash这种工具库开始看，因为都是比较小块的函数，比较好上手理解，也容易调试看效果。还可以补足自己的基础，例如节流、防抖、深拷贝等。另外还推荐30 seconds of code，全是小而美的代码片段，有些lodash的函数可以用这个替代。
第二步：找到了看源码的感觉后，再去看某个类库的源码，比如说redux、moment这种，功能专一同时也兼顾深度。完全理解 redux（从零实现一个 redux）
带着问题看React-Redux源码（一万四千字长文预警）可以再去看现在mvvm框架实现的原理，也是从单一的功能开始，拆解mvvm框架的通用实现模式，如双向绑定、虚拟dom等，最后实现自己的mini mvvm。
第四步：这时候你具备了看react、vue这种框架的能力了，最好还是带着问题去看，比如看react fiber的原理、如何渲染的，setState怎么操作等等。
最后：可以试着参与到开源框架的开发中来，对preact、vue等框架进行一些issue的修复和功能的迭代。如果觉得过于困难，可以对react或者vue周边生态的库进行pr，经过前面的这么多铺垫，这时候也可以释放自己创造力了，可以试着做一些对标业界开源高质量的轮子。

6.点击Father组件的div，Child会打印Child吗

function Child() {console.log('Child');return <div>Child</div>;
}function Father(props) {const [num, setNum] = React.useState(0);return (<div onClick={() => {setNum(num + 1)}}>{num}{props.children}</div>);
}function App() {return (<Father><Child/></Father>);
}const rootEl = document.querySelector("#root");
ReactDOM.render(<App/>, rootEl);

7.打印顺序是什么

function Child() {useEffect(() => {console.log('Child');}, [])return <h1>child</h1>;
}function Father() {useEffect(() => {console.log('Father');}, [])return <Child/>;
}function App() {useEffect(() => {console.log('App');}, [])return <Father/>;
}

8.componentDidMount和useEffect的区别是什么

class App extends React.Component {componentDidMount() {console.log('mount');}
}useEffect(() => {console.log('useEffect');
}, [])