如何優化網站
- 讓使用者收到的資源盡可能的輕量
- 圖片輕量化
- minify JS, CSS and HTML
Minimize External HTTP Requests
Minify JS, CSS and HTML
Optimize JS and CSS Performance
Use CDN and Caching to increase Speed
Compress Images and Files
Prefetch should be Enable
快取檔案
- CDN可以快取最近載入過的資源
Optimize JS and CSS
CORS
CORS
CORS is Cross-Origin Resource Sharing and it allows you to make requests from one website to another website. But for security reasons, a browser is not allowed to load requests to other domains when those requests are generated by scripts. CORS addresses this issue by supplying a header that will define which domains can make XMLHttpRequests.
Preload, Prefetch
善用屬性可以避免在初期render的時候造成堵塞渲染的問題
Prefetch
表示使用者在網站上有可能會用到這個資源，瀏覽器可以透過事先獲取資源或是緩存資源來優化使用體驗。
如果表單有一個彈出視窗會用到資源，那麼他是一個觸發事件而非立即會用到的資源，因此可以使用prefetch。Preload
表示使用者在網站上必須會用到這個資源，所以瀏覽器必須預先獲取或緩存資源。
降低頁面載入時間
Image Optimization: Always scale your pics or videos before uploading them to a page.
Browser Cache: The use of cache will increase speed for pages that you have already visited.
Compress and Optimize Content: Compressing the content of a website reduces page load time to a great extent.
StyleSheet Reference on Top: Putting stylesheet reference to the header of a document helps your page to load faster
AJAX
https://www.bestinterviewquestion.com/public/frontend/img/ajax-illustration.png
Ajax stands for Asynchronous JavaScript And XML and it is not a programming language. It uses XML to transport data, but it is equally common to transport data as JSON text or plain text.
It allows webpage to be updated asynchronously by exchanging data with a webserver behind the scenes. It means that it is can update parts of a webpage without reloading the whole page in website.
What is event bubbling and event capturing in javascript?
Event Bubbling
In an event, bubbling handlers are called when one element is nested into a second element, and both the elements have a listener for the same event. E.g. A click. Nowadays all modern browsers have event bubbling by default.
Event Capturing
Event capturing starts from the top element to the target element. Modern browsers don’t support this event but we can achieve that with the help of code.
快取方式
https://calendar.perfplanet.com/2016/a-tale-of-four-caches/
Comment
