像上面类似的隐式数据类型转换在实际编码中应

2019-07-13 作者:小鱼儿主页高手论坛   |   浏览(191)

JavaScript的数据类型分为六种,分别为null,undefined,boolean,string,number,object。object是引用类型,其它的五种是基本类型或者是原始类型。我们可以用typeof方法打印来某个是属于哪个类型的。不同类型的变量比较要先转类型,叫做类型转换,类型转换也叫隐式转换。隐式转换通常发生在运算符加减乘除,等于,还有小于,大于等。。

在很多情况下,我们需要页面的全屏滚动,尤其是移动端。今天简要的介绍一下全屏滚动的知识。

物体运动原理:通过改变物体的位置,而发生移动变化。 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值) vt。

 AnglarJS作为一款优秀的Web框架,可大大简化前端开发的负担。近日Sebastian Fröstl在一篇博文《AngularJS Performance Tuning for Long Lists》中表示AnglarJS在处理包含复杂数据结构的大型列表时,其运行速度会非常慢。他在文中同时分享了解决方案。下面为该文的译文。

typeof '11' //string    
typeof(11)  //number
'11' < 4   //false

一.全屏滚动的原理
*小鱼儿主页高手论坛,*
1.js动态获取屏幕的高度。**

方法:
      1.运动的物体使用绝对定位
      2.通过改变定位物体的属性(left、right、top、bottom)值来使物体移动。例如向右或左移动可以使用offsetLeft(offsetRight)来控制左右移动。
步骤:
    1、开始运动前,先清除已有定时器 (因为:是连续点击按钮,物体会运动越来越快,造成运动混乱)
    2、开启定时器,计算速度
    3、把运动和停止隔开(if/else),判断停止条件,执行运动

  AnglarJS很棒,但当处理包含复杂数据结构的大型列表时,其运行速度就会非常慢。这是我们将核心管理页面迁移到AngularJS过程中遇到的问题。这些页面在显示500行数据时本应该工作顺畅,但首个方法的渲染时间竟花费了7秒,太可怕了。

本章节单独介绍一下javascript中的隐式数据类型转换,对于它的良好掌握,在实际应用能够简化很多操作。

获取屏幕的高度,设置每一屏幕的高度。

关键点:

  后来,我们发现了在实现过程中存在两个主要性能问题。一个与“ng-repeat ”指令有关,另一个与过滤器有关。

看如下代码实例:

2.监听mousewheel事件。

1、多物体

  下文将分享我们通过不同的方法解决性能问题的经验,希望可以给你带来启示。

var arr = [5];
console.log(arr "");

监听mousewheel事件,并判断滚轮的方向,向上或向下滚动一屏。

将定时器附在对象上
2、链式运动

  一、AngularJS 中的ng-repeat在处理大型列表时,速度为什么会变慢?

上面的代码就是将数组隐式转换为字符串的一个操作,是不是要比下面的方式要简单不少:

二.jQuery插件fullpages介绍 fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:

循环调用定时器:fnEnd函数里开启另外的定时器
3、多值运动

  AngularJS中的ng-repeat在处理2500个以上的双向数据绑定时速度会变慢。这是由于AngularJS通过“dirty checking”函数来检测变化。每次检测都会花费时间,所以包含复杂数据结构的大型列表将降低你应用的运行速度。

var arr = [5];
console.log(arr.toString());
  • 支持鼠标滚动
  • 支持前进后退和键盘控制
  • 多个回调函数
  • 支持手机、平板触摸事件
  • 支持 CSS3 动画
  • 支持窗口缩放
  • 窗口缩放时自动调整
  • 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

循环属性值数组:一个定时器时间,执行多个属性值得改变
判断运动结束,所有属性都到预定的值:增加一个布尔值标志,开始时,var bStop=true;     //假设:所有值都已经到了;在循环的时候判断,如果if(cur!=json[attr])   bStop=false;

  二、提高性能的先决条件

像上面类似的隐式数据类型转换在实际编码中应用很多,下面进入正题。

使用方法

一.定时器 在javascritp中,有两个关于定时器的专用函数,它们是:
1.倒计定时器:timename=setTimeout("function();",delaytime); 2.循环定时器:timename=setInterval("function();",delaytime);   function()是定时器触发时要执行的是事件的函数,可以是一个函数,也可以是几个函数,或者javascript的语句也可以,单要用;隔开;delaytime则是间隔的时间,以毫秒为单位。
  倒计时定时器就是在指定时间后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,其区别在于:前者只是作用一次,而后者则不停地作用。
  倒计时定时器一般用于页面上只需要触发一次的的情况,比如点击某按钮后页面在一定时间后跳转到相应的站点,也可以用于判断一个浏览者是不是你的站点上的“老客”,如果不是,你就可以在5秒或者10秒后跳转到相应的站点,然后告诉他以后再来可以在某个地方按某一个按钮就可以快速进入。
  循环定时器一般用于站点上需要从复执行的效果,比如一个javascript的滚动条或者状态栏,也可以用于将页面的背景用飞雪的图片来表示。这些事件需要隔一段时间运行一次。
  有时候我们也想去掉一些加上的定时器,此时可以用clearTimeout(timename) 来关闭倒计时定时器,而用clearInterval(timename)来关闭循环定时器。

  时间记录指令

