2017年1月22日
摘要: 概述 绘图方法 图像处理方法 drawImage方法 getImageData方法,putImageData方法 toDataURL方法 save方法,restore方法 动画 像素处理 灰度效果 复古效果 红色蒙版效果 亮度效果 反转效果 参考链接 概述 绘图方法 图像处理方法 drawImage 阅读全文
posted @ 2017-01-22 10:32 vsmart 阅读(155) 评论(0) 推荐(0) 编辑
摘要: 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度 阅读全文
posted @ 2017-01-22 10:29 vsmart 阅读(263) 评论(0) 推荐(0) 编辑
摘要: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<figure>和<figcaption>来语义化地表示带标题的图片 <figure> <img src=”path/to/image” alt=”About im 阅读全文
posted @ 2017-01-22 10:27 vsmart 阅读(208) 评论(0) 推荐(0) 编辑
摘要: 还记得图片延迟加载方案 那篇博文吗?当初分析了 定宽高值 和 定宽高比 这两种常见的图片延迟加载场景,也介绍了他们的应对方案,还做了一点技术选型的工作。 经过一段时间的项目实践,在先前方案的基础上又做了很多深入的优化工作。最终将好奇心日报的网页打开速度将降低到了1s内,Web端和Mobile端加载3 阅读全文
posted @ 2017-01-22 10:26 vsmart 阅读(661) 评论(0) 推荐(0) 编辑
摘要: 对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助到大家。 方法一: 1、HTML 部分: <div class="box"> <p 阅读全文
posted @ 2017-01-22 10:21 vsmart 阅读(1684) 评论(0) 推荐(0) 编辑
摘要: 最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去。在分享页面上提供公司APP的下载。但是在很多应用的浏览器中,点击下载链接无法下载应用。那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面。通过js就可以判断当前页面是在什么浏览器打开的。 以下是一段示 阅读全文
posted @ 2017-01-22 10:19 vsmart 阅读(180) 评论(0) 推荐(0) 编辑