前端性能优化(一) Performance.timing

页面加载、渲染的一些时间节点

在浏览器中可以使用window.performance.timing获取到这些值(IE9+),其中各个时间点(毫秒时间戳)的意义:

navigationStart

在同一个浏览器上下文中,前一个网页(与当前页面不一定同域)unload 的时间戳,如果无前一个网页 unload ,则与 fetchStart 值相等

unloadEventStart

前一个......

插件插件收集

主要是一些展示效果或者交互的插件

parallax scrolling

视差滚动

可以做单页的炫酷宣传页之类的

grid layout library

自适应列(块)布局、瀑布流

滚动

锚链平滑滚动之类的效果

A small, stand-alone script to automatically adjust textarea height......

页面适配不同设备的解决方案

pc端和移动端分别设计开发

缺点:

维护成本较大;

pc和手机端用两套html、css、js文件,修改优化要分开做

url跳转;

因为pc移动不是一个地址

优点:

交互上更容易接近native app

适合:

大型的网站,pc和移动版可能内容却别比较大;

对移动平台的交互要求高

响应式设计

缺点:

代码冗余。移动pc......

Web Storage

Web Storage:localStorage sessionStroage

sessionStorage

浏览器窗口关闭即会销毁;

浏览器窗口没有关闭,刷新或进入同源另一个页面也会存在【tab】;

打开单独的窗口,即使同一个页面也不是不同的;

适用只需要在浏览一组页面时使用,关闭了就不需要了

localStorage

会存储的更长久

localStorage coo......

移动站前端开发

字体

1.使用无衬线字体

2.英文和数字使用helvetica

3.不指定默认的中文字体

系统默认字体:

ios 系统

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

android 系统

默认中文字体是Droidsansfallback

默认英文和数字字体是Droid Sans

......

编码规范

HTML编码规范

排版风格缩进与换行

用四个空格来代替制表符(tab)

嵌套元素应当缩进一次(即四个空格)。

示例:

<ul>

<li>first</li>

<li>second</li>

</ul>

结构模块划分用空行隔开

标签

不要在自动闭合标签结尾处使用斜线 - HTML5 规范 指出......

关于浏览器内核

目前全球仅有四个独立的浏览器内核,分别为微软IE的Trident、网景最初研发后卖给Mozilla基金会并演化成火狐的Gecko、KDE的开源内核Webkit以及Opera(欧朋)的Presto。

其中,Presto是历史最悠久的内核。

目前微软的Trident在移动终端上主要为WP7系统内置浏览器,

Opera的Presto内核在所有联网设备上都使用,移动终端上主要为 O......