真正的lazyload技術

 真正的lazyload技術，不是下拉再去打api啦，是在img上加lazyload的attr等等

https://dotblogs.com.tw/shadow/2019/10/19/210514

面試考題: 畫面閃爍

1.

避免畫面閃爍，圖片先加上width, height，讓她不會從無到有，而是一開始就有框

2.

 https://juejin.cn/post/6844903474954502151

解秘 FOUC

前言

 对于问题多多的IE678，FOUC(flash of unstyled content)——浏览器样式闪烁是一个不可忽视的话题，但对于ever green的浏览器就不用理会了吗？下面尝试较全面地解密FOUC。

P.S. ever green browser means 會自動更新到最新版的瀏覽器，Chrome, Mozilla Firefox, Safari都是Evergreen Browser.

到底什么是FOUC？

 页面加载解析时，页面以样式A渲染；当页面加载解析完成后，页面突然以样式B渲染，导致出现页面样式闪烁。
 样式A，浏览器默认样式 或 浏览器默认样式 层叠 部分已加载的页面样式；
 样式B，浏览器默认样式 叠加 全部页面样式。

为什么会出现FOUC

 我们了解当输入网址按回车后浏览器会向服务器发送请求，然后服务器返回页面给浏览器，浏览器边下载页面边解析边渲染。
下面我们解剖一下边下载页面边解析边渲染的过程:

1. 边下载边解析就是边下载html边构建DOM Tree;
2. 浏览器以user agent stylesheet(浏览器内置样式)为原料构建CSSOM Tree;
3. DOM Tree+CSSOM Tree构建出Render Tree，然后页面内容渲染出来;
4. 当解析到inline stylesheet 或 internal stylesheet时，马上刷新CSSOM Tree，CSSOM Tree或DOM Tree发生变化时会引起Render Tree变化;
5. 当解析到external stylesheet时就先加载，然后如internal stylesheet那样解析和刷新CSSOM Tree和Render Tree了。
    上述步骤5中由于样式文件存在下载这个延时不确定的阶段，因此网络环境不好或样式资源体积大的情况下我们可以看到样式闪烁明显。
    这就是为什么我们将external stylesheet的引入放在head标签中的原因，在body渲染前先把相对完整的CSSOM Tree构建好。但大家都听说过script会阻塞html页面解析(block parsing)，而link不会，那假如网络环境不好或样式资源体积大时，body已经解析并加入到DOM Tree后，external stylesheet才加载完成，不是也会造成FOUC吗？
   
    style,link等样式资源的下载、解析确实不会阻塞页面的解析，但它们会阻塞页面的渲染(block rendering)。

svelte

 Svelte是由Rich Harris創建並由Svelte核心團隊成員維護的免費開源前端編譯器。Svelte應用程序不包含框架引用

https://svelte.dev/

https://www.gss.com.tw/eis/197-eis-97/2380-eis97-6

網路偵測器 嗅探氣 && 不需要 Hosts 和 Fiddler→ SwitchyOmega + whistle(未完)

採用 代理伺服器 (Proxy Server) 的方式，進行資料攔截分析，所以我們也會稱這些工具為 Proxy Tool 或 web debugging proxy。

著名工具

• Charles
• Burp Suite
• Fiddler
• Wireshark
• tcpdump

當然著名的工具不只這些，甚至每一項工具都有自己的特色。(這篇只介紹了Charles, Burp Suite，Charles跟Fiddler everywhere很像，或一樣。Burp 則是基於資安領域由 PortSwigger Web Security 所開發出的軟體，因此裡面提供工具及特點都跟滲透測試及攻擊 web 相關。)

 

turn to 

因此 Proxy Tools 除了開發除錯以外，在滲透測試跟資安上都有密不可分的關係

介紹proxy tool

1. Wireshark

Wireshark 在2006 更名後（前身名為Ethereal）到現在還是非常熱門，不只是免費開源的軟體，它可以解析的東西非常詳細，針對協議，三方交握等訊息，DNS 都可以一一條列出來，是非常出色的網路封包分析工具

前面提到了每個抓包工具都有自己的特色跟優缺點，Wireshark 它的所得到的資料太底層，我們並不在意這些底層運作的資料，需要的是傳送請求及回應的詳細資料，屬於最上層的應用層，太多我們不需要的資料，反而需要過多的操作跟解析。

2.Burp

特點及功能

