web前端
关注
分享
扫一扫
文章平均质量分 79
ouyangyanlan
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Angular.js学习笔记(二)
这一篇，搭建使用angular的小环境。上一篇中，我们介绍了一些Angula.js的小例子来说明了一些用法。这一篇按照我们之前的约定，应该学习service。但是，有读者私下问我要用怎么样的环境来实践一下上面的那些小例子。鉴于此，我们这里先教大家搭建一个小的环境。 我选用的是Eclipse来搭建这个小环境，还有更为专业和合适的，比如webstorm或者subline.这些都是开发前端的很好的工具。原创 2015-10-13 18:56:18 · 1142 阅读 · 0 评论 -
reflow（回流）和repaint（重绘）及其优化
> 前言：为什么不能用CSS通配符 *，CSS选择器层叠为什么不能超过三层，CSS为什么尽量使用类选择器，书写HTML为什么少使用table，为什么结构要尽量简单-DOM树要小….Repain 和 Reflow浏览器解析浏览器解析大概的工作流程大致可归纳为四个步骤： 1. 解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点转载 2017-07-06 22:14:43 · 741 阅读 · 0 评论 -
Yahoo军规-前端性能优化
> 摘要：无论是在工作中，还是在面试中，web前端性能的优化都是很重要的，那么我们进行优化需要从哪些方面入手呢？可以遵循雅虎的前端优化34条军规，不过现在已经是35条了，所以可以说是雅虎前端优化的35条军规。已分类，挺好的，这样对于优化有一个比较清晰的方向1.尽量减少HTTP请求数 80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等转载 2017-07-07 08:55:08 · 825 阅读 · 0 评论 -
link和@import的区别
页面中使用CSS的方式主要有3种： 1. 行内添加定义style属性值，也就是常常说的内联样式。 2. link 3. @import 第二种和第三种都是我们常说的外联样式。 外部引用CSS两种方式link和@import的方式分别是：XML/HTML代码<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css原创 2017-07-07 09:49:32 · 517 阅读 · 0 评论 -
关于favicon.ico的两三事
> 随便打开一个网页：比如 http://www.baidu.com/可以看到在浏览器的标签头上面显示了一个图标，这个图标是：，也就是我们常说的favicon.ico. 由于这篇文章主要讨论favicon.ico,以及各个浏览器对其的不同处理，所以还是新建web项目如下： home.html 代码如下：<!DOCTYPE ht转载 2017-07-07 10:22:02 · 1716 阅读 · 0 评论 -
定时器系列——理解setTimeout和setInterval
前面的话 很长时间以来，定时器一直是javascript动画的核心技术。但是，关于定时器，人们通常只了解如何使用setTimeout()和setInterval()，对它们的内在运行机制并不理解，对于与预想不同的实际运行状况也无法解决。本文将详细介绍定时器的相关内容 setTimeout() setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后执行。它返回一个整数，表示转载 2017-07-09 21:32:02 · 1590 阅读 · 0 评论 -
定时器系列—被誉为神器的requestAnimationFrame
前面的话 与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔。这有什么好处呢？为什么requestAnimationFrame被称为神器呢？本文将详细介绍HTML5新增的定时器requestAnimationFrame 引入 计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面，转载 2017-07-09 21:37:08 · 673 阅读 · 0 评论 -
定时器系列—定时器应用(时钟、倒计时、秒表和闹钟)
前面的话 本文属于定时器的应用部分，分别用于实现与时间相关的四个应用，包括时钟、倒计时、秒表和闹钟。与时间相关需要用到时间和日期对象Date，详细情况移步至此 时钟 最简单的时钟制作办法是通过正则表达式的exec()方法，将时间对象的字符串中的时间部分截取出来，使用定时器刷新即可<div id="myDiv"></div><script>myDiv.innerHTML = /\d\d:\d\转载 2017-07-09 21:41:06 · 1858 阅读 · 0 评论 -
8款惊艳的HTML5粒子动画特效
HTML5确实非常强大，很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果，粒子动画在HTML5应用中也是比较消耗本地资源的，尤其是CPU，但是有些HTML5粒子效果确实能给用户带来不一样的惊艳用户体验。本文就是要分享8款效果惊艳的HTML5粒子动画特效，希望你可以喜欢。1、HTML5 Canvas粒子模拟效果这是一款利用HTML5 Canvas模拟出来的30000个粒子动画，当你用转载 2017-06-12 09:14:53 · 2493 阅读 · 0 评论 -
Angular.js学习笔记（三）
按照约定，我们这一篇开始学习angular中的service。service 即angular中的服务。angular中有很多service组件，每一个都有不同的使用场景。 1.service 在angular中，service都是单例的，几乎每一个学习的教程中都会提到这一点，并加以强调。单例的意思是说，在整个的应用中，每一个service对象只会被实例化一次，其他地方对这个对象的操作，会影响到原创 2015-10-24 14:56:32 · 1475 阅读 · 0 评论 -
Angular.js学习笔记(一)
最近的项目用到了一些新的技术，之前没有接触过，这其中就有Angular.js。这个技术本身来讲，出来也有几年了。只是以前一直没有用过。所以，特此整理Angular的学习笔记系列。总的来说，Angular和之前用到的jQuery和JavaScript完全不是一个感觉，整个的机制和套路也不太相同。那么，我们就正式的开始学习这个东西。 1.AngularJS有着诸多特性，最为核心的是：MVVM、模块化、原创 2015-10-11 15:59:49 · 1992 阅读 · 0 评论 -
Angular.js学习笔记（四）
这一篇我们来学习directive。 1.directive angular有很多内置的指令，同时允许我们自定义指令。angular指令的作用大概可以概括成扩展HTML。其内置指令以ng开头，常见的有ng-app，ng-repeat, ng-model等.关于常见指令的使用和样例，我们给出一个参考资料，写的很好http://www.jb51.net/article/67944.htm 。我们这原创 2015-10-29 18:27:21 · 1469 阅读 · 0 评论 -
BootStrap中datepicker的使用和修改
笔者的应用场景是angular封装下的bootstrap中datepicker的使用。并一定程度上展示这个插件的diy修改.这两天用到了bootstrap中的datepicker插件。然后查阅了一下各种资料，总的来说，这个插件还是很好用的。但是网上的示例多以自由情景下的使用，多配合jQuery或者js来使用，而像笔者这样使用angularJs下封装的datepicker还是比较少的。惯例是先列出几个原创 2015-10-31 17:33:24 · 38623 阅读 · 0 评论 -
AngularJS的orderBy和track by的同时使用问题
在项目中，遇到一个问题，Angular中的ng-repeat中，track by和order by同时使用时候，order by失效了。 我们先来看一下ng-repeat的工作原理。 这里有一个Demo: 1.原始状态 index.html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here原创 2015-12-12 15:29:36 · 11123 阅读 · 0 评论 -
Angular.js学习笔记（五）
按照约定，我们这篇文章来具体掰扯掰扯angular的作用域scope的问题。AngularJS应用最重要的部分之一就是作用域。作用域不仅提供在模型中表示的数据，还将把AngularJS应用中的所有其他组件绑定在一起，如模块、控制器、服务和模板。作用域提供绑定机制，通过这种机制，当模型数据发生变化时，DOM元素和其他代码也将更新。这就是我们曾经提到的AngularJS的一个很显著的特点，双向绑定。这与原创 2015-12-07 13:18:39 · 1271 阅读 · 0 评论 -
DOM树知识点梳理
为什么会提到Dom树呢，或许它对于我们很好地理解网页各个元素，标签和控件搭配，以及各种js，css等的加载会有一些帮助。笔者在工程中遇到了一些小问题，本质就是dom树的东西掌握的不扎实。所以借此来梳理一下。 1.HTML DOM ok, 我们先来看一下W3school中怎么解释这个概念和结构的。W3school是一个很不错的网站，很适合初学者和基础不扎实的人。HTML DOM 定义了访问和操作原创 2015-12-08 12:25:17 · 19699 阅读 · 5 评论 -
JS事件流分析及兼容浏览器使用
事件流分为事件冒泡流和事件捕获流。其中事件捕获流是由natScape浏览器独自开发的一种事件流结构，后来也被火狐、chrome、IE9及以上等主流浏览器支持。而支持事件冒泡流结构的浏览器则涵盖了当下基本所有的浏览器，包括IE8及以前版本。给某个Dom对象(比如某个按钮等)添加事件处理程序的方法主要分为三种：HTML事件处理程序、Dom0级事件处理程序和Dom2级处理程序。各个版本的浏览器对这三种写法的支持程度是不同原创 2016-08-23 16:52:21 · 2081 阅读 · 0 评论 -
前端模块化、AMD和CMD
最近在研究cmd和amd，在网上看到一篇不错的文章，整理下看看。 在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀这时候javascript作为嵌入式的脚本语言的定位动摇了，JavaScr转载 2017-08-08 22:23:15 · 664 阅读 · 0 评论