chenogeの日志


  • 首页

  • 归档

  • 搜索

时间戳、时区以及时间格式

发表于 2018-12-26

一、时间戳

时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数。

注:时间戳是不会跟着时区的改变而改变,同一时刻的时间戳都是相同的。


阅读全文 »

pushState和replaceState

发表于 2018-12-24

window 对象通过 history 对象提供了对浏览器历史的访问。它暴露了很多有用的方法和属性,允许你在用户浏览历史中向前和向后跳转,同时——从HTML5开始——提供了对history栈中内容的操作。

1
2
3
window.history.back(); // 与点击浏览器回退按钮的效果相同
window.history.forward(); // 与点击浏览器前进按钮的效果相同
window.history.go(-1); // 通过与当前页面相对位置,来标志某一特定页面


一、pushState

pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略),和 (可选的) 一个URL。让我们来解释下这三个参数详细内容:

  • 状态对象
    • 状态对象state是一个JavaScript对象
    • popstate事件被触发时,该事件的state属性包含该历史记录状态对象的副本
    • 状态对象可以是能被序列化的任何东西,但有640k的大小限制
  • 标题
    • Firefox 目前忽略这个参数,但未来可能会用到。传递一个空字符串在这里是安全的,而在将来这是不安全的。二选一的话,你可以为跳转的state传递一个短标题。
  • URL
    • 该参数定义了新的历史URL记录
    • 注意,调用 pushState() 后浏览器并不会立即加载这个URL
    • 新URL不必须为绝对路径。如果新URL是相对路径,那么它将被作为相对于当前URL处理
    • 新URL必须与当前URL同源,否则 pushState() 会抛出一个异常。该参数是可选的,缺省为当前URL
1
2
3
4
5
6
7
// http://mozilla.org/foo.html 假设当前url

let stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

// 这将使浏览器地址栏显示为 http://mozilla.org/bar.html
// 但并不会导致浏览器加载 bar.html ,甚至不会检查bar.html 是否存在。

注: pushState() 绝对不会触发 hashchange 事件,即使新的URL与旧的URL仅哈希不同也是如此。vue-router 底层调用的正是history.pushState和history.replaceState。


阅读全文 »

visibilityState

发表于 2018-12-20

一、document.visibilityState

Page Visibility API 在document对象上,新增了一个document.visibilityState属性。该属性返回一个字符串,表示页面当前的可见性状态,共有三个可能的值。

  • hidden:页面彻底不可见
  • visible:页面至少一部分可见
  • prerender:页面即将或正在渲染,处于不可见状态

其中,hidden状态和visible状态是所有浏览器都必须支持的。prerender状态只在支持”预渲染”的浏览器上才会出现,比如 Chrome 浏览器就有预渲染功能,可以在用户不可见的状态下,预先把页面渲染出来,等到用户要浏览的时候,直接展示渲染好的网页。


只要页面可见,哪怕只露出一个角,document.visibilityState属性就返回visible。只有以下四种情况,才会返回hidden。

  • 浏览器最小化
  • 浏览器没有最小化,但是当前页面切换成了背景页
  • 浏览器将要卸载(unload)页面
  • 操作系统触发锁屏屏幕


注意,document.visibilityState属性只针对顶层窗口,内嵌的<iframe>页面的document.visibilityState属性由顶层窗口决定。使用 CSS 属性隐藏<iframe>页面(比如display: none;),并不会影响内嵌页面的可见性。

阅读全文 »

Performance

发表于 2018-12-20

一、performance

performace允许访问当前页面性能相关的信息,主要功能都是由Performance Timeline API、the Navigation Timing API、the User Timing API、 the Resource Timing API提供的。

