Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 久久久高清免费视频,欧美激情小说网,国产成人精品综合久久久 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          如何解決HTML頁(yè)面白屏問(wèn)題
          
        
           
          
	
	
          
		
                        
          網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中，我們有時(shí)會(huì)遇到HTML頁(yè)面白屏的問(wèn)題，即打開(kāi)網(wǎng)頁(yè)時(shí)頁(yè)面顯示空白，沒(méi)有任何內(nèi)容。這不僅令用戶困惑，也使開(kāi)發(fā)者頭疼不已。本文將分享一些常見(jiàn)的HTML頁(yè)面白屏問(wèn)題解決方法，幫助你快速解決這個(gè)問(wèn)題，讓你的網(wǎng)頁(yè)煥然一新！
          第一步：檢查HTML代碼
          首先，我們需要檢查HTML代碼是否正確。常見(jiàn)的錯(cuò)誤包括標(biāo)簽未閉合、標(biāo)簽嵌套錯(cuò)誤等。這些錯(cuò)誤可能會(huì)導(dǎo)致頁(yè)面無(wú)法正常顯示。因此，仔細(xì)檢查HTML代碼，確保沒(méi)有語(yǔ)法錯(cuò)誤是解決白屏問(wèn)題的第一步。
          第二步：檢查CSS文件
          HTML頁(yè)面的樣式通常由CSS文件控制。如果CSS文件中存在錯(cuò)誤或者無(wú)法正常加載，可能會(huì)導(dǎo)致頁(yè)面白屏。我們可以通過(guò)以下步驟檢查CSS文件是否存在問(wèn)題：
           1、檢查CSS文件路徑是否正確：確保CSS文件的路徑正確，并且文件存在于指定的位置。可以通過(guò)瀏覽器開(kāi)發(fā)者工具查看網(wǎng)絡(luò)面板，檢查CSS文件是否被成功加載。
           2、檢查CSS文件語(yǔ)法錯(cuò)誤：使用CSS驗(yàn)證工具，如W3C CSS驗(yàn)證服務(wù)，檢查CSS文件是否存在語(yǔ)法錯(cuò)誤。如果存在錯(cuò)誤，及時(shí)修復(fù)。
           3、檢查CSS選擇器和樣式規(guī)則：檢查CSS文件中的選擇器和樣式規(guī)則是否正確。可能存在選擇器與HTML元素不匹配或樣式規(guī)則沖突的情況。可以通過(guò)逐個(gè)注釋掉樣式規(guī)則，逐步排查問(wèn)題。
          第三步：檢查JavaScript代碼
          JavaScript代碼也可能導(dǎo)致頁(yè)面白屏。以下是檢查JavaScript代碼的步驟：
           1、檢查JS文件路徑是否正確：與CSS文件類似，確保JS文件的路徑正確，并且文件存在于指定的位置。通過(guò)瀏覽器開(kāi)發(fā)者工具查看控制臺(tái)面板，檢查是否有JS文件加載錯(cuò)誤的提示信息。
           2、檢查JS代碼語(yǔ)法錯(cuò)誤：使用JS語(yǔ)法檢查工具，檢查JS代碼是否存在語(yǔ)法錯(cuò)誤。如果有錯(cuò)誤，及時(shí)修復(fù)。
          3、檢查JS代碼邏輯錯(cuò)誤：檢查JS代碼中的邏輯是否正確。可能存在變量未定義、函數(shù)未調(diào)用或者邏輯錯(cuò)誤等問(wèn)題。可以通過(guò)調(diào)試工具，如瀏覽器開(kāi)發(fā)者工具中的調(diào)試器，逐步排查問(wèn)題。
          第四步：排查網(wǎng)絡(luò)請(qǐng)求問(wèn)題
          如果前面的步驟都沒(méi)有發(fā)現(xiàn)問(wèn)題，那么可能是網(wǎng)絡(luò)請(qǐng)求出現(xiàn)了問(wèn)題。以下是一些排查網(wǎng)絡(luò)請(qǐng)求問(wèn)題的方法：
           1、檢查網(wǎng)絡(luò)連接：確保你的設(shè)備已連接到互聯(lián)網(wǎng)，并且網(wǎng)絡(luò)連接穩(wěn)定。
           2、檢查資源加載狀態(tài)：通過(guò)瀏覽器開(kāi)發(fā)者工具的網(wǎng)絡(luò)面板，檢查頁(yè)面中的資源加載狀態(tài)。可能存在資源加載失敗或者超時(shí)的情況，導(dǎo)致頁(yè)面白屏。
           3、檢查服務(wù)器配置：如果你使用了服務(wù)器端腳本語(yǔ)言，如PHP，檢查服務(wù)器配置是否正確。可能存在服務(wù)器配置問(wèn)題導(dǎo)致頁(yè)面無(wú)法正確渲染。
          第五步：優(yōu)化頁(yè)面性能
          如果以上方法都沒(méi)有解決問(wèn)題，那么可能是頁(yè)面性能問(wèn)題導(dǎo)致白屏。以下是一些優(yōu)化頁(yè)面性能的方法：
           1、壓縮和合并文件：將CSS和JS文件進(jìn)行壓縮和合并，減少文件的大小和數(shù)量，提高頁(yè)面加載速度。
           2、使用緩存：利用瀏覽器緩存機(jī)制，將靜態(tài)資源進(jìn)行緩存，減少服務(wù)器的請(qǐng)求次數(shù)，提高頁(yè)面加載速度。
           3、異步加載資源：使用異步加載技術(shù)，如異步加載JS文件或使用延遲加載，減少頁(yè)面加載時(shí)間。
           4、減少HTTP請(qǐng)求：減少頁(yè)面中的HTTP請(qǐng)求次數(shù)等。
          結(jié)語(yǔ)：
          通過(guò)以上五個(gè)步驟，我們可以逐步排查HTML頁(yè)面白屏問(wèn)題，并解決它們。不同的問(wèn)題可能需要不同的解決方法，因此需要耐心和細(xì)心地分析和排查。在開(kāi)發(fā)過(guò)程中，我們也要時(shí)刻關(guān)注頁(yè)面性能，優(yōu)化頁(yè)面加載速度，提高用戶體驗(yàn)。
          上流行的解決方案是將assetsPublicPath: '/'改成'./'，下面說(shuō)一下這個(gè)解決方案的弊端：
          通常頁(yè)面空白的問(wèn)題出現(xiàn)大多數(shù)是由于Spring Boot端配置了server.servlet.context-path，上下文改變了css, js等文件的訪問(wèn)路徑，文件無(wú)法加載導(dǎo)致index.html顯示空白。'/'改成'./'是將絕對(duì)路徑變?yōu)橄鄬?duì)路徑，可以動(dòng)態(tài)適應(yīng)Spring Boot端上下文的改變，這是為什么這個(gè)解決方案起作用的原因。
          Vue項(xiàng)目部署在Spring Boot出現(xiàn)的另一個(gè)常見(jiàn)問(wèn)題是當(dāng)刷新瀏覽器的時(shí)候出現(xiàn)white label, 也就是404錯(cuò)誤，解決的方案基本是把error page配置成為Vue的index.html。
          這兩個(gè)解決方案有沖突的地方，當(dāng)router出現(xiàn)子路徑的時(shí)候刷新瀏覽器，error page會(huì)指向Vue的index.html頁(yè)面，此時(shí)頁(yè)面中訪問(wèn)css,js文件的路徑是相對(duì)路徑，也就是上下文路徑+router子路徑，這將導(dǎo)致css,js再次無(wú)法正常加載，這就是相對(duì)路徑的弊端。
          由于router會(huì)出現(xiàn)子路徑，因此必須保證assetsPublicPath為絕對(duì)路徑，下面講一下保持絕對(duì)路徑的解決方案：
          1 假設(shè)Spring Boot端配置server.servlet.context-path： api, 對(duì)應(yīng)Vue的/config/index.js中assetsPublicPath: '/'改成 '/api/'
          2 router/index.js中配置base: '/api/', 這是保證瀏覽器刷新時(shí)上下文參數(shù)和router跳轉(zhuǎn)路徑一致。
          3 對(duì)于Ajax請(qǐng)求需要配置baseURL, 如果使用Axios, 可以采用如下方法在main.js中配置
          // http request 攔截器
