2017 年 1月随笔档案 - vsmart

Canvas API

摘要：概述绘图方法图像处理方法 drawImage方法 getImageData方法，putImageData方法 toDataURL方法 save方法，restore方法动画像素处理灰度效果复古效果红色蒙版效果亮度效果反转效果参考链接概述绘图方法图像处理方法 drawImage 阅读全文

posted @ 2017-01-22 10:32 vsmart 阅读(160) 评论(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 阅读(269) 评论(0) 推荐(0) 编辑

HTML5 28个新特性

摘要：1. 新的Doctype 尽管使用<!DOCTYPE html>，即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素用<figure>和<figcaption>来语义化地表示带标题的图片 <figure> <img src=”path/to/image” alt=”About im 阅读全文

posted @ 2017-01-22 10:27 vsmart 阅读(209) 评论(0) 推荐(0) 编辑

如何让你的网页打开速度降低到 1s 内

摘要：还记得图片延迟加载方案那篇博文吗？当初分析了定宽高值和定宽高比这两种常见的图片延迟加载场景，也介绍了他们的应对方案，还做了一点技术选型的工作。经过一段时间的项目实践，在先前方案的基础上又做了很多深入的优化工作。最终将好奇心日报的网页打开速度将降低到了1s内，Web端和Mobile端加载3 阅读全文

posted @ 2017-01-22 10:26 vsmart 阅读(674) 评论(0) 推荐(0) 编辑

css如何让浮动元素水平居中

摘要：对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法，下面先给大家分享一下三种方法，希望能帮助到大家。方法一： 1、HTML 部分： <div class="box"> <p 阅读全文

posted @ 2017-01-22 10:21 vsmart 阅读(1730) 评论(0) 推荐(0) 编辑

判断浏览器

摘要：最近做很多HTML5的项目，很多页面会通过微信微博等SNS分享出去。在分享页面上提供公司APP的下载。但是在很多应用的浏览器中，点击下载链接无法下载应用。那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面。通过js就可以判断当前页面是在什么浏览器打开的。以下是一段示阅读全文

posted @ 2017-01-22 10:19 vsmart 阅读(181) 评论(0) 推荐(0) 编辑

计算字符串长度(英文占1个字符，中文汉字占2个字符)

摘要：方法一：代码如下: String.prototype.gblen = function() { var len = 0; for (var i=0; i<this.length; i++) { if (this.charCodeAt(i)>127 || this.charCodeAt(i)==94 阅读全文

posted @ 2017-01-19 15:50 vsmart 阅读(380) 评论(0) 推荐(0) 编辑

将HTML5 Canvas的内容保存为图片图文全成

摘要：<html>  <meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-sc 阅读全文

posted @ 2017-01-18 14:31 vsmart 阅读(321) 评论(0) 推荐(0) 编辑

移动端点透事件解决

摘要：document.addEventListener('touchstart',function(ev){ ev.preventDefault();}) 如果页面也a链接或input输入框也同时被阻止了，解决这个办法是用window.location.href="";及添加阻止冒泡的方法阅读全文

posted @ 2017-01-17 16:02 vsmart 阅读(286) 评论(0) 推荐(0) 编辑

简易模板字符串替换

摘要：function template(wrapParent,data){ var wrapParent = getObj(wrapParent); var tplhtml = getAttr(wrapParent, "data-html"); var tplstr = getObj(tplhtml). 阅读全文

posted @ 2017-01-17 14:21 vsmart 阅读(218) 评论(0) 推荐(0) 编辑

公共弹出层面向对象——组件开发

摘要：var SETTINGS = { width : 300, minHeight : 100, title:'请添加标题', content:'请添加文本内容！', mask : true, dragable:false, dir : 'center', opacity : 0.1, cancelBt 阅读全文

posted @ 2017-01-17 14:14 vsmart 阅读(182) 评论(0) 推荐(0) 编辑

手机移动端初始rem 1rem = 100px

摘要：(function setDevice(deviceW){ var html = document.documentElement; var hWidth = html.getBoundingClientRect().width; html.style.fontSize = hWidth/devic 阅读全文

posted @ 2017-01-17 14:05 vsmart 阅读(365) 评论(0) 推荐(0) 编辑

CSS超出省略号

摘要：单行省略号：display:block;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;多行省略号： display: -webkit-box; -webkit-box-orient: vertical; -webkit-l 阅读全文

posted @ 2017-01-17 13:51 vsmart 阅读(276) 评论(0) 推荐(0) 编辑