整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          javaWeb學(xué)習(xí)第一步

          、基本概念

          1.1 web開發(fā)

          • web,網(wǎng)頁(yè)的意思,www.baidu.com
          • 靜態(tài)webhtml,css提供給所有人看的數(shù)據(jù)始終不會(huì)發(fā)生變化!
          • 動(dòng)態(tài)web淘寶,幾乎是所有的網(wǎng)站提供給所有人看的數(shù)據(jù)始終會(huì)發(fā)生變化,每個(gè)人在不同的時(shí)間,不同的地點(diǎn)看到的信息各不相同!技術(shù)棧:Servlet/Jsp,ASP,PHP

          在java中,動(dòng)態(tài)web資源開發(fā)的技術(shù)統(tǒng)稱為JavaWeb;

          1.2 web應(yīng)用程序

          web應(yīng)用程序:可以提供瀏覽器訪問的程序。

          • a.html、b.html 多個(gè)web資源,這些web資源可以被外界資源,對(duì)外界提供服務(wù);
          • 你們能訪問道德任何一個(gè)頁(yè)面或者資源,都存在于這個(gè)世界的某一個(gè)角落的計(jì)算上。
          • URL
          • 這個(gè)統(tǒng)一的web資源會(huì)被放在同一個(gè)文件夾下,web應(yīng)用程序-----Tomcat:服務(wù)器
          • 一個(gè)web應(yīng)用由多部份組成(靜態(tài)web,動(dòng)態(tài)web)html、css、jsjsp、servletjava程序jar包配置文件(Properties)

          web應(yīng)用程序編寫完畢后,若想提供給外界訪問:需要一個(gè)服務(wù)器統(tǒng)一來(lái)管理。

          1.3 靜態(tài)web

          • .htm、.html,這些都是網(wǎng)頁(yè)的后綴,如果服務(wù)器上一直存在這些東西,我們就可以直接讀取。
          • 靜態(tài)web存在的缺點(diǎn)Web頁(yè)面無(wú)法動(dòng)態(tài)更新,所有用戶看到的都是同一個(gè)頁(yè)面輪播圖,點(diǎn)擊特效:偽動(dòng)態(tài)JavaScript【實(shí)際開發(fā)中,它用的最多】VBScript它無(wú)法和數(shù)據(jù)庫(kù)交互(數(shù)據(jù)無(wú)法持久化,用戶無(wú)法交互)

          1.4 動(dòng)態(tài)web

          頁(yè)面會(huì)動(dòng)態(tài)展示:“Web的頁(yè)面展示的效果因人而異”;

          缺點(diǎn)

          • 假如服務(wù)器的動(dòng)態(tài)web資源出現(xiàn)了錯(cuò)誤,我們需要重新編寫我們的后臺(tái)程序,重新發(fā)布;停機(jī)維護(hù)

          優(yōu)點(diǎn) - Web頁(yè)面可以動(dòng)態(tài)更新,所有用戶看到的不是同一個(gè)頁(yè)面 - 它可以和數(shù)據(jù)庫(kù)交互(數(shù)據(jù)持久化:注、商品信息、用戶信息)

          2、web服務(wù)器

          2.1技術(shù)講解

          ASP

          • 微軟:國(guó)內(nèi)最早流行的就是ASP;
          • 在HTML中嵌入了VB的腳本,ASP + COM
          • 在ASP開發(fā)中,基本一個(gè)頁(yè)面
          • c#
          • html
          • <h1> <h1><h1> <h1> <h1> <% system.out.println("hello") %> <h1>

          PHP:

          • PHP開發(fā)速度快,功能很強(qiáng)大,跨平臺(tái),代碼很簡(jiǎn)單
          • 無(wú)法承載大訪問量的情況(局限性)

          JSP/Servlet: B/S:瀏覽器和服務(wù)器 C/S:客戶端和服務(wù)器

          • sun公司主推的B/S架構(gòu)
          • 基于java語(yǔ)言的(所有的大公司,或者一些開源的組件,都是用Java寫的)
          • 語(yǔ)法像ASP,ASP---->JSP,加強(qiáng)市場(chǎng)的強(qiáng)度;

          2.2、web服務(wù)器

          服務(wù)器是一種被動(dòng)的操作,用來(lái)處理用戶的一些請(qǐng)求和給用戶一些響應(yīng)信息; IIS 互聯(lián)網(wǎng)信息服務(wù)(英語(yǔ):Internet Information Services,簡(jiǎn)稱IIS),是由微軟公司提供的基于運(yùn)行Microsoft Windows的互聯(lián)網(wǎng)基本服務(wù)。最初是WindowsNT版本的可選包,隨后自帶在Windows2000、Windows XP Professional和Windows Server 2003一起發(fā)布,但在普遍使用的Windows XP Home版本上并沒有IIS。

          Tomcat Tomcat是Apache 軟件基金會(huì)(Apache Software Foundation)的Jakarta 項(xiàng)目中的一個(gè)核心項(xiàng)目,最新的Servlet 和JSP 規(guī)范總是能在Tomcat 中得到體現(xiàn),Tomcat 5支持最新的Servlet 2.4 和JSP 2.0 規(guī)范。因?yàn)門omcat 技術(shù)先進(jìn)、性能穩(wěn)定,而且免費(fèi),因而深受Java 愛好者的喜愛并得到了部分軟件開發(fā)商的認(rèn)可,成為比較流行的Web 應(yīng)用服務(wù)器。 Tomcat 服務(wù)器是一個(gè)免費(fèi)的開放源代碼的Web 應(yīng)用服務(wù)器,屬于輕量級(jí)應(yīng)用服務(wù)器,在中小型系統(tǒng)和并發(fā)訪問用戶不是很多的場(chǎng)合下被普遍使用,是開發(fā)和調(diào)試JSP 程序的首選。對(duì)于一個(gè)初學(xué)者來(lái)說(shuō),是最佳的選擇。 Tomcat 實(shí)際上運(yùn)行JSP 頁(yè)面和Servlet。另外,Tomcat和IIS等Web服務(wù)器一樣,具有處理HTML頁(yè)面的功能,另外它還是一個(gè)Servlet和JSP容器,Tomcat最新版本為10.0.5。

          3.Tomcat

          3.1 安裝tomcat

          官網(wǎng):http://tomcat.apache.org/


          3.2 tomcat的啟動(dòng)和配置

          文件夾作用:

          訪問測(cè)試:http://localhost:8080/ 可能遇到的問題:

          1. Java環(huán)境變量沒有配置
          2. 閃退問題:需要配置兼容性
          3. 亂碼問題:配置文件中設(shè)置

          可以修改 conf/logging.properties 中的 java.util.logging.ConsoleHandler.encoding = GBK 解決亂碼問題

          3.3 配置

          可以配置啟動(dòng)的端口號(hào)

          • tomcat的默認(rèn)端口號(hào)為:8080
          • mysql:3306
          • http:80
          • https:443
          • html
          • <Connector port="8081" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />

          可以配置主機(jī)的名稱

          • 默認(rèn)的主機(jī)名為:localhost->127.0.0.1
          • 默認(rèn)網(wǎng)站應(yīng)用存放的位置為:webapps
          • html
          • <Host name="www.qinjiang.com" appBase="webapps" unpackWARs="true" autoDeploy="true">

          3.4 高難度面試題:請(qǐng)你談?wù)劸W(wǎng)站是如何進(jìn)行訪問的!

          1. 輸入一個(gè)域名;回車
          2. 檢查本機(jī)的C:\Windows\System32\drivers\etc\hosts配置文件下有沒有這個(gè)域名映射;
            1. 有:直接返回對(duì)應(yīng)的ip地址,這個(gè)地址中,有我們需要訪問的web程序,可以直接訪問
            2. html
            3. 127.0.0.1 www.qinjiang.com
            4. 沒有:去DNS服務(wù)器找,找到的話就返回,找不到就返回找不到;

          3.5 、發(fā)布一個(gè)web網(wǎng)站

          • 將自己寫的網(wǎng)站,放到服務(wù)器(Tomcat)中指定的web應(yīng)用的文件夾(webapps)下,就可以訪問了

          網(wǎng)站應(yīng)該有的結(jié)構(gòu):

          html--webapps :Tomcat服務(wù)器的web目錄
          	-ROOT
          	-kuangstudy :網(wǎng)站的目錄名
          		- WEB-INF
          			-classes : java程序
          			-lib:web應(yīng)用所依賴的jar包
          			-web.xml :網(wǎng)站配置文件
          		- index.html 默認(rèn)的首頁(yè)
          		- static 
                      -css
                      	-style.css
                      -js
                      -img
                   -.....
          

          HTTP協(xié)議:面試 Maven:構(gòu)建工具

          • Maven安裝包

          Servlet入門

          • HelloWorld!
          • Servlet配置 ·原理

          4.Http

          4.1、什么是HTTP

          (超文本傳輸協(xié)議)是一個(gè)簡(jiǎn)單的請(qǐng)求-響應(yīng)協(xié)議,它通常運(yùn)行在TCP之上。

          文本:html,字符串,…
          超文本:圖片,音樂,視頻,定位,地圖.……
          端口:80
          Https:安全的
          

          4.2、兩個(gè)時(shí)代

          http1.0
          	HTTP/1.0:客戶端可以與web服務(wù)器連接后,只能獲得一個(gè)web資源,斷開連接
          http1.1
          	HTTP/1.1:客戶端可以與web服務(wù)器連接后,可以獲得多個(gè)web資源。
          

          4.3、Http請(qǐng)求

          • 客戶端–發(fā)請(qǐng)求(Request)–服務(wù)器
          • 請(qǐng)求行、請(qǐng)求頭、請(qǐng)求體(其中請(qǐng)求行和請(qǐng)求體之間有空格來(lái)區(qū)分),如: Post /from/login?xxx HTTP1.1 Host:www.baidu.com Connection:keep-alive name = swz & age =37

          4.4、Http響應(yīng)

          • 服務(wù)器–響應(yīng)…….客戶端
          • 響應(yīng)行、響應(yīng)頭、響應(yīng)體(響應(yīng)行和響應(yīng)體之間有空格),如: 200 OK HTTP1.1 Data:xxxx Content-length:360 < h1 > hello,world!< h1 >

          4.5 Http1.0和Http1.1的區(qū)別

          1、前者是短連接,后者是長(zhǎng)連接 當(dāng)請(qǐng)求一次連接的時(shí)候,如果是短連接的話,對(duì)于頁(yè)面中的其他資源,如:js、image都會(huì)建立一次新的連接,而長(zhǎng)連接可以共用一個(gè)。 2、后者增加了很多新的狀態(tài)碼,如206:部分請(qǐng)求 3、后者對(duì)于網(wǎng)絡(luò)資源的處理更加優(yōu)化,如允許部分請(qǐng)求 4、后者在請(qǐng)求頭中增加了Host字段,之前認(rèn)為是一臺(tái)主機(jī)一個(gè)IP,而因?yàn)樘摂M機(jī)等的出現(xiàn),多個(gè)主機(jī)公用一個(gè)ip

          4.6 http常見的狀態(tài)碼

          100:Continue
          200:OK、206:部分請(qǐng)求
          301:永久重定向、302:臨時(shí)重定向
          永久:代表訪問某個(gè)a,會(huì)自動(dòng)跳轉(zhuǎn)到b,url為b;臨時(shí):訪問a,url不變,但是內(nèi)容渲染的是b
          400:客戶端語(yǔ)法錯(cuò)誤、403:服務(wù)器拒絕提供服務(wù)(不為請(qǐng)求提供服務(wù),或您沒有連接到此站點(diǎn)的權(quán)限時(shí))、404:頁(yè)面沒有找到
          500:服務(wù)器內(nèi)部執(zhí)行錯(cuò)誤,無(wú)法完成請(qǐng)求、503:服務(wù)器正在維護(hù)
          

          原文鏈接:https://blog.csdn.net/qq_37534947/article/details/120399336

          5、Maven

          我為什么要學(xué)習(xí)這個(gè)技術(shù)?

          • 在Javaweb開發(fā)中,需要使用大量的jar包,我們手動(dòng)去導(dǎo)入;
          • 如何能夠讓一個(gè)東西自動(dòng)幫我導(dǎo)入和配置這個(gè)jar包。

          由此,Maven誕生了!

          5.1 Maven項(xiàng)目架構(gòu)管理工具

          我們目前用來(lái)就是方便導(dǎo)入jar包的! Maven的核心思想:約定大于配置

          • 有約束,不要去違反。

          Maven會(huì)規(guī)定好你該如何去編寫我們Java代碼,必須要按照這個(gè)規(guī)范來(lái)

          5.2下載安裝Maven

          官網(wǎng):https://maven.apache.org/

          下載完成后,解壓即可;

          5.3配置環(huán)境變量

          在我們的系統(tǒng)環(huán)境變量中配置如下配置:

          M2_HOME :  maven目錄下的bin目錄 #這個(gè)我自己測(cè)試需要配置成maven目錄,不然會(huì)報(bào)錯(cuò)
          MAVEN_HOME : maven的目錄
          在系統(tǒng)的path中配置:%MAVEN_HOME%\bin
          

          測(cè)試Maven是否安裝成功,保證必須配置完畢!

          5.4阿里云鏡像

          • 鏡像:mirrors
          • 作用:加速我們的下載
          • 國(guó)內(nèi)建議使用阿里云的鏡像
          • python
          • <mirror> <id>nexus-aliyun</id> <mirrorOf>*,!jeecg,!jeecg-snapshots</mirrorOf> <name>Nexus aliyun</name> <url>http://maven.aliyun.com/nexus/content/groups/public</url> </mirror>
          • 位置:D:\apache-maven-3.3.3-bin\apache-maven-3.3.3\conf\settings.xml

          5.5 本地倉(cāng)庫(kù)

          在本地的倉(cāng)庫(kù),遠(yuǎn)程倉(cāng)庫(kù); 建立一個(gè)本地倉(cāng)庫(kù):localRepository

          python<localRepository>D:\ttRepository</localRepository>
          
          

          5.6 在IDEA中使用maven

          1. 啟動(dòng)IDEA

          2 .創(chuàng)建一個(gè)maven項(xiàng)目




          3.等項(xiàng)目初始化完畢:等右下角跑完,再點(diǎn)擊enable auth-import


          4 . 觀察maven倉(cāng)庫(kù)多了些什么東西?

          5. IDEA中的Maven設(shè)置


          6.到這里,Maven在IDEA中的配置和使用就ok了

          5.7 創(chuàng)建一個(gè)普通的maven項(xiàng)目

          注:我們要在5.6的項(xiàng)目中創(chuàng)建java、resource等文件夾。

          5.8 標(biāo)記文件夾功能

          1.第一種


          2.第二種



          5.9 在idea中配置tomcat




          • 解決警告問題?
          • 為什么會(huì)有這個(gè)問題,我們?cè)L問一個(gè)網(wǎng)站,需要指定一個(gè)文件夾名字。

          5.10 pom文件

          • pom.xml是Maven的核心配置文件



          5.11之后遇到的問題

          • maven由于他的約定大于配置,我們之后可能遇到我們寫的配置文件,無(wú)法導(dǎo)出或者生效的問題,解決方案:

          5.12 idea操作


          5.13 maven倉(cāng)庫(kù)導(dǎo)入包

          地址:https://mvnrepository.com/



          作用域一般可以刪掉

          家好,我是皮皮。

          前言

          對(duì)于前端來(lái)說(shuō),HTML 都是最基礎(chǔ)的內(nèi)容。

          今天,我們來(lái)了解一下 HTML 和網(wǎng)頁(yè)有什么關(guān)系,以及與 DOM 有什么不同。通過(guò)本講內(nèi)容,你將掌握瀏覽器是怎么處理 HTML 內(nèi)容的,以及在這個(gè)過(guò)程中我們可以進(jìn)行怎樣的處理來(lái)提升網(wǎng)頁(yè)的性能,從而提升用戶的體驗(yàn)。


          一、瀏覽器頁(yè)面加載過(guò)程

          不知你是否有過(guò)這樣的體驗(yàn):當(dāng)打開某個(gè)瀏覽器的時(shí)候,發(fā)現(xiàn)一直在轉(zhuǎn)圈,或者等了好長(zhǎng)時(shí)間才打開頁(yè)面……

          此時(shí)的你,會(huì)選擇關(guān)掉頁(yè)面還是耐心等待呢?

          這一現(xiàn)象,除了網(wǎng)絡(luò)不穩(wěn)定、網(wǎng)速過(guò)慢等原因,大多數(shù)都是由于頁(yè)面設(shè)計(jì)不合理導(dǎo)致加載時(shí)間過(guò)長(zhǎng)導(dǎo)致的。

          我們都知道,頁(yè)面是用 HTML/CSS/JavaScript 來(lái)編寫的。

          • HTML 的職責(zé)在于告知瀏覽器如何組織頁(yè)面,以及搭建頁(yè)面的基本結(jié)構(gòu);
          • CSS 用來(lái)裝飾 HTML,讓我們的頁(yè)面更好看;
          • JavaScript 則可以豐富頁(yè)面功能,使靜態(tài)頁(yè)面動(dòng)起來(lái)。

          HTML由一系列的元素組成,通常稱為HTML元素。HTML 元素通常被用來(lái)定義一個(gè)網(wǎng)頁(yè)結(jié)構(gòu),基本上所有網(wǎng)頁(yè)都是這樣的 HTML 結(jié)構(gòu):

          <html>
              <head></head>
              <body></body>
          </html>

          其中:

          • html元素是頁(yè)面的根元素,它描述完整的網(wǎng)頁(yè);
          • head元素包含了我們想包含在 HTML 頁(yè)面中,但不希望顯示在網(wǎng)頁(yè)里的內(nèi)容;
          • body元素包含了我們?cè)L問頁(yè)面時(shí)所有顯示在頁(yè)面上的內(nèi)容,是用戶最終能看到的內(nèi)容;


          HTML 中的元素特別多,其中還包括可用于 Web Components 的自定義元素。

          前面我們提到頁(yè)面 HTML 結(jié)構(gòu)不合理可能會(huì)導(dǎo)致頁(yè)面響應(yīng)慢,這個(gè)過(guò)程很多時(shí)候體現(xiàn)在<script><style>元素的設(shè)計(jì)上,它們會(huì)影響頁(yè)面加載過(guò)程中對(duì) Javascript 和 CSS 代碼的處理。

          因此,如果想要提升頁(yè)面的加載速度,就需要了解瀏覽器頁(yè)面的加載過(guò)程是怎樣的,從根本上來(lái)解決問題。

          瀏覽器在加載頁(yè)面的時(shí)候會(huì)用到 GUI 渲染線程和 JavaScript 引擎線程(更詳細(xì)的瀏覽器加載和渲染機(jī)制將在第 7 講中介紹)。其中,GUI 渲染線程負(fù)責(zé)渲染瀏覽器界面 HTML 元素,JavaScript 引擎線程主要負(fù)責(zé)處理 JavaScript 腳本程序。

          由于 JavaScript 在執(zhí)行過(guò)程中還可能會(huì)改動(dòng)界面結(jié)構(gòu)和樣式,因此它們之間被設(shè)計(jì)為互斥的關(guān)系。也就是說(shuō),當(dāng) JavaScript 引擎執(zhí)行時(shí),GUI 線程會(huì)被掛起。

          以網(wǎng)易云課堂官網(wǎng)為例,我們來(lái)看看網(wǎng)頁(yè)加載流程。

          (1)當(dāng)我們打開官網(wǎng)的時(shí)候,瀏覽器會(huì)從服務(wù)器中獲取到 HTML 內(nèi)容。

          (2)瀏覽器獲取到 HTML 內(nèi)容后,就開始從上到下解析 HTML 的元素。

          (3)<head>元素內(nèi)容會(huì)先被解析,此時(shí)瀏覽器還沒開始渲染頁(yè)面。

          我們看到<head>元素里有用于描述頁(yè)面元數(shù)據(jù)的<meta>元素,還有一些<link>元素涉及外部資源(如圖片、CSS 樣式等),此時(shí)瀏覽器會(huì)去獲取這些外部資源。除此之外,我們還能看到<head>元素中還包含著不少的<script>元素,這些<script>元素通過(guò)src屬性指向外部資源。

          (4)當(dāng)瀏覽器解析到這里時(shí)(步驟 3),會(huì)暫停解析并下載 JavaScript 腳本。

          (5)當(dāng) JavaScript 腳本下載完成后,瀏覽器的控制權(quán)轉(zhuǎn)交給 JavaScript 引擎。當(dāng)腳本執(zhí)行完成后,控制權(quán)會(huì)交回給渲染引擎,渲染引擎繼續(xù)往下解析 HTML 頁(yè)面。

          (6)此時(shí)<body>元素內(nèi)容開始被解析,瀏覽器開始渲染頁(yè)面。

          在這個(gè)過(guò)程中,我們看到<head>中放置的<script>元素會(huì)阻塞頁(yè)面的渲染過(guò)程:把 JavaScript 放在<head>里,意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后,才能開始渲染頁(yè)面。

          到這里,我們就明白了:如果外部腳本加載時(shí)間很長(zhǎng)(比如一直無(wú)法完成下載),就會(huì)造成網(wǎng)頁(yè)長(zhǎng)時(shí)間失去響應(yīng),瀏覽器就會(huì)呈現(xiàn)“假死”狀態(tài),用戶體驗(yàn)會(huì)變得很糟糕。

          因此,對(duì)于對(duì)性能要求較高、需要快速將內(nèi)容呈現(xiàn)給用戶的網(wǎng)頁(yè),常常會(huì)將 JavaScript 腳本放在<body>的最后面。這樣可以避免資源阻塞,頁(yè)面得以迅速展示。我們還可以使用defer/async/preload等屬性來(lái)標(biāo)記<script>標(biāo)簽,來(lái)控制 JavaScript 的加載順序。

          百度首頁(yè)

          三、DOM 解析

          對(duì)于百度這樣的搜索引擎來(lái)說(shuō),必須要在最短的時(shí)間內(nèi)提供到可用的服務(wù)給用戶,其中就包括搜索框的顯示及可交互,除此之外的內(nèi)容優(yōu)先級(jí)會(huì)相對(duì)較低。

          瀏覽器在渲染頁(yè)面的過(guò)程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規(guī)則樹,它們結(jié)合后才生成最終的渲染樹并渲染。因此,我們還常常將 CSS 放在<head>里,可用來(lái)避免瀏覽器渲染的重復(fù)計(jì)算。


          二、HTML 與 DOM 有什么不同

          我們知道<p>是 HTML 元素,但又常常將<p>這樣一個(gè)元素稱為 DOM 節(jié)點(diǎn),那么 HTML 和 DOM 到底有什么不一樣呢?

          根據(jù) MDN 官方描述:文檔對(duì)象模型(DOM)是 HTML 和 XML 文檔的編程接口。

          也就是說(shuō),DOM 是用來(lái)操作和描述 HTML 文檔的接口。如果說(shuō)瀏覽器用 HTML 來(lái)描述網(wǎng)頁(yè)的結(jié)構(gòu)并渲染,那么使用 DOM 則可以獲取網(wǎng)頁(yè)的結(jié)構(gòu)并進(jìn)行操作。一般來(lái)說(shuō),我們使用 JavaScript 來(lái)操作 DOM 接口,從而實(shí)現(xiàn)頁(yè)面的動(dòng)態(tài)變化,以及用戶的交互操作。

          在開發(fā)過(guò)程中,常常用對(duì)象的方式來(lái)描述某一類事物,用特定的結(jié)構(gòu)集合來(lái)描述某些事物的集合。DOM 也一樣,它將 HTML 文檔解析成一個(gè)由 DOM 節(jié)點(diǎn)以及包含屬性和方法的相關(guān)對(duì)象組成的結(jié)構(gòu)集合。


          三、DOM 解析

          我們常見的 HTML 元素,在瀏覽器中會(huì)被解析成節(jié)點(diǎn)。比如下面這樣的 HTML 內(nèi)容:

          <html>
              <head>
                  <title>標(biāo)題</title>
              </head>
              <body>
                  <a href='xx.com'>我的超鏈接</a>
                  <h1>頁(yè)面第一標(biāo)題</h1>
              </body>
          </html>

          打開控制臺(tái) Elements 面板,可以看到這樣的 HTML 結(jié)構(gòu),如下圖所示:

          在瀏覽器中,上面的 HTML 會(huì)被解析成這樣的 DOM 樹,如下圖所示:


          我們都知道,對(duì)于樹狀結(jié)構(gòu)來(lái)說(shuō),常常使用parent/child/sibling等方式來(lái)描述各個(gè)節(jié)點(diǎn)之間的關(guān)系,對(duì)于 DOM 樹也不例外。

          舉個(gè)例子,我們常常會(huì)對(duì)頁(yè)面功能進(jìn)行抽象,并封裝成組件。但不管怎么進(jìn)行整理,頁(yè)面最終依然是基于 DOM 的樹狀結(jié)構(gòu),因此組件也是呈樹狀結(jié)構(gòu),組件間的關(guān)系也同樣可以使用parent/child/sibling這樣的方式來(lái)描述。同時(shí),現(xiàn)在大多數(shù)應(yīng)用程序同樣以root為根節(jié)點(diǎn)展開,我們進(jìn)行狀態(tài)管理、數(shù)據(jù)管理也常常會(huì)呈現(xiàn)出樹狀結(jié)構(gòu)。


          四、事件委托

          我們知道,瀏覽器中各個(gè)元素從頁(yè)面中接收事件的順序包括事件捕獲階段、目標(biāo)階段、事件冒泡階段。其中,基于事件冒泡機(jī)制,我們可以實(shí)現(xiàn)將子元素的事件委托給父級(jí)元素來(lái)進(jìn)行處理,這便是事件委托。

          如果我們?cè)诿總€(gè)元素上都進(jìn)行監(jiān)聽的話,則需要綁定三個(gè)事件;(假設(shè)頁(yè)面上有a,b,c三個(gè)兄弟節(jié)點(diǎn))

          function clickEventFunction(e) {
            console.log(e.target === this); // logs `true`
            // 這里可以用 this 獲取當(dāng)前元素
          }
          // 元素a,b,c綁定
          element2.addEventListener("click", clickEventFunction, false);
          element5.addEventListener("click", clickEventFunction, false);
          element8.addEventListener("click", clickEventFunction, false);

          使用事件委托,可以通過(guò)將事件添加到它們的父節(jié)點(diǎn),而將事件委托給父節(jié)點(diǎn)來(lái)觸發(fā)處理函數(shù):

          function clickEventFunction(event) {
            console.log(e.target === this); // logs `false`
            // 獲取被點(diǎn)擊的元素
            const eventTarget = event.target;
            // 檢查源元素`event.target`是否符合預(yù)期
            // 此處控制廣告面板的展示內(nèi)容
          }
          // 元素1綁定
          element1.addEventListener("click", clickEventFunction, false);

          這樣能解決什么問題呢?

          • 綁定子元素會(huì)綁定很多次的事件,而綁定父元素只需要一次綁定。
          • 將事件委托給父節(jié)點(diǎn),這樣我們對(duì)子元素的增加和刪除、移動(dòng)等,都不需要重新進(jìn)行事件綁定。

          常見的使用方式主要是上述這種列表結(jié)構(gòu),每個(gè)選項(xiàng)都可以進(jìn)行編輯、刪除、添加標(biāo)簽等功能,而把事件委托給父元素,不管我們新增、刪除、更新選項(xiàng),都不需要手動(dòng)去綁定和移除事件。

          如果在列表數(shù)量?jī)?nèi)容較大的時(shí)候,對(duì)成千上萬(wàn)節(jié)點(diǎn)進(jìn)行事件監(jiān)聽,也是不小的性能消耗。使用事件委托的方式,我們可以大量減少瀏覽器對(duì)元素的監(jiān)聽,也是在前端性能優(yōu)化中比較簡(jiǎn)單和基礎(chǔ)的一個(gè)做法。

          注意:

          1. 如果我們直接在document.body上進(jìn)行事件委托,可能會(huì)帶來(lái)額外的問題;
          2. 由于瀏覽器在進(jìn)行頁(yè)面渲染的時(shí)候會(huì)有合成的步驟,合成的過(guò)程會(huì)先將頁(yè)面分成不同的合成層,而用戶與瀏覽器進(jìn)行交互的時(shí)候需要接收事件。此時(shí),瀏覽器會(huì)將頁(yè)面上具有事件處理程序的區(qū)域進(jìn)行標(biāo)記,被標(biāo)記的區(qū)域會(huì)與主線程進(jìn)行通信。
          3. 如果我們document.body上被綁定了事件,這時(shí)候整個(gè)頁(yè)面都會(huì)被標(biāo)記;
          4. 即使我們的頁(yè)面不關(guān)心某些部分的用戶交互,合成器線程也必須與主線程進(jìn)行通信,并在每次事件發(fā)生時(shí)進(jìn)行等待。這種情況,我們可以使用passive: true選項(xiàng)來(lái)解決


          五、總結(jié)

          我們了解了 HTML 的作用,以及它是如何影響瀏覽器中頁(yè)面的加載過(guò)程的,同時(shí)還介紹了使用 DOM 接口來(lái)控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關(guān)概念。

          站建設(shè)完成后,最重要的就是網(wǎng)站運(yùn)營(yíng)推廣了!而除了付費(fèi)的SEM競(jìng)價(jià)廣告和DSP、信息流廣告等推廣形式外,針對(duì)搜索引擎本身SEO優(yōu)化方面的推廣也是大多數(shù)網(wǎng)站主都會(huì)做的!當(dāng)然,在中國(guó)百度SEO是最重要要做的。

          不過(guò)企業(yè)在找人或者外包做網(wǎng)站優(yōu)化的過(guò)程中,經(jīng)常會(huì)遇到如:排名進(jìn)入百度三四頁(yè)甚至兩三頁(yè)的關(guān)鍵詞,在經(jīng)過(guò)很長(zhǎng)一段時(shí)間后仍然沒有變化!即排名不能更靠前了。但眾所周知,因?yàn)樗阉饕娴呐琶麢C(jī)制和用戶的搜索瀏覽習(xí)慣,如果關(guān)鍵詞不進(jìn)入搜索引擎首頁(yè)的話,很難有點(diǎn)擊的機(jī)會(huì),因此網(wǎng)站排名進(jìn)入首頁(yè)就成了很多seoer追求的!

          那么,對(duì)于很多排名進(jìn)入前幾頁(yè),但始終進(jìn)不了首頁(yè)的關(guān)鍵詞,我們應(yīng)該怎么辦呢?

          首先大家都知道,網(wǎng)站建設(shè)完成之后針對(duì)關(guān)鍵詞定位可以從網(wǎng)站標(biāo)題、描述、關(guān)鍵詞和網(wǎng)站當(dāng)中的一些強(qiáng)調(diào)標(biāo)簽等來(lái)定。或許這些關(guān)鍵詞跟我們息息相關(guān),但對(duì)其競(jìng)爭(zhēng)程度、指數(shù)、優(yōu)化難度和需要的資源等并沒有進(jìn)行嚴(yán)格的分析。

          因?yàn)樵诰W(wǎng)站排名的機(jī)制中,永遠(yuǎn)不變的是:搜索引擎將會(huì)越來(lái)越智能化,也就是說(shuō),用戶覺得好的網(wǎng)站,搜索引擎才會(huì)更青睞!

          因此到前五頁(yè)之后,其實(shí)網(wǎng)站關(guān)鍵字已經(jīng)開始被搜索引擎所認(rèn)可,不過(guò)要真正進(jìn)入首頁(yè),除了之前經(jīng)常被大家提及的點(diǎn)擊算法外,更重要的就是網(wǎng)站本身的用戶體驗(yàn)了,即:網(wǎng)站是否真的從底層邏輯上解決了該關(guān)鍵詞的核心需求!

          而這種用戶體驗(yàn)更多的就要從網(wǎng)站的細(xì)節(jié)出發(fā)了,如:網(wǎng)站的咨詢圖標(biāo)和按鈕是否可以更精簡(jiǎn)或者美觀,網(wǎng)站特效是否影響用戶瀏覽,網(wǎng)站方打開速度等都會(huì)直接影響網(wǎng)站最終的排名。

          因此當(dāng)我們網(wǎng)站在建設(shè)完成且關(guān)鍵詞優(yōu)化進(jìn)入前五頁(yè)之后,就要涉及到網(wǎng)站用戶體驗(yàn)和細(xì)節(jié)的優(yōu)化了,這才是真正決定網(wǎng)站關(guān)鍵字排名是否能進(jìn)入首頁(yè)的必要因素!而網(wǎng)站建設(shè)一開始就能決定體驗(yàn)的好壞!因此網(wǎng)站建設(shè)的好壞對(duì)于SEO優(yōu)化至關(guān)重要!

          原文鏈接:http://www.bjjfsd.com/index_show_catid_19_id_573.html


          主站蜘蛛池模板: 日韩精品无码中文字幕一区二区| 精品视频在线观看一区二区三区| AV无码精品一区二区三区| 国产av一区二区精品久久凹凸| 亚洲国产精品综合一区在线 | 人妻无码一区二区三区四区| 精品性影院一区二区三区内射| 中文字幕一区二区三区日韩精品 | 成人一区二区免费视频| 日本免费一区尤物| 怡红院一区二区在线观看| 人妻无码视频一区二区三区| 东京热无码一区二区三区av| 一区二区三区四区在线播放| 国产亚洲综合一区二区三区| 欧美av色香蕉一区二区蜜桃小说| 97久久精品无码一区二区| 日韩精品无码一区二区三区免费 | 亚洲一区二区三区精品视频| 污污内射在线观看一区二区少妇| 亚洲国产精品一区二区第一页 | 国产精品亚洲一区二区无码| 亚洲欧美日韩国产精品一区| 精品不卡一区二区| 亚洲大尺度无码无码专线一区| AV无码精品一区二区三区| 亚洲欧美国产国产一区二区三区 | 中文字幕在线观看一区| 国模无码人体一区二区| 日韩免费视频一区二区| 日韩人妻不卡一区二区三区| 中字幕一区二区三区乱码| 中字幕一区二区三区乱码| 无码日韩人妻av一区免费| 日韩精品一区二区三区老鸦窝| 国产成人精品一区二三区 | 日韩三级一区二区| 精品国产AⅤ一区二区三区4区| 在线精品国产一区二区三区| 无码一区二区三区免费| 亚洲国产AV无码一区二区三区 |