当前页面重新加载webapp_webapp加载内嵌网页空白 - CSDN
  • web和webApp如何实现上拉加载和下拉刷新

    web和webApp如何实现上拉加载和下拉刷新

            

             web端中处理列表有两种方式:一种是通过分页界面表示当前是多少页,通过点击上一页和下一页切换页面显示。

               另一种是基于滑动框滚动实现下拉刷新和上拉加载功能实现。

             android和ios中经常会有下拉刷新列表和上拉加载功能实现。


             web和webApp中也可以通过下拉加载和上拉刷新实现该功能。


             实现思路:

             1.后端提供分页接口

             2.list页面打开默认显示第一页的列表

             3.js监听到页面顶部下拉时,清除所有list显示,请求第一页列表显示

             4.js监听到页面滚动到底部时,增量加载下一的列表进行列表显示


            实现效果:


     

          实现代码:

        newList.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    
        <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_iwwlmmalrznkx1or.css">
        <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_306555_7a99p45etlkrzfr.css">
    
        <link rel="stylesheet" type="text/css" href="css/newList.css">
    
        <script type="text/javascript" src="js/utils/jquery.js"></script>
        <script type="text/javascript" src="js/utils/utils.js"></script>
        <script type="text/javascript" src="js/newList.js"></script>
    
    
    </head>
    <body>
            <div class="head" >
                <span class="back-icon iconfont icon-xiaoyuhao" style="z-index: -1;"></span>
                newList     
            </div>
    
       <div class="newList" id="newList" >
    
           <!--<a class="newItem" style="border-bottom: 1px solid grey" href="newDetail.html">-->
               <!--<div class="itemUp">-->
                   <!--<span class="abstract" >1111</span>-->
                   <!--<span class="source" >2222</span>-->
                   <!--<div class="clear"></div>-->
               <!--</div>-->
               <!--<div class="itemDown" >-->
                   <!--<span class="author"  >3333</span>-->
                   <!--<span class="publication_time​"   >4444</span>-->
                   <!--<div class="clear"></div>-->
               <!--</div>-->
               <!--<div class="itemLine" ></div>-->
           <!--</a>-->
    
       </div>
    </body>
    </html>


         newList.js:


    /**
     * Created by Administrator on 2017/10/6.
     */
    
    var currentOffset=0;
    
    window.οnlοad=function () {
    	
    	
    	
    	//获取新闻list
    	getNewList();
    	
    	
    	
    
    }
    
    	function getNewList(){
    
    	 $.ajax({
            type: "get",
            url: "http://52.214.109.210:5000/news?offset="+currentOffset+"&limit=10",
            data: {
    
            },
            dataType: "json",
    //            contentType:'application/json',
            success: function (data) {
                var newList=document.getElementById("newList");
                newList.innerHTML='';
                
              
                
                //新闻列表
                $.each(data.results, function(n, value) {
                	  var authorStr="";
    		            if(value.author==null||value.author==undefined||value.author=="null"){
    		            	authorStr="authors";
    		            }else{
    		            	authorStr=value.author;
    		            }
                    // alert(value.username);
                    newList.innerHTML=newList.innerHTML
                        +'<a class="newItem" style="border-bottom: 1px solid grey" href="newDetail.html?link='+value.link+'">'
                        +'<div class="itemUp">'
                        +'<span class="abstract" >'+value.abstract+'</span>'
                        +'<span class="source" >'+value.publication_time+'</span>'
                        +'<div class="clear"></div>'
                        +'</div>'
                        +'<div class="itemDown" >'
                        +'<span class="author"  >'+authorStr+'</span>'
                        +'<span class="publication_time​"   >'+value.title+'</span>'
                        +'<div class="clear"></div>'
                        +'</div>'
                        +'<div class="itemLine" ></div>'
                        +'</a>';
    
                });
                
                
                 $(document).scroll(function(){
    				var bheight = $(document).height();//获取窗口高度
    				var sheight = $("body")[0].scrollHeight;//获取滚动条高度,[0]是为了把jq对象转化为js对象
    				var stop = getScrollTop();//滚动条距离顶部的距离
    				
    				
    				console.log("bheight:"+bheight);
    				console.log("sheight:"+sheight);
    				console.log("stop:"+stop);
    				console.log("document.body.scrollTop:"+document.body.scrollTop);
    				console.log("window.screen.height:"+window.screen.height)
    				
    				
    				if(stop==0){
    //					alert("下拉刷新");
    				}
    				
    				
    				//滚动框到底部时加载更多
    				if(stop-60>=sheight-window.screen.height){//当滚动条到顶部的距离等于滚动条高度减去窗口高度时
    //					alert("加载更多");
    					
    					//加载更多新闻
    					loadMoreNewList();
    					
    					
    				}
    			});
    	
    
    
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // alert(XMLHttpRequest.status);
                // alert(XMLHttpRequest.readyState);
                // alert(textStatus);
    
                // alert(AjaxErrorMessage());
            },
        });
    }
    
    
    
    
        function loadMoreNewList(){
        	currentOffset=currentOffset+10;
    					$.ajax({
    				        type: "get",
    				        url: "http://52.214.109.210:5000/news?offset="+currentOffset+"&limit=10",
    				        data: {
    				
    				        },
    				        dataType: "json",
    				//            contentType:'application/json',
    				        success: function (data) {
    				            var newList=document.getElementById("newList");
    				            
    //				            newList.innerHTML='';
    				            //游戏列表
    				            $.each(data.results, function(n, value) {
    				            	var authorStr="";
    					            if(value.author==null||value.author==undefined||value.author=="null"){
    					            	authorStr="authors";
    					            }else{
    					            	authorStr=value.author;
    					            }
    				                // alert(value.username);
    				                newList.innerHTML=newList.innerHTML
    				                    +'<a class="newItem" style="border-bottom: 1px solid grey" href="newDetail.html?link='+value.link+'">'
    				                    +'<div class="itemUp">'
    				                    +'<span class="abstract" >'+value.abstract+'</span>'
    				                    +'<span class="source" >'+value.publication_time+'</span>'
    				                    +'<div class="clear"></div>'
    				                    +'</div>'
    				                    +'<div class="itemDown" >'
    				                    +'<span class="author"  >'+authorStr+'</span>'
    				                    +'<span class="publication_time​"   >'+value.title+'</span>'
    				                    +'<div class="clear"></div>'
    				                    +'</div>'
    				                    +'<div class="itemLine" ></div>'
    				                    +'</a>';
    				
    				            });
    				        		
    				
    				
    				        },
    				        error: function (XMLHttpRequest, textStatus, errorThrown) {
    				            // alert(XMLHttpRequest.status);
    				            // alert(XMLHttpRequest.readyState);
    				            // alert(textStatus);
    				
    				            // alert(AjaxErrorMessage());
    				        },
    				    });
        }
    
    
    	//获取滚动框到顶部的高度
        function getScrollTop(){    
            var scrollTop=0;    
            if(document.documentElement&&document.documentElement.scrollTop){    
                scrollTop=document.documentElement.scrollTop;    
            }else if(document.body){    
                scrollTop=document.body.scrollTop;    
            }    
            return scrollTop;    
        } 

    utils.js:

    /**
     * Created by Administrator on 2017/4/18.
     */
    /**为元素增加类属性 */
    function addClass(elements, value)
    {
        if (!elements.className) {
            elements.className = value;
        }
        else
        {
            newClass = elements.className;
            newClass += " ";
            newClass += value;
            elements.className = newClass;
        }
    }
    
    /**获取根据参数名url的参数*/
    
    function getParamsId(key) {
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
    
        var loc=decodeURI(window.location.search);
        // alert(r);
        var r = loc.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    };
    
    /**个人中心获取id值*/
    
    function getParams(key) {
        var r = window.location;
        r=r.toString();
        var strArray=r.split('/');
    
        var pernalId=strArray[strArray.length-1];
    
        return pernalId;
    
    }
    
    
    
    
    /** 获取json数组的长度*/
    
    function getJsonLength(json){
        var jsonLength=0;
        for (var i in json) {
            jsonLength++;
        }
        return jsonLength;
    }
    
    
    /**判断时间大小*/
    function judgeTime(startTime,endTime) {
        var startTime =new Date(startTime.replace("//-/g", "//"));
        var endTime = new Date(endTime.replace("//-/g", "//"));
    
        return startTime<endTime;
    }
    
    
    /**判断时间间隔多少小时*/
    function judgeTimeDiffer(startTime,endTime) {
        var startTime =new Date(startTime.replace("//-/g", "//"));
        var endTime = new Date(endTime.replace("//-/g", "//"));
    
        return parseInt((startTime.getTime() - endTime.getTime()) / 1000 / 60 / 60);
    }
    
    
    /**获取当前点击时的坐标位置*/
    function getMousePos(event) {
        var e = event || window.event;
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = e.pageX || e.clientX + scrollX;
        var y = e.pageY || e.clientY + scrollY;
        //alert('x: ' + x + '\ny: ' + y);
        return { 'x': x, 'y': y };
    }
    
    /**获取屏幕中央的位置*/
    
    function  getMiddleLocation(event) {
        var e = event || window.event;
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    
        var x = scrollX ;
        var y =  scrollY ;
        return { 'x': x, 'y': y };
    }
    



    展开全文
  • 我们做webapp的时候,可以做一个页面加载广告,在你网页加载的时候,先出现一段gif动图或者是海报。 下面是实现页面加载动画的代码 首先js代码的实现 (function($){ $(window).load(function(){ $('#begin')....

    我们做web app的时候,可以做一个页面加载广告,在你网页加载的时候,先出现一段gif动图或者是海报。
    下面是实现页面加载动画的代码
    首先js代码的实现

    (function($){
        $(window).load(function(){
            $('#begin').fadeOut();
            $('#loading').delay(200).fadeOut('slow');
        });
     
    	$(document).ready(function(){
    	//code
    	})
     
    })(jQuery);
    

    HTML加载层

     <!--加载动画层-->
      <div id="loading">
        <div id="begin"></div>
      </div>

    CSS代码实现

    
    #loading{
        background:#ffffff;
        bottom:0;
        left:0;
        position: fixed;
        right:0;
        top:0;
        z-index:500;
    }
     
    #begin{
        background: url(../images/loading.gif)center center no-repeat; //这里可以替换掉你需要加载的图片
        height:200px;  //控制大小
        width:200px;   //控制大小
        left:50%;          //控制位置,可去掉
        top:50%;            //控制位置,可去掉
        margin: -100px 0 0 -100px;
        position: absolute;
    }
    

    引用入自己的网页文件,就能实现页面预加载广告界面了。

    如:www.studiosworks.cn

    转载于:https://www.cnblogs.com/yorkmass/p/11109921.html

    展开全文
  • 在本教程中,我们将向您展示如何在IDEA中“热部署”或“热交换” Web应用程序。 注意 经过Intellij IDEA 14和15测试 1.选择爆炸的战争 开始运行– >>编辑配置– >>“部署”选项卡,单击+图标– &...

    在本教程中,我们将向您展示如何在IDEA中“热部署”或“热交换” Web应用程序。

    注意
    经过Intellij IDEA 14和15测试

    1.选择爆炸的战争

    开始运行– >>编辑配置– >>“部署”选项卡,单击+图标– >>选择“爆炸的工件”

    想法热部署爆炸了

    2.更新课程和资源

    选择“服务器”选项卡,更新以下选项:

    1. 在“更新”操作上->更新类和资源
    2. 停用框架->更新类和资源
    idea-hot-ploy-1

    3.在调试模式下运行

    调试模式下运行Web应用程序。 尝试修改一些代码或资源(JSP或html),修改后的类和资源将自动重新加载。

    做完了

    参考文献

    1. 如何在Eclipse中配置热部署

    翻译自: https://mkyong.com/intellij/intellij-idea-auto-reload-a-web-application-hot-deploy/

    展开全文
  • Chromium网页加载过程

    2018-11-02 20:26:22
    Chromium加载网页的过程,需要Browser进程和Render进程协作完成。加载网页的过程由Browser进程发起,向服务器请求网页内容的过程也是由Browser进程完成。Render进程负责对下载回来的网页内容进行解析,解析之后得到...

    Chromium加载网页的过程,需要Browser进程和Render进程协作完成。加载网页的过程由Browser进程发起,向服务器请求网页内容的过程也是由Browser进程完成。Render进程负责对下载回来的网页内容进行解析,解析之后得到一个DOM Tree。有了这个DOM Tree之后,Render进程就可以对网页进行渲染了。本文接下来就对上述过程涉及到的重要概念进行简要介绍以及制定学习计划。

    第一个涉及到的重要概念是Chromium的模块划分及其层次关系,如图1所示:

    \

    图1 Chromium模块划分及其层次关系

    这个图来自官方文档:How Chromium Displays Web Pages。从下往上看:

    1. WebKit:网页渲染引擎层,定义在命令空间WebCore中。Port部分用来集成平台相关服务,例如资源加载和绘图服务。WebKit是一个平台无关的网页渲染引擎,但是用在具体的平台上时,需要由平台提供一些平台相关的实现,才能让WebKit跑起来。

    2. WebKit glue:WebKit嵌入层,用来将WebKit类型转化为Chromium类型,定义在命令空间blink中。Chromium不直接访问WebKit接口,而是通过WebKit glue接口间接访问。WebKit glue的对象命名有一个特点,均是以Web为前缀。

    3. Renderer/Renderer host:多进程嵌入层,定义在命令空间content中。其中,Renderer运行在Render进程中,Renderer host运行在Browser进程中。

    4. WebContents:允许将一个HTML网页以多进程方式渲染到一个区域中,定义在命令空间content中。

    5. Browser:代表一个浏览器窗口,它可以包含多个WebContents。

    6. Tab Helpers:附加在WebContents上,用来增加WebContents的功能,例如显示InfoBar。

    我们可以将第1层和第2层归结为WebKit层,第3层和第4层归结为Content层,第5层和第6层归结为浏览器层。如果以进程为边界,Tab Helpers、Browser、WebContents和Renderer host运行在Browser进程中,Renderer、WebKit glue和WebKit运行在Render进程中。

    Content层是Chromium的核心模块,它实现了Chromium的多进程架构。Content层主要向外提供的接口是WebContents,浏览器层通过这个WebContents接口就可以将一个HTML网页渲染在一个区域上。例如,Chrome就是通过Content层提供的WebContents接口实现一个浏览器的。同样我们也可以通过Content层提供的WebContents接口实现一个与Chrome类似的浏览器,甚至我们也可以通过Content层提供的WebContents接口实现一个嵌入在应用程序的浏览器控件,例如Android 4.4的WebView。

    在Content层中,一个用来渲染网页的区域称为RenderView。一个RenderView也称为一个RenderWidget。RenderView与RenderWidget的区别是,前者是描述的是一个用来显示网页内容的控件,后者描述的是一个可以接收用户输入的控件,但是它不一定是用来显示网页内容的。例如,点击网页上的选择框弹出来的窗口,是一个RenderWidget,它里面显示的内容与网页无关。

    我们可以将RenderView和RenderWidget看作是一个接口。Browser进程和Render进程都需要实现这个接口。其中,Browser进程分别实现RenderView和RenderWidget接口的两个类是RenderViewHostImpl和RenderWidgetHostImpl,Render进程分别实现RenderView和RenderWidget接口的两个类是RenderViewImpl和RenderWidgetImpl。Browser进程的每一个RenderViewHostImpl对象和每一个RenderWidgetHostImpl对象在Render进程中都分别对应有一个RenderViewImpl对象和一个RenderWidgetImpl。RenderViewHostImpl对象与RenderViewImpl对象、RenderWidgetHostImpl对象与RenderWidgetImpl对象可以通过Browser进程与Render进程建立的IPC通道进行通信。

    WebKit层的WebView和WebWidget相当于Content层的RenderView和RenderWidget。我们注意到,WebKit层还有一个称为WebFrame的对象。事实上,Content层也有一个类似的对象,称为RenderFrame。WebFrame和RenderFrame都是用来描述网页的。既然已经有了RenderView和RenderWidget,为什么还需要WebFrame和RenderFrame呢?这与Chromium的Out-of-Process iframes(OOPIFs)项目有关。关于Chromium的Out-of-Process iframes(OOPIFs)项目的详细信息,可以参考官方文档:Out-of-Process iframes (OOPIFs)

    当网页使用window.open在另外一个Tab打开一个新的网页,或者通过iframe标签嵌入另外一个网页时,源网页和目标网页有可能在同一个Render进程中,也有可能在不同的Render进程中,这取决于它们是否来自同一个站点。在HTML5规范中,源网页和目标网页组成了一个浏览上下文单元(Browsing Context)。当源网页和目标网页不在同一个Render进程时,源网页如何通过HTML5规范中的window.postMessage接口发消息给目标网页呢?如图2所示:

    \

    图2 HTML5的window.postMessage实现

    在图2中,网页A通过window.open打开了网页B,它们分别在两个不同的Tab中,这两个Tab又是在不同的Render进程中。在Browser进程中,网页A和网页B分别对应有一个WebContents对象。也就是Browser进程会为每一个网页创建一个WebContents对象,如前面的图1所示。为了让网页A能够通过window.postMessage接口给网页B发送消息,负责渲染网页A的Render进程会为网页B创建一个代理对象,这个代理对象知道如何发送消息给网页B(通过Chromium的IPC消息发送、接收和分发机制分析一文分析的Routing机制)。同样,负责渲染网页B的Render进程也会为网页A创建一个代理以象,这个代理对象负责接收从网页A发送过来的消息,并且分发给网页B处理。注意,代理对象在图2中均通过虚线框表示。通过这种代理对象方式,就实现了不在同一个Render进程中的两个网页的相互通信。

    Chromium是如何实现上述代理对象的呢?我们通过图3所示的例子进行说明,如下所示:

    \

    图3 在同一个Browsing Context中的网页

    网页A在一个Tab显示,并且它通过iframe标签包含了网页B和网页C。网页C通过window.open在另外一个Tab中打开了另外一个网页C实例。新打网页的网页C通过iframe标签包含了网页D,网页D又通过iframe标签包含了网页A的另外一个实例。

    这时候Browser进程会分别为图3的两个Tab创建一个WebContents对象,如图4所示:

    \

    图4 RenderFrameHost/RenderFrameProxyHost

    每一个WebContents对象都关联有一个Frame Tree。Frame Tree中的每一个Node代表一个网页。第一个Tab的Frame Tree包含有三个Node,分别代表网页A、B和C。第二个Tab的Frame Tree也包含有三Node,分别代表网页C、D和A。

    代表网页B的Node关联有一个RenderFrameHost对象和三个RenderFrameProxyHost对象,其中,RenderFrameHost对象描述的是网页B本身,另外三个RenderFrameProxyHosts对象描述的是网页A、C和D。也就是说,在Browser进程中,代理对象是通过RenderFrameProxyHost类描述的。

    图3所示的网页A、B、C和D分别在不同的Render进程中渲染,如图5所示:

    \

    图5 RenderFrame/RenderRenderFrameProxy

    在负责渲染网页A的Render进程中,有两个RenderFrame对象,分别代表图3所示的两个网页A实例。负责渲染网页A的Render进程还包含有四个RenderFrameProxy对象,分别代表网页B、C和D。在负责渲染网页B、C和D的Render进程中,也有类似的RenderFrame对象和RenderFrameProxy对象。其中,RenderFrameProxy对象就是前面描述的代理对象。

    每一个RenderFrame对象和RenderFrameProxy对象在图1所示的WebKit glue层中,分别对应有一个WebLocalFrame对象和WebRemoteFrame对象,如图6所示:

    \

    图6 WebLocalFrame/WebRemoteFrame

    注意,WebLocalFrame类和WebRemoteFrame类都是从图1的所示的WebFrame类继承下来的,它们都是属于WebKit glue层的。前面我们提到,WebKit glue层是用来封装WebKit层的,WebLocalFrame对象和WebRemoteFrame对象封装的便是WebKit层中的LocalFrame和RemoteFrame对象。Chromium将WebKit glue层和WebKit层统称为Blink模块。这意味着在Blink模块中,前面描述的代理对象是通过WebRemoteFrame和RemoteFrame描述的。

    从前面的分析我们就可以看到,在Chromium中,为什么一个网页既要使用RenderView、RenderWidget,又要使用RenderFrame、WebFrame来描述,它们的作用是不一样的,总结来说,就是:

    1. RenderView描述的是一个用来显示网页内容的RenderWidget。

    2. RenderWidget描述的是一个UI控件。

    3. RenderFrame用来建立网页之间的消息通道。

    在WebKit层中,每一个LocalFrame对象都关联有一个LocalDOMWindow对象,这个LocalDOMWindow对象又关联有一个Document对象。这个Document对象描述的就是一个要在当前Render进程进行加载和渲染的网页。

    在WebKit层中,每一个RemoteFrame对象都关联有一个RemoteDOMWindow对象。但是由于RemoteFrame对象描述的是一个代理对象,因此它关联的RemoteDOMWindow对象是不关联有Document对象的,只是作为一个Place Holder存在当前Render进程中存在。

    LocalDOMWindow对象和Document对象描述的就是HTML规范的DOM Window和Document,它们是在网页的加载和解析过程中创建的。其中,Document对象包含有一个DOM Tree,如图7所示:

    \

    图7 DOM Tree和Layer Tree

    这个图来自官方文档:GPU Accelerated Compositing in Chrome。DOM Tree中的每一个Node对应的就是网页中的每一个HTML标签。每一个HTML标签都对应有一个Render Object,这些Render Object又形成一个Render Object Tree。Render Object知道如何绘制其描述的HTML标签。

    具有相同坐标空间的Render Object都绘制在同一个Render Layer中,这些Render Layer又形成了一个Render Layer Tree,这意味着并不是所有的Render Object都有自己Render Layer。Render Layer Tree的根节点一定对应有一个Render Layer,其余的子节点如果不需要使用的单独的Render Layer,那么就会与父节点使用相同的Render Layer。因此,Render Object与Render Layer是多对一的关系。典型地,设置有透明属性、CSS Filter的Render Object有单独的Render Layer,标签canvas和video对应的Render Object也有单独的Render Layer。Layer是图形渲染引擎普遍使用的一个技术,是为了方便绘制一组具有某些相同属性的图形而生的,这样就不会为每一个图形都单独执行相同的绘图操作。

    在图形渲染引擎中,Layer会对应有一个Backing Surface。在软件方式渲染中,Backing Surface就是一个内存Buffer。在硬件方式渲染中,Backing Surface就是一个FBO。为了减少Buffer和FBO开销。WebKit不会为每一个Render Layer都分配一个Backing Surface,而是让某些Render Layer共用同一个Backing Surface。这意味着Render Layer与Backing Surface是多对一的关系。在WebKit中,具有Backing Surface的Layer称为Graphics Layer,这些Graphics Layer又形成了一个Graphics Layer Tree。每一个Graphics Layer都关联有一个Graphics Context。这个Graphics Context是由Chromium提供给WebKit的,它知识如何绘制Render Layer的内容。Graphics Context绘制出来的内容最后会通过合成器(Compositor)渲染在屏幕上。

    上面描述的Render Object Tree、Render Layer Tree和Graphics Layer都是与网页渲染相关的,是我们下一个系列的文章要分析的内容。在这个系列的文章中,我们主要是分析DOM Tree以及前面描述的Frame Tree。

    Frame Tree由Browser进程创建,DOM Tree由Render进程创建。Frame Tree是在网页内容下载回来前就创建出来的,并且在后面网页的解析和导航时增加或者移除子节点。DOM Tree是在网页内容下载回来后进行创建的,并且是根据网页的内容进行创建的。当一个网页的DOM Tree创建出来之后,它的加载过程就完成了。

    注意,网页内容下载是由Browser进程执行的。Browser进程再将下载回来的网页通过共享内存交给Render进程处理。为什么不直接由Render进程下载呢?这是因为为了安全起见,Render进程按照最小权限原则创建,它不具有网络访问权限,因此就不能从服务器上下载网页内容回来。

    为了更好地理解网页加载过程,以及这个过程中涉及到的各种对象,接下来我们将按照以下三个情景分析网页的加载过程:

    1. Frame Tree的创建过程;

    2. 网页下载过程;

    3. DOM Tree的创建过程。

    将网页抽象为DOM Tree之后,WebKit后面就可以对它进行绘制了。网页的绘制是我们下一个系列文章的关注点,同时也是浏览器的核心所在,因为评价一个浏览器是否流畅就取决于它绘制网页的速度够不够快。DOM Tree是网页进行绘制的起点,因此敬请关注这个系列的文章!

     

    https://www.2cto.com/kf/201601/456010.html

    展开全文
  • PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂、从模拟调试到远程调试,大概分为几部分: 1、Chrome DevTools(谷歌浏览器)的模拟手机调试 2、weinre(web inspectorremote)远程调试...
  • webapp 上拉刷新和下拉加载的实现 用到了 css3动画 touchstart touchend touchmove事件 下拉刷新主要利用了e.touches[0].pageY的差值判断是否执行刷新页面的回调函数 let start_pos = 0, // 记录开始的位置 ...
  • 结合网上相关资料,以及自己项目中的经验,收集汇总了iOS Webapp相关的开发知识,如下。 WebApp是一种新出现的基于WEB形式的类应用程序,运行在高端的移动终端设备上,其应用范围会越来越广。 开发者们都知道在...
  • 混合开发App同h5页面开发,完全不同之一就是预加载技术。因为不可能所有的页面打开时,都需要重新创建, (1) 每次重新创建页面,耗费性能; (2)新建页面时,如果加载耗时较长,则会出现类似白屏问题,体验极...
  • 亲测可用!!!! 屏幕适配终极方案 &lt;meta name="...width=你的基准像素, user-scalable=no"...主要就是这句话,加载header中,底下是原文 ...本篇文章讲解如何像传统PC网页开发一样,使用定宽布局开发WebApp...
  • 接下来给大家来详细讲解一下:在上一节中我们已经介绍怎么去做一个开机引导图了[webAPP项目]基于MUI框架webAPP开发功能流程之引导图制作详解01如果不会的,就按照上一篇文章讲解的自己在作一遍.效果图最终我们要实现的...
  • 页面进入某个模块的时候,对应加载当前模块的js即可,不需要一次性的把所有的js都进行加载。 默认情况下 webpack会把所有的css、js一次性整合在一起,页面初始化的时候全部加载好, 这样会造成性能的影响,我们...
  • webApp开发心得

    2018-08-29 12:38:53
    从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,webapp究竟是好还是不好真是一言难尽哟! webapp使用JavaScript修改页面;紧接着再从服务器传递...
  • 这几天用csdn的手机版,觉得用户体验不错,和我们的产品类似,也是采用webview来加载页面,区别是它他每加载一个页面,都会启用一个新的webview来加载。  我们安卓平台只有一个webview,进入链接后返回,原来的...
  • Eclipse+Maven创建webapp项目<一> 1、开启eclipse,右键new——》other,如下图找到maven project 2、选择maven project,显示创建maven项目的窗口,勾选如图所示,Create a simple proje...
  • 1、CSS3 transform 属性... transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 我们实现大屏自适应使用了transform的缩放功能 ... transform: ...
  • dropload.js支持jquery和zepot,以jquery为例,在页面底端引入jquery和dropload.js: &lt;script type="text/javascript" src="js/jquery-3.3.1.min.js" &gt;&lt;/script&gt; &...
  • 开始在《Swift 集成Alamofire/Kingfisher/MJRefresh/MBProgressHUD的小项目》...这个月使用HBuilder搞WebApp,不管App怎样,也总算是学了一些东西。昨天周日一天没有出门,就自己新建了一个小的WebApp的项目,昨天就把代
  • 由于移动端的webview自带网页缓存机制,所以经常出现H5和原生交互开发时,前端开发人员给移动端提供了一个固定的网址路径,让移动端调用加载当前端开发人员已经重新上传了新的网页内容,移动端加载的仍是以前的...
  • 摘要: 说实话,webApp这两年大有赶超原生app的势头,就webApp本身来讲还有很多缺点,执行效率就是其中一个硬伤。但是国外又有个安迪的人说过,只有软件吃掉硬件的时候硬件才需要跟新换代,这样硬件才有生命力。这个...
1 2 3 4 5 ... 20
收藏数 11,043
精华内容 4,417
关键字:

当前页面重新加载webapp