在之前一段时间看了个首屏优化细节的文章,然后在自己项目里实际操作了下。

现在的业务逻辑涉及移动端支付,所以第一个需要考虑的就是首屏时间,如果首屏时间过长,用户体检是十分差的。其实就做了很简单一件事,在移动端将涉及页面渲染的样式表写成了内联样式。

大家都知道,请求了html之后才回根据html里面的链接去请求相应的样式,图片,视屏种种。而首屏时间就是将涉及页面渲染的种种全部加载完毕,浏览器render完毕之后的时间。这里也就能够理解要将样式表写在head里面,而把js写在</body>之前的原因了。因为css涉及页面渲染,而js大多是业务逻辑,大多数不涉及页面渲染,所以完全可以把js的解析放在页面渲染之后。当然,你也注意到,大多数js不涉及页面渲染,而少数js也涉及页面渲染的,这时候可以把js放在<body>后面,另外这里也要注意,dom节点可能还没有生成,所以操作上一般是在<body>上加class,然后配合css的子父选择器。

本文翻译自 12 little known css facts(the-sequel)
原作者是Natalia Balska

原作者在一年前也发表过一篇12个鲜为人知的css现象,然后这篇文章现在也还很受欢迎,有时间的同学可以看看。原作者又收集了更多的鲜为人知的css性质,也就是这篇文章的来源。

1、border-radius 有“/”的语法

首先,下面这个你信或则不信它都是一条border-radius的正确的代码:

1
2
3
.box {
border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
}

如果你没见过,可能会有些困惑,下面是一些介绍:

如果给定的值中有“/”,则在“/”前面的值是指定水平方向的半径(radius),在“/”后面的就是指定垂直方向的半径(radius)。如果没有“/”,就是同时指定水平和垂直方向的半径(radius)。

canvas 笔记(1)

By hiluluke on

初步

首先需要在html中定义html结构

1
<canvas id="mycanvas" width="600" height="300"></canvas>

然后需要在js上获取canvas和定义动画类型

1
2
var canvas = document.getElementById("mycanvas"); //获取canvas
var context = canvas.getContext("2d");//定义2d动画

然后就可以进行一些绘图操作:

1
2
3
4
5
context.lineWidth = 10;定义线条宽度
context.strokeStyle = "blue";//定义线条样式(颜色)
context.moveTo(50, canvas.height);移动光标
contex.lineTo(x,y)//从光标的位置画一条线到(x,y)
context.stroke()绘图

less note

By hiluluke on

less比较好入门,看了2-3个小时的文档,觉得已经7788了。东西并不是很多。这个笔记比较干,比较精简,建议还是看文档好些,反正不难。

less基础

  • less运行
    其可以在html中嵌入一个less.js文件或则使用node工具lessc,也可以用gulp,grunt在部署之前编译。

lessc

1
sudo npm install -g lessc

然后就可以使用命令行编译less了。

1
lessc test.less test.css

上面代码就会将test.less编译输出在当前目录下test.css。

javascript继承

By hiluluke on

本文主要是自己在阅读javascript高级程序设计之后所做的笔记。

js的继承主要依靠原型链的方式实现,与一般的oo语言有些不一样。

原型链

利用原型让一个引用类型继承另一个引用类型的属性和方法。让原型对象等于另一个类型的实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//继承了 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue());//true