![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5 + CSS3
SerenoShen
不断提升自己!加油!加油!!
展开
-
HTML5--web存储学习笔记
HTML5--web存储学习笔记原创 2014-10-18 23:12:41 · 834 阅读 · 0 评论 -
移动端 touchmove高频事件与requestAnimationFrame的结合优化
移动端最高频耗内存的的操作 莫属 touchmove 与scroll事件 两者需要 微观的 优化;这里 我们 讲述 touchmove;touchmove 事件发生很频繁,会比屏幕刷新率快,导致无效的渲染和重绘;帧数 –显示设备通常的刷新率通常是50~60Hz –1000ms / 60 ≈ 16.6ms(1毫秒的优化意味着 6%的性能提升)浏览器对每一帧转载 2016-04-28 00:13:54 · 10196 阅读 · 1 评论 -
HTML5移动端meta标签中viewpoint简介
viewport 语法介绍: content=" height = [pixel_value | device-height] ,原创 2016-04-30 00:00:26 · 7880 阅读 · 0 评论 -
AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析
路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分。那么,对于angular而言,它自然也有内置的路由模块:叫做ngRoute。不过,大家很少用它,因为它的功能太有限,往往不能满足开发需求!!于是,一个基于ngRoute开发的第三方路由模块,叫做ui.router,受到了大家的“追捧”。转载 2016-05-04 13:14:55 · 2778 阅读 · 0 评论 -
移动端H5,Hybird开发点击穿透事件处理
What现象描述: 页面中存在上下两个层,上层元素具有表单,链接或者绑定相应事件,上层元素点击或触摸,导致上层DOM改变,下层中同样位置的 元素触发点击事件。这种现象就是点击穿透(Ghost Clicks)。要理解这种现象,首先要了解移动端的相关事件 —— 触摸(Touch)事件,点击(Click)事件。以及移动端事件触发的顺序关系:touchstart --> mouseover(有原创 2016-08-27 20:19:52 · 5085 阅读 · 0 评论 -
前端性能优化--避免大规模、复杂的布局
布局,就是浏览器计算DOM元素的几何信息的过程:元素大小和在页面中的位置。每个元素都有一个显式或隐式的大小信息,决定于其CSS属性的设置、或是元素本身内容的大小、抑或是其父元素的大小。在Blink/WebKit内核的浏览器和IE中,这个过程称为布局。在基于Gecko的浏览器(比如Firefox)中,这个过程称为Reflow。虽然称呼不一样,但二者在本质上是一样的。布局通常是在整个文档范围内转载 2016-08-26 11:26:05 · 1353 阅读 · 0 评论 -
canvas 实现环形进度条
直接上代码: Canvas progress (function (){ var c = document.getElementById('process'), process = 0, ctx = c.getContext('2d'); // 画灰色的圆 ctx.beginPath(); ctx.arc(100, 100, 80原创 2016-09-06 23:11:44 · 8376 阅读 · 0 评论 -
提升CSS文件的可维护性--采用BEM进行CSS类进行命名
BEM(Block–Element-Modifier)是什么?BEM是由Yandex公司推出的一套CSS命名规范,官方是这么描述它的:BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development--原创 2016-11-10 20:39:28 · 2448 阅读 · 0 评论 -
移动端Web界面滚动性能优化: Passive event listeners
移动端Web界面滚动性能优化: Passive event listeners今晚在阅读VueJS2的源码时,发现了下面的一段代码,感觉自己瞬间知识储备不够用了,所以决定深入研究一下,故总结得出此文。关于VueJS的源码解读,之后会整理出学习笔记。这里先简单记录一些碎片化的知识点。 try { const opts = {} Object.defineProperty(opts, '原创 2017-04-16 22:16:03 · 12257 阅读 · 5 评论 -
web应用性能优化--采用gzip静态压缩+动态压缩方式压缩js、css文件
web应用性能优化–采用gzip静态压缩+动态压缩方式压缩js、css文件Web应用中通常都会有大量的javascript和css文件,如开源的javascript框架jquery、extjs-core等等,这些js框架,动辄上百K,这些框架大多数时候能提升我们的开发效率,但是使用中稍不留神很容易导致系统响应缓慢。为了提高js、css文件的下载速度,在网络传输层面提高页面的响应速度,减小文件的大小才原创 2015-11-16 15:30:49 · 10353 阅读 · 0 评论 -
sass(Syntactically Awesome StyleSheets)语法介绍
sass(Syntactically Awesome StyleSheets)语法sass是一种CSS的预编译工具。它允许我们使用变量,嵌套规则,混和编译,外部文件导入等等特性,其编译出来的文件CSS完全兼容。文件名后缀(.sass & .scss)sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的 css文件格式差不多,使原创 2015-10-15 11:23:58 · 957 阅读 · 0 评论 -
在Webstorm9.x中配置 Sass 和 Compass Watcher
一 : 配置Compass Watcher1 首先用 webstorm 打开创建的compass项目,然后依次选择:1File->Settings->File Watchers点击右边的加号,选择 Compass SCSS 添加一个 watcher :2 在Program里面选择 ruby 安装路径的原创 2015-10-14 17:48:11 · 1048 阅读 · 0 评论 -
浏览器可以注册的事件小结
Html事件列表 一般事件: onClick HTML: 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 鼠标双击事件 onMouseDown HTML: 鼠标上的按钮被按下了 onMouseUp HTML: 鼠标按下后,松开时激发的事件 onMouseOver HTML: 当鼠标移动到某对象范围的上方时触发的事件 onMouseM转载 2015-01-14 11:24:41 · 484 阅读 · 0 评论 -
JavaScript与jQuery中获取屏幕的宽度和高度的常用方法以及HTML中精确定位
浏览器的宽高示意图:JavaScript中常用的方法:网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线原创 2015-08-11 09:20:52 · 4031 阅读 · 2 评论 -
使用电脑远程调试安卓手机上浏览器的JS
有时候要开发在手机浏览器上运行的网页,这样就涉及到要调试JS,在电脑上怎么模拟,跟使用真机还是有区别,这里介绍几种用电脑远程调试JS的方法。1.使用google浏览器,因为安卓本来就是谷歌的,因此它本身对此有支持,开发了相关的插件 1)首先,电脑上要有谷歌浏览器(Chrome),最好是最新版的(Chrome 31以上); 2)安装了安卓的SDK; 3)转载 2015-08-25 14:27:47 · 4183 阅读 · 0 评论 -
Markdown常用语法简介
Markdown 语法标题:如果一段文字被定义为标题,只要在这段文字前加 # 号即可。# 标题一## 标题二...###### 标题六列表:列表的显示只需要在文字前加上 - 或 * 即可变为无序列表,有序列表则直接在文字前加 1. 2. 3. 符号要和文字之间加上一个字符的空格。无需列表:* 小标题一* 小标题二有序列表:1. 小原创 2015-08-27 11:55:01 · 580 阅读 · 0 评论 -
Flex 布局基础语法篇
网页布局(layout)是CSS的一个重点应用。复制代码 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它原创 2015-08-28 08:36:33 · 1148 阅读 · 2 评论 -
CSS元素定位--浮动(float)与清楚(clear)
CSS中定位的基本思想: 定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素,又或者是相对于另一个元素,甚至相对于浏览器窗口本身的位置。浮动 ( float ): CSS中允许对所有元素进行浮动,这种行为使用属性 float 实现。float可选值:left | right | none | inherit浮动元素: 对于浮动元素有几点需要记住:* 声明为浮动的元素会被以某种方式原创 2015-09-03 18:17:29 · 3067 阅读 · 0 评论 -
css中元素不可见的几种办法
一、前言今天起床之后已经是11点多了。。。有点悲催了。然后出去吃个东西,我只能说太阳火辣辣的,顺便拍了一张照片,深圳就是太阳太好了,每天都是蓝天白云,这是帝都和北方的童鞋羡慕嫉妒~恨不恨我就不懂。票票的蓝天白云如下:所以只能索性屁颠屁颠地吃完东西之后马上回来,接着把房间里里外外打扫了一遍//有点小洁癖的双子座,看了一会书,提到了这个visibility这个属性,所以把目转载 2015-10-22 11:20:49 · 3123 阅读 · 0 评论 -
HTML5 Web Worker深入浅出教程
HTML5 Web Worker 的多线程特性为基于 Web 系统开发的程序人员提供了强大的并发程序设计功能,它允许开发人员设计开发出性能和交互更好的富客户端应用程序。本文不仅仅详细讲述 HTML5 中的多线程规范。同时,也以几种典型的应用场景为例,以实例的形式讲解 HTML5 中多线程编程以及应用,为用户提供了详细而全面的参考价值,并且指导开发人员设计和构建更为高效和稳定的 Web 多线程应用。原创 2015-11-11 11:29:31 · 5517 阅读 · 0 评论 -
CSS3 Flex布局详解与新旧法语对比
CSS Flex 新旧法语对比FlexBox 模型图解老版本的语法定义容器的display属性.box{ display: -moz-box; /*Firefox*/ display: -webkit-box; /*Safari,Opera,Chrome*/ display: box;}容器属性1.box-pack 属性box-pack定义子元素主轴对齐方式, box-pa原创 2016-09-08 11:24:57 · 3460 阅读 · 0 评论