• HTTP Proxy — 可使用 Web 代理伺服器運行，並且位於瀏覽器和目標 Web 伺服器之間。允許攔截、檢查和修改在兩個方向上通過的原始流量。
• Scanner — Web 應用程式安全掃描器，用於掃描 Web 應用程式漏洞。
• Intruder — 可以對 Web 應用程式執行自動攻擊。提供了一種自定演算法及參數，生成惡意 HTTP 請求。Intruder 工具可以測試和檢測 SQL 注入、跨站腳本、參數篡改和易受蠻力攻擊的漏洞。
• Spider — 自動抓取 Web 應用程式的工具。把以把站台抓取下來
• Repeater — 可以用於修改對伺服器的請求，重新發送並觀察結果。
• Decoder — 將已編碼的數據轉需要的格式。
• Comparer — 數據比較工具。
• Extender — 允許加載 Burp 擴展，使用自己的或第三方代碼提供的語法擴展 Burp 的功能
• Sequencer — 一種分析數據項樣本隨機性的工具。它可以用於測試應用程式的會話令牌或其他重要的數據項，如反 CSRF 令牌、密碼重置令牌等。
  

雜湊(hash)函式的應用

• 保護資料

  常用在保護使用者輸入的密碼，就是常聽到的密碼在資料庫有沒以儲存明文

  密碼輸入 abc 採用 hash 運算

  sha1('abc')
  

  實際儲存資料是 a9993e364706816aba3e25717850c26c9cd0d89d

• 確保傳遞真實的資訊

  在網路傳輸資料時，將傳輸內容進行hash ，伺服器驗證這組 hash code ，確保資料在中間沒有被串改

  這也稱確保訓息完整性 稱 (Hash-based message authentication code , 縮寫HMAC)

• 雜湊表

  在上方以有簡單介紹，主要用途資料使用及儲存，更多用在資料搜索上的設計

• 傳輸錯誤校正

  在傳輸協議上設計對應的 hash 檢驗，當傳送資料時比對計算hash code 比對不相同時為，傳輸內容有誤

  這又稱 冗餘校驗

• 檔案比對 （語音/圖片）

  發行的軟體進行雜湊後，並把雜湊碼公布於網站，讓使用者自行比對安裝的為官方出廠沒被竄改過

  也稱為 Checksum

  圖片進行hash 可以快速比對是否相同檔案

  語音 影片，分割為很多小檔案進行hash 後可以進行 搜尋 批配是否有相同的部份

  網路資源發行後進行hash 碼，配合子資源完整性 (Subresource Integrity ,SRI) 避免使用CDN時內容已被串改

  <script src="https://example.com/example-framework.js"
          integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
          crossorigin="anonymous"></script>

P.S. 子資源 (Subresource Integrity ,SRI)  https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/24506/  未讀

因為有hash解密網站 https://www.dcode.fr/sha1-hash，所以通常會加鹽處理
→原本sha1('abc')

→改成sha1('abc, salt or something')

雜湊函數有不可逆的特性，因此很常跟著密碼學搭配一起使用

保護資料和資料比對，雜湊函數絕對是少不了的

可以不用深入了解，演算法怎麼運算，只要學會如何使用受益無窮

reference:https://ithelp.ithome.com.tw/articles/10247509

https://ithelp.ithome.com.tw/articles/10246917 還沒實行
https://ithelp.ithome.com.tw/articles/10247581 未看

8102 年的程序员不需要 Hosts 和 Fiddler→ SwitchyOmega + whistle: https://juejin.cn/post/6844903677883482125  

whistle詳細講解:  https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/725158/  

OCPJP

 https://pclevinblog.pixnet.net/blog/post/314563309-%5Bjava%5Docjp%28scjp%29%E5%85%8D%E8%B2%BB%E7%9A%84%E8%80%83%E9%A1%8C%E5%BA%AB%E7%B6%B2%E7%AB%99

https://yamol.tw/cat-OJCP%28SCJP%29%E6%B8%AC%E9%A9%97%E9%A1%8C%E5%BA%AB%E5%BD%99%E7%B7%A8-1721.htm

node-sass

react native

 airbnb撤出react native心得: 

https://medium.com/as-a-product-designer/airbnb-%E7%B5%84%E7%B9%94%E6%B5%81%E7%A8%8B-%E8%AE%93design%E8%B7%9Fcoding%E4%B9%8B%E9%96%93%E7%9A%84%E5%8D%94%E4%BD%9C%E6%95%88%E7%9B%8A%E6%9C%80%E4%BD%B3%E5%8C%96-f229a0dc91ab 

https://blog.oursky.com/2018/08/08/airbnb-sunsetting-react-native-for-mobile-and-web/ 

實際學習: 

https://www.youtube.com/watch?v=0-S5a0eXPoc  

https://reactnative.dev/docs/getting-started

學習內容: 

DLS - Design Language System: 包含的字體、顏色、icons、間隔距離、資訊架構等

web server: nginx

近期目標: 學習react native, circle ci

Hexo, 佈置靜態網站，vue官網也是用他

 可以快速佈署上github

youtube上有教學視頻