W3C性能小组引入的新的API window.performance，目前IE9以上的浏览器都支持。它是一个浏览器中用于记录页面加载和解析过程中关键时间点的对象。放置在global环境下，通过JavaScript可以访问到它。

使用性能API

探测和兼容performance：

1
2
3
4

var performance = window.performance || window.msPerformance || window.webkitPerformance;
if(performance){
  // 支持性能 API
}

performance api结构

• performance.memory 显示内存的占用情况，是一个动态值：
  • usedJSHeapSize：表示：JS 对象（包括V8引擎内部对象）占用的内存数
  • totalJSHeapSize： 可使用的内存
  • jsHeapSizeLimit： 内存大小限制
• performance.navigation 显示页面的来源信息
  • redirectCount：重定向的话，页面通过几次重定向跳转而来，默认为0；
  • type：表示页面打开的方式
    • 0 表示 TYPE_NAVIGATENEXT 正常进入的页面（非刷新、非重定向等）
    • 1 表示 TYPE_RELOAD 通过 window.location.reload() 刷新的页面
    • 2 表示 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面（历史记录）
    • 255 表示 TYPE_UNDEFINED 非以上方式进入的页面
• performance.onresourcetimingbufferfull属性是一个在resourcetimingbufferfull事件触发时会被调用的 event handler 。它的值是一个手动设置的回调函数，这个回调函数会在浏览器的资源时间性能缓冲区满时执行。
• performance.timeOrigin 是一系列时间点的基准点，可以精确到万分之一毫秒
• performance.timing:是一系列关键时间点，它包含了网络、解析等一系列的时间数据
  阅读全文 »

跨域解决方案：

1. jsonp （常用）
2. cors （常用）
3. window.name
4. document.domain （特定场景）
5. postMessage (H5)
6. webpack proxy （webScoket） （常用）

什么是跨域？

拿当前HTML页面的地址和在页面中AJAX请求的API地址做比较：

• 如果两个地址的协议域名端口号都相同，相当于HTML页面从同一个源下根据某个地址获取数据，属于“同源策略请求”，基于AJAX是可以直接请求到数据的！
• 如果三者（协议域名端口号）只要有一个不一样，那么就是“非同源策略请求（跨域请求）”，使用AJAX不能直接获取数据了！

HTML页面的地址：http://localhost:8000/A.html
AJAX请求的地址：http://localhost:8000/queryInfo

HTML页面地址：http://localhost:63342/201802LESSON/%E5%85%AC%E5%BC%80%E8%AF%BE/%E8%B7%A8%E5%9F%9F/static/A.html
AJAX请求接口地址：http://localhost:8000/queryInfo

[报错]

Failed to load http://localhost:8000/queryInfo: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:63342' is therefore not allowed access.

阅读全文 »

1.在本地项目中基于NPM/YARN安装第三方模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

第一步：在本地项目中创建一个“package.json”的文件
  作用：把当前项目所有依赖的第三方模块信息（包含：模块名称以及版本号等信息）都记录下来；可以在这里配置一些可执行的命令脚本等；

  基于YARN会默认生成一个“配置清单”，只是信息没有手动创建的全面

  npm init -y 或者 yarn init -y

  创建配置清单的时候，项目目录中不应该出现中文和特殊符号，这样有可能识别不了

第二步：安装
  开发依赖：只有在项目开发阶段依赖的第三方模块
  生产依赖：项目部署实施的时候，也需要依赖的第三方模块

  [npm]
    npm install xxx --save  保存到配置清单的生产依赖中
                    --save-dev  保存到开发依赖中

  [yarn]
    yarn add xxx 默认就是保存到生产依赖中
             --dev / -D  保存到开发依赖中

第三步：部署的时候“跑环境”
  不要自己一个个的安装，只需要执行 npm install 或者 yarn install 即可，npm会自己先检测目录中是否有package.json文件，如果有的话，会按照文件中的配置清单依次安装

=>开发一个项目，我们生成一个配置清单“package.json”，当我们安装第三方模块使用的时候，把安装的模块信息记录到配置清单中，这样以后不管是团队协作开发还是项目部署上线，我们都没有必要把node_modules发文件发送给别人，只需要把配置清单传递给其它人即可，其他人拿到配置清单后，按照清单中依赖项及版本号，重新安装即可（重新安装：“跑环境”）

复合组件：父组件嵌套子组件

传递信息的方式

1. 父组件需要把信息传递给子组件
   “属性传递”：调取子组件的时候，把信息基于属性的方式传递给子组件（子组件PROPS中存储传递的信息）;这种方式只能父组件把信息传递子组件，子组件无法直接的把信息传递给父组件，也就是属性传递信息是单向传递的；

   1 2 3 4 5 6 7 8 9

   export default class Vote extends React.Component { render() { let {title, count} = this.props; return <section className={'panel panel-default'} style={{width: '50%', margin: '20px auto'}}> <VoteHead title={title}/> ... </section>; } }

   上下文传递

   父组件先把需要给后代元素（包括孙子元素）使用的信息都设置好（设置在上下文中），后代组件需要用到父组件中的信息，主动去父组件中调取使用即可

   阅读全文 »

      作为一名前端开发者，我们经常会处理各种事件，比如常见的click、scroll、 resize等等。仔细一想，会发现像scroll、scroll、onchange这类事件会频繁触发，如果我们在回调中计算元素位置、做一些跟DOM相关的操作，引起浏览器回流和重绘，频繁触发回调，很可能会造成浏览器掉帧，甚至会使浏览器崩溃，影响用户体验。针对这种现象，目前有两种常用的解决方案：防抖和节流。

防抖（debounce）

      所谓防抖，就是指触发事件后，就是把触发非常频繁的事件合并成一次去执行。即在指定时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算。

例如：
以我们生活中乘车刷卡的情景举例，只要乘客不断地在刷卡，司机师傅就不能开车，乘客刷卡完毕之后，司机会等待几分钟，确定乘客坐稳再开车。如果司机在最后等待的时间内又有新的乘客上车，那么司机等乘客刷卡完毕之后，还要再等待一会，等待所有乘客坐稳再开车。

      具体应该怎么去实现这样的功能呢？第一时间肯定会想到使用setTimeout方法，那我们就尝试写一个简单的函数来实现这个功能吧~

1
2
3
4
5
6
7
8
9
10
11

var debounce = function(fn,delaytime){
  var timeId;
  return function(){
    var context = this,
      args = arguments;
    timeId && clearTimeout(timeId);
    timeId = setTimeout(() => {
      fn.apply(context,args)
    }, delaytime);
  }
}