原创 高級之路篇九:一目瞭然Cookie、session和localStorage、以及sessionStorage之間的區別

    cookie session sessionStorage localStorage 儲存位置 如果設置了過期時間,存在電腦本地硬盤上; 如果沒有設置過期時間,存於內存中 服務器上 瀏覽器 瀏覽器 大小限制 4k ---- >5M

原创 js之變量、數據、內存篇

內存:用於存放變量、對象、常量的物理空間。js中內存空間可分爲三種:棧(stack)、堆(heap)、池(一般歸類於棧中)。 ->棧:存放變量,特點:先進後出,後進先出。例如:string、number、boolean、null、

原创 高級之路篇三:高性能js

腳本   1、將所有<script>標籤放在儘可能接近<body>標籤底部的位置,儘量減少對整個頁面下載的影響; 2、減少引用外部腳本文件的數量; 3、將腳本成組打包。頁面的 <script>標籤越少,頁面的加載速度就越快,響應也更加迅速

原创 高級之路篇一:從瀏覽器渲染開始

前言:瞭解並理解瀏覽器的渲染原理流程,對我們的性能優化有着至關重要的作用。 至於渲染引擎,我們大可忽略,知道這個概念就行。 流程如下: 1、下載html文本文件,生成dom樹。 2、下載css文件,解析CSS生成CSSOM規則樹。 3、

原创 webpack4 demo

webpack.config.js  const path = require("path"); const webpack = require("webpack"); const packagejson = require("./

原创 高級之路篇八:你真的瞭解console嗎!

作爲調試信息打印語句console.log()每個前端都比較清楚吧。。。  對,不就是打印數據到控制檯嗎,沒錯!可是油田我遇到了一個變態的面試問題,一下被震住了,問console.log(2/3); 打印結果是多少?不就是一個無限循環的除

原创 高級之路篇十九:ES6之數組api

1、map 2、for....of.... 3、includes 4、Array.from() 5、find()、findIndex()、indexOf、lastIndexOf 6、Array.isArray() 7、filter 8、e

原创 mac字體渲染精細處理

問題根源:同樣設置的字體,爲什麼和別人的代碼渲染出來的效果在mac上會顯得比較’莽‘?   全局除了設置字體font-family外, 還需要設置: //抗鋸齒,使得更精細平滑 -webkit-font-smoothing: antia

原创 初次嘗試web瀏覽器消息通知,並震動提示

  注意的是,本地測試服務是完全可以看到消息通知的,如果線上環境,必須要求https協議,否則自動視爲拒絕。 通知API可能不再從不安全的來源使用。您應該考慮將應用程序切換到安全源,比如HTTPS。見https://goo.gl/rStT

原创 高級之路篇二十二:map、weakMap、set、weakSet、object、array的區別

1、map Map 對象保存鍵值對。任何值(對象或者原始值) 都可以作爲一個鍵或一個值。   鍵值對結構。 任何值(對象或者原始值) 都可以作爲一個鍵或一個值。 強引用存儲 null 會被當做 undefined。 雖然NaN !== N

原创 高級之路篇二十三:this總結

總之一句話:誰調用,this就指向誰。 普通函數中 構造函數中 箭頭函數中 原型鏈上的this getter、setter中 定時器回調函數中 作爲對象方法中 dom事件處理函數中 內聯事件函數中 在Function構造器中 1、普通函數

原创 高級之路篇二十一:全面解析js一等公民function

初識function: 函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。   1、具名函數 var fun = function(){....}   此種方式變量會提升,函數體留原地。 function fun(){...

原创 全面解析var、const、let的區別

作用域:變量作用域(全局變量和局部變量) 、函數作用域(函數內部的變量) 作用域鏈:其實就是一些可訪問對象的集合。比如函數執行時會產生一個活動對象,活動對象中。 在JavaScript中,函數也是對象,實際上,JavaScript裏一切都

原创 如何快速隨機打散一個數字數組?

  隨 機就離不開Math.random() 既然是一個數字數組,寫過排序吧,有冒泡排序、sort排序等,都能排序成從小到大或從大到小的數組。 那麼暫且看看sort生序排列的寫法: var a = [10,2,3,5,4,6,7,8,9

原创 數組排序的幾種方式

1、sort排序 方法sort()將在原數組上對數組元素進行排序,即排序時不創建新的數組副本。如果調用方法sort()時沒有使用參數,將按字母順序(更爲精確地說,是按照字符編碼的順序)對數組中的元素進行排序。要實現這一點,首先應把數組的元