WEB前端線上系統課(20k+標准)-大神coderwhy全程直播授課【完整】分享學習

鏈接: 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');
}, [])