以下文章轉載自前端自習課，作者王平安 前言在《初中級前端 JavaScript 自測清單 - 1》部分中，和大家簡單過了一遍 JavaScript 的一些基礎知識，沒看過的朋友可以回顧一下 😁 本系列文章是我在我們團隊內部的 “「現代 JavaScript 突擊隊」”，第一期學習內容為《現代 JavaScript 教程》系列的「第二部分」輸出內容，希望這份自測清單，能夠幫助大家鞏固知識，温故知新。 本部分內容，以 「JavaScript 對象」為主，大致包括以下內容： 對象JavaScript 有八種數據額類型，有七種原始類型，它們值只包含一種類型（字符串，數字或其他），而對象是用來「保存鍵值對和更復雜實體。」我們可以通過使用帶有可選「屬性列表」的花括號 {...} 來創建對象，一個屬性就是一個鍵值對 {"key" : "value"} ，其中鍵（ key ）是一個字符串（或稱屬性名），值（ value ）可以是任何類型。 創建對象我們可以使用 2 種方式來創建一個新對象： 12345// 1. 通 ...

以下文章轉載自前端自習課，作者王平安 前言最近與部門老大一起面試了許多前端求職者，其中「想換個學習氛圍較好的人佔多數」，但良好的學習氛圍也是需要一點點營造出來的🌺。 為此我們組建了我們團隊內部的 “「現代 JavaScript 突擊隊」”，第一期學習內容為《現代 JavaScript 教程》系列，幫助小組成員系統地進行學習鞏固，並「讓大家養成系統性學習和輸出學習總結的學習方式」。 本文作為我輸出的第一部分學習總結，希望作為一份自測清單，幫助大家鞏固知識，温故知新。 接下來開始分享自測清單的內容。 Hello World!腳本引入方式JavaScript 腳本引入方式有兩種： <script>  標籤插入腳本； <script> 標籤 src 設置腳本地址。 script 標籤屬性<script>  標籤有以下常用屬性： srcsrc ：指定外部腳本的 URI， 如果設置了 src 特性，script 標籤內容將會被忽略； 1<script src="example-url.js"></s ...

本文轉載自【总结】调研实现高性能动画 本文是調研如何實現高性能動畫, 提升用户體驗的總結, 文章內容來源於對看過的相關技術文章的總結, 相關技術文章已列到文章末尾, 如有遺漏, 敬請諒解. 快速響應和高度交互的頁面往往能夠吸引大量的用户群體. 相反, 如果頁面存在性能低下的動畫, 動畫不流暢, 動畫過程中頁面閃爍等等, 如此粗糙的交互體驗必然喪失用户量. 對於大多數的設備而言, 屏幕以 60 次每秒的頻率刷新, 即60HZ. 如果一個動畫中的某些幀超過了這個時間, 就會導致瀏覽器的刷新頻率跟不上設備的刷新頻率（跳幀現象）, 出現頁面閃爍. 因此, 高性能的動畫都應該保持在60fps左右. 接下來我們看幾種動畫的實現方式. 基於setTimeout或者setInterval實現的動畫基於幀算法實現的動畫 這是一個基於幀算法實現的 JavaScript 動畫, 這裏設置的每秒鐘更新 60 次, 即60fps. 大家可以看到現在的動畫還是非常流暢的. 動畫的幀率也在 60 附近. 但是由於 JavaScript 運行時需要耗費時間, 而 JavaScript 又是單線程的, 所以如 ...

本文轉自4ark 這個問題已經是老生常談了，更是經常被作為面試的壓軸題出現，網上也有很多文章，但最近閒的無聊，然後就自己做了一篇筆記，感覺比之前理解更透徹了。 前言這個問題已經是老生常談了，更是經常被作為面試的壓軸題出現，網上也有很多文章，但最近閒的無聊，然後就自己做了一篇筆記，感覺比之前理解更透徹了。 這篇筆記是我這兩天看了數十篇文章總結出來的，所以相對全面一點，但由於我是做前端的，所以會比較重點分析瀏覽器渲染頁面那一部分，至於其他部分我會羅列出關鍵詞，感興趣的可以自行查閲， 注意: 本文的步驟是建立在，請求的是一個簡單的 HTTP 請求，沒有 HTTPS、HTTP2、最簡單的 DNS、沒有代理、並且服務器沒有任何問題的基礎上，儘管這是不切實際的。 大致流程 URL 解析 DNS 查詢 TCP 連接 處理請求 接受響應 渲染頁面 URL 解析地址解析： 首先判斷你輸入的是一個合法的 URL 還是一個待搜索的關鍵詞，並且根據你輸入的內容進行自動完成、字符編碼等操作。 HSTS 由於安全隱患，會使用 HSTS 強制客户端使用 HTTPS 訪問頁面。詳見：你所不知道的 HSTS。 ...