Frontend

Fixed Layout 和 Fluid Layout

即固定布局和流动布局,前者用像素定义宽度,后者用百分比。 前者可以确保用户看到的跟设计者看到的风格一致,后者则更可以让宽屏、窄屏用户都有很好的体验。 我比较倾向固定布局,它比较保险; 而流动布局可能一不小心就会弄坏掉。  这里有篇很不错的介绍: http://blog.benhuoer.com/posts/fixed-fluid-elastic-css-layout-comparement.html ================================ 在bootstrap中, css "row" 和 "container" 用于fixed layout, "row-fluid"和"container-fluid"用于fluid layout

速成美工不是梦想

用blueprint可以速成美工。 看一下这个即可: https://github.com/joshuaclayton/blueprint-css/wiki/Quick-start-tutorial 另一个比较受追捧的是twitter的bootstrap

高性能网站建设指南 — 笔记– 14.工具

YSlow for Firebug: 直接给出优化建议 IBM Page Detailer: 按下载先后顺序给出各个HTTP 请求的细节 (我试了一下,好像用不了,不知道为什么) Firebug中的Net选项卡: 功能与上面一样。我试了一下,好像很不准确。

如何使 jquery ui tabs 的每个tab代表一个非Ajax的链接

你有没有这样朴素的需求?   用一个Tab Group, 里面放两个tab, 并且每个tab代表一个链接;   切换tab时,不通过AJAX获得内容,而是重新渲染整个页面;   渲染后的页面里还是能看到这个Tab Group,只不过现在高亮的tab是另一个了。   如何用jquery ui的tabs实现这个东西?  我们一步一步来。     A.页面展现时应该高亮哪个tab? 让服务器端传一个参数过来吧。Tab 0对应的Servlet把这个参数值置为0, Tab 1则置为1.    $("#theTabs").tabs("select", ${tabIndex});      B. 分别给两个 tab指定链接 $("#theTabs").tabs( "url" , 0 , "servlet0.do" ); $("#theTabs").tabs( "url" , 1 , "servlet1.do" );   C.为Tab绑定select事件,使之被选中时触发URL跳转。请注意其中的 if(url)这个判断 $("#theTabs").tabs({ select: function(event, ui) { var url = …

如何使 jquery ui tabs 的每个tab代表一个非Ajax的链接 Read More »

高性能网站建设指南 — 笔记– 5.压缩

1. 通过压缩减少须传输的字节数,以加快传输时间 2. 什么东西应该压缩?      a.图片、PDF等二进制文件不应该压缩,因为它们已经压缩过了      b.太小的文件不应压缩。为小文件压缩而耗费一些CPU时间不太值得。一般来说,应该只对1KB或2KB以上的文件进行压缩。 3.浏览器端的支持     支持HTTP1.1的浏览器才能展现压缩过的内容。如果你用的是APACHE服务器,则可以设置“浏览器白名单”,只对名单里的客户端传输压缩过的内容。 4.具体怎么配置?    Apache : mod_gzip_on (Apache 1.3), mod_defalte (Apache 2.x)    考虑到代理服务器的情况,应在响应头中设置 Vary: Accept-Encoding    代理服务器可能会带来很多复杂性(请看原书)。可以通过 Cache-Control:Private干脆禁止代理缓存, Google和Yahoo就是这样干的。 附:HTTP中浏览器和服务器怎么就压缩问题“握手”?    1.浏览器发出的请求头有:Accept-Encoding: gzip,deflate, 表示本浏览器支持压缩过的东西    2.服务器发出的响应头有:Accept-Encoding: gzip,表示本服务器已将内容进行了gzip压缩。如果服务器不支持压缩,则不提供此头。

高性能网站建设指南 — 笔记– 6.将样式表放在顶部

作者认为将样式表放在顶部,而不是底部,可以避免IE的白屏问题。 他说,如果样式放在底部,由于IE在渲染页面上的组件时还没拿到样式,因此就不会渲染这个组件,直到从页面底部拿到样式为止。 在拿到之前会一直白屏。 但按我的测试,测试不出他说的这种情况。这条规则的说服力对我来说不是很大。

高性能网站建设指南 — 笔记– 7.浏览器的并行下载

打开一个页面时,浏览器在一般情况下会用两个线程下载同一个主机上的内容。 举例说,你的页面包含四个来自 foo.com的图片和四个来自bar.com的图片。 那浏览器就会先,     并行下载foo.com中的两个图片和bar.com中的两个图片   再并行下载foo.com中的另两个图片和bar.com中的另两个图片 但这只是HTTP1.1的建议。很多浏览器都可以自己设置并发数。不过,这个并发数并不是越来越好,因为它会占用更多的CPU和带宽。