Axios.interceptors.request.use(
config => {
if (localStorage.getItem('id_token')) {
config.headers.Authorization = localStorage.getItem('id_token')
}
config.baseURL = '/api'
return config
},
err => {
return Promise.reject(err)
})

          4 另外需要注意的一點(diǎn)，按照Spring Boot默認(rèn)配置， 在Vue端/config/index.js中assetsSubDirectory: 'static'要改變?yōu)槠渌址热纾?content', 'vue', 'api'等等。
          5 試過(guò)將assetsSubDirectory配置為空，它和另一個(gè)css圖片加載的方案有沖突，圖片加載解決方案是在/build/util.js中加一行配置
          // Extract CSS when that option is specified
          // (which is the case during production build)
          if (options.extract) {
          return ExtractTextPlugin.extract({
          use: loaders,
          fallback: 'vue-style-loader',
          publicPath: '../../'
          })
          結(jié)尾附上Spring Boot端將error page指向Vue的index.html代碼：
          import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.boot.web.server.ConfigurableWebServerFactory;
 import org.springframework.boot.web.server.ErrorPage;
 import org.springframework.boot.web.server.WebServerFactoryCustomizer;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.http.HttpStatus;
 @Configuration
 public class ServletConfig {
 private static final Logger logger = LoggerFactory.getLogger(ServletConfig.class);
 @Bean
 public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer() {
 logger.info("come to 404 error page");
 return factory -> {
 ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
 factory.addErrorPages(error404Page);
 };
 }
 }

          對(duì)前端全棧工程師感興趣的同學(xué)關(guān)注我的頭條號(hào)，并在后臺(tái)私信發(fā)送關(guān)鍵字：“前端”即可獲取免費(fèi)的前端全棧工程師學(xué)習(xí)資料
          知識(shí)體系已整理好，歡迎免費(fèi)領(lǐng)取。還有面試視頻分享可以免費(fèi)獲取。關(guān)注我，可以獲得沒(méi)有的架構(gòu)經(jīng)驗(yàn)哦！！
          了，周末閑來(lái)無(wú)事，突然有個(gè)詭異想法！
          如題，慣性思路很簡(jiǎn)單，就是直接擼上一個(gè)空內(nèi)容的html。
          注：以下都是在現(xiàn)代瀏覽器中執(zhí)行，主要為**Chrome 版本 120.0.6099.217（正式版本） （64 位）和Firefox123.0.1 (64 位) **
          <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
</body>
</html>


          ????乛?乛????~
          但是，要優(yōu)雅~咱玩的花一點(diǎn)，如果這個(gè)HTML中加入一行文字，比如下面這樣，如何讓這行文字一直不顯示出來(lái)呢？
          <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
<div>放我出去！！！</div>
</body>
</html>


          思考幾秒~有了，江湖一直傳言，Javascrip代碼執(zhí)行不是影響Render樹(shù)生成么，上循環(huán)！于是如下
          <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
<div>放我出去！！！</div>
<script>
    while (1) {
      let a;
    }
    // 或者這樣
    /*(function stop() {
       var message = confirm("我不想讓文字出來(lái)！");
 
       if (message == true) {
         stop()
       } else {
         stop()
       }
     })()*/
</script>
</body>

</html>
```一下一下
bingo，可以實(shí)現(xiàn)，那再換個(gè)思路呢？加載資源？

說(shuō)干就干，在開(kāi)發(fā)者工具上，設(shè)置上下載速度為1kb/s，測(cè)試了以下三種類型資源

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
  <!-- <link rel="stylesheet" href="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css" as="style"/> -->
  <!-- <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"/> -->
  <div class="let-it-go">放我出去！！！</div>
  <script src="https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect.js"></script>
  <style>
    .let-it-go {
      color: red;
    }
    </style>
</body>
</html>


          總得來(lái)說(shuō)，JS和CSS文件，需要排在.let-it-go元素前面或者樣式前面，才會(huì)影響到渲染DOM或者CSSOM，圖片或者影片之類的，不管放前面還是后面，都無(wú)影響。如果在css文件中，一直有import外部CSS，也是有很大影響！
          但正如題目，這種只能影響一時(shí)，卻不能一直影響，就算你在代碼里寫(xiě)一個(gè)在頭部不停插入腳本，也沒(méi)有用，比如如下這么寫(xiě)，按，依舊無(wú)效：
          <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
  <link rel="stylesheet" href="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"
    as="style" />
  <!-- <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"/> -->
  <script>
    // setInterval(()=>{
    // 不停插入script腳本 或者css文件
    let index = '';
    (function fetchFile() {
      var script = document.createElement('script');
      script.src = `https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect${index}.js`;
      document.head.appendChild(script);
      script.onload = () => {
        fetchFile()
      }
      script.onerror = () => {
        fetchFile()
      }
      index+=1
      
      // 創(chuàng)建一個(gè) link 元素
      //var link = document.createElement('link');
      // 設(shè)置 link 元素的屬性
     // link.rel = 'stylesheet';
     // link.type = 'text/css';
     // link.href = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/app.f81e9f9${index}.css';
      // 將 link 元素添加到文檔的頭部
      //document.head.appendChild(link);
    })()
    // },1000)
  </script>
  <div class="let-it-go">放我出去！！！</div>
  <style>
    .let-it-go {
      color: red;
    }
  </style>
  <!-- <script src="https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect.js"></script> -->
</body>

</html>


          那么，還有別的方法嗎？暫時(shí)沒(méi)有啥想法了，等后續(xù)再在這篇上續(xù)接~
          另外，在實(shí)驗(yàn)過(guò)程中，有一個(gè)方式讓我很意外，以為以下代碼也會(huì)造成頁(yè)面一直空白，但好像不行。
          <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
  <div id="appp"></div>
  <script>
    (function createElement() {
      var parentElement = document.getElementById('appp');
      // 創(chuàng)建新的子元素
      var newElement = document.createElement('div');
      // 添加文本內(nèi)容（可選）
      newElement.textContent = '這是新的子元素';
      // 將新元素添加到父元素的子元素列表的末尾
      parentElement.appendChild(newElement);
      createElement()
    })()
  </script>
  <div class="let-it-go">放我出去！！！</div>
</body>
</html>


          這可以很好的證明，插入DOM元素這個(gè)任務(wù)，會(huì)在主HTML渲染之后再執(zhí)行。
          祝周末愉快~

          作者：大怪v
          鏈接：https://juejin.cn/post/7344164779629985818
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
精彩视频一区二区|
日本国产一区二区三区在线观看|
国产一区二区在线观看麻豆
|
一区二区三区视频在线|
国产内射在线激情一区|
国产天堂在线一区二区三区|
亚洲一区二区三区亚瑟|
国产波霸爆乳一区二区|
国产精品免费视频一区|
无码喷水一区二区浪潮AV|
97人妻无码一区二区精品免费|
乱精品一区字幕二区|
一区高清大胆人体|
青青青国产精品一区二区|
无码国产精品一区二区免费3p|
久久久久国产一区二区三区|
精品一区二区三区视频|
八戒久久精品一区二区三区|
尤物精品视频一区二区三区
|
国产一区二区三区免费观看在线
|
无码播放一区二区三区|
亚洲一区无码中文字幕乱码|
日韩精品乱码AV一区二区|
日韩亚洲AV无码一区二区不卡|
久久国产免费一区二区三区|
亚洲国产美国国产综合一区二区
|
天堂一区二区三区在线观看|
亚洲av乱码一区二区三区按摩|
亚洲国产精品一区二区三区在线观看
|
国产香蕉一区二区在线网站|
2018高清国产一区二区三区|
无码人妻精品一区二区三区不卡
|
韩国精品一区二区三区无码视频|
欧美成人aaa片一区国产精品|
亚洲日韩一区精品射精|
国产伦精品一区三区视频|
99久久精品国产高清一区二区|
亚洲制服中文字幕第一区|
国产短视频精品一区二区三区|
国产精品成人一区无码|
嫩B人妻精品一区二区三区|