1、performance.timing,提供了各种与浏览器处理相关的时间数据
名称 作用(这里所有时间戳都代表UNIX毫秒时间戳)
connectEnd 浏览器与服务器之间的连接建立时的时间戳,连接建立指的是所有握手和认证过程全部结束
connectStart HTTP请求开始向服务器发送时的时间戳,如果是持久连接,则等同于fetchStart。
domComplete 当前网页DOM结构生成时,也就是Document.readyState属性变为“complete”,并且相应的readystatechange事件触发时的时间戳。
domContentLoadedEventEnd 当前网页DOMContentLoaded事件发生时,也就是DOM结构解析完毕、所有脚本运行完成时的时间戳。
domContentLoadedEventStart 当前网页DOMContentLoaded事件发生时,也就是DOM结构解析完毕、所有脚本开始运行时的时间戳。
domInteractive 当前网页DOM结构结束解析、开始加载内嵌资源时,也就是Document.readyState属性变为“interactive”、并且相应的readystatechange事件触发时的时间戳。
domLoading 当前网页DOM结构开始解析时,也就是Document.readyState属性变为“loading”、并且相应的readystatechange事件触发时的时间戳。
domainLookupEnd 域名查询结束时的时间戳。如果使用持久连接,或者从本地缓存获取信息的,等同于fetchStart
domainLookupStart 域名查询开始时的时间戳。如果使用持久连接,或者从本地缓存获取信息的,等同于fetchStart
fetchStart 浏览器准备通过HTTP请求去获取页面的时间戳。在检查应用缓存之前发生。
loadEventEnd 当前网页load事件的回调函数结束时的时间戳。如果该事件还没有发生,返回0。
loadEventStart 当前网页load事件的回调函数开始时的时间戳。如果该事件还没有发生,返回0。
navigationStart 当前浏览器窗口的前一个网页关闭,发生unload事件时的时间戳。如果没有前一个网页,就等于fetchStart
redirectEnd 最后一次重定向完成,也就是Http响应的最后一个字节返回时的时间戳。如果没有重定向,或者上次重定向不是同源的。则为0
redirectStart 第一次重定向开始时的时间戳,如果没有重定向,或者上次重定向不是同源的。则为0
requestStart 浏览器向服务器发出HTTP请求时(或开始读取本地缓存时)的时间戳。
responseEnd 浏览器从服务器收到(或从本地缓存读取)最后一个字节时(如果在此之前HTTP连接已经关闭,则返回关闭时)的时间戳
responseStart 浏览器从服务器收到(或从本地缓存读取)第一个字节时的时间戳。
secureConnectionStart 浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接,则返回0。
unloadEventEnd 如果前一个网页与当前网页属于同一个域下,则表示前一个网页的unload回调结束时的时间戳。如果没有前一个网页,或者之前的网页跳转不是属于同一个域内,则返回值为0。
unloadEventStart 如果前一个网页与当前网页属于同一个域下,则表示前一个网页的unload事件发生时的时间戳。如果没有前一个网页,或者之前的网页跳转不是属于同一个域内,则返回值为0。

组合值的意义

DNS查询耗时 :domainLookupEnd - domainLookupStart

TCP链接耗时 :connectEnd - connectStart

request请求耗时 :responseEnd - responseStart

解析dom树耗时 : domComplete - domInteractive

白屏时间 :responseStart - navigationStart

domready时间 :domContentLoadedEventEnd - navigationStart

onload时间 :loadEventEnd - navigationStart


阅读全文 »

git分支开发规范

发表于 2018-12-19

分支构成

master和develop分支一直存在,且名称不会变化,一般不直接修改这2个分支,由其他分支合并而来。feature、release、hotfix分别用于功能点开发、优化,特定版本测试,线上问题紧急处理。同一类型的分支会产生多个。

阅读全文 »

埋点分析定义

发表于 2018-12-19

一、基础指标

PV、UV、VV、IP是网站分析中最基础、最常见的指标

  • 访问次数(Visit View)
    • 当访客完成所有的浏览并最终关掉该网站的所有页面时,便完成了一次访问
    • 若访客连续30分钟没有新开和刷新页面,则被计算为本次访问结束
  • 网页浏览数(Page View)
    • 指网页的浏览次数,用以衡量用户访问的网页数量。多次打开或刷新同一网页则浏览量累计
  • 独立访客数(Unique Visitor)
    • 1天内相同的访客多次访问网站只计算1个UV,以cookie为依据
  • 独立IP数(IP)
    • 1天内相同的访客多次访问网站只计算1个独立IP,以IP为依据