一.值类型之间的数据类型转换:

1、引入文件

二.运动研究
**
1.运动:匀速运动(让物体动起来)
**对定时器的使用
给DIV加绝对定位
offsetLeft

  为了测量一个列表渲染所花费的时间,我们写了一个简单的程序,通过使用“ng-repeat”的属性“$last”来记录时间。时间存放在TimeTracker服务中,这样时间记录就与服务器端的数据加载分开了。

javascript中的数据类型可以参阅javascript数据类型详解一章节。

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

问题:到达某个特定位罝停符
解决:做判断,符合条件时关掉定时器(存定时器timer)
速度变慢(一般不动时间,而是改数字-速度)
用变量存速度

  // Post repeat directive for logging the rendering time angular.module('siApp.services').directive('postRepeatDirective', ['$timeout', '$log', 'TimeTracker', function($timeout, $log, TimeTracker) { return function(scope, element, attrs) { if (scope.$last){ $timeout(function(){ var timeFinishedLoadingList = TimeTracker.reviewListLoaded(); var ref = new Date(timeFinishedLoadingList); var end = new Date(); $log.debug("## DOM rendering list took: " (end - ref) " ms"); }); } }; } ]); // Use in HTML: …

(1).数字和字符串使用 运算符:

2、HTML

问题:取7时,offsetLeft没有等于300的时候,div停不下来
解决:>=300 //停在 301

  Chrome开发者工具的时间轴(Timeline)属性

数字和字符串如果使用 运算符进行操作,那么会将数字先转换为字符串,然后进行字符串连接操作:

<div id="dowebok">
  <div class="section">
    <h3>第一屏</h3>
  </div>
  <div class="section">
    <h3>第二屏</h3>
  </div>
  <div class="section">
    <h3>第三屏</h3>
  </div>
  <div class="section">
    <h3>第四屏</h3>
  </div>
</div>

问题:到300后点击按钮还继续走
原因:点击按钮,执行函数,开定时器(执行当前函数一至少执行一次)
解决:加else (没有到达目标之前才执行)

  在Chrome开发者工具的时间轴标签中,你可以看见事件、每秒内浏览器帧数和内存分配。“memory”工具用来检测内存泄漏,及页面所需的内 存。当帧速率每秒低于30帧时就会出现页面闪烁问题。“frames”工具可帮助了解渲染性能,还可显示出一个JavaScript任务所花费的CPU时 间。

var antzone = "antzone";
var num = 8;
console.log(antzone num);

每个 section 代表一屏,默认显示“第一屏”,如果要指定加载页面时显示的“屏幕”,可以在对应的 section 加上class=”active”,如:

问题:连续点击,速度变快
原因:每点击一次就开一个定时器,点击几次就有几个定时器同时工作
解决:保证每次只有一个定时器工作,先cearlnterval ()

  三、通过限制列表的大小进行基本的调优

(2).布尔值参与的 运算符操作:

<div class="section active">第三屏</div>

示例1,分享到:

  缓解该问题,最好的办法是限制所显示列表的大小。可通过分页、添加无限滚动条来实现。

如果有布尔型参与,那么首先会将布尔值转换为对应的数字或者字符串,然后再进行相应的字符串连接或者算数运算。

同时,可以在 section 内加入 slide(左右滑动),如:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>分享到</title>
<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>
<script>
window.onload=function ()
{
  var oDiv=document.getElementById('div1');

  oDiv.onmouseover=function ()
  {
    startMove(0);
  };
  oDiv.onmouseout=function ()
  {
    startMove(-150);
  };
};

var timer=null;

function startMove(iTarget)
{
  var oDiv=document.getElementById('div1');

  clearInterval(timer);
  timer=setInterval(function (){
    var speed=0;

    if(oDiv.offsetLeft>iTarget)
    {
      speed=-10;
    }
    else
    {
      speed=10;
    }

    if(oDiv.offsetLeft==iTarget)
    {
      clearInterval(timer);
    }
    else
    {
      oDiv.style.left=oDiv.offsetLeft speed 'px';
    }
  }, 30);
}
</script>
</head>

<body>
<div id="div1">
  分享到
</div>
</body>
</html>

  分页

var bool = true;
var num = 8;
console.log(bool   num);
<div id="fullpages">
  <div class="section">第一屏</div>
  <div class="section">第二屏</div>
  <div class="section">
    <div class="slide">第三屏的第一屏</div>
    <div class="slide">第三屏的第二屏</div>
    <div class="slide">第三屏的第三屏</div>
    <div class="slide">第三屏的第四屏</div>
  </div>
  <div class="section">第四屏</div>
</div>

效果如下:

  分页,我们可以使用AngularJS的“limitTo”过滤器(AngularJS1.1.4版本以后)和“startFrom”过滤器。可以通过限制显示列表的大小来减少渲染时间。这是减少渲染时间最高效的方法。

本文由小鱼儿玄机30码发布于小鱼儿主页高手论坛,转载请注明出处:像上面类似的隐式数据类型转换在实际编码中应

关键词: 小鱼儿玄机30码