随笔分类 - WEB前端
摘要：Http定义了与服务器交互的不同方法，最基本的方法有4种，分别是GET，POST，PUT，DELETE。URL全称是资源描述符，我们可以这 样认为：一个URL地址，它用于描述一个网络上的资源，而HTTP中的GET，POST，PUT，DELETE就对应着对这个资源的查，改，增，删4个操作。到这里，大家应该有个大概的了解了，GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。 1.根据HTTP规范，GET用于信息获取，而且应该是安全的和幂等的。 (1).所谓安全的意味着该操作用于获取信息而非修改信息。换句话说，GET 请求一般不应产生副作用。就是说，它仅仅是获取资源信息，就像数据..
阅读全文
摘要：图片和Coockie也是我们网站中几乎不可缺少组成部分，此外随着移动设备的流行，对于移动应用的优化也十分重要。这主要包括：Coockie:减小Cookie体积 对于页面内容使用无coockie域名 图片：优化图像 优化CSS Spirite 不要在HTML中缩放图像 favicon.ico要小而且可缓存 移动应用：保持单个内容小于25K 打包组件成复合文本 27、减小Cookie体积 HTTP coockie可以用于权限验证和个性化身份等多种用途。coockie内的有关信息是通过HTTP文件头来在web服务器和浏览器之间进行交流的。因此保持coockie尽可能的小以减少用户的响应时间十分重要。
阅读全文
摘要：除此之外，JavaScript和CSS也是我们页面中经常用到的内容，对它们的优化也提高网站性能的重要方面：CSS：把样式表置于顶部 避免使用CSS表达式（Expression） 使用外部JavaScript和CSS 削减JavaScript和CSS 用<link>代替@import 避免使用滤镜 JavaScript把脚本置于页面底部 使用外部JavaScript和CSS 削减JavaScript和CSS 剔除重复脚本 减少DOM访问 开发智能事件处理程序 17、把样式表置于顶部 在研究Yahoo!的性能表现时，我们发现把样式表放到文档的<head />内部似乎会加快页
阅读全文
摘要：除了在网站在内容上的改进外，在网站服务器端上也有需要注意和改进的地方，它们包括：使用内容分发网络为文件头指定Expires或Cache-ControlGzip压缩文件内容配置ETag尽早刷新输出缓冲使用GET来完成AJAX请求11、使用内容分发网络 用户与你网站服务器的接近程度会影响响应时间的长短。把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。但是首先我们应该做些什么呢？ 按地域布置网站内容的第一步并不是要尝试重新架构你的网站让他们在分发服务器上正常运行。根据应用的需求来改变网站结构，这可能会包括一些比较复杂的任务，如在服务器间同步Session状态和合并数据库更新等。
阅读全文
摘要：Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。 Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。其中内容部分一共十条建议：一、内容部分尽量减少HTTP请求 减少DNS查找 避免跳转 缓存Ajxa 推迟加载 提前加载 减少DOM元素数量 用域名划分页面内容 使frame数量最少 避免
阅读全文
摘要：不少同学问，不都是刷新吗？还有什么区别？其实，还是有的。其中，在地址栏按回车又分为两种情况。一是请求的URI在浏览器缓存中未过期，此时，使用Firefox的firebug插件在浏览器里显示的HTTP请求消息头如下：Host 192.168.3.174:8080User-Agent Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language zh-cn,zh;q
阅读全文
摘要：开始研究响应式web设计，CSS3 Media Queries是入门。Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。那么，Media Queries是如何工作的？两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件：意思是当屏幕的宽度大于等于400px的时候，应用styleA.css在media属性里：screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定
阅读全文
摘要：之前转载过用边框实现三角形的技巧，早上重新看了一下淘宝跟QQ空间顶部工具栏的三角形实现方式，并记录下来效果图：<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>.qq_div{ width: 100px; height: 30px; margin: auto; text-align: center; padding: 50px; background:#50803F; color: #FFF
阅读全文
摘要：转自网易邮箱前端技术中心：http://ntesmailfetc.blog.163.com/blog/static/206287061201241692848617/但凡从事互联网的人基本都会写几行html，用过Word的人用Dreamweaver也能做出规整的页面，所以大部分人会很自然地认为“页面 的开发没什么技术含量，很简单”。不仅有这种普遍的认知，对从业者来说也有很多疑惑：做页面前端实现，没问题；兼容性，小case；图片集成，一直都在 用……还能有什么问题？瓶颈啊、天花板啊、转型啊、出路啊就在从业者中广泛讨论。是不是真的没什么问题了呢？网易邮箱前端技术中心也设立好几年了，似乎有 着讨论不
阅读全文
摘要：姐不太道德地把它的代码扒了下来，放在这里慢慢研究<!DOCTYPE html><!-- saved from url=(0036)http://y.qq.com/vip/promote_yearvip/ --><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><t
阅读全文
摘要：转自：http://www.rainweb.cn/article/css3-transition-menu-a.htmltransition是css3中新添加的特性，在W3C标准中是这样描述 的：“css的transition允许css的属性值在一定的时间内从 一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。”有了transition一切动画都变得如此简单。在今天的小贴士,我们将向您展示如何让你的菜单添加一个整洁的悬浮效果。查看demo主要就是设置图片的属性left 从0过度到300，透明度从0变到1：.mh
阅读全文
摘要：浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。1
阅读全文
摘要：outline：input和textarea的默认焦点样式语法：outline：[outline-color] || [outline-style] || [outline-width] || [outline-offset] | inherit相关属性：outline-style , outline-width , outline-offset , outline-color<outline-color>： 指定轮廓边框颜色。参见outline-color <outline-style>： 指定轮廓边框轮廓。参见outline-style <outline-wi
阅读全文
摘要：1、过滤字符串两边的空格 str = $.trim(str)2、过滤所有空格 str = str.replace(/ /g,'')
阅读全文
摘要：其实主要是想记录一下这种对象的用法~但是又不知道如何表达，谁知道的给我留个言~没办法，咱们菜~<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>js邮箱地址跳转</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">
阅读全文
摘要：from: http://www.searchtb.com/2011/04/an-introduction-to-bigpipe.html1. 技术背景 FaceBook页面加载技术试想这样一个场景，一个经常访问的网站，每次打开它的 页面都要要花费6 秒；同时另外一个网站提供了相似的服务，但响应时间只需3 秒，那么你会如何选择呢？数据表明，如果用户打开一个网站，等待3~4 秒还没有任何反应，他们会变得急躁，焦虑，抱怨，甚至关闭网页并且不再访问，这是非常糟糕的情况。所以，网页加载的速度十分重要,尤其对于拥有遍布全球的 5亿用户的Facebook(全球最大的社交服务网站)这样的大型网站，有着大量并
阅读全文
摘要：题记：搞互联网的同学也许都知道一个数字——4秒，有研究表明，如果一个网站没有在4秒之内加载完成，用户就会感到焦躁不愉 快，并离开这个网站（数据来自性能测试网站http://gtmetrix.com/）。网站的内容、SEO优化、用户体验？哪个更重要呢？在速度面前， 也许这些都相对更次要。所以提高网页效率，是我们在新版微博的第一目标。从四个方面来浅谈我们新版微博的优化。一、HTTP请求数的权衡1、为什么要关心http请求？当浏览器向Web服务器发出请求时，它向服务器传递了一个数据块，也就是请求信息。在用户打开一个页面的初初，包括等待时间、请求时间、建立响应时间、渲 染时间……，都是消耗在前端的。比
阅读全文
摘要：<!DOCTYPE html><html><head><meta charset="utf-8" /><title>点击其它地方关闭DIV</title></head><body><input type="text" value="" id="tf"/><div style="width:400px; height:200px;border:1px solid #000;display:non
阅读全文
摘要：简单的随机标签云<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>随机标签云</title><style type="text/css">*{ margin:0; padding:0}a{ text-decoration:none}#wrap{ width:400px; margin:auto}</style><script type="text/javascript"&g
阅读全文
摘要：本来是自己写了一个的，然后发现这个的扩展性比我写的要方便，所以就借花献佛啦~~原出自找不到了<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script type="text/javascript" src="http://www.liehuo.net/uploads/common/js/jquery-1.4.2.min.js"></script>&
阅读全文