![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
boluobn
这个作者很懒,什么都没留下…
展开
-
css的效率和浏览器渲染的速度
浏览器如何读取你的CSS选择器有一个很重要的原则,那就是它们从右到左读取。这意味这像 ul > li a[title="home"] 这样的选择器,a[title="home"] 将是最先被读取的。我承认我并不经常想这个问题......我们写的css的效率是怎么样的呢,浏览器渲染的速度又如何呢?这是应该是浏览器开发者应该关心的(页面加载更快,用户就会更愉快)。Mozilla有一篇文转载 2013-11-21 22:35:18 · 633 阅读 · 0 评论 -
前端开发者不可忽视的 5 个 HTML5 新特性
HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程。还记得以前我们介绍过的HTML5新标签。 作为未来前端开发技术的潮流和风向标,HTML5绝对不容忽视。 在今天这篇技术分享文章中,我们将介绍几个HTML5的重要特性,能够帮助你提高整个web应用的使用体验和开发效率,相信大家会感兴趣的! 特性一:正则表达式转载 2013-07-03 21:26:28 · 708 阅读 · 0 评论 -
9 个超实用的 jQuery 代码片段
jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢! 1. jQuery平滑回到顶端效果 Javascript代码 $(document).ready(function() { $("a.topLink").click(function() {转载 2013-07-11 23:05:56 · 423 阅读 · 0 评论 -
前端性能优化最佳实践
如今浏览器能够实现的特性越来越多,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了。 开发人员普遍会将他们的代码习惯优先于用户体验。但是很多很小的改变可以让用户体验有个飞跃提升,所以任何一点儿小小的优化都会提升你网站的性能。 前端给力的地方是可以有许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。我们这个系列的主题就是要告诉你一些前端性能优转载 2013-07-08 22:58:13 · 472 阅读 · 0 评论 -
HTTP协议详解
当今web程序的开发技术真是百家争鸣,ASP.NET, PHP, JSP,Perl, AJAX 等等。 无论Web技术在未来如何发展,理解Web程序之间通信的基本协议相当重要, 因为它让我们理解了Web应用程序的内部工作. 本文将对HTTP协议进行详细的实例讲解,内容较多,希望大家耐心看。也希望对大家的开发工作或者测试工作有所帮助。使用Fiddler工具非常方便地捕获HTTP Request和HT转载 2013-06-08 22:55:28 · 459 阅读 · 0 评论 -
用CSS3将你的设计带入下个高度
神飞 发表于 20. Jun, 2009, 分类: CSS, Tips , 17 条评论 »标签:css & css3原文:用CSS3将你的设计带入下个高度译自:Take Your Design To The Next Level With CSS3版权所有,转载请注明出处,多谢!!级联样式表在13年前被引入,而且被广泛使用的CSS 2.1 标准在1转载 2013-06-08 22:35:25 · 1213 阅读 · 0 评论 -
你需要知道的CSS3 动画技术
神飞 发表于 29. Dec, 2009, 分类: CSS , 25 条评论 »标签:css3 & 动画 & 变形 & 转化 & 转换译自:你需要知道的CSS3 动画技术译自:What You Need To Know About Behavioral CSS请尊重版权,转载须注明本站链接!译序:本文译自Smashingmagazine,但是转载 2013-06-08 22:30:02 · 513 阅读 · 0 评论 -
Web开发人员需知的Web缓存知识
原文出处: mnot 译文出处: 张鑫旭最近的译文距今已有4年之久,原文有一定的更新。今天踩着前辈们的肩膀,再次把这篇文章翻译整理下。一来让自己对web缓存的理解更深刻些,二来让大家注意力稍稍转移下,不要整天HTML5, 面试题啊叨啊叨的~~什么是Web缓存,为什么要使用它?Web缓存游走于服务器和客户端之间。这个服务器可能是源服务器(资源所驻留的服转载 2013-06-16 21:20:24 · 555 阅读 · 0 评论 -
学习CSS布局
本文由LL根据Learn CSS Layout站点所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://learnlayout.com/,以及作者相关信息——译者:LL这个篇文章介绍的是现在广泛使用于网站布局领域的CSS基础。你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二转载 2013-06-14 14:52:25 · 648 阅读 · 0 评论 -
用P3P header解决IE下iframe跨域访问时候session丢失的问题
整合客户的登录时,或者其他一个网站通过iframe时,特别是一个http页面,访问一个https页面时,常常会session失效!E6/IE7支持的P3P(Platform for Privacy Preferences Project (P3P) specification)协议默认阻止第三方无隐私安全声明的cookie,Firefox目前还不支持P3P安全特性,firefox中自然也不转载 2013-05-15 09:21:28 · 708 阅读 · 0 评论 -
兼容性问题与浏览器的内核及渲染模式
作者:孙东国 陆远兼容性问题目前市面上流行的浏览器有多种,这些浏览器在处理一个相同的页面时,表现或行为有时会有差异。这种差异可能很小,甚至不会被注意到;也可能很大,甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。浏览器的内核各品牌浏览器的内核是不同的,不同的内核处理同一段代码的时候思路不同。因此可以说,浏览器间转载 2013-05-27 10:22:06 · 425 阅读 · 0 评论 -
Web前端工程师编程能力飞升之路
今天看到这篇文章。写的非常有意思。发现自己才处于”入室”阶段。骚年,路还很长,继续前行。 【背景】 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧; 如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧; 如果你是四五年的前端开发高手,没有难题能难得住你的寂寞高手,来看这篇文章吧; web前端研发工程转载 2013-05-08 22:48:38 · 535 阅读 · 0 评论 -
浏览器的渲染原理简介
看到这个标题大家一定会想到这篇神文《How Browsers Work》,这篇文章把浏览器的很多细节讲得很细,而且也被翻译成了中文。为什么我还想写一篇呢?因为两个原因,1)这篇文章太长了,阅读成本太大,不能一口气读完。2)花了大力气读了这篇文章后可以了解很多,但似乎对工作没什么帮助。所以,我准备写下这篇文章来解决上述两个问题。希望你能在上班途中,或是坐马桶时就能读完,并能从转载 2013-05-22 09:16:28 · 644 阅读 · 0 评论 -
非常实用的CSS样式
1. 文字的水平居中将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center;2. 容器的水平居中先为该容器设置一个明确宽度,然后将margin的水平值设为auto即可。 div#container { width:760px; margin:0 auto; }3. 文字的垂直居中单行文字转载 2013-05-07 12:21:49 · 493 阅读 · 0 评论 -
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
在ajax中经常需要对元素的位置进行精确的定位,此时不仅需要获取元素自身的大小位置等属性。还需要知道页面、浏览器、滚动条等的长度和宽度。因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程。好在JQuery提供了简单优雅,并且兼容的解决方法。 获取浏览器和页面文档的宽度和高度 复制代码代码如下://获取浏转载 2013-07-29 09:15:58 · 1566 阅读 · 0 评论 -
Comet:基于 HTTP 长连接的“服务器推”技术
简介: 很多应用譬如监控、即时通信、即时报价系统都需要将后台发生的变化实时传送到客户端而无须客户端不停地刷新、发送请求。本文首先介绍、比较了常用的“服务器推”方案,着重介绍了 Comet - 使用 HTTP 长连接、无须浏览器安装插件的两种“服务器推”方案:基于 AJAX 的长轮询方式;基于 iframe 及 htmlfile 的流方式。最后分析了开发 Comet 应用需要注意的一些问题,以及如何转载 2013-08-20 13:39:03 · 540 阅读 · 0 评论 -
浏览器加载和渲染html的顺序
1.浏览器加载和渲染html的顺序浏览器加载和渲染html的顺序IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析,解析过程中,转载 2013-11-21 22:29:39 · 737 阅读 · 0 评论 -
如何只用CSS做到完全居中
本文由 伯乐在线 - 埃姆杰 翻译自 codepen.io。欢迎加入技术翻译小组。转载请参见文章末尾处的要求。【感谢@埃姆杰 的热心翻译。如果其他朋友也有不错的原创或译文,可以尝试提交到伯乐在线。】 我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中……直到现在。但是,请注意!想让元素绝对居中,只需要转载 2013-10-13 23:31:08 · 612 阅读 · 0 评论 -
Web前端优化最佳实践及工具集锦
前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快、对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升。下图显示了页面加载速度对于用户体验的影响。你的Web页面的速度是否已经足够快了?其实可能还有很多可以提升的地方。Google和雅虎也提出了一些Web应用的前端优化建议,并发布了一些工具,你可以逐一检验你的Web应用,以便达到更高的性能。转载 2013-09-23 22:59:27 · 1029 阅读 · 0 评论 -
Servlet3.0-使用注解定义Servlet
我使用的开发环境:MyEclipse10+Tomcat7+JDK6。 开发Servlet3的程序需要一定的环境支持。Servlet3是Java EE6规范的一部分,MyEclipse10和Tomcat7都提供了对Java EE6规范的支持。 Tomcat需要Tomcat7才支持Java EE6,Tomcat7需要使用JDK6。 如果使用的MyEclipse的版本较低,转载 2013-09-18 11:05:41 · 537 阅读 · 0 评论 -
CSS3入门——由点到面
最近尝试着接翻译图书的活儿,但是相碰到内容精致的图书,机会还是很少的,试译了一下Smashing Magazine出版的Mastering CSS for Web Developers书中的一章节:CSS Three——Connecting the Dots(作者:Trent Walton)。总体来看,翻译的投入和产出比不是那么令人满意,倒不是酬金的问题,关键是图书的内容零散,没有体系,每篇文转载 2013-10-01 16:14:41 · 678 阅读 · 0 评论 -
CSS属性:text-shadow,box-shadow,border-radius
这篇文章将对 CSS 的几个新属性 (text-shadow,box-shadow,and border-radius) 做基本介绍。这些 CSS3 属性通常用来加强页面布局。RGBA前面的 3 个值是 RGB 颜色值,最后一个值是透明度的级别(0 = 透明,1 = 不透明)。RGBA 可以应用于与颜色的任何属性,如字体颜色,边框颜色,背景颜色,阴影颜色等。转载 2013-09-11 22:43:50 · 704 阅读 · 0 评论 -
JavaScript的性能优化:加载和执行
随着Web2.0技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使JavaScript在浏览器中的性能成为开发者所面临的最重要的可用性问题。而这个问题又因JavaScript的阻塞特性变的复杂,也就是说当浏览器在执行JavaScript代码时,不能同时做其他任何事情。本文详细介绍了如何正确的加载和执行 JavaScript代码,从而提高其在浏览器中的性能。转载 2013-09-05 21:36:33 · 570 阅读 · 0 评论 -
CSS中的before和after伪元素及其应用
before和after伪元素所谓伪元素,可以理解为浏览器为某元素附加的元素(根据名字,附加在这个元素之前/之后)。用来完成特定的效果,before/after需要和content属性一起使用:123456.css-class:before { content: " ";}.css-class:after { content: "转载 2013-09-11 22:33:37 · 928 阅读 · 0 评论 -
CSS3教程:border-image属性
一、border-image的兼容性border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限,仅Firefox3.5,chrome浏览器,Safari3+支持border-image。所以,就本文而言,IE浏览器可以回家休息了,Firefox3及其以下以及Opera浏览器也可以休息去看《阿凡达》了。所以,本文提供的一些dem转载 2013-09-11 22:46:42 · 747 阅读 · 0 评论 -
如何优化网页转化率?(上篇)
原文出处: Andy Johns 译文出处: 微博UDC(@@树上爬猪)提要:千万不要将所有建议照单全收,做出一个四不像网站。你应该将此看作测试网站的技巧工具箱,了解对你的产品与用户而言使用这些技巧的优点与缺点何在,以及如何使它们符合你的宏观产品愿景。“优化注册转化率”这个话题可以扯出一本百科全书的篇幅来。因此我会花大量笔墨来阐述。在此先提醒你们,这转载 2013-08-29 22:46:18 · 602 阅读 · 0 评论 -
Web 页面内容优化与性能优化技巧
回想一下,以前我们不得不花费大量时间去优化页面内容(图片、CSS等等),如今用户有更快速的互联网连接,我们似乎能够使用更大的图像或更大的Flash文件,里面包含的有视频或者图片。然而,随着移动开发的兴起,我们又回到了过去的窘状。网站优化是十分重要的,需要下载的内容少,反应速度快,就能使我们加载应用程序更快速。 一、图片处理 1. 图片:控制在合适的尺寸大小 很多时候我们在转载 2013-08-15 23:45:04 · 514 阅读 · 0 评论 -
浏览器的加载与页面性能优化
本文将探讨浏览器渲染的loading过程,主要有2个目的:了解浏览器在loading过程中的实现细节,具体都做了什么研究如何根据浏览器的实现原理进行优化,提升页面响应速度由于loading和parsing是相互交织、错综复杂的,这里面有大量的知识点,为了避免过于发散本文将不会对每个细节都深入研究,而是将重点放在开发中容易控制的部分(Web前端和Web Server),同时由于浏览器转载 2013-08-15 23:30:02 · 609 阅读 · 0 评论 -
JavaScript 开发者经常忽略或误用的 7 个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序。很多新手开发者被各种强大的 JavaScript 框架吸引进来,但他们却忽略了框架身后浩如星海的 JavaScript 实用技巧。本文将为你呈献其中7个基础知识点。 1. 在 String.prot转载 2013-08-21 21:42:59 · 458 阅读 · 0 评论 -
颜色的代码表达式
2012-10-21 – 10:19 Primary LinkThe Code Side Of ColorSmashing Magazine版权所有作者:Smashing Magazine译者:UCD翻译小组,波希米亚原文地址: http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/转载 2013-05-06 23:32:13 · 966 阅读 · 0 评论 -
扁平化设计与色彩趋势
2013-05-02 – 16:40 Primary LinkMaking it Work: Flat Design and Color TrendsDesignmodo版权所有作者:Carrie Cousins译者:UCD翻译小组,波希米亚原文地址: http://designmodo.com/flat-design-colors/这篇文章将展示很多很酷的转载 2013-05-06 23:30:40 · 836 阅读 · 0 评论 -
CSS3 @font-face
http://www.fontsquirrel.com/fontface@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我转载 2013-05-17 14:39:56 · 534 阅读 · 0 评论 -
一个页面重构工程师眼中的用户体验
在工业化设计融入人们生活的现今,用户体验一词就常常出现在人们的视线里,随着互联网web2.0时代的到来,大大小小的网站设计中也都开始关注用户体验的方面,对什么是用户体验(百度这四个字,比我写什么解释都好)就不做详细赘述了,相信大家比我了解的更加丰富。用户体验从产品设计阶段便开始介入进来,如原型设计中交互模式设计、功能实现方式设计都融入了设计人员对用户的关怀,听过这样的一句话:“具有良好用户转载 2013-03-05 21:34:04 · 492 阅读 · 0 评论 -
JavaScript Source Map 功能详解
本文转载自阮一峰的博客。原文内容如下: 上周,jQuery 1.9发布。这是2.0版之前的最后一个新版本,有很多新功能,其中一个就是支持Source Map。 访问 http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js,打开压缩后的版本,滚动到底部,你可以看到最后一行是这样的: Javascr转载 2013-03-04 15:25:11 · 323 阅读 · 0 评论 -
响应式网页设计
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下。上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以先看下这个PPT。移动互联网的现状和未来在说到这个话题前,我们先看下网页设计和前端开发的现状:全球有超过53亿手机用户(包括传统手机)国内3G用户超过1转载 2013-01-18 16:17:29 · 663 阅读 · 0 评论 -
height、clientHeight、scrollHeight、offsetHeight区别
我们来实现test中的onclick事件 function justAtest() { var test= document.getElementById("test"); var test2=document.getElementById("test2") var test3=document.getElementB转载 2013-01-17 11:23:21 · 295 阅读 · 0 评论 -
各种浏览器的userAgent
IE 而IE各个版本典型的userAgent如下: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0) Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)转载 2013-01-17 10:09:10 · 1604 阅读 · 0 评论 -
JavaScript跨域总结与解决办法
什么是跨域JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是AJAX应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:特转载 2013-01-16 22:35:24 · 322 阅读 · 0 评论 -
如何成为一名优秀的Web前端工程师
我所遇到的前端程序员分两种:第一种一直在问:如何学习前端?第二种总说:前端很简单,就那么一点东西。我从没有听到有人问:如何做一名优秀、甚至卓越的web前端工程师。何为:前端工程师?前端工程师,也叫Web前端开发工程师。他是随着web发展,细分出来的行业。Web前端开发技术主要包括三个要素:HTML、CSS和JavaScript!它要求前端开发工程师不仅要掌握基本的W转载 2013-01-16 22:34:31 · 578 阅读 · 0 评论 -
优秀的WEB开发人员应该知道的10件事
我最喜欢web开发的一点是,它包括许多许多不同的技能。作为一个好的开发者,一定要好好学习,天天向上,因为我们有很多重要的技能要学习,而且它们总是在不停的发生变化。这里我列出了其中最为重要的10个技能,它们有点倾向于前端开发,但总体上适合所有的开发人员:正则表达式基本SEO不错的Javascript库跨浏览器调试图片处理和优化用有效的HTML/CSS进行布局(转载 2013-01-16 22:31:19 · 468 阅读 · 0 评论