如何处理前端页面首次加载慢的问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何处理前端页面首次加载慢的问题相关的知识，希望对你有一定的参考价值。

下图是谷歌浏览器看到的加载顺序,其中有一段时间是断档的,很不理解,这个断档导致整个界面的加载速度一下多出来8秒多,看了下详细其中一项是Queueing,这个时间很长,最多的时候能是5秒,这个怎么解决,具体情况如下图,项目是用augular框架写的,版本很古老1.几的应该是

这是一个ajax请求，几秒钟的延迟时间属于正常范围，它是异步运行的，对页面的加载速度不会造成直接影响。从图片中可看出，它的加载时间为138ms，不算长啊，后面的4.84s是它等待服务器返回数据的时间，在这段时间里，页面的其他元素是继续加载的，不会受影响。所以这个4.84s是不算在首页加载时间内的。就好比一个体育赛事直播的网页，它的比分一般都是通过ajax异步方式定时刷新的，而这个刷新的时间并不算在页面的加载时间内，因为这时候页面早就加载完毕了。
当然，这个4.84s的时间长短，是由多种因素造成的，比如电脑性能、网络状态等，但最大的影响因素通常都是后台数据库的查询速度，通过优化可以大大缩短这个查询时间。追问

是这样子,页面能加载出来,但是里面的内容要等很长时间,也就是说是后端的查询速度的事是吧

追答

是的。就好比360的开机时候的延迟加载技术，它把电脑开机后就立即运行的一些程序设为延迟加载，这样电脑的启动速度就加快了。等电脑启动完毕后，360再开始慢慢地启动那些程序。这虽然是一种投机取巧，但使用中确实会让人觉得电脑开机变快了。

 参考技术A 1、查看引用的js是否版本过低

2、优化图片质量大小
3、是否引用外部链接（并且外部链接是否失效导致数据无法找到）追问

ok,我先找一下,js版本确实挺低的,用angular写的,完全就是自己硬拼凑的,以前古老的项目了

如何处理java高并发问题---之页面静态化

转载：如何处理java高并发问题---之页面静态化

解决java中的高并发问题可以从硬件软件等方面入手，硬件如：服务器；软件如：系统缓存、页面静态化等。这里我写的是页面静态化的简单小例子。之所以将这个小例子记录下来是因为之前对页面静态化有误解，原以为静态化页面就是在项目编写中前端页面利用html就可以。但是在参考网上资料后发现理解误差很大，以下是我在参考了一些网上资料后写的实现页面静态化的简单实例：

项目结构图

技术分享图片

 

1.业务处理类Servlet.java（这里为了方便采用的servlet，可根据项目需求在其他的架构中使用其中的业务逻辑）

 

[java] view plain copy
 
  1. package com.servlet;  
  2.   
  3. import java.io.File;  
  4. import java.io.IOException;  
  5.   
  6. import javax.servlet.ServletException;  
  7. import javax.servlet.http.HttpServlet;  
  8. import javax.servlet.http.HttpServletRequest;  
  9. import javax.servlet.http.HttpServletResponse;  
  10.   
  11. public class Servlet extends HttpServlet{  
  12.       
  13.     public void service(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException{  
  14.         System.out.println("chapterId=====//===="+request.getParameter("chapterId"));  
  15.         if(request.getParameter("chapterId")!= null){  
  16.             String chapterFileName = "bookChapterRead_"+request.getParameter("chapterId")+".html";    
  17.             String chapterFilePath = getServletContext().getRealPath("/") + chapterFileName;   
  18.             System.out.println("chapterFilePath===//============="+chapterFilePath);  
  19.             File chapterFile = new File(chapterFilePath);  
  20.             System.out.println("chapterFile===//============="+chapterFile);  
  21.             if(chapterFile.exists()){//如果有这个文件就告诉浏览器转向  
  22.                 System.out.println("有此静态页面＝＝＝＝＝＝");  
  23.                 response.sendRedirect(chapterFileName);  
  24.                 return;  
  25.               }  
  26.             System.out.println("没有此静态页面＝＝＝＝＝＝");  
  27.             //======存放业务处理后得到的信息  
  28.             request.setAttribute("novelChapter", "测试单节信息");  
  29.             request.setAttribute("lastPageId", "lastPageId111");  
  30.             request.setAttribute("nextPageId", "nextPageId222");  
  31.             //============  
  32.             System.out.println("getServletContext()==========//========="+getServletContext());  
  33.             new CreateStaticHTMLPage().createStaticHTMLPage(request, response, getServletContext(),  
  34.                     chapterFileName, chapterFilePath, "/bookRead.jsp");  
  35.         }  
  36.           
  37.     }  
  38.   
  39. }  

２.创建静态页面类CreateStaticHTMLPage.java

 

[java] view plain copy
 
  1. package com.servlet;  
  2.   
  3. import java.io.ByteArrayOutputStream;  
  4. import java.io.FileOutputStream;  
  5. import java.io.IOException;  
  6. import java.io.OutputStreamWriter;  
  7. import java.io.PrintWriter;  
  8.   
  9. import javax.servlet.RequestDispatcher;  
  10. import javax.servlet.ServletContext;  
  11. import javax.servlet.ServletException;  
  12. import javax.servlet.ServletOutputStream;  
  13. import javax.servlet.http.HttpServletRequest;  
  14. import javax.servlet.http.HttpServletResponse;  
  15. import javax.servlet.http.HttpServletResponseWrapper;  
  16.   
  17. /**  
  18. * 创建HTML静态页面  
  19. * 功能：创建HTML静态页面  
  20. */    
  21. public class CreateStaticHTMLPage {  
  22.      /** 
  23.      * 生成静态HTML页面的方法  
  24.      * @param request 请求对象 
  25.      * @param response 响应对象 
  26.      * @param servletContext Servlet上下文 
  27.      * @param fileName 文件名称 
  28.      * @param fileFullPath 文件完整路径 
  29.      * @param jspPath 需要生成静态文件的JSP路径(相对即可) 
  30.      * @throws IOException 
  31.      * @throws ServletException 
  32.      */  
  33.     public void createStaticHTMLPage(HttpServletRequest request, HttpServletResponse response,ServletContext servletContext,String fileName,String fileFullPath,String jspPath) throws ServletException, IOException{    
  34.         response.setContentType("text/html;charset=utf-8");//设置HTML结果流编码(即HTML文件编码)     
  35.         RequestDispatcher rd = servletContext.getRequestDispatcher(jspPath);//得到JSP资源  
  36.         final ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();//用于从ServletOutputStream中接收资源     
  37.         final ServletOutputStream servletOuputStream = new ServletOutputStream(){//用于从HttpServletResponse中接收资源     
  38.             public void write(byte[] b, int off,int len){  
  39.                 byteArrayOutputStream.write(b, off, len);    
  40.             }    
  41.             public void write(int b){  
  42.                 byteArrayOutputStream.write(b);  
  43.             }    
  44.         };    
  45.         final PrintWriter printWriter = new PrintWriter(new OutputStreamWriter(byteArrayOutputStream));//把转换字节流转换成字符流     
  46.         HttpServletResponse httpServletResponse = new HttpServletResponseWrapper(response){//用于从response获取结果流资源(重写了两个方法)     
  47.             public ServletOutputStream getOutputStream(){  
  48.                 return servletOuputStream;    
  49.             }  
  50.             public PrintWriter getWriter(){  
  51.                 return printWriter;    
  52.             }  
  53.         };    
  54.         rd.include(request, httpServletResponse);//发送结果流     
  55.         printWriter.flush();//刷新缓冲区，把缓冲区的数据输出     
  56.         FileOutputStream fileOutputStream = new FileOutputStream(fileFullPath);    
  57.         byteArrayOutputStream.writeTo(fileOutputStream);//把byteArrayOuputStream中的资源全部写入到fileOuputStream中     
  58.         fileOutputStream.close();//关闭输出流，并释放相关资源     
  59.         response.sendRedirect(fileName);//发送指定文件流到客户端     
  60.     }  
  61.   
  62. }  

３.web.xml配置文件

 

[html] view plain copy
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.5"   
  3.     xmlns="http://java.sun.com/xml/ns/javaee"   
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  7.       
  8.     <servlet>  
  9.       <servlet-name>htmlServlet</servlet-name>  
  10.       <servlet-class>com.servlet.Servlet</servlet-class>  
  11.     </servlet>  
  12.     <servlet-mapping>  
  13.       <servlet-name>htmlServlet</servlet-name>  
  14.       <url-pattern>*.do</url-pattern>  
  15.     </servlet-mapping>  
  16.   
  17.   <welcome-file-list>  
  18.     <welcome-file>index.jsp</welcome-file>  
  19.   </welcome-file-list>  
  20. </web-app>  

４.首页面index.jsp

 

[html] view plain copy
 
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  7. <html>  
  8.   <head>  
  9.     <base href="<%=basePath%>">  
  10.       
  11.     <title>首页面</title>  
  12.     <meta http-equiv="pragma" content="no-cache">  
  13.     <meta http-equiv="cache-control" content="no-cache">  
  14.     <meta http-equiv="expires" content="0">      
  15.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  16.     <meta http-equiv="description" content="This is my page">  
  17.     <!-- 
  18.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  19.     -->  
  20.   </head>  
  21.     
  22.   <body>  
  23.    <form action="kanName.do">  
  24.      <input name="chapterId" type="text" value="122"/>  
  25.      <input name="userName" type="text" value="张庆伟"/>  
  26.      <input type="submit" value="提交"/>  
  27.    </form>  
  28.   </body>  
  29. </html>  

5.跳转后的结果页面bookRead.jsp

 

[html] view plain copy
 
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  7. <html>  
  8.   <head>  
  9.   <%  
  10.     String lastPageId=(String)request.getAttribute("lastPageId");  
  11.   %>  
  12.     <base href="<%=basePath%>">  
  13.       
  14.     <title>book页</title>  
  15.     <meta http-equiv="pragma" content="no-cache">  
  16.     <meta http-equiv="cache-control" content="no-cache">  
  17.     <meta http-equiv="expires" content="0">      
  18.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  19.     <meta http-equiv="description" content="This is my page">  
  20.     <!-- 
  21.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  22.     -->  
  23.   </head>  
  24.     
  25.   <body>  
  26.   这是跳转页面：  
  27.    <%=lastPageId %>  
  28.   </body>  
  29. </html>  

 

以上代码是实例的所有代码，启动项目后点击提交按钮后，会看到跳转到一个html页面。

 

以上代码参考自：http://blog.csdn.net/jimmy609/article/details/37810591






以上是关于如何处理前端页面首次加载慢的问题的主要内容，如果未能解决你的问题，请参考以下文章

html首次加载刷新一次才更新成最新页面,如何处理

如何处理java高并发问题---之页面静态化

前端：如何处理AJAX请求的重复使用

大牛教你如何处理好前后端分离的 API 问题

WEB前端开发 使用requirejs 引入脚本为啥页面首次加载会出现其他依赖jquery的文件先于jquery加载

使用MVVM框架时，如何处理在页面动态渲染完之后需要发生的事件呢？