关注前端开发微信微信号web007007

MAC升级Nodejs

MAC升级Nodejs

第一步,先查看本机node.js版本: node -v 第二步,清除node.js的cache: sudo npm cache clean -f 第三步,安装 n 工具,这个工具是专门用来管理node.js版本的,别怀疑这个工具的名字,是他是他就是他,他的名字就是 “n” sudo npm install -g n 第四步,安装最新版本的node.js sudo n stable 第五步,再次查看本机的node.js版本: node -v

阅读全文...

JavaScript判断浏览器类型及版本

JavaScript判断浏览器类型及版本

你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。 浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。 JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有...

阅读全文...

天涯html&css基础框架

天涯html&css基础框架

html申明 对ie6-8在html中添加no-css3这个class和各个版本的class,对ie7以下添加lte7这个class,然后根据我们目前使用浏览器的比例,把第一的ie6放在判断第一位。 <!DOCTYPE HTML> <!--[if IE 6]><html lang="zh-cn"><![endif]--> <!--[if IE 8]><html lang="zh-cn"><![endif]--> <!--[if IE 9]><html lang="...

阅读全文...

浏览器渲染原理

浏览器渲染原理

基本概念 WEB 页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验简单地说,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程。 渲染过程 1. 用户输入网址(假设是个 HTML 页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回 HTML 文件; 2. 浏览器开始载入 HTML 代码,发现 <head> 标签内有一个 <link> 标...

阅读全文...

reflow(回流)

reflow(回流)

基本概念   浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow(回流)。有时 reflow 页面中的一个元素会 reflow 它的祖先元素以及所有子元素。   由于 reflow 的开销非常之大,因此要尽可能的避免 reflow 的发生。   产生 reflow 的原因   ● 调整窗口大小; ● 改变字体; ● 增加或者移除样式表; ● 内容变化,比如用户在 ...

阅读全文...

前端开发模块化高效重构

前端开发模块化高效重构

说起模块化,也许我们首先想到的是编程中的模块设计,以功能块为单位进行程序设计,最后通过模块的选择和组合构成最终产品。把这种思想运用到页面构建中,也已经不是什么新鲜事。相信很大一部分页面构建工程师都经历了这样几个阶段:第一阶段是在一个css文件中把多个页面按自己的习惯顺序从上往下编写样式,基本不考虑有无公用样式,以完成设计呈现为首要目的;第二阶段是提取不同页面中的通用样...

阅读全文...

浅谈web标准、可用性、可访问性

浅谈web标准、可用性、可访问性

前言:大家不难发现,只要是招聘UED相关的岗位,如前端开发工程师、交互设计师、用户研究员甚至视觉设计师,一般都对web标准、可用性和可访问性的理解有要求。那么到底什么是web标准、可用性、可访问性呢? 一、web标准 简单的说,就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Be...

阅读全文...

谈谈CSS Sprites技术及其优化

谈谈CSS Sprites技术及其优化

CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊。 在大家还在拨号上网的“远古时期”,由于网速的限制,页面开发者都喜欢把网页里面的图片字节数控制的非常小,往往在一个图片文件夹里散落着n多的小碎图。随着网络技术的发展,网速的提升,大家越来越重视页...

阅读全文...

关于网页图片的压缩

关于网页图片的压缩

众所周知,对于一个网站而言,网页的下载速度是至关重要的。它不仅直接影响到用户的浏览体验、还关系到网页在搜索引擎中的排名参数。因此,优化网 页、使之能快速下载是页面制作中很重要的考虑因素。网页优化涉及方方面面,图片优化则是其中重要手段之一,下面就来探讨一下web图片的优化。 1、切图的时候尽量图形区,避免不必要的体积浪费。 2、使用ps存储为web所用格式,这样会比一般的“存储为”...

阅读全文...

Web前端开发规范文档

Web前端开发规范文档

为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, 片面及有误的地方, 希望大家指正。另, 本文档部分规范是为我所在项目组所写, 使用时请根据实际项目需求修改。 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的...

阅读全文...

提高网页加载速度最简单的5种方式

提高网页加载速度最简单的5种方式

网页的加载速度是评估网站质量一个重要指标。原因在于大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网 页,所以网页载入速度会极大地影响网站的流量和访问。以下总结了几种可以明显提高网站加载速度的初步简单技巧方式,如果你的网站存在载入速度慢的问题不妨 与此为参考对网页做些初步优化。 网页加载提速之 – 优化网页图片文件 你的网页一定有...

阅读全文...

可能是史上最全的jQuery学习资料(打包下载)

可能是史上最全的jQuery学习资料(打包下载)

可能是史上最全的jQuery学习资料 下载包里包含: 1.《《锋利的jQuery》(高清扫描版-有书签)》&实例源码 2.《jQuery初学实例代码集》 3. 《240多个jQuery插件.pdf》 4.《AJAX教程—JQUERY.pdf》 5.《jQuery.EasyUi-1.2.4_API.chm》 6.《jQuery_EasyUI培训文档.doc》 7.《Jquery_基础学习笔记.pdf》 8.《Jquery_基础学习笔记.pdf》 9.《jQuery_使用手册.pdf》 10.《jquery的基本用法[文字版][中...

阅读全文...

DOM元素上jQuery事件几点学习

DOM元素上jQuery事件几点学习

闲着无聊看了jQuery event部分的代码,发现一个小惊喜,嘿嘿,可能我奥特曼了。以下一jQuery 1.4.4版本说事,更高级版本稍有不同,但是关系不大。 jQuery 在元素上绑定事件的时候,会在该元素上添加一个自定义属性“events”,这个属性包含了通过jQuery绑定事件的事件集合,例如: 这样一个元素: <a id="bind" href="#">这是一个绑定了事件的元素(bind)</a> ...

阅读全文...