# 題目大解析

### 寫出jpg, png, webp之間的差異?
* **jpg: 靜態影像壓縮檔且不支持動態圖，不支援透明背景的圖片。**
***優點***
可以把檔案壓縮到最小的格式，網頁加載速度較快
各種瀏覽器支援度佳
***缺點***
因為使用壓縮，可能會導致圖片品質降低
不適合用來儲存需要清楚顯示的圖片
* **png: 無損壓縮檔且不支持動態圖，支援透明背景的圖片。**
***優點***
支援透明度、無損壓縮圖片，盡量在不失真的情況下壓縮圖片檔案大小
***缺點***
檔案大小較JPG大，可能會導致網頁加載速度變慢，不適合用於色彩豐富的圖片

* **WebP: 有無損壓縮和有損壓縮檔且支持動態圖，支援透明背景的圖片。**
***優點***
在失真壓縮的模式下，檔案比 JPEG 格式還小
支援透明度、動畫， 並分為失真、無失真壓縮模式
***缺點***
編碼、解碼實作的處理速度還沒有最佳化
網頁支援度不夠大

> 參考
[關於這些圖片格式PNG、JPEG、JPEG XR、JPEG2000、SVG、WebP，你了解多少呢？](https://medium.com/coding-girl-life/%E9%97%9C%E6%96%BC%E9%80%99%E4%BA%9B%E5%9C%96%E7%89%87%E6%A0%BC%E5%BC%8Fpng-jpeg-jpeg-xr-jpeg2000-svg-webp-%E4%BD%A0%E4%BA%86%E8%A7%A3%E5%A4%9A%E5%B0%91%E5%91%A2-88c63021f868)、[你了解PNG、JPG、WebP和GIF的區別嗎？](https://kknews.cc/zh-tw/news/8kmgvbq.html)、[Chrome 下載圖片變成 WebP 怎麼辦](https://zamhuang.medium.com/tools-chrome-%E4%B8%8B%E8%BC%89%E5%9C%96%E7%89%87%E8%AE%8A%E6%88%90-webp-%E6%80%8E%E9%BA%BC%E8%BE%A6-be377fabd90e)
---
### block & inlineblock的差異?
* inlineblock: 有block的寬度高度特性，又有inline的同行特性。
block:塊級元素，可操控元素的寬高，以及內外邊距，每一個塊級元素都是從新的一行開始。
參考
[CSS inline與inline-block的差別與解決元素間的空白~](https://archerworkshop.info/cssinlineinline-block/)
[display:inline-block，block，inline的區別與用法](https://www.itread01.com/content/1550465883.html)

* react 框架如何解決跨域問題?(跟代理伺服器有關
* 跨域問題是啥?
* Proxy 是什麼?(<=好像是代理伺服器的名字
在你的內部網路與外部網路之間建立一道像**牆**般的保護，使內外有所區隔，所有的進出動作都必需要經過這道牆，這道牆也可以儲存經過他的網址內容。
當使用者要向伺服器要求資料時，假設使用者輸入 www.todo.com.tw ，向todo資訊超商索取資料時，在正常的網路流程中，當使用者的瀏覽器看到 www.todo.com.tw 的domain name 時，會向DNS尋找 www.todo.com.tw 所對應的IP，當DNS傳回對應的 ip 後，瀏覽器會再對真正的伺服器索取資料，這看起來是沒有問題的，但如果網路塞車、網站的機器配備不好、網站的專線不夠快等不良的因素通通加在一起後，你要連接的網站就會變的很慢，所以這個時候有一個叫 Proxy Server 的東西，會把大家常常看的網頁資料**暫存**在一個位置，這個位置通常機器設備會很好，頻寬會很大，所以讀者讀取的速度就會很快。
使用者透過代理伺服器瀏覽網站，能隱藏客戶端真實 IP 位址，所有流量都會透過代理伺服器進行路由。因此網站只會紀錄代理伺服器的 IP 位址，不會紀錄客戶端的IP位址，以保護客戶端的隱私。

* react如何實現單向數據流?

* xss csrf是?