阅读全文 »

white-space与换行

发表于 2018-12-14

white-space CSS 属性是用来设置如何处理元素中的空白。

1
white-space: normal | pre | nowrap | pre-wrap | pre-line

normal:连续的空白符会被合并,换行符会被当作空白符来处理。填充line盒子时,必要的话会换行。

nowrap:和 normal 一样,连续的空白符会被合并。但文本内的换行无效。

pre:连续的空白符会被保留。在遇到换行符或者<br/>元素时才会换行。

pre-wrap:连续的空白符会被保留。在遇到换行符或者<br/>元素,或者需要为了填充line盒子时才会换行。

pre-line:连续的空白符会被合并。在遇到换行符或者<br/>元素,或者需要为了填充line盒子时会换行。


阅读全文 »

CSS-Scroll-Snap

发表于 2018-12-11

CSS Scroll Snap是CSS中一个独立的模块,可以让网页容器滚动停止的时候,自动平滑定位到指定元素的指定位置,包含scroll-*以及scroll-snap-*等诸多CSS属性。

Scroll Snap模块相关CSS属性可以分为两类,一类作用在滚动容器上,一拨作用在你希望有滚动定位点的子元素上。具体参见下表:

作用在滚动容器上 作用在定位子项上
scroll-snap-type scroll-snap-align
scroll-snap-stop scroll-margin/scroll-margin-*
scroll-padding/scroll-padding-*


阅读全文 »

字符编码与存储_UCS_UTF

发表于 2018-12-07

1、字节和字符的区别

ASCII时代,字节和字符是一样的。当Unicode出现后,事情有所不同了。字节(octet)是一个八位的存储单元,取值范围一定是0~255。而字符(character,或者word)为语言意义上的符号,范围就不一定了。例如在UCS-2中定义的字符范围为0~65535,它的一个字符占用两个字节。


2、UCS-2和UCS-4

Unicode是为整合全世界的所有语言文字而诞生的。任何文字在Unicode中都对应一个值,这个值称为代码点(code point)。代码点的值通常写成U+ABCD的格式。而文字和代码点之间的对应关系就是UCS-2(Universal Character Set coded in 2 octets)。顾名思义,UCS-2是用两个字节来表示代码点,其取值范围为 U+0000~U+FFFF。


为了能表示更多的文字,人们又提出了UCS-4,即用四个字节表示代码点。它的范围为 U+00000000~U+7FFFFFFF,其中 U+00000000~U+0000FFFF和UCS-2是一样的。


要注意,UCS-2和UCS-4只规定了代码点和文字之间的对应关系,并没有规定代码点在计算机中如何存储。规定存储方式的称为UTF(Unicode Transformation Format),其中应用较多的就是UTF-8。


注:

  • Unicode不是一次性定义的,而是分区定义。每个区可以存放65536个字符,称为一个平面(plane),定义了17个平面,目前Unicode字符集的大小是1,114,112。
  • 最前面的65536个字符位,称为基本平面(缩写BMP),是Unicode最先定义和公布的一个平面。


阅读全文 »

console.log格式化输出

发表于 2018-12-07

字符串替代和格式设置

传递到任何记录方法的第一个参数可能包含一个或多个格式说明符。格式说明符由一个 % 符号与后面紧跟的一个字母组成,字母指示应用到值的格式。字符串后面的参数会按顺序应用到占位符。

1
2
3
4
5
 // Sam has 100 points
console.log("%s has %d points", "Sam", 100);

// Node count: 2, and the time is 1544184144238.
console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());

格式说明符的完整列表为:

说明符 输出
%s 将值格式化为字符串
%i 或 %d 将值格式化为整型
%f 将值格式化为浮点值
%o 将值格式化为可扩展 DOM 元素。如同在 Elements 面板中显示的一样
%O 将值格式化为可扩展 JavaScript 对象
%c 将 CSS 样式规则应用到第二个参数指定的输出字符串
1…8910…27

chenoge

一个程序猿和一支笔的故事

267 日志
438 标签
© 2020 chenoge
由 Hexo 强力驱动
|
主题 — NexT.Muse v5.1.4