整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載
在當(dāng)今快速發(fā)展的數(shù)字環(huán)境中，實(shí)時(shí)協(xié)作已成為各種網(wǎng)絡(luò)應(yīng)用的重要特性。無論地理位置如何，能夠無縫地共同工作已經(jīng)改變了團(tuán)隊(duì)的協(xié)作和溝通方式。本文將展示如何使用React和Node構(gòu)建一個(gè)提供實(shí)時(shí)協(xié)作白板的Web應(yīng)用程序。
實(shí)時(shí)協(xié)作涉及多個(gè)用戶在共同任務(wù)或項(xiàng)目上進(jìn)行動(dòng)態(tài)和即時(shí)的互動(dòng)。與舊的協(xié)作方法不同，實(shí)時(shí)協(xié)作允許團(tuán)隊(duì)成員即時(shí)貢獻(xiàn)、編輯和查看變更。這種即時(shí)同步促進(jìn)了團(tuán)隊(duì)的凝聚力，并加快了決策過程，使其成為當(dāng)代工作流程中不可或缺的工具。引入實(shí)時(shí)協(xié)作功能帶來了許多好處：
沒有地理空間限制：實(shí)時(shí)協(xié)作使遠(yuǎn)程團(tuán)隊(duì)能夠像在同一地理位置一樣進(jìn)行合作。在遠(yuǎn)程工作成為常態(tài)的時(shí)代，這一功能尤為重要，使分布在全球各地的團(tuán)隊(duì)能夠無縫協(xié)作。
一起發(fā)散思維：實(shí)時(shí)協(xié)作激發(fā)團(tuán)隊(duì)集思廣益和分享創(chuàng)意，讓每個(gè)人共同應(yīng)對(duì)挑戰(zhàn)并創(chuàng)造新鮮解決方案。
效率提升：實(shí)時(shí)協(xié)作消除了溝通延遲，讓團(tuán)隊(duì)成員能夠即時(shí)參與和貢獻(xiàn)。這加快了問題解決速度并簡(jiǎn)化了工作流程。實(shí)時(shí)協(xié)作有不同的形式，例如：文檔協(xié)作、視頻會(huì)議、即時(shí)消息和聊天、項(xiàng)目管理工具、共同瀏覽、共享日歷、互動(dòng)演示、社交媒體協(xié)作和多人游戲。在本文中，我們將重點(diǎn)關(guān)注實(shí)時(shí)白板。實(shí)時(shí)白板是一種動(dòng)態(tài)數(shù)字工具，在在線環(huán)境中復(fù)制了傳統(tǒng)白板的功能。它為個(gè)人和團(tuán)隊(duì)提供了一個(gè)共享畫布，可以實(shí)時(shí)協(xié)作，允許創(chuàng)造、操作和可視化想法、概念和信息。
使用 React 和 Node.js ，我們將深入探討實(shí)時(shí)協(xié)作的激動(dòng)人心領(lǐng)域，通過使用 React 和 Node.js 構(gòu)建一個(gè)實(shí)時(shí)協(xié)作板。我們的項(xiàng)目將使用戶能夠?qū)崟r(shí)在共享的虛擬板上工作，即時(shí)更新內(nèi)容和更改，供所有參與者使用。我們將加入拖放功能，使用戶可以輕松地在板上移動(dòng)和排列元素，使協(xié)作更加直觀和吸引人。無論您想為遠(yuǎn)程團(tuán)隊(duì)構(gòu)建協(xié)作工具，教育平臺(tái)，項(xiàng)目管理應(yīng)用程序還是其他需要實(shí)時(shí)協(xié)作的項(xiàng)目，本文將為您提供開發(fā)交互式和高效實(shí)時(shí)應(yīng)用程序的基本技能和知識(shí)。因此，讓我們深入了解并發(fā)掘 React 和 Node.js. 的巨大潛力。為了為這個(gè)項(xiàng)目設(shè)置我們的React應(yīng)用程序，我們將執(zhí)行以下操作：
創(chuàng)建React應(yīng)用程序：導(dǎo)航到您想要的目錄，打開終端，并運(yùn)行以下命令來創(chuàng)建一個(gè)新的React應(yīng)用程序，使用 create-react-app ：
npx create-react-app collaborate_client進(jìn)入項(xiàng)目目錄：要進(jìn)入新創(chuàng)建的項(xiàng)目目錄；
cd collaborate_client在我們的項(xiàng)目初始化完成后，現(xiàn)在是時(shí)候安裝必要的依賴項(xiàng)，以支持我們的實(shí)時(shí)協(xié)作白板了。這些依賴項(xiàng)包括 socket.io 用于實(shí)時(shí)通信，以及 RoughJS 用于繪圖功能。
socket.io：安裝 socket.io 庫以建立WebSocket連接進(jìn)行實(shí)時(shí)數(shù)據(jù)交換；
npm install `socket.io`RoughJS：將rough.js庫集成到協(xié)作板上，以實(shí)現(xiàn)繪圖功能；
npm install --save roughjs‘Canvas’組件是我們實(shí)時(shí)協(xié)作白板的核心。Canvas是一個(gè)HTML元素，它作為一個(gè)空白畫布，我們可以使用JavaScript來繪制、繪畫和操作圖形元素。對(duì)于用戶界面，我們將創(chuàng)建一個(gè) WhiteBoard 組件，用戶可以在我們的 React 應(yīng)用程序中操作圖形元素。
在深入研究 RoughJS 和繪圖功能之前，讓我們先創(chuàng)建我們的 WhiteBoard 組件。在您的 React 項(xiàng)目中，導(dǎo)航到適當(dāng)?shù)哪夸洸?chuàng)建一個(gè)名為Whiteboard.js的新文件。在這個(gè)文件中，定義您的 WhiteBoard 組件：
import React, { useLayoutEffect } from "react";
const WhiteBoard = () => {
useLayoutEffect(() => {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Set canvas dimensions and initial styles
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.strokeStyle = "black";
ctx.lineWidth = 5;
// Implement drawing functionality here
}, []);
//implement event listeners for drawing interactions
return (
<>
<canvas
id="canvas"
width={window.innerWidth}
height={window.innerHeight}
></canvas>
</>
);
};
export default WhiteBoard;在上面的代碼中，我們導(dǎo)入了必要的依賴項(xiàng)，創(chuàng)建了一個(gè) WhiteBoard 功能組件，并利用了 React 提供的 useLayoutEffect 鉤子。在 useLayoutEffect 鉤子內(nèi)部，我們?cè)L問 canvas 元素及其2D渲染上下文，以配置其尺寸和初始樣式。
RoughJS 是一個(gè)輕量級(jí)的庫，可以讓我們?cè)诋嫴忌蟿?chuàng)建手繪、草圖般的圖形。通過集成 RoughJS ，我們可以將普通的白板變成一個(gè)創(chuàng)意的游樂場(chǎng)，線條、形狀和紋理以有機(jī)、手工制作的感覺栩栩如生。要將 WhiteBoard 組件與組件文件中的 RoughJS 進(jìn)行增強(qiáng)，請(qǐng)按照以下方式更新代碼：
import React, { useLayoutEffect } from "react";
import rough from "roughjs";
const WhiteBoard = () => {
useLayoutEffect(() => {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Initialize RoughJS instance
const roughCanvas = rough.canvas(canvas);
// Set canvas initial styles
ctx.strokeStyle = "black";
ctx.lineWidth = 5;
// Add event listeners for drawing interactions
// Implement drawing functionality here
}, []);
return (
<>
<canvas
id="canvas"
width={window.innerWidth}
height={window.innerHeight}
></canvas>
</>
);
};
export default WhiteBoard;在更新的代碼中，我們導(dǎo)入了 RoughJS 庫，并使用 rough.canvas() 方法創(chuàng)建了一個(gè)實(shí)例，將其與我們的 canvas 元素關(guān)聯(lián)起來。這個(gè)實(shí)例存儲(chǔ)在 roughCanvas 中，它將允許我們應(yīng)用 RoughJS 的基本圖形和效果，從而可以在白板上繪制。使用 RoughJS，我們可以繪制各種形狀、線條和陰影，無限可能。在本文中，我們將介紹如何在白板上繪制線條和矩形。您可以在此基礎(chǔ)上進(jìn)一步了解并添加其他RoughJS支持的形狀和功能。
使用 RoughJS 在我們的 canvas 上畫線，我們需要按照以下步驟進(jìn)行；
初始化繪圖狀態(tài)：首先設(shè)置必要的狀態(tài)以跟蹤繪圖交互：
const [drawing, setDrawing] = useState(false);
const [elements, setElements] = useState([]);處理鼠標(biāo)按下事件：當(dāng)用戶按下鼠標(biāo)按鈕開始繪圖時(shí)，我們將設(shè)置 drawing 狀態(tài)為true，并創(chuàng)建一個(gè)新元素。在 handleMouseDown 函數(shù)中，我們利用初始 clientX 和 clientY 值來標(biāo)記繪圖的起點(diǎn)。當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)，我們希望記錄點(diǎn)擊發(fā)生的位置，因?yàn)檫@將是他們即將繪制的線條的起點(diǎn)。
const handleMouseDown = (e) => {
setDrawing(true);
const { clientX, clientY } = e;
// Create a new line element with the same start and end points
const element = createElement(clientX, clientY, clientX, clientY);
setElements((prevState) => [...prevState, element]);
};處理鼠標(biāo)移動(dòng)事件：在鼠標(biāo)按鈕仍按下的情況下，我們不斷更新在 handleMouseDown 中創(chuàng)建的元素，以鼠標(biāo)當(dāng)前路徑為用戶在 canvas 上移動(dòng)鼠標(biāo)時(shí)的路徑
const handleMouseMove = (e) => {
if (!drawing) return;
const { clientX, clientY } = e;
const index = elements.length - 1;
const { x1, y1 } = elements[index];
// Update the end point of the element and create an element
const updatedElement = createElement(x1, y1, clientX, clientY);
const elementsCopy = [...elements];
elementsCopy[index] = updatedElement;
setElements(elementsCopy);
};創(chuàng)建我們的線：鼠標(biāo)坐標(biāo)將被發(fā)送到 createElement 函數(shù)，該函數(shù)利用 RoughJS 庫生成元素的手繪表示。然后，該函數(shù)返回坐標(biāo)和 RoughJS 元素，這些將被存儲(chǔ)在我們的 elements 狀態(tài)中。
const createElement = (x1, y1, x2, y2) => {
// Use the RoughJS generator to create a rough element (line or rectangle)
const roughElement = generator.line(x1, y1, x2, y2);
// Return an object representing the element, including its coordinates and RoughJS representation
return { x1, y1, x2, y2, roughElement };
};渲染我們的元素：使用我們的 useLayoutEffect 函數(shù)，在每次更新 elements 狀態(tài)時(shí)，我們渲染存儲(chǔ)在 state 中的元素。
useLayoutEffect(() => {
// 通過ID獲取畫布元素
const canvas = document.getElementById("canvas");
// 獲取畫布的2D渲染上下文
const ctx = canvas.getContext("2d");
// 創(chuàng)建與畫布元素相關(guān)聯(lián)的RoughJS畫布實(shí)例
const roughCanvas = rough.canvas(canvas);
// 設(shè)置畫布上下文的描邊樣式和線寬
ctx.strokeStyle = "black";
ctx.lineWidth = 5;
// 清除整個(gè)畫布以確保獲得干凈的繪圖表面
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 如果有保存的元素需要渲染
if (elements && elements.length > 0) {
// 遍歷每個(gè)保存的元素
elements.forEach(({ roughElement }) => {
// 使用RoughJS在畫布上繪制元素
roughCanvas.draw(roughElement);
});
}
}, [elements]); // 此效果依賴于 'elements' 狀態(tài)；當(dāng)其更改時(shí)重新運(yùn)行處理鼠標(biāo)松開事件：當(dāng)用戶釋放鼠標(biāo)按鈕時(shí)，我們將 drawing 狀態(tài)設(shè)置為false，停止繪圖過程；
const handleMouseUp = (e) => {
setDrawing(false);
};通過實(shí)施這些步驟，用戶可以通過點(diǎn)擊和拖動(dòng)鼠標(biāo)光標(biāo)在 canvas 上繪制線條。這是具有在我們的 canvas 上繪制線條功能的 WhiteBoard 組件。
import React, { useState, useLayoutEffect } from "react";
import rough from "roughjs/bundled/rough.esm.js";
// 創(chuàng)建一個(gè) RoughJS 生成器實(shí)例
const generator = rough.generator();
const WhiteBoard = () => {
// 狀態(tài)用于管理繪圖元素和交互
const [elements, setElements] = useState([]);
const [drawing, setDrawing] = useState(false);
// useLayoutEffect: 負(fù)責(zé)渲染繪圖元素
useLayoutEffect(() => {
// 通過ID獲取畫布元素
const canvas = document.getElementById("canvas");
// 獲取畫布的2D渲染上下文
const ctx = canvas.getContext("2d");
// 創(chuàng)建與畫布元素相關(guān)聯(lián)的 RoughJS 畫布實(shí)例
const roughCanvas = rough.canvas(canvas);
// 為畫布上下文設(shè)置描邊樣式和線寬
ctx.strokeStyle = "black";
ctx.lineWidth = 5;
// 清除整個(gè)畫布以確保一個(gè)干凈的繪制表面
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 如果有保存的元素需要渲染
if (elements && elements.length > 0) {
// 遍歷每個(gè)保存的元素
elements.forEach(({ roughElement }) => {
// 使用 RoughJS 在畫布上繪制元素
roughCanvas.draw(roughElement);
});
}
}, [elements]);
// 函數(shù)用于創(chuàng)建新的繪圖元素
const createElement = (x1, y1, x2, y2) => {
// 使用 RoughJS 生成器創(chuàng)建一個(gè)粗糙元素（線條或矩形）
const roughElement = generator.line(x1, y1, x2, y2);
// 返回一個(gè)表示元素的對(duì)象，包括其坐標(biāo)和 RoughJS 表示
return { x1, y1, x2, y2, roughElement };
};
// 鼠標(biāo)按下的事件處理程序
const handleMouseDown = (e) => {
setDrawing(true);
const { clientX, clientY } = e;
// 當(dāng)檢測(cè)到鼠標(biāo)按下時(shí)，創(chuàng)建一個(gè)新的繪圖元素
const element = createElement(clientX, clientY, clientX, clientY);
setElements((prevState) => [...prevState, element]);
};
// 鼠標(biāo)移動(dòng)的事件處理程序
const handleMouseMove = (e) => {
if (!drawing) return;
const { clientX, clientY } = e;
// 找到鼠標(biāo)按下時(shí)創(chuàng)建的最后一個(gè)元素的索引
const index = elements.length - 1;
const { x1, y1 } = elements[index];
// 更新元素的坐標(biāo)以進(jìn)行動(dòng)態(tài)繪制
const updatedElement = createElement(x1, y1, clientX, clientY);
const elementsCopy = [...elements];
elementsCopy[index] = updatedElement;
setElements(elementsCopy);
};
// 鼠標(biāo)抬起的事件處理程序
const handleMouseUp = () => {
setDrawing(false);
};
// 返回 JSX 以渲染協(xié)作畫布
return (
<>
<canvas
id="canvas"
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
onMouseMove={handleMouseMove}
width={window.innerWidth}
height={window.innerHeight}
></canvas>
</>
);
};
export default WhiteBoard;
讓我們測(cè)試一下我們的應(yīng)用程序：
讓我們來測(cè)試我們的應(yīng)用程序：上面的視頻顯示我們的代碼可以工作，并且可以使用鼠標(biāo)坐標(biāo)在我們的白板上繪制線條。
在我們的白板上繪制矩形的過程與繪制直線幾乎相同，只有在使用 createElement 函數(shù)時(shí)才會(huì)有所變化。在我們看到 createElement 函數(shù)的更新之前，讓我們先創(chuàng)建一個(gè)狀態(tài)來存儲(chǔ)用戶打算使用的當(dāng)前工具。
const [tool, setTool] = useState('line');默認(rèn)情況下，該工具設(shè)置為在線條上。現(xiàn)在我們可以更新我們的 createElement 函數(shù)以適應(yīng)矩形。
const createElement = (x1, y1, x2, y2) => {
let roughElement;
// 使用 RoughJS 生成器創(chuàng)建粗糙元素（線條或矩形）
if (tool === "line") {
roughElement = generator.line(x1, y1, x2, y2);
} else if (tool === "rect") {
roughElement = generator.rectangle(x1, y1, x2 - x1, y2 - y1);
}
// 返回一個(gè)表示元素的對(duì)象，包括其坐標(biāo)和 RoughJS 表示
return { x1, y1, x2, y2, roughElement };
};現(xiàn)在，我們需要添加按鈕，讓用戶可以選擇在我們的畫布上使用哪種工具。
return (
<>
<div className="d-flex col-md-2 justify-content-center gap-1">
<div className="d-flex gap-1 align-items-center">
<label htmlFor="line">Line</label>
<input
type="radio"
id="line"
name="tool"
value="line"
checked={tool === "line"}
className="mt-1"
onChange={(e) => setTool(e.target.value)}
/>
</div>
<div className="d-flex gap-1 align-items-center">
<label htmlFor="rect">Rectangle</label>
<input
type="radio"
name="tool"
id="rect"
checked={tool === "rect"}
value="rect"
className="mt-1"
onChange={(e) => setTool(e.target.value)}
/>
</div>
</div>
<canvas
id="canvas"
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
onMouseMove={handleMouseMove}
width={window.innerWidth}
height={window.innerHeight}
></canvas>
</>
);
現(xiàn)在，讓我們測(cè)試我們的應(yīng)用程序：
現(xiàn)在，讓我們來測(cè)試我們的應(yīng)用程序：從上面的視頻中，我們可以看到當(dāng)我們選擇矩形時(shí)，我們可以根據(jù)鼠標(biāo)坐標(biāo)在我們的白板上繪制矩形。
為了讓用戶能夠在畫布上拖放元素，我們將采取以下措施：
介紹選擇工具：我們將為用戶提供一個(gè)由單選按鈕指示的選擇工具。當(dāng)選中按鈕時(shí)，該工具將允許用戶與現(xiàn)有元素進(jìn)行交互和移動(dòng)。
<input
type="radio"
id="selection"
checked={tool === "selection"}
onChange={() => setTool("selection")}
/>
<label htmlFor="selection">Drag n Drop</label>檢測(cè)光標(biāo)懸停在元素上：為了確定光標(biāo)是否懸停在元素上，我們將實(shí)現(xiàn)一個(gè)名為 getElementAtPosition 的函數(shù)。該函數(shù)將在鼠標(biāo)按下時(shí)判斷光標(biāo)是否在任何現(xiàn)有 elements 的邊界內(nèi)。
const distance = (a, b) =>
Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
const getElementAtPosition = (x, y) => {
// 遍歷 'elements' 數(shù)組中的每個(gè)元素
return elements.find((element) => {
const { elementType, x1, y1, x2, y2 } = element;
// 根據(jù)元素類型（線條或矩形），執(zhí)行不同的檢查
if (elementType === "rect") {
// 檢查光標(biāo)位置（x, y）是否在矩形的邊界內(nèi)
const minX = Math.min(x1, x2);
const maxX = Math.max(x1, x2);
const minY = Math.min(y1, y2);
const maxY = Math.max(y1, y2);
return x >= minX && x <= maxX && y >= minY && y <= maxY;
} else {
// 使用數(shù)學(xué)偏移量檢查光標(biāo)是否足夠接近線條
const a = { x: x1, y: y1 };
const b = { x: x2, y: y2 };
const c = { x, y };
const offset = distance(a, b) - (distance(a, c) + distance(b, c));
return Math.abs(offset) < 1;
}
});
};
getElementAtPosition 函數(shù)以當(dāng)前光標(biāo)坐標(biāo)（x和y）作為參數(shù)。然后我們使用 .find() 方法遍歷元素?cái)?shù)組，該數(shù)組包含畫布上的所有繪圖元素。我們?yōu)閿?shù)組中的每個(gè)元素檢索 elementType 及其當(dāng)前坐標(biāo)。如果元素是一個(gè)矩形，我們計(jì)算最小和最大的 x 和 y 值來定義矩形的邊界。然后我們檢查光標(biāo)的 x 坐標(biāo)是否在矩形的 x 邊界范圍內(nèi)，并且光標(biāo)的 y 坐標(biāo)是否在矩形的 y 邊界范圍內(nèi)。如果兩個(gè)條件都為真，則光標(biāo)位于矩形上方，因此我們的函數(shù)返回true。如果元素是一條線，我們計(jì)算光標(biāo)坐標(biāo)與由元素的 x1 、 y1 、 x2 和 y2 屬性定義的線段之間的距離。然后我們將計(jì)算出的偏移量與一個(gè)小的閾值（在本例中為1）進(jìn)行比較。如果偏移量的絕對(duì)值小于閾值，則認(rèn)為光標(biāo)位于線段附近，因此我們的函數(shù)返回true。 如果光標(biāo)沒有定位在任何現(xiàn)有元素上，該函數(shù)將返回false。
存儲(chǔ)可拖動(dòng)的元素：當(dāng)用戶在選擇工具處于活動(dòng)狀態(tài)且光標(biāo)位于元素上方時(shí)按下鼠標(biāo)時(shí)，我們將把該元素及光標(biāo)與元素左上角之間的初始偏移量存儲(chǔ)在一個(gè)狀態(tài)中。
const handleMouseDown = (e) => {
const { clientX, clientY } = e;
// 檢查當(dāng)前工具是否為 "Selection"
if (tool === "selection") {
// 在點(diǎn)擊位置查找元素
const element = getElementAtPosition(clientX, clientY);
// 如果找到元素
if (element) {
// 計(jì)算相對(duì)于元素左上角的偏移
const offsetX = clientX - element.x1;
const offsetY = clientY - element.y1;
// 存儲(chǔ)選定的元素以及偏移量
setSelectedElement({ ...element, offsetX, offsetY });
// 將操作設(shè)置為 "moving"，表示拖動(dòng)正在進(jìn)行中
setAction("moving");
}
} else {
// 如果工具不是 "Selection"，執(zhí)行繪圖的代碼
// ...（用于繪制的代碼）
}
};
更新元素坐標(biāo)：在 handleMouseMove 函數(shù)中，當(dāng)用戶處于“移動(dòng)”狀態(tài)（即拖動(dòng)元素）時(shí)，我們根據(jù)鼠標(biāo)光標(biāo)的位置和初始偏移量計(jì)算元素的新位置。然后使用 updateElement 函數(shù)更新元素的坐標(biāo)。
const handleMouseMove = (e) => {
const { clientX, clientY } = e;
// 檢查當(dāng)前工具是否為 "Selection"
if (tool === "selection") {
// 根據(jù)鼠標(biāo)是否在元素上確定光標(biāo)樣式
e.target.style.cursor = getElementAtPosition(clientX, clientY, elements)
? "move"
: "default";
}
// 檢查當(dāng)前操作
if (action === "drawing") {
// ...（用于繪制的代碼）
} else if (action === "moving") {
// 如果處于 "moving" 操作中（拖動(dòng)元素）
const { id, x1, x2, y1, y2, elementType, offsetX, offsetY } =
selectedElement;
const width = x2 - x1;
const height = y2 - y1;
// 計(jì)算被拖動(dòng)元素的新位置
const newX = clientX - offsetX;
const newY = clientY - offsetY;
// 更新元素的坐標(biāo)以執(zhí)行拖動(dòng)操作
const updatedElement = createElement(
id,
newX,
newY,
newX + width,
newY + height,
elementType
);
const elementsCopy = [...elements];
elementsCopy[id] = updatedElement;
setElements(elementsCopy);
}
};
按照這些步驟，我們?yōu)槲覀兊漠嫴继砑恿藙?dòng)態(tài)拖放功能。用戶現(xiàn)在可以輕松地與現(xiàn)有元素進(jìn)行交互，將它們?cè)诋嫴忌弦苿?dòng)。
一個(gè)強(qiáng)大的協(xié)作體驗(yàn)需要一個(gè)能夠無縫處理用戶之間實(shí)時(shí)通信的服務(wù)器。為了設(shè)置我們的服務(wù)器，我們將執(zhí)行以下操作：
在開始服務(wù)器設(shè)置之前，我們必須確保我們的工具包中有必要的工具。使用以下命令在我們的服務(wù)器上安裝所需的依賴項(xiàng)：
npm install express cors socket.ioExpress ：一個(gè)受歡迎且靈活的Node.js框架，簡(jiǎn)化了構(gòu)建強(qiáng)大的Web應(yīng)用程序和API的過程。它提供了中間件和路由功能，非常適合創(chuàng)建服務(wù)器端應(yīng)用程序。
CORS （跨域資源共享）：一種中間件包，用于啟用跨域請(qǐng)求。在我們的情況下，我們將使用它來確保我們的客戶端應(yīng)用程序（運(yùn)行在不同的源上）可以與服務(wù)器進(jìn)行交互。
Socket.io ：一個(gè)實(shí)時(shí)通信庫，方便客戶端和服務(wù)器之間的雙向通信。它通過WebSocket連接工作，但在必要時(shí)也能優(yōu)雅地降級(jí)到其他傳輸機(jī)制。
開始服務(wù)器設(shè)置，創(chuàng)建一個(gè)名為server.js（或您選擇的文件名）的文件。
touch server.js然后我們將導(dǎo)入依賴項(xiàng)并為 Express 設(shè)置配置：
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = process.env.PORT || 5000;為了確保跨源通信的正常進(jìn)行，我們將配置CORS設(shè)置并啟動(dòng)服務(wù)器：
const { createServer } = require("http");
const { Server } = require("socket.io");
const httpServer = createServer();
const io = new Server(httpServer, {
cors: {
origin: "http://localhost:3000", // Specify your front-end origin
AccessControlAllowOrigin: "http://localhost:3000",
allowedHeaders: ["Access-Control-Allow-Origin"],
credentials: true,
},
});
httpServer.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});在這個(gè)設(shè)置中，我們創(chuàng)建了一個(gè) Express 應(yīng)用程序，并設(shè)置了 CORS 配置，以允許客戶端（在端口3000上運(yùn)行）和服務(wù)器之間的通信。 socket.io 庫已集成到 httpServer 實(shí)例中，實(shí)現(xiàn)實(shí)時(shí)通信。
為了實(shí)現(xiàn)用戶之間的實(shí)時(shí)協(xié)作，我們需要配置我們的客戶端（React應(yīng)用程序），通過更新我們的Canvas組件來連接到我們的服務(wù)器，代碼如下：
const [socket, setSocket] = useState(null);
// useEffect 鉤子用于建立和管理套接字連接
useEffect(() => {
// 定義服務(wù)器 URL
const server = "http://localhost:5000";
// 套接字連接的配置選項(xiàng)
const connectionOptions = {
"force new connection": true,
reconnectionAttempts: "Infinity",
timeout: 10000,
transports: ["websocket"],
};
// 建立新的套接字連接
const newSocket = io(server, connectionOptions);
setSocket(newSocket);
// 用于成功連接的事件監(jiān)聽器
newSocket.on("connect", () => {
console.log("已連接到 newSocket.io 服務(wù)器！");
});
// 用于從服務(wù)器接收服務(wù)元素的事件監(jiān)聽器
newSocket.on("servedElements", (elementsCopy) => {
setElements(elementsCopy.elements);
});
// 在組件卸載時(shí)清理套接字連接
return () => {
newSocket.disconnect();
};
}, []); // 空的依賴數(shù)組確保該效果僅在組件掛載時(shí)運(yùn)行一次
我們將利用 socket.io 的事件驅(qū)動(dòng)架構(gòu)，采用其 on 和 emit 機(jī)制，以促進(jìn)客戶端和服務(wù)器之間的無縫數(shù)據(jù)傳輸。在客戶端方面，我們將增強(qiáng) updateElement 功能，使其在每次元素更新時(shí)將數(shù)據(jù)傳輸?shù)椒?wù)器。
const updateElement = (id, x1, y1, x2, y2, tool) => {
const UpdatedElement = createElement(id, x1, y1, x2, y2, tool);
const elementsCopy = [...elements];
elementsCopy[id] = UpdatedElement;
setElements(elementsCopy);
socket.emit("elements", elementsCopy);
};隨后，我們的服務(wù)器將把接收到的數(shù)據(jù)發(fā)送給網(wǎng)絡(luò)中的其他連接客戶端。這確保了所有參與者之間的實(shí)時(shí)同步和協(xié)作。
let connections = [];
let elements;
socket.on("elements", (data) => {
elements = data;
connections.forEach((con) => {
if (con.id !== socket.id) {
con.emit("servedElements", { elements });
}
});
});當(dāng)數(shù)據(jù)傳遞給其他客戶端時(shí)，我們將更新接收到的狀態(tài)，從而導(dǎo)致重新渲染，從而在畫布上繪制更新后的元素
new socket.on("servedElements", (elementsCopy) => {
setElements(elementsCopy.elements);
});完成此操作后，每當(dāng)一個(gè)客戶端進(jìn)行更新時(shí)，連接到我們服務(wù)器的所有其他客戶端都會(huì)收到更新。現(xiàn)在，讓我們測(cè)試我們的應(yīng)用程序：
完成這個(gè)后，每當(dāng)一個(gè)客戶端進(jìn)行更新，所有連接到我們服務(wù)器的其他客戶端都會(huì)收到更新。現(xiàn)在，讓我們測(cè)試我們的應(yīng)用程序：從上面的視頻中，我們可以看到一旦一個(gè)客戶端開始繪圖，其他客戶端會(huì)收到更新并可以添加到繪圖中，從而實(shí)現(xiàn)所有客戶端在網(wǎng)絡(luò)上的實(shí)時(shí)協(xié)作。
https://github.com/King-AJr/collaborative_board
在本文中，我們踏上了一個(gè)令人興奮的旅程，創(chuàng)建了一個(gè)由 React.js 和 Node.js 強(qiáng)力驅(qū)動(dòng)的實(shí)時(shí)協(xié)作板，同時(shí)結(jié)合了 socket.io 和 RoughJS 這些強(qiáng)大的工具。我們還深入探討了無縫團(tuán)隊(duì)合作的領(lǐng)域，重點(diǎn)是在畫布上繪制線條和矩形，并實(shí)現(xiàn)拖放功能。此外，還可以將更多的形狀和功能集成到這個(gè)項(xiàng)目中。除了我們已經(jīng)探索過的內(nèi)容， RoughJS 提供了豐富的靈感，可以增強(qiáng)您的創(chuàng)作。憑借 React.js 、 Node.js 和在這里獲得的見解，您可以為您的項(xiàng)目注入實(shí)時(shí)協(xié)作的魔力。
由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。
、BEM 是塊（block）、元素（element）、修飾符（modifier）的簡(jiǎn)寫。
示例：
BEM示例
.行內(nèi)元素和塊級(jí)元素?img算什么?行內(nèi)元素怎么轉(zhuǎn)化為塊級(jí)元素?
行內(nèi)元素：和有他元素都在一行上，高度、行高及外邊距和內(nèi)邊距都不可改變，文字圖片的寬度不可改變，只能容納文本或者其他行內(nèi)元素；其中img是行元素塊級(jí)元素：總是在新行上開始，高度、行高及外邊距和內(nèi)邊距都可控制，可以容納內(nèi)斂元素和其他元素；
行元素轉(zhuǎn)換為塊級(jí)元素方式：display：block；
2.將多個(gè)元素設(shè)置為同一行?清除浮動(dòng)有幾種方式?
將多個(gè)元素設(shè)置為同一行：float，inline-block清除浮動(dòng)的方式：方法一：添加新的元素 、應(yīng)用 clear：both；
方法二：父級(jí)div定義 overflow: hidden；
方法三：利用:after和:before來在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動(dòng)的效果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
3.怪異盒模型box-sizing？彈性盒模型|盒布局?
在標(biāo)準(zhǔn)模式下的盒模型：盒子總寬度/高度=width/height+padding+border+margin在怪異模式下的盒模型下，盒子的總寬度和高度是包含內(nèi)邊距padding和邊框border寬度在內(nèi)的，盒子總寬度/高度=width/height + margin = 內(nèi)容區(qū)寬度/高度 + padding + border + margin;
box-sizing有兩個(gè)值一個(gè)是content-box，另一個(gè)是border-box。
當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用標(biāo)準(zhǔn)模式解析計(jì)算；
當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用怪異模式解析計(jì)算。
4.簡(jiǎn)述幾個(gè)css hack?
(1) 圖片間隙在div中插入圖片，圖片會(huì)將div下方撐大3px。hack1：將<div>與<img>寫在同一行。hack2：給<img>添加display：block；
dt li 中的圖片間隙。hack：給<img>添加display：block；
(2) 默認(rèn)高度，IE6以下版本中，部分塊元素，擁有默認(rèn)高度（低于18px）
hack1：給元素添加：font-size：0；
hack2：聲明：overflow：hidden；
表單行高不一致
hack1：給表單添加聲明：float：left；height： ；border： 0；
鼠標(biāo)指針
hack：若統(tǒng)一某一元素鼠標(biāo)指針為手型：cursor：pointer；
當(dāng)li內(nèi)的a轉(zhuǎn)化塊元素時(shí)，給a設(shè)置float，IE里面會(huì)出現(xiàn)階梯狀
hack1：給a加display：inline-block；
hack2：給li加float：left；
5.href和src區(qū)別? title和alt
href (Hypertext Reference)指定網(wǎng)絡(luò)資源的位置（超文本引用），從而在當(dāng)前元素或者當(dāng)前文檔和由當(dāng)前屬性定義的需要的錨點(diǎn)或資源之間定義一個(gè)鏈接或者關(guān)系，在 link和a 等元素上使用。src (Source)屬性僅僅嵌入當(dāng)前資源到當(dāng)前文檔元素定義的位置，是頁面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。
title：既是html標(biāo)簽，又是html屬性，title作為屬性時(shí)，用來為元素提供額外說明信息.
alt：alt是html標(biāo)簽的屬性，alt屬性則是用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用于網(wǎng)頁中圖片無法正常顯示時(shí)給用戶提供文字說明使其了解圖像信息.
6.transform？animation？區(qū)別?animation-duration
Transform:它和width、left一樣，定義了元素很多靜態(tài)樣式實(shí)現(xiàn)變形、旋轉(zhuǎn)、縮放、移位及透視等功能，通過一系列功能的組合我們可以實(shí)現(xiàn)很炫酷的靜態(tài)效果（非動(dòng)畫)。Animation:作用于元素本身而不是樣式屬性,屬于關(guān)鍵幀動(dòng)畫的范疇，它本身被用來替代一些純粹表現(xiàn)的javascript代碼而實(shí)現(xiàn)動(dòng)畫,可以通過keyframe顯式控制當(dāng)前幀的屬性值.
animation-duration：規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。
7.nth-of-type | nth-child?
舉例說明：<ul> <p>111</p> <span>222</span> <li>1</li> <li>2</li> <li>3</li> </ul>
li:nth-of-type(2):表示ul下的第二個(gè)li元素
li:nth-child(2)：表示既是li元素又是在ul下的第二個(gè)元素（找不到）。
建議一般使用nth-of-type，不容易出問題。
8. :before 和 ::before 區(qū)別?
單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素。 對(duì)于CSS2之前已有的偽元素，比如:before，單冒號(hào)和雙冒號(hào)的寫法::before作用是一樣的。
9.如何讓一個(gè)div 上下左右居中?
答：有三種方法。
方法1： .div1{ width:400px; height:400px; border:#CCC 1px solid; background:#99f; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); } <div class="div1"></div> 方法2： .div2{ width:400px; height:400px; border:#CCC 1px solid; background:#99f; position: absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } <div class="div2"></div> 方法3： .div3{ width:400px; height:400px; border:#CCC 1px solid; background:#9f9; position: absolute; left: 50%; top:50%; margin-left:-200px; margin-top: -200px; } <div class="div3"></div>10.css2.0 和css3.0
答：css3加強(qiáng)了css2的功能，增加了新的屬性和新的標(biāo)簽，并且刪除了一些冗余的標(biāo)簽，在布局方面減少了代碼量。以前比較復(fù)雜的布局現(xiàn)在一個(gè)屬性就搞定了（columns之類的屬性）。在效果方面加入了更多的效果(圓角，動(dòng)畫之類的)，還有在盒子模型和列表模塊都進(jìn)行了改進(jìn)。不過CSS3兼容性不好，只有一些高級(jí)版本的瀏覽器支持。
11.彈性盒子模型?flex|box區(qū)別?
(1) 引入彈性盒布局模型的目的是提供一種更加有效的方式來對(duì)一個(gè)容器中的條目進(jìn)行排列、對(duì)齊和分配空白空間。即便容器中條目的尺寸未知或是動(dòng)態(tài)變化的，彈性盒布局模型也能正常的工作。在該布局模型中，容器會(huì)根據(jù)布局的需要，調(diào)整其中包含的條目的尺寸和順序來最好地填充所有可用的空間。
當(dāng)容器的尺寸由于屏幕大小或窗口尺寸發(fā)生變化時(shí)，其中包含的條目也會(huì)被動(dòng)態(tài)地調(diào)整。比如當(dāng)容器尺寸變大時(shí)，其中包含的條目會(huì)被拉伸以占滿多余的空白空間；當(dāng)容器尺寸變小時(shí)，條目會(huì)被縮小以防止超出容器的范圍。彈性盒布局是與方向無關(guān)的。
在傳統(tǒng)的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；
而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作。
(2) flex和box的區(qū)別: display：box 是老規(guī)范，要兼顧古董機(jī)子就加上它； 父級(jí)元素有display:box;屬性之后。他的子元素里面加上box-flex屬性。可以讓子元素按照父元素的寬度進(jìn)行一定比例的分占空間。 flex是最新的，董機(jī)老機(jī)子不支持的；
父元素設(shè)置display:flex后，子元素寬度會(huì)隨父元素寬度的改變而改變，而display:box不會(huì)。 Android UC瀏覽器只支持display: box語法；而iOS UC瀏覽器則支持兩種方式。
12.viewport 所有屬性 ？
(1)width :設(shè)置layout viewport的寬度，為一個(gè)正整數(shù)，或字符串'device-width';(2)initial-scale:設(shè)置頁面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。
(3)minimum-scale:允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。
(4)maximum-scale:允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。
(5)height:設(shè)置layout viewport的高度，這個(gè)屬性對(duì)我們并不重要，很少使用
(6)user-scalable:是否允許用戶進(jìn)行縮放，值為‘no’或者‘yes’。
安卓中還支持：target-densitydpi，表示目標(biāo)設(shè)備的密度等級(jí)，作用是決定css中的1px 代表多少物理像素
(7)target-densitydpi:值可以為一個(gè)數(shù)值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個(gè)字符串中的一個(gè)
13.如何理解HTML結(jié)構(gòu)的語義化？
所謂標(biāo)簽語義化，就是指標(biāo)簽的含義。語義化的主要目的就是讓大家直觀的認(rèn)識(shí)標(biāo)簽(markup)和屬性(attribute)的用途和作用，對(duì)搜索引擎友好，有了良好的結(jié)構(gòu)和語義我們的網(wǎng)頁內(nèi)容便自然容易被搜索引擎抓取，這種符合搜索引擎收索規(guī)則的做法，網(wǎng)站的推廣便可以省下不少的功夫，而且可維護(hù)性更高，因?yàn)榻Y(jié)構(gòu)清晰,十分易于閱讀。這也是搜索引擎優(yōu)化SEO重要的一步。
14.偽類選擇器和偽元素？c3中引入的偽類選擇器有？c3中偽元素有?
偽類用一個(gè)冒號(hào)來表示，而偽元素則用兩個(gè)冒號(hào)來表示。偽類選擇器：
由于狀態(tài)是動(dòng)態(tài)變化的，所以一個(gè)元素達(dá)到一個(gè)特定狀態(tài)時(shí)，它可能得到一個(gè)偽類的樣式；當(dāng)狀態(tài)改變時(shí)，它又會(huì)失去這個(gè)樣式。
偽元素選擇器：
并不是針對(duì)真正的元素使用的選擇器，而是針對(duì)CSS中已經(jīng)定義好的偽元素使用的選擇器；
c3中引入的偽類選擇器：
:root()選擇器，根選擇器，匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。:root選擇器等同于<html>元素。
:not()選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個(gè)元素之外的所有元素。
:empty()選擇器表示的就是空。用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點(diǎn)內(nèi)容都沒有，哪怕是一個(gè)空格。
:target()選擇器來對(duì)頁面某個(gè)target元素(該元素的id被當(dāng)做頁面中的超鏈接來使用)指定樣式，該樣式只在用戶點(diǎn)擊了頁面中的超鏈接，并且跳轉(zhuǎn)到target元素后起作用。
:first-child()選擇器表示的是選擇父元素的第一個(gè)子元素的元素E。簡(jiǎn)單點(diǎn)理解就是選擇元素中的第一個(gè)子元素，記住是子元素，而不是后代元素。
:nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素。
:nth-last-child()從某父元素的最后一個(gè)子元素開始計(jì)算，來選擇特定的元素
:nth-of-type(n)選擇器和:nth-child(n)選擇器非常類似，不同的是它只計(jì)算父元素中指定的某種類型的子元素。
:only-child表示的是一個(gè)元素是它的父元素的唯一一個(gè)子元素。
:first-line為某個(gè)元素的第一行文字使用樣式。
:first-letter 為某個(gè)元素中的文字的首字母或第一個(gè)字使用樣式。
:before 在某個(gè)元素之前插入一些內(nèi)容。
:after 在某個(gè)元素之后插入一些內(nèi)容。
c3中偽元素：
::first-line選擇元素的第一行，比如說改變每個(gè)段落的第一行文本的樣式
::before和::after這兩個(gè)主要用來給元素的前面或后面插入內(nèi)容，這兩個(gè)常用"content"配合使用，見過最多的就是清除浮動(dòng)
::selection用來改變?yōu)g覽網(wǎng)頁選中文的默認(rèn)效果
15.html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。* 拖拽釋放(Drag and drop) API 語義化更好的內(nèi)容標(biāo)簽(header,nav,footer,aside,article,section) 音頻、視頻API(audio,video) 畫布(Canvas) API 地理(Geolocation) API 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除 表單控件，calendar、date、time、email、url、search 新的技術(shù)webworker, websocket, Geolocation
* 移除的元素 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
支持HTML5新標(biāo)簽：
* IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽， 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：
* 當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
* 如何區(qū)分： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
16.placeholder?如何在ie8上兼容placeholder這個(gè)效果
方法一：首先判斷瀏覽器是否支持placeholder屬性，如果不支持的話，就遍歷所有input輸入框，獲取placeholder屬性的值填充進(jìn)輸入框作為提示信息，同時(shí)字體設(shè)置成灰色。
當(dāng)輸入框獲得焦點(diǎn)( focus )同時(shí)輸入框內(nèi)文字等于設(shè)置的提示信息時(shí)，就把輸入框內(nèi)清空；
當(dāng)輸入框失去焦點(diǎn)( blur )同時(shí)輸入框內(nèi)文字為空時(shí)，再把獲取的placeholder屬性的值填充
進(jìn)輸入框作為提示信息，同時(shí)字體設(shè)置成灰色；
當(dāng)輸入框內(nèi)有輸入( keydown )時(shí)，此時(shí)輸入框內(nèi)的提示信息已經(jīng)由focus事件清除，此時(shí)只需要把字體再恢復(fù)成黑色即可
此方法的缺點(diǎn)是，不適用于加載完DOM時(shí)即獲得焦點(diǎn)的輸入框，因?yàn)樵谟脩舻慕嵌龋虞d完頁面時(shí)看到的獲得焦點(diǎn)的那個(gè)輸入框，它的提示文字是看不到的。
HTML：<input type="text" id="uname" name="uname" placeholder="請(qǐng)輸入用戶名"/>CSS：.phcolor{ color:#999;}JS$(function(){
//判斷瀏覽器是否支持placeholder屬性
supportPlaceholder='placeholder'in document.createElement('input'),
placeholder=function(input){
var text = input.attr('placeholder'),
defaultValue = input.defaultValue;
if(!defaultValue){
input.val(text).addClass("phcolor");
}
input.focus(function(){
if(input.val() == text){
$(this).val("");
}
});
input.blur(function(){
if(input.val() == ""){
$(this).val(text).addClass("phcolor");
}
});
//輸入的字符不為灰色
input.keydown(function(){
$(this).removeClass("phcolor");
});
};
//當(dāng)瀏覽器不支持placeholder屬性時(shí)，調(diào)用placeholder函數(shù)
if(!supportPlaceholder){
$('input').each(function(){
text = $(this).attr("placeholder");
if($(this).attr("type") == "text"){
placeholder($(this));
}
});
}});方法二：此方法的思路是做一張含有提示文字的圖片作為input輸入框的背景圖，初始時(shí)獲得焦點(diǎn)同時(shí)加載背景圖；
當(dāng)輸入框不為空時(shí)，去掉背景圖；
當(dāng)輸入框?yàn)榭諘r(shí)，加載背景圖；
當(dāng)用戶鍵盤按鍵且輸入框不為空( 輸入字符 )時(shí)，去掉背景圖；
當(dāng)用戶鍵盤按鍵且輸入框?yàn)榭? 刪除字符 )時(shí)，加載背景圖。
此方法的缺點(diǎn)是：需要為每一個(gè)提示文字不同的input制作背景圖片，并且設(shè)置input的樣式。
CSS：.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}JS$(function(){
//判斷瀏覽器是否支持placeholder屬性
supportPlaceholder='placeholder' in document.createElement('input');
if(!supportPlaceholder){
//初始狀態(tài)添加背景圖片
$("#uname").attr("class","phbg");
//初始狀態(tài)獲得焦點(diǎn)
$("#uname").focus;
function destyle(){
if($("#uname").val() != ""){
$("#uname").removeClass("phbg");
}else{
$("#uname").attr("class","phbg");
}
}
//當(dāng)輸入框?yàn)榭諘r(shí)，添加背景圖片；有值時(shí)去掉背景圖片
destyle();
$("#uname").keyup(function(){
//當(dāng)輸入框有按鍵輸入同時(shí)輸入框不為空時(shí)，去掉背景圖片；有按鍵輸入同時(shí)為空時(shí)（刪除字符），添加背景圖片
destyle();
});
$("#uname").keydown(function(){
//keydown事件可以在按鍵按下的第一時(shí)間去掉背景圖片
$("#uname").removeClass("phbg");
});
}});方法三：使用插件：Placeholders.js
17.常見兼容性問題？
* png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.也可以引用一段腳本處理。* 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一。
* IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。
* 浮動(dòng)ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下，如果對(duì)元素設(shè)置了浮動(dòng)，同時(shí)又設(shè)置了margin-left或margin-right，margin值會(huì)加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 這種情況之下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
* 漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。 首先，巧妙的使用“”這一標(biāo)記，將IE游覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識(shí)別。
css// .bb{ background-color:#f1ee18; .background-color:#00deff; +background-color:#a200ff; _background-color:#1e0bd1; }
* IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。
* IE下,event對(duì)象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對(duì)象有pageX,pageY屬性,但是沒有x,y屬性. * 解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。
* Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
* 超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
* 怪異模式問題：漏寫DTD聲明，F(xiàn)irefox仍然會(huì)按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁，但在IE中會(huì)觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫DTD聲明的好習(xí)慣。現(xiàn)在可以使用[html5]( http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`
* 上下margin重合問題
ie和ff都存在，相鄰的兩個(gè)div的margin-left和margin-right不會(huì)重合，但是margin-top和margin-bottom卻會(huì)發(fā)生重合。
解決方法，養(yǎng)成良好的代碼編寫習(xí)慣，同時(shí)采用margin-top或者同時(shí)采用margin-bottom。
* ie6對(duì)png圖片格式支持不好(引用一段腳本處理)
18.簡(jiǎn)述前端優(yōu)化的方式 舊的雅虎34條|h5新添加的方式
1、盡量減少HTTP請(qǐng)求次數(shù)2、減少DNS查找次數(shù)
3、避免跳轉(zhuǎn)
4、可緩存的AJAX
5、推遲加載內(nèi)容
6、預(yù)加載
7、減少DOM元素?cái)?shù)量
8、根據(jù)域名劃分頁面內(nèi)容
9、使iframe的數(shù)量最小
10、不要出現(xiàn)404錯(cuò)誤
11、使用內(nèi)容分發(fā)網(wǎng)絡(luò)
12、為文件頭指定Expires或Cache-Control 13、Gzip壓縮文件內(nèi)容
14、配置ETag
15、盡早刷新輸出緩沖
16、使用GET來完成AJAX請(qǐng)求
17、把樣式表置于頂部
18、避免使用CSS表達(dá)式（Expression）
19、使用外部JavaScript和CSS
20、削減JavaScript和CSS
21、用<link>代替@import
22、避免使用濾鏡
23、把腳本置于頁面底部
24、剔除重復(fù)腳本
19.jquery版本?1.11兼容?
Query 2.x系列和 jQuery 1.x擁有同樣的API，但是不再支持IE6、7、8。推薦使用 1.x version，除非你確定IE6、7、8用戶不再訪問網(wǎng)站。
jquery1.11屬于1.x 版本，其兼容IE6、7、8，所以也支持IE9.
20.塊級(jí)？行內(nèi)？空元素?
行內(nèi)元素：和有他元素都在一行上，高度、行高及外邊距和內(nèi)邊距都不可改變，文字圖片的寬度不可改變，只能容納文本或者其他行內(nèi)元素塊級(jí)元素：總是在新行上開始，高度、行高及外邊距和內(nèi)邊距都可控制，可以容納內(nèi)斂元素和其他元素；
空元素：在HTML元素中，沒有內(nèi)容的 HTML 元素被稱為空元素。空元素是在開始標(biāo)簽中關(guān)閉的。<br> 就是沒有關(guān)閉標(biāo)簽的空元素。
21.media屬性？screen？All？max-width?min-width?
media 屬性規(guī)定被鏈接文檔將顯示在什么設(shè)備上。media 屬性用于為不同的媒介類型規(guī)定不同的樣式。Screen計(jì)算機(jī)默認(rèn)屏幕，all適用于所有設(shè)備，max-width超過最大寬度就不執(zhí)行，min-width必須大于最小寬度才執(zhí)行。
22.meta標(biāo)簽的name屬性值？
name 屬性主要用于描述網(wǎng)頁，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。meta標(biāo)簽的name屬性語法格式是：＜meta name="參數(shù)" content="具體的參數(shù)值"＞。
其中name屬性主要有以下幾種參數(shù)：
A 、Keywords(關(guān)鍵字)說明：keywords用來告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么。
B 、description(網(wǎng)站內(nèi)容描述) 說明：description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容.
C 、robots(機(jī)器人向?qū)?說明：robots用來告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。
content的參數(shù)有all,none,index,noindex,follow,nofollow,默認(rèn)是all。
舉例：＜meta name="robots" content="none"＞D 、author(作者)
23.一般做手機(jī)頁面切圖有幾種方式?
響應(yīng)式布局，彈性布局display：flex，利用js編寫設(shè)定比例，給根元素設(shè)定像素，使用rem為單位。
24.px/em/rem有什么區(qū)別？ 為什么通常給font-size 設(shè)置的字體為62.5%
相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。1、em的值并不是固定的；
2、em會(huì)繼承父級(jí)元素的字體大小。使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。
rem是相對(duì)于瀏覽器進(jìn)行縮放的。1rem默認(rèn)是16px，在響應(yīng)式布局中，一個(gè)個(gè)除來轉(zhuǎn)換成rem，太麻煩，所以重置rem
body{font-size=62.5% } 此時(shí)1rem = 10px;若是12px則是1.2rem.
25.sass和scss有什么區(qū)別?sass一般怎么樣編譯的
文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名，而 SCSS 是以“.scss”后綴為擴(kuò)展名；語法書寫方式不同，Sass 是以嚴(yán)格的縮進(jìn)式語法規(guī)則來書寫，不帶大括號(hào)({})和分號(hào)(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。
26.如果對(duì)css進(jìn)行優(yōu)化如何處理？
壓縮打包，圖片整合，避免使用Hack，解決兼容問題，使用簡(jiǎn)寫，讓CSS能保證日后的維護(hù)。
27.如何對(duì)css文件進(jìn)行壓縮合并? gulp ?
使用gulp, 首頁全局安裝gulp。1、npm install --global gulp
2、其次局部安裝gulp。npm install gulp --save-dev
3、在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件
var gulp = require('gulp');
gulp.task('default', function() {
// 將你的默認(rèn)的任務(wù)代碼放在這});
4、運(yùn)行g(shù)ulp。（默認(rèn)的名為 default 的任務(wù)（task）將會(huì)被運(yùn)行，想要單獨(dú)執(zhí)行特定的任務(wù)（task），請(qǐng)輸入 gulp <task> <othertask>）
gulp
合并和壓縮JS、CSS文件
壓縮JS，CSS文件需要引用如下組件：
gulp-minify-css: 壓縮css
28.組件? 模塊化編程？
組件化編程: 將js css html包裝一起提供方法和效果；模塊化化: 將相同的功能抽取出來 存放在一個(gè)位置進(jìn)行編程
29.圖片和文字在同一行顯示?
1 在css中給div添加上“vertical-align:middle”屬性。2 分別把圖片和文字放入不同的div中，然后用“margin”屬性進(jìn)行定位，就可以使他們顯示在同一行。
3 把圖片設(shè)置為背景圖片。
30.禁止事件冒泡
event.stopPropagation()
31.禁止默認(rèn)事件
event.preventDefault()
32.a標(biāo)簽中 active hover link visited 正確的設(shè)置順序是什么?
a標(biāo)簽的link、visited、hover、active是有一定順序的a:link
a:visited
a:hover
a:active
33.a標(biāo)簽中 如何禁用href 跳轉(zhuǎn)頁面 或 定位鏈接
e.preventDefault();href="javascript：void(0);
34.手機(jī)端上 圖片長(zhǎng)時(shí)間點(diǎn)擊會(huì)選中圖片，如何處理?
onselect=function() {return false
}
35.video標(biāo)簽的幾個(gè)個(gè)屬性方法
src：視頻的URL poster：視頻封面，沒有播放時(shí)顯示的圖片 preload：預(yù)加載 autoplay：自動(dòng)播放 loop：循環(huán)播放 controls：瀏覽器自帶的控制條 width：視頻寬度 height：視頻高度
36.常見的視頻編碼格式有幾種?視頻格式有幾種?
視頻格式：MPEG-1、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式視頻編碼格式：H.264、MPEG-4、MPEG-2、WMA-HD以及VC-1
37.canvas在標(biāo)簽上設(shè)置寬高 和在style中設(shè)置寬高有什么區(qū)別？
canvas標(biāo)簽的width和height是畫布實(shí)際寬度和高度，繪制的圖形都是在這個(gè)上面。而style的width和height是canvas在瀏覽器中被渲染的高度和寬度。如果canvas的width和height沒指定或值不正確，就被設(shè)置成默認(rèn)值 。
38.border-image？box-sizing?
Border-image : 圖形化邊框Box-sizing : 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。
語法 ：box-sizing：content-box | border-box
Content-box : padding和border不被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度等于設(shè)置的width值和border、padding之和，即 ( Element width = width + border + padding) 此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型 .
Border-box : padding和border被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會(huì)改變對(duì)象的實(shí)際寬度，即 ( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型。
39.漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)
漸進(jìn)增強(qiáng) progressive enhancement：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。優(yōu)雅降級(jí) graceful degradation：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要。
降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。
“優(yōu)雅降級(jí)”觀點(diǎn)
“優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)、最完善的瀏覽器來設(shè)計(jì)網(wǎng)站。而將那些被認(rèn)為“過時(shí)”或有功能缺失的瀏覽器下的測(cè)試工作安排在開發(fā)周期的最后階段，并把測(cè)試對(duì)象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個(gè)版本。
在這種設(shè)計(jì)范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡(jiǎn)陋卻無妨 (poor, but passable)” 的瀏覽體驗(yàn)。你可以做一些小的調(diào)整來適應(yīng)某個(gè)特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點(diǎn)，因此除了修復(fù)較大的錯(cuò)誤之外，其它的差異將被直接忽略。
“漸進(jìn)增強(qiáng)”觀點(diǎn)
“漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。
內(nèi)容是我們建立網(wǎng)站的誘因。有的網(wǎng)站展示它，有的則收集它，有的尋求，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容。這使得“漸進(jìn)增強(qiáng)”成為一種更為合理的設(shè)計(jì)范例。這也是它立即被 Yahoo! 所采納并用以構(gòu)建其“分級(jí)式瀏覽器支持 (Graded Browser Support)”策略的原因所在。
那么問題來了。現(xiàn)在產(chǎn)品經(jīng)理看到IE6,7,8網(wǎng)頁效果相對(duì)高版本現(xiàn)代瀏覽器少了很多圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會(huì)如何說服他？
40.解釋在ie低版本下的怪異盒模型和c3的怪異盒模型 和 彈性盒模型?
IE當(dāng)padding+border的值小于width或者h(yuǎn)eight:盒模型的寬度=margin(左右)+width（width已經(jīng)包含了padding和border的值）
盒模型的高度=margin(上下)+height（height已經(jīng)包含了padding和border的值）
當(dāng)padding+border的值大于width或者h(yuǎn)eight:
盒模型的寬度=margin(左右)+padding(左右)+border(左右)
盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一個(gè)默認(rèn)行高 19px） 所以相當(dāng)于是padding+border和width或者h(yuǎn)eight比大小，誰大取誰。
以上幾種DOCTYPE都是標(biāo)準(zhǔn)的文檔類型，無論使用哪種模式完整定義DOCTYPE，都會(huì)觸發(fā)標(biāo)準(zhǔn)模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會(huì)觸發(fā)怪異模式（quirks 模式） CSS3box-sizing有兩個(gè)值一個(gè)是content-box，另一個(gè)是border-box。
當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用標(biāo)準(zhǔn)模式解析計(jì)算，也是默認(rèn)模式；
當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用怪異模式解析計(jì)算；
Css3彈性盒模型引入了新的盒子模型—彈性盒模型，該模型決定一個(gè)盒子在其他盒子中的分布方式以及如何處理可用的空間。使用該模型，可以很輕松的創(chuàng)建自適應(yīng)瀏覽器窗口的流動(dòng)布局或自適應(yīng)字體大小的彈性布局。
41.animation對(duì)應(yīng)的屬性
寫法：animation: name duration timing-function delay iteration-count direction;下面是對(duì)應(yīng)的屬性的介紹
animation-name 規(guī)定需要綁定到選擇器的 keyframe 名稱。
animation-duration 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。
animation-timing-function 規(guī)定動(dòng)畫的速度曲線。
animation-delay 規(guī)定在動(dòng)畫開始之前的延遲。
animation-iteration-count 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。
animation-direction 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。
42.transition?
css的transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫效果改變CSS的屬性值 注意區(qū)別transform，transform是進(jìn)行2D轉(zhuǎn)換的 如移動(dòng)，比例化，反過來，旋轉(zhuǎn)，和拉伸元素。
43.h5新特性？
1、繪畫的 canvas 元素2、用于媒介回放的 video 和 audio 元素
3、對(duì)本地離線存儲(chǔ)的更好的支持
4、新的特殊內(nèi)容元素，比如 article、footer、header、nav、section 5、新的表單控件，比如 calendar、date、time、email、url、search
44.canvas 如何繪制一個(gè)三角形|正方形
moveto 是移動(dòng)到某個(gè)坐標(biāo)， lineto 是從當(dāng)前坐標(biāo)連線到某個(gè)坐標(biāo)。這兩個(gè)函數(shù)加起來就是畫一條直線。 畫線要用“筆”，那么MoveTo()把筆要畫的起始位置固定了（x,y）然后要固定終止位置要用到LineTo函數(shù)確定終止位置（xend,yend）,這樣一條線就畫出來了。 每次與前面一個(gè)坐標(biāo)相連 。
stroke() 方法會(huì)實(shí)際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認(rèn)顏色是黑色。
<!DOCTYPE HTML5><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>畫布</title>
</head> <body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element. </canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");//三角形
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(50,50);
cxt.lineTo(10,50);
cxt.lineTo(10,10);
cxt.stroke();//正方形
var cxt2=c.getContext("2d");
cxt2.moveTo(60,10);
cxt2.lineTo(100,10);
cxt2.lineTo(100,50);
cxt2.lineTo(60,50);
cxt2.lineTo(60,10);
cxt2.stroke();
</script></body></html>45.所用bootstap版本？
3.0
46.css清除浮動(dòng)的幾種方式？
1、父級(jí)div定義 height2、結(jié)尾處加空div標(biāo)簽 clear:both
3、父級(jí)div定義 偽類:after 和 zoom
4、父級(jí)div定義 overflow:hidden
5、父級(jí)div定義 overflow:auto
6、父級(jí)div 也一起浮動(dòng)
7、父級(jí)div定義 display:table
47.為什么要初始化CSS樣式。
因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。
48.CSS3有哪些新特性？
CSS3實(shí)現(xiàn)圓角（border-radius），陰影（box-shadow），對(duì)文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋轉(zhuǎn),縮放,定位,傾斜增加了更多的CSS選擇器 多背景 rgba 在CSS3中唯一引入的偽元素是::selection.媒體查詢，多欄布局 border-image
49.解釋下 CSS sprites，以及你要如何在頁面或網(wǎng)站中使用它。
CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請(qǐng)求的開銷，因?yàn)檎?qǐng)求耗時(shí)比較長(zhǎng)；請(qǐng)求雖然可以并發(fā)，但是也有限制，一般瀏覽器都是6個(gè)。對(duì)于未來而言，就不需要這樣做了，因?yàn)橛辛薫http2`。
50.什么是 FOUC（無樣式內(nèi)容閃爍）？你如何來避免 FOUC？
FOUC - Flash Of Unstyled Content 文檔樣式閃爍<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成這個(gè)問題的罪魁禍?zhǔn)住E會(huì)先加載整個(gè)HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，因此，在頁面DOM加載完成到CSS導(dǎo)入完成中間會(huì)有一段時(shí)間頁面上的內(nèi)容是沒有樣式的，這段時(shí)間的長(zhǎng)短跟網(wǎng)速，電腦速度都有關(guān)系。
解決方法：只要在<head>之間加入一個(gè)<link>或者<script>元素就可以了。
51.a點(diǎn)擊出現(xiàn)框，解決方法:
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
