文章目錄
0.官方文檔：
1.webpack概述：
2.webpack的基本使用：
3.在項目中安裝和配置 webpack：
4.配置自定義打包的自定義入口和出口：
4.配置自動打包功能：
5.配置生成預(yù)覽頁面功能：
6.配置自動打包相關(guān)參數(shù)：
7.webpack 中的加載器：
8.loader加載器的基本使用：
9.Vue單文件組件：
10.webpack 打包發(fā)布：
11.以上所有配置 webpack.config.js 截圖
1.webpack概述：
webpack是一個流行的前端項目構(gòu)建工具(打包工具) ,可以解決當(dāng)前web開發(fā)中所面臨的困境
webpack提供了友好的模塊化支持,以及代碼壓縮混淆、處理js兼容問題、性能優(yōu)化等強大的功能,從而讓程序員把工作的重心放到具體的功能實現(xiàn)上,提高了開發(fā)效率和項目的可維護性
2.webpack的基本使用：
2.1：打開終端運行命令 npm init -y 初始化包管理配置文件 package.json
2.2：新建 src 源文件目錄（里面放程序員自己寫的代碼比如 html css js images …）
2.3：如果需要引入 jquery 庫 終端運行以下命令npm install jquery -S 安裝 jquery
自己在src文件夾中創(chuàng)建 index.js 引入下載的jquery包import $ from 'jquery'
3.在項目中安裝和配置 webpack：
3.1：終端運行 npm install webpack-cli -D 命令，安裝webpack相關(guān)的包
這里要注意一個問題 : package.json 和 package-lock.json 文件里的名字默認(rèn)為 “name”=“webpack”,在配置 webpack-cli 之前要把name 改成 其他名字 比如 “name”=“webpack_” 不然的話為出現(xiàn)無法安裝的問題
具體可點擊這里 Webpack依賴包安裝問題解決方案
3.2：在項目根目錄中 ，創(chuàng)建名為 webpack.config.js 的 webpack 配置文件
3.3：在 webpack.config.js 中，初始化一下基本配置
建議選擇 development （打包速度快，體積大），項目上線是才改成 production (如果選擇production會進行代碼的壓縮和混淆，打包速度慢，體積小)
3.4：在package.json中的 script節(jié)點 新增一個dev腳本 值為 webpack ，就可以實現(xiàn)打包功能
在終端運行命令：npm run dev 就可以打包 默認(rèn)打包成main.js在 dist文件夾中
在src自己新建的index.html 中引入打包后的 js
屬性描述符就是一個屬性除了屬性名與屬性值之外的其他相關(guān)信息
通過Object.getOwnPropertyDescriptor(對象, 屬性名)可以得到一個對象的某個屬性的屬性描述符
let obj = {
a: 1
}
console.log(Object.getOwnPropertyDescriptor(obj, 'a'));
// {
// value: 1,
// writable: true,
// enumerable: true,
// configurable: true
// }
通過Object.getOwnPropertyDescriptors(對象)可以得到某個對象的所有屬性描述符
let obj = {
a: 1,
b: 2
}
console.log(Object.getOwnPropertyDescriptors(obj));
// {
// a: {
// value: 1,
// writable: true,
// enumerable: true,
// configurable: true
// }
// b: {
// value: 2,
// writable: true,
// enumerable: true,
// configurable: true
// }
// }
接下來,說一說每一個屬性描述符的作用
不多逼逼
當(dāng)我們設(shè)置configurable為false以后,再去修改屬性描述符的話,會報錯
let obj = {
a: 1,
b: 2
}
Object.defineProperty(obj, 'a', {
value: 'a',
configurable: false
})
Object.defineProperty(obj, 'a', {
value: 'a',
configurable: true
})
// Uncaught TypeError: Cannot redefine property: a
// at Function.defineProperty (<anonymous>)
當(dāng)設(shè)置一個屬性的enumerable為false時,該屬性不可被forin循環(huán)
但是不影響forof循環(huán),因為forof循環(huán)看有沒有Symbol(Symbol.iterator)
forin循環(huán)的是屬性名,forof循環(huán)的是屬性值
在了解了javascript的語言基礎(chǔ)和特性后
javascript真正大放光彩的地方來了——這就是javascript DOM
Javascript DOM
DOM(Document Object Model)，文檔對象模型。
是W3C組織推薦的處理可擴展標(biāo)記語言（HTML或者XML）的標(biāo)準(zhǔn)編程接口；W3C已經(jīng)定義了一系列DOM接口，通過這些DOM接口可以改變網(wǎng)頁的內(nèi)容、結(jié)構(gòu)和樣式。
簡單的說就是一套操作文檔內(nèi)容的方法。
需要注意的是，我們需要把DOM當(dāng)作一個整體，不能分割看待，即DOM（文檔對象模型）是一套操作文檔內(nèi)容的方法。
DOM把以上內(nèi)容看作都是對象
<!DOCTYPE html>
<html>
<head>
<title>Shopping list</title>
<meta charset="utf-8">
</head>
<body>
<h1>What to buy</h1>
<p id="buy" title="a gentle reminder">Don't forget to buy this stuff</p>
<ul id="purchases">
<li>A tin od beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
</body>
</html>
1、獲取DOM四種基本方法
1、getElementById()
2、getElementsByTagname()
3、getAttribute()
4、setAttribute()
常用的兩種解析：
1. getElementById()：
參數(shù)：元素的ID值。 （元素節(jié)點簡稱元素）
返回值：一個有指定ID的元素對象（元素是對象）
注：這個方法是與document對象相關(guān)聯(lián)，只能由document對象調(diào)用。
用法：document.getElementById(Id)
例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="time">2020-04-16</div>
<script>
// 1. 因為我們文檔頁面從上往下加載，所以先得有標(biāo)簽 所以我們script寫到標(biāo)簽的下面
// 2. get 獲得 element 元素 by 通過 駝峰命名法
// 3. 參數(shù) id是大小寫敏感的字符串
// 4. 返回的是一個元素對象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我們返回的元素對象 更好的查看里面的屬性和方法
console.dir(timer);
</script>
</body>
</html>
看一下控制臺打印的是什么
可以看到 console.log(timer)打印出來的是整個div標(biāo)簽
timer類型是個對象
2. getElementsByTagName():
參數(shù)：元素名
返回值：一個對象數(shù)組。這個數(shù)組里每個元素都是對象，每個對象分別對應(yīng)著文檔里給定標(biāo)簽的一個元素。
注：這個方法可和一般元素關(guān)聯(lián)。這個方法允許我們把通配符當(dāng)作它的參數(shù)，返回在某份html文檔里總共有多少個元素節(jié)點。
用法：element.getElementsByTagName(TagName)
例：
var items=document.getElementsByTagName("li");
items.length;//3
document.getElementsByTagName(“*”);//12
2、事件基礎(chǔ)
3.1 事件概述
JavaScript使我們有能力創(chuàng)建動態(tài)頁面，而事件是可以被JavaScript偵測到的行為。
簡單理解：觸發(fā)——>響應(yīng)機制
網(wǎng)頁中每個元素都可以產(chǎn)生某些可以觸發(fā)JavaScript的事件，例如，我們可以在用戶點擊某按鈕產(chǎn)生一個事件，然后去執(zhí)行某些操作
3.2 事件三要素
事件源 、事件類型、事件處理程序，我們也稱為事件三要素
(1) 事件源 事件被觸發(fā)的對象 誰
(2) 事件類型 如何觸發(fā) 什么事件 比如鼠標(biāo)點擊(onclick) 還是鼠標(biāo)經(jīng)過 還是鍵盤按下
(3) 事件處理程序 通過一個函數(shù)賦值的方式 完成
代碼實例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">唐伯虎</button>
<script>
// 點擊一個按鈕，彈出對話框
// 1. 事件是有三部分組成 事件源 事件類型 事件處理程序 我們也稱為事件三要素
//(1) 事件源 事件被觸發(fā)的對象 誰 按鈕
var btn = document.getElementById('btn');
//(2) 事件類型 如何觸發(fā) 什么事件 比如鼠標(biāo)點擊(onclick) 還是鼠標(biāo)經(jīng)過 還是鍵盤按下
//(3) 事件處理程序 通過一個函數(shù)賦值的方式 完成
btn.onclick = function() {
alert('點秋香');
}
</script>
</body>
</html>
運行結(jié)果
1、獲取事件源
2、注冊事件（綁定事件）
3、添加事件處理程序（采取函數(shù)賦值形式）
代碼實戰(zhàn)
-
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>123</div>
<script>
// 執(zhí)行事件步驟
// 點擊div 控制臺輸出 我被選中了
// 1. 獲取事件源
var div = document.querySelector('div');
// 2.綁定事件 注冊事件
// div.onclick
// 3.添加事件處理程序
div.onclick = function() {
console.log('我被選中了');
}
</script>
</body>
</html>
常用的DOM事件
onclick事件---當(dāng)用戶點擊時執(zhí)行
onload事件---當(dāng)用戶進入時執(zhí)行
onunload事件---用用戶離開時執(zhí)行
onmouseover事件---當(dāng)用戶鼠標(biāo)指針移入時執(zhí)行
onmouseout事件---當(dāng)用戶鼠標(biāo)指針移出時執(zhí)行
onmousedown事件---當(dāng)用戶鼠標(biāo)摁下時執(zhí)行
onmouseup事件---當(dāng)用戶鼠標(biāo)松開時執(zhí)行
————————————————
版權(quán)聲明：本文為CSDN博主「那是我吶」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42402867/article/details/105567787
文章目錄
繼承性的描述：
繼承性是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性，即子元素可以繼承父類的屬性。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color: blue;
}
</style>
</head>
<body>
<div>父元素
<div>子元素
<p>我依舊是子元素</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 32px;
}
</style>
</head>
<body>
<p style="color: blue;">我這里體現(xiàn)了層疊性呀</p>
</body>
</html>
使用結(jié)論
由于內(nèi)容有限，但是結(jié)論是一定的，所以我直接給出結(jié)論：
若多個選擇器定義的樣式不沖突，則元素應(yīng)用所有選擇器定義的樣式。
若多個選擇器定義的樣式發(fā)生沖突（比如：同時定義了字體顏色屬性），則CSS按照選擇器的優(yōu)先級，讓元素應(yīng)用優(yōu)先級搞得選擇器樣式。
CSS定義的選擇器優(yōu)先級從高到低為：行內(nèi)樣式–>ID樣式–>類樣式–>標(biāo)記樣式。
如若想直接定義使用哪個樣式，不考慮優(yōu)先級的話，則使用!important，把這個加在樣式后面就行了。
優(yōu)先級
定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一個元素上，這時就會出現(xiàn)優(yōu)先級的問題。層疊性和選擇器的圈中有很大的關(guān)系。
優(yōu)先級的使用說明
權(quán)重分析：
內(nèi)聯(lián)樣式：如：style=""，權(quán)重為1000。
ID選擇器，如：#content，權(quán)重為100。
類，偽類和屬性選擇器，如.content，權(quán)重為10。
標(biāo)簽選擇器和偽元素選擇器，如div p，權(quán)重為1。
繼承樣式，權(quán)重為0。
將基本選擇器的權(quán)重相加之和，就是權(quán)重大小，值越大，權(quán)重越高。
計算權(quán)重方法
數(shù)標(biāo)簽：先數(shù)權(quán)重最高的標(biāo)簽，然后數(shù)第二高權(quán)重的標(biāo)簽，以此類推，就會生成一個數(shù)組，里面包含四個數(shù)字。
比如（0，0，0，0）分別對應(yīng)（行內(nèi)式個數(shù)，id選擇器個數(shù)，類選擇器個數(shù)，標(biāo)簽選擇器個數(shù)）
然后兩個選擇器通過對別四個數(shù)字的大小，確定權(quán)重關(guān)系。
例：
#box ul li a.cur有1個id標(biāo)簽，1個類，3個標(biāo)簽，那么4個0就是（0，1，1，3）
.nav ul .active .cur有0個id，3個類，1個標(biāo)簽，那么4個0就是（0，0，3，1）
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1{
color: blue;
}
#p1{
color: red;
}
</style>
</head>
<body>
<p id="p1" class="p1">我們來試一下優(yōu)先級</p>
</body>
</html>
先推測一波，因為前面講到了ID選擇器的權(quán)重是大于類選擇器的，所以這里顏色應(yīng)該為red。
效果如下：
推測正確！優(yōu)先級GET！
今天講一下使用vant Swipe 輪播控件過程中遇到的問題
主要是使用swiper自定義的大小的時候，寬度適應(yīng)不同分辨率的移動設(shè)備
適應(yīng)寬度的同時還需控件的正常使用
先看一下需要實現(xiàn)的功能，
一個簡單的輪播圖，但是每個輪播的寬度需要低于100%，使第二個輪播的van-swipe-item可以展示到第一個位置一部分
這時我們再去vant的文檔查看一下控件
剛好有一個自定義控件大小的可以使用，完美解決了我們的問題
當(dāng)我們使用控件之后
<van-swipe :loop="false" @change="onChange" :width="350">
<van-swipe-item v-bind:id="item0"><div class="swipe0">
<div class="contion">
<p class="title">家中有事，申請請假一天</p>
<p class="title1"><span class="rice"></span>部門經(jīng)理核審中</p>
<p class="time">03.8 14.25</p>
<p class="type">放假申請</p>
</div>
<img src="../../assets/images/index/xx/fangjia.png">
</div></van-swipe-item>
<van-swipe-item ><div class="swipe1"></div></van-swipe-item>
<van-swipe-item ><div class="swipe2"></div></van-swipe-item>
<template #indicator>
<div class="custom-indicator">
{{ current + 1 }}/3
</div>
</template>
</van-swipe>
發(fā)現(xiàn)功能可以使用，但是再 iPhone8/7 plus 以及iPhone5/se 等分辨率下出現(xiàn)了寬度固定而不適應(yīng)的情況，
簡單來說，我們把van-swipe-item寬度控制在了80% 第二個van-swipe-item自然可以展示出來一部分
但是當(dāng)滑到第二頁的時候 由于第一頁的寬度還是80% 所以就出現(xiàn)了這樣的情況，所以我打算采用
動態(tài)的改變 滑動到第幾頁的時候 把當(dāng)頁的寬度變?yōu)?0% 其他頁保持不變，
于是
<van-swipe :loop="false" @change="onChange" >
<van-swipe-item v-bind:id="item0"><div class="swipe0">
<div class="contion">
<p class="title">家中有事，申請請假一天</p>
<p class="title1"><span class="rice"></span>部門經(jīng)理核審中</p>
<p class="time">03.8 14.25</p>
<p class="type">放假申請</p>
</div>
<img src="../../assets/images/index/xx/fangjia.png">
</div></van-swipe-item>
<van-swipe-item v-bind:id="item1"><div class="swipe1"></div></van-swipe-item>
<van-swipe-item v-bind:id="item2"><div class="swipe2"></div></van-swipe-item>
<template #indicator>
<div class="custom-indicator">
{{ current + 1 }}/3
</div>
</template>
</van-swipe>
首先 我們?yōu)槊總€swipe-item添加id
data(){
return {
android: true,
ios: true,
iphoneX: true,
current: 0,
item0:'item0',
item1:'item1',
item2:'item2',
}
},
mounted(){
},
methods: {
onChange(index){
console.log('當(dāng)前 Swipe 索引：' + index);
if(index==1){
var div =document.getElementById("item0").style.setProperty('width', '10rem', 'important');
var div1 =document.getElementById("item1").style.setProperty('width', '9.3333333rem', 'important');
var div2 =document.getElementById("item2").style.setProperty('width', '9.3333333rem', 'important');
} else if(index==2){
var div1 =document.getElementById("item1").style.setProperty('width', '10rem', 'important');
var div0 =document.getElementById("item0").style.setProperty('width', '10rem', 'important');
var div2 =document.getElementById("item2").style.setProperty('width', '9.3333333rem', 'important');
} else if(index==0){
var div =document.getElementById("item2");
var div0 =document.getElementById("item0").style.setProperty('width', '9.3333333rem', 'important');
var div1 =document.getElementById("item1").style.setProperty('width', '9.3333333rem', 'important');
}
},
此外，監(jiān)聽滑動事件，根據(jù)滑動到第幾頁 更改當(dāng)前頁面的寬度，
這樣就解決了
蘭蘭設(shè)計：前端達人
自己寫了段jquery的ajax請求，并輸出到頁面的表格中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery實現(xiàn)JSONP</title>
</head>
<body>
<div id="mydiv">
<button id="btn">點擊</button>
<div id="container">
<!--每個條目-->
<div class="item">
<div class="item-title">作業(yè)名字</div>
<div>
<span class="item-content">創(chuàng)建時間</span>
<span class="item-content">發(fā)布老師</span>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
async : true,
url : "xxxxxxxxxxx",
type : "GET",
dataType : "json", // 返回的數(shù)據(jù)類型，設(shè)置為JSONP方式
jsonp : 'callback', //指定一個查詢參數(shù)名稱來覆蓋默認(rèn)的 jsonp 回調(diào)參數(shù)名 callback
jsonpCallback: 'handleResponse', //設(shè)置回調(diào)函數(shù)名
data : {
q : "javascript",
count : 1,
city:'北京'
},
success: function(response, status, xhr){
// console.log('狀態(tài)為：' + status + ',狀態(tài)是：' + xhr.statusText);
// console.log(response);
var group = response.hourly_forecast;
console.log(group,111111111)
console.log(group.length,222222222222)
//拼接字符串
var str = '';
//對數(shù)據(jù)做遍歷，拼接到頁面顯示
for(var i=0;i<group.length;i++){
str += '<div class="item">'+
'<div class="item-title">'+ group[i].date +'</div>'+
'<div>'+
'<span class="item-content">'+ group[i].hum +'</span>'+
'<span class="item-content">'+ group[i].pop +'</span>'+
'</div>'+
'</div>';
}
//放入頁面的容器顯示
$('#container').html(str);
}
});
});
});
function handleResponse(response){
// 對response數(shù)據(jù)進行操作代碼
alert("jsonp success!");
}
</script>
</html>
一、處理跨域的方式：
1.代理
2.XHR2
HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已經(jīng)實現(xiàn)了跨域訪問。但ie10以下不支持
只需要在服務(wù)端填上響應(yīng)頭：
header("Access-Control-Allow-Origin:*");
/*星號表示所有的域都可以接受，*/
header("Access-Control-Allow-Methods:GET,POST");
3.jsonP
原理：
ajax本身是不可以跨域的，
通過產(chǎn)生一個script標(biāo)簽來實現(xiàn)跨域。因為script標(biāo)簽的src屬性是沒有跨域的限制的。
其實設(shè)置了dataType: 'jsonp'后，$.ajax方法就和ajax XmlHttpRequest沒什么關(guān)系了，取而代之的則是JSONP協(xié)議。JSONP是一個非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過javascript callback的形式實現(xiàn)跨域訪問。
ajax的跨域?qū)懛ǎ?
（其余寫法和不跨域的一樣）：
比如
https://github.com/xiangshuo1992/preload.git git@github.com:xiangshuo1992/preload.git
這兩個地址展示的是同一個項目，但是這兩個地址之間有什么聯(lián)系呢？
前者是https url 直接有效網(wǎng)址打開，但是用戶每次通過git提交的時候都要輸入用戶名和密碼，有沒有簡單的一點的辦法，一次配置，永久使用呢？當(dāng)然，所以有了第二種地址，也就是SSH URL，那如何配置就是本文要分享的內(nèi)容。
GitHub配置SSH Key的目的是為了幫助我們在通過git提交代碼是，不需要繁瑣的驗證過程，簡化操作流程。
步驟
一、設(shè)置git的user name和email
如果你是第一次使用，或者還沒有配置過的話需要操作一下命令，自行替換相應(yīng)字段。
git config --global user.name "Luke.Deng"
git config --global user.email "xiangshuo1992@gmail.com"
二、檢查是否存在SSH Key
cd ~/.ssh
ls
或者
ll
//看是否存在 id_rsa 和 id_rsa.pub文件，如果存在，說明已經(jīng)有SSH Key
如果沒有SSH Key，則需要先生成一下
ssh-keygen -t rsa -C "xiangshuo1992@gmail.com"
三、獲取SSH Key
cat id_rsa.pub
//拷貝秘鑰 ssh-rsa開頭
四、GitHub添加SSH Key
GitHub點擊用戶頭像，選擇setting
新建一個SSH Key
取個名字，把之前拷貝的秘鑰復(fù)制進去，添加就好啦。
五、驗證和修改
測試是否成功配置SSH Key
ssh -T git@github.com //運行結(jié)果出現(xiàn)類似如下 Hi xiangshuo1992! You've successfully authenticated, but GitHub does not provide shell access.之前已經(jīng)是https的鏈接，現(xiàn)在想要用SSH提交怎么辦？
直接修改項目目錄下.git文件夾下的config文件，將地址修改一下就好了。
————————————————
版權(quán)聲明：本文為CSDN博主「前端向朔」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u013778905/java/article/details/83501204
做過前端開發(fā)的小伙伴就算不是非常理解重排與重繪，但是肯定都聽過這兩個詞。那為什么這兩個東西這么重要？因為他與我們的頁面性能息息相關(guān)，今天，我們就來好好研究一下這兩個東西。
瀏覽器的渲染流程
在講解重排和重繪之前，我們有必要說一下瀏覽器的渲染流程。下面是瀏覽器渲染過程中最關(guān)鍵的幾個部分。如果想了解完整的瀏覽器渲染流程，推薦大家去閱讀李兵老師的瀏覽器工作原理實踐，需要付費閱讀。后期我也會整理一下再出一篇博客詳細(xì)介紹瀏覽器的渲染過程。
JavaScript：一般來說，我們會使用 JavaScript 來實現(xiàn)一些視覺變化的效果。比如用 jQuery 的 animate 函數(shù)做一個動畫、對一個數(shù)據(jù)集進行排序或者往頁面里添加一些 DOM 元素等。當(dāng)然，除了 JavaScript，還有其他一些常用方法也可以實現(xiàn)視覺變化效果，比如：CSS Animations、Transitions 和 Web Animation API。
樣式計算：此過程是根據(jù)匹配選擇器（例如 .headline 或 .nav > .nav__item）計算出哪些元素應(yīng)用哪些 CSS 規(guī)則的過程。從中知道規(guī)則之后，將應(yīng)用規(guī)則并計算每個元素的最終樣式。
布局：在知道對一個元素應(yīng)用哪些規(guī)則之后，瀏覽器即可開始計算它要占據(jù)的空間大小及其在屏幕的位置。網(wǎng)頁的布局模式意味著一個元素可能影響其他元素，例如 元素的寬度一般會影響其子元素的寬度以及樹中各處的節(jié)點，因此對于瀏覽器來說，布局過程是經(jīng)常發(fā)生的。
繪制：繪制是填充像素的過程。它涉及繪出文本、顏色、圖像、邊框和陰影，基本上包括元素的每個可視部分。繪制一般是在多個表面（通常稱為層）上完成的。
合成：由于頁面的各部分可能被繪制到多層，由此它們需要按正確順序繪制到屏幕上，以便正確渲染頁面。對于與另一元素重疊的元素來說，這點特別重要，因為一個錯誤可能使一個元素錯誤地出現(xiàn)在另一個元素的上層。
其中，重排和重繪影響的就是其中的布局和繪制過程。
什么是重排和重繪制
重排：當(dāng)DOM的變化引發(fā)了元素幾何屬性的變化，比如改變元素的寬高，元素的位置，導(dǎo)致瀏覽器不得不重新計算元素的幾何屬性，并重新構(gòu)建渲染樹，這個過程稱為“重排”。
重繪：完成重排后，要將重新構(gòu)建的渲染樹渲染到屏幕上，這個過程就是“重繪”。
簡單來說，涉及元素的幾何更新時，叫重排。而只涉及樣式更新而不涉及幾何更新時，叫重繪。對于兩者來說，重排必定引起重繪，但是重繪并不一定引起重排。所以，當(dāng)涉及重排時，瀏覽器會將上述的步驟再次執(zhí)行一遍。當(dāng)只涉及重繪時，瀏覽器會跳過Layout步驟，即：
而如果既不需要重排，也不需要重繪，那么就是下面這樣：
瀏覽器會直接跳到合成階段。顯然，對于頁面性能來說，不重排也不重繪 > 重繪 > 重排。
什么操作會引起重排和重繪
顯然，觸發(fā)重排的一般都是幾何因素，這是比較好理解的：
頁面第一次渲染 在頁面發(fā)生首次渲染的時候，所有組件都要進行首次布局，這是開銷最大的一次重排
瀏覽器窗口尺寸改變
元素位置和尺寸發(fā)生改變的時候
新增和刪除可見元素
內(nèi)容發(fā)生改變（文字?jǐn)?shù)量或圖片大小等等）
元素字體大小變化
還有其他一些操作也可能引發(fā)重排
查詢某些屬性或調(diào)用某些方法
offset(Top|Left|Width|Height)
scroll(Top|Left|Width|Height)
client(Top|Left|Width|Height)
getComputedStyle()
我們可能不太理解為什么這些操作也能引起重排，這里我先簡單解釋一下。因為現(xiàn)在的瀏覽器已經(jīng)非常完善了，會自動幫我們做一些優(yōu)化。當(dāng)我們用js操作DOM的時候，瀏覽器并不是立馬執(zhí)行的，而是將操作存儲在一個隊列中。當(dāng)達到一定數(shù)量或者經(jīng)過一定時間以后瀏覽器再統(tǒng)一的去執(zhí)行隊列中的操作。那么回到我們剛才的問題，為什么查詢這些屬性也會導(dǎo)致重排？因為當(dāng)你查詢這些屬性時，瀏覽器就會強制刷新隊列，因為如果不立馬執(zhí)行隊列中的操作，有可能得到的結(jié)果就是錯誤的。所以相當(dāng)于你強制打斷了瀏覽器的優(yōu)化流程，引發(fā)了重排。下面我們通過一些小例子來進一步理解這段話：
首先我們來一個顯然會引發(fā)重排的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#test {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div id="test">
</div>
<button onclick="reflow()">click</button>
<script>
function reflow() {
var div = document.querySelector("#test");
div.style.left = '200px';
}
</script>
</body>
</html>
把時間軸往后拉，可以看到這幾個過程，先簡單介紹一些這些名詞代表的含義：
Recalculate Style：這個過程就是生成CSSOM的過程
Layout：這就是布局階段，即重排的過程
Update Layer Tree：這個階段是更新層樹的過程
Paint：該階段是為每一層準(zhǔn)備繪制列表的過程
Composite Layers：該階段是利用繪制列表來生成相應(yīng)圖層的位圖了，還涉及到合成線程和光柵化，performence面板中的Raster就是光柵化線程池 。
這里只做一個簡單的介紹，對其中內(nèi)容不太明白的同學(xué)可以參考李兵老師的文章或者在我的下一篇介紹瀏覽器渲染過程的文章中會詳細(xì)解釋。
那通過這個圖我們可以看到，我們改變了div的left之后就觸發(fā)了Layout，即重排的過程。下面我們僅改變div的背景顏色，給大家一個對比。
即不重排也不重繪
說完了重排和重繪，不要忘記我們最開始提到的，最的方式就是跳過重排和重繪階段。你可能會想，什么情況下可以做到這一點?其實這就是我們平時說的GPU加速，具體是如何實現(xiàn)呢？在開發(fā)過程中，如果我們使用了某些屬性，瀏覽器會幫助我們將使用了該屬性的div提升到一個單獨的合成層，而在后面的渲染中，提升到該層的div將跳過重排和重繪的操作，直接到合成階段。在stack overflow上有問題提到了這塊內(nèi)容。我們翻譯一下就是：
下面幾個屬性能讓瀏覽器幫助我們將div提升到一個單獨的合成層：
圖層具有3D或透視變換CSS屬性
使用加速視頻解碼的 video 元素
擁有 3D（WebGL） 上下文或者加速 2D 上下文的 canvas 元素
混合插件（Flash)
對自己的 opacity 做 CSS 動畫或使用一個動畫 webkit 變換的元素
圖層使用加速的CSS過濾器
層具有作為合成層的后代
圖層具有較低z索引的同級元素，該同級元素具有合成層（換句話說，該層在合成層的頂部渲染）
css will-change屬性
最后一點是我加上去的，同時根據(jù)文中的內(nèi)容我們可以知道，css3硬件加速是瀏覽器的行為，所以在不同瀏覽器下可能會有不同的表現(xiàn)形式。下面我們用一個例子來理解一下。這是李兵老師在他的專欄中提出的一個例子，我拿過來借用一下，注意box中的will-change屬性：
<html>
<head>
<title>觀察will-change</title>
<style>
.box {
will-change: transform, opacity;
display: block;
float: left;
width: 40px;
height: 40px;
margin: 15px;
padding: 10px;
border: 1px solid rgb(136, 136, 136);
background: rgb(187, 177, 37);
border-radius: 30px;
transition: border-radius 1s ease-out;
}
body {
font-family: Arial;
}
</style>
</head>
<body>
<div id="controls">
<button id="start">start</button>
<button id="stop">stop</button>
</div>
<div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
</div>
<script>
let boxes = document.querySelectorAll('.box');
let boxes1 = document.querySelectorAll('.box1');
let start = document.getElementById('start');
let stop = document.getElementById('stop');
let stop_flag = false
start.addEventListener('click', function () {
stop_flag = false
requestAnimationFrame(render);
})
stop.addEventListener('click', function () {
stop_flag = true
})
let rotate_ = 0
let opacity_ = 0
function render() {
if (stop_flag)
return 0
rotate_ = rotate_ + 6
if (opacity_ > 1)
opacity_ = 0
opacity_ = opacity_ + 0.01
let command = 'rotate(' + rotate_ + 'deg)';
for (let index = 0; index < boxes.length; index++) {
boxes[index].style.transform = command
boxes[index].style.opacity = opacity_
}
requestAnimationFrame(render);
}
</script>
</body>
</html>
————————————————
版權(quán)聲明：本文為CSDN博主「溪寧」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_38164763/article/details/105406580
p,h1{
color: blue;
}
用于對于多個選擇器進行樣式修改，由簡單選擇器組合而成的選擇器，可以是簡單選擇器中的任意組合，如上面代碼例，就是修改了p標(biāo)簽和h1標(biāo)簽的字體顏色。
格式
元素[屬性名]{
聲明的屬性和屬性值;
}
p[id]{
color: blue;
}
前面添加元素的名字，然后后面加上屬性名，比如上例，就是p標(biāo)簽，其中帶有id的元素，然后把字體顏色設(shè)置為藍色。
格式
元素[屬性名=屬性值]{
聲明的屬性和屬性值;
}
p[class = 'p2']{
color: blue;
}
和上面的根據(jù)屬性名查找差不多，只不過更加了，到了屬性名后面的屬性值，上例就是作用于p標(biāo)簽，只不過條件是為帶有class屬性，并且屬性值為p2的p標(biāo)簽。
格式
元素[屬性名或?qū)傩员磉_式][屬性名或?qū)傩员磉_式]..{
聲明的屬性和屬性值;
}
p[title][class]{
color: blue;
}
元素后面加。屬性名或?qū)傩员磉_式，可以加+∞個，但是沒必要。上例為：設(shè)置title屬性和class屬性的段落p標(biāo)簽的樣式
格式
元素[元素名~=屬性值]{
聲明的屬性和屬性值;
}
元素[屬性名|=值]{
聲名的屬性和屬性值;
}
p[class~='red']{
color: blue;
}
注意，這里是~=，為約等于，就是找滿足符合約等于條件的標(biāo)簽，上例為：設(shè)置class屬性的值，包含red屬性名的標(biāo)簽
格式
元素名1~元素名2{
聲名的屬性和屬性值;
}
a~p{
color: blue;
}
a標(biāo)簽后面的每一個p標(biāo)簽，都進行了樣式的修改。
格式
父類標(biāo)簽 子類標(biāo)簽{ /*注意倆標(biāo)簽中間有空格*/
聲名的屬性和屬性值;
}
div strong{
color: blue;
}
格式
父標(biāo)簽+子標(biāo)簽{
聲名的屬性和屬性值;
}
#div1 + p{
color: blue;
}
————————————————
版權(quán)聲明：本文為CSDN博主「董小宇」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/lolly1023/article/details/105413125
目錄
JavaScript
=== !==
1. JS 發(fā)展歷史
JavaScript 在 1995 年由 Netscape 公司的 Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計實現(xiàn)而成。因為 Netscape 與 Sun 合作，Netscape 管理層希望它外觀看起來像 Java，因此取名為 JavaScript。但實際上它的語法風(fēng)格與 Self 及 Scheme 較為接近；
歐洲計算機制造聯(lián)盟（ECMA）在 1997 制定腳本語言規(guī)范 ECMA Script1 (ES1)，2009 年發(fā)布了 ECMA Script5（ES5），在 2015 年發(fā)布了 ECMA Script 2015（ES6），所有的瀏覽器的都支持 ES6；
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS兩種引入方式</title>
</head>
<body>
<!-- JS兩種引入方式：JS和CSS一樣都需要引入到html頁面中，瀏覽器才會解釋執(zhí)行，JS有兩種引入方式：
1.內(nèi)嵌(內(nèi)部)腳本:在script標(biāo)簽中寫js代碼,script標(biāo)簽推薦放置在body標(biāo)簽的底部,理論上和style標(biāo)簽一樣可以放置位置任意；
2.外部腳步:使用script標(biāo)簽的src屬性引入外部js文件,使用注意事項: script標(biāo)簽使用了src屬性以后內(nèi)部的代碼不再被瀏覽器解釋執(zhí)行，script引入外部腳本時不能使用自閉合格式 -->
<!--告訴瀏覽器把解析器切換為js解析器 type="text/javascript"可以省略-->
<script type="text/javascript"> document.write("<h1>內(nèi)部腳本</h1>");//向body中追加html內(nèi)容 </script>
<script src="../js/外部腳本.js"></script>
</body>
</html>
b. 三種輸出方式 console.log document.write alert
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS三種輸出方式</title>
</head>
<body>
<!-- JS三種輸出方式：
1.輸出到瀏覽器控制臺；
2.輸出html內(nèi)容到頁面；
3.瀏覽器彈框輸出字符 -->
<script>
//1.輸出到瀏覽器控制臺
console.log("1. 輸出到瀏覽器控制臺");//開發(fā)者專用
//2.輸出html內(nèi)容到頁面
document.write("2. 輸出html內(nèi)容到頁面");//向body中追加html內(nèi)容
//3.瀏覽器彈框輸出字符
alert("3. 瀏覽器彈框輸出字符");//阻塞執(zhí)行
</script>
</body>
</html>
c. 變量聲明 var let const typeof undefined
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS變量</title>
</head>
<body>
<!-- JS變量用來存放數(shù)據(jù)；
es5以前變量聲明使用var；
es6之后變量聲明使用let，常量聲明使用const。他們用于替代es6的var聲明方式；
JS是弱類型語言:
聲明變量時不知道變量的類型(undefined),只有在賦值之后js變量才確定類型；
typeof(a) 或 typeof a 輸出變量的類型；
undefined表示變量未賦值,未知類型 -->
<script>
//字符串 Java聲明 String str ="張三";
let str ="張三";
console.log(str);
//整數(shù) Java聲明 int k = 5;
let k = 5;
console.log(k);
//小數(shù) Java聲明 float f = 7.5;
let f = 7.5;
console.log(f);
//常量 Java聲明 final Integer PI = 3.14;
const PI = 3.14;
console.log(PI);
//演示弱類型語言
let a;//聲明變量不需要指明類型
console.log(typeof a);//undefined 未賦值類型,未知類型
a = "你好";
console.log(typeof a);//string
a = 123;
console.log(typeof a);//number
a = true;
console.log(typeof a);//boolean
a = new Object();
console.log(typeof a);//object
</script>
</body>
</html>
d. 數(shù)據(jù)類型簡介 string number boolean object undefined
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS數(shù)據(jù)類型</title>
</head>
<body>
<!-- JS數(shù)據(jù)類型,常用數(shù)據(jù)類型:
1.string 字符串類型;
2.number 數(shù)字.包括整數(shù)和小數(shù)類型;
3.boolean 布爾類型.值只有true和false兩個;
4 object 對象類型,空對象使用null表示,有兩種格式:
new Object();
JSON格式.例如:{name:"張三",age:18};
5.undefined 變量未賦值 -->
<script>
//1. string 字符串
let str = "你好";
console.log(str);
console.log(typeof str);//string
// 2. number 數(shù)字
let n = 123.456;
console.log(n);
console.log(typeof n);//number
// 3. boolean 布爾類型
let boo = false;
console.log(boo);
console.log(typeof boo);//boolean
// 4. object 對象類型，空對象使用 null表示
let obj = null;//或 new Object();
console.log(obj);
console.log(typeof obj);//object
// 5. undefined 變量未賦值
let u = undefined;
console.log(u);//值是undefined
console.log(typeof u);//類型是undefined
// Object類型
let stu = new Object();//創(chuàng)建一個js對象,js對象的屬性想要直接加上
stu.id = 1;
stu.name = "劉一";
stu.age = 18;
console.log(stu);//{id: 1, name: "劉一", age: 18}
console.log(typeof stu);//object
// JS對象取屬性值有兩種方式:
// 1. obj.key
console.log(stu.name);//劉一
// 2. obj["key"]
console.log(stu["name"]); //劉一 == stu.name
let b = "age";
console.log(stu[b]);//可以取不定屬性的值
</script>
</body>
</html>
e. 運算符 + - * / % = < > && || !
i. 全等符與不全等符
=== !==
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS運算符</title>
</head>
<body>
<!--
JS運算符
js運算符和Java運算符基本相同
只有一個特殊的比較運算符
=== 判斷js變量的值和類型都相等才為true
!== 不全等，判斷js變量的值和類型有一個不等就為true
-->
<script> let a = 3;
let b = "3";
console.log(a == b);//true
// 全等 運算符 ===
console.log(a === b);//false
// 不全等 運算符 !==
console.log(a !== b);//true
// 三元(三目)運算符 布爾表達式?真:假
let str = a===b?"全等":"不全等";
console.log(str);//不全等
</script>
</body>
</html>
f. 流程控制語句
i. 條件語句 if else switch case default break
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>條件語句</title>
</head>
<body>
<!-- 條件語句JS的條件語句和Java語法基本一樣,但是對數(shù)據(jù)類型的真假判斷有些區(qū)別 JS中對各種數(shù)據(jù)類型作為布爾值的特點:(重點掌握) 1. string 空字符串""為false,其余都為true 2. number 數(shù)字 只有0為false,其余數(shù)字都為true 3. boolean 布爾類型 值只有 true和false 兩個
循環(huán)語句
object 對象類型 空對象null表示false,其它對象都是true 5. undefined 變量未賦值 為false 常用語法格式 if ... else if ... else switch case break default -->
<script>
//if ... else
//if(true){
//if(""){// string 只有空字符為假
//if(0){number 只有0為假
//if(false){//boolean false為假 true為真
//if(null){//object null為假
//if(undefined){//undefined永為假
if("undefined"){//undefined永為假
console.log("滿足條件");
}else{
console.log("不滿足條件");
}
//switch case break default
let k =1;
switch (k) {
case 1:
console.log("111");break;
case 2:
console.log("222");break;
default: console.log("其它情況"); }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循環(huán)語句</title>
</head>
<body>
<!-- 循環(huán)語句
while，do while，fori 和Java一樣；
forin
1.遍歷出數(shù)組中的索引和元素
2.遍歷出對象中的屬性和元素
forof
1.遍歷出數(shù)組中的元素
forin 與 forof 區(qū)別:
1.forin可以遍歷對象,forof不能遍歷對象
2.forin可以遍歷出數(shù)組中的索引,forof只能遍歷出數(shù)組中的元素 -->
<script>
//while 和Java一樣
let k=1;
while (k<3){
console.log(k++);
}
//do while 和Java一樣
k =1;
do{
console.log(k++);
}while (k<3)
//fori 和Java一樣
for(let i=0;i<3;i++){
console.log(i);
}
//forin 可以遍歷數(shù)組和對象
let arr = ["劉一","陳二","張三"];//JS數(shù)組使用中括號[]定義
let stu = {id:5,name:"李四",age:18};//JS對象使用大括號定義
//1.forin 遍歷出數(shù)組中的索引
for(let index in arr){
console.log(index);//數(shù)組的索引 0,1,2
console.log(arr[index]);//數(shù)組中的元素
}
//2.forin 遍歷出對象中的屬性名key
for(let k in stu){
console.log(k);//字符串屬性 id,name,age
console.log(stu[k]);//對象中的屬性值
}
//forof 可以遍歷數(shù)組
for(let e of arr){
console.log(e);//數(shù)組中的元素
}</script>
</body>
</html>
———————————————— 版權(quán)聲明：本文為CSDN博主「Regino」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/Regino/article/details/105321573
原文鏈接：https://blog.csdn.net/Regino/article/details/105321573
藍藍設(shè)計的小編 http://sillybuy.com