本文轉自微信公衆號 - 大海我來了原文地址 1.5 萬字 CSS 基礎拾遺（核心知識、常見需求） 本篇文章圍繞了 CSS 的核心知識點和項目中常見的需求來展開。雖然行文偏長，但偏基礎，適合初級中級前端閲讀，閲讀的時候請適當跳過已經掌握的部分。 這篇文章斷斷續續寫了比較久，也參考了許多優秀的文章，但或許文章裏還是存在不好或不對的地方，請多多指教，可以評論裏直接提出來哈。 小 tip：後續內容更精彩哦。 核心概念和知識點語法CSS 的核心功能是將 CSS 屬性設定為特定的值。一個屬性與值的鍵值對被稱為聲明（declaration）。 1color: red; 而如果將一個或者多個聲明用 {} 包裹起來後，那就組成了一個聲明塊（declaration block）。 1234{    color: red;    text-align: center;} 聲明塊如果需要作用到對應的 HTML 元素，那還需要加上選擇器。選擇器和聲明塊組成了 CSS 規則集（CSS ruleset），常簡稱為 CSS 規則。 1234span {   ...

DateDate 類型使用自 UTC 世界協調時間 1970 年 1 月 1 日午夜零時開始經過的毫秒數來保存日期 創建通過使用 new 操作符和 Date 構造函數來創建日期對象 var now = new Date() Date() 可以選擇傳入參數，如果不傳入參數 不傳入參數 會依據系統設置的當前時間來創建一個Date對象，返回當前的日期和時間 傳入參數 Unix 时间戳 即 从1970-1-1 00:00:00 UTC 到该日期對象（UTC時間）的毫秒数 傳入 时间戳字符串 與下文的 Date.parse()所需的參數一樣 傳入 日期成員 與 下文的 Date.UTC() 所需的參數一樣，但是 Date() 會以 本地時間 來處理參數，而不是 UTC。 123// 可見最終的結果 兩個不一樣， 原因是 Date() 會以本地時間來處理參數console.log(new Date(Date.UTC(2021,1,2,12,12,12))) // Tue Feb 02 2021 20:12:12 GMT+0800 (香港標準時間)console.log(new Date(2 ...

Array 類型ECMAScript 數組的每一項可以保存任何類型的數據。 ECMAScript 數組的大小是可以動態調整的，既可以隨著數據的添加自動增長以容納新數據。 創建數組的方法 使用 Array 構造函數 使用 new Array(), new 可以省略不寫。 1234var colors = new Array();var colors = Array();var colors = new Array(20); // 創建長度為20的數組var colors = new Array("red","blue","green") // 創建包含3個字符串的數組 使用數組字面量表示法 1234var color = ['red','blue']var color = [] // 空數組var color = [1,2,] // ie8及之前的版本，會是一個包含1，2，undefined 的數組（長度3），其它的瀏覽器會生成一個包含1，2的數組（長度2）var col ...

以下文章轉載自前端自習課，作者王平安 前言在《初中級前端 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。 ...