web前端

网站前端性能优化总结

一、服务器侧优化

1添加 Expires 或 Cache-Control 信息头 

某些经常使用到、并且不会经常做改动的图片(banner、logo等等)、静态文件(登录首页、说明文档等)可以设置较长的有效期(expiration date),这些HTTP头向客户端表明了文档的有效性和持久性。如果有缓存,文档就可以从缓存(除已经过期)而不是从服务器读取。接着,客户端考察缓存中的副本,看看是否过期或者失效,以决定是否必须从服务器获得更新。

各个容器都有针对的方案,,以 Apache 为例:…

一些前端开发优化的经验总结

一些前端开发优化的经验总结

发现的一篇关于前端优化的文章,总结的很全面,要做到面面俱到很难,往往是想优化而没有时间去优化,就像我们公司,一个项目连着一个项目~新员工的培训都省了,还想优化前端啊,不过我真的想有机会和老大好好的整合下公司网站的前端代码~不过要把前端优化的工作放在平时的写代码中去,就不需要刻意的后期优化了。在项目开发中,后台需要搭建好框架,前端更是需要搭建好框架,并且在页面实现中得到实现,只有这样才能事半功倍。

前段时间简单的研究了下前端优化相关的知识,本文算是一个阶段性的总结,或者当做一个优化的参考List。

前言

玩转前端总结

玩转前端总结

by 程序范儿 2014-01-05 22:15

适合读者

前端工程师,想做小站的程序员

我的需求

以前写的几个博客都荒废了,最近想重新拾荒,开始考虑在WordPress上搭建,但这样一来就没有了玩程序的感觉,后来又看上了GitHub Pages这个服务,因为朋友们在上面玩的都不错,这里也推荐一个博客,如果你对IOS感兴趣可以看看lzyy.github.com,这个博客就是基于GitHub Pages的,如果你想了解这种博客是怎样维护的,你可以看看他写的文章使用github作为博客引擎,当然如果你很懒也可以直接fork他的项目https://github.com/lzyy/lzyy.github.com,在这个基础上直接改出你的博客。

移动互联网时代:响应式网页设计已成为大势所趋

我们正处在移动互联网快速发展的时代,智能手机和平板也越来越普及,有些人甚至都到了没有智能手机或平板就无法过活的地步。智能手机和平板的普及,也就意味着越来越多的用户会通过移动设备访问互联网。

通过移动设备访问互联网的用户或多或少都有过这样的经历:有些网站压根就没有针对移动设备的网站,哪怕是有,大多都是不够“移动友好”,阅读体验完全跟不上传统的 Web 版本;而且在不同的移动设备上,浏览体验也是大相径庭,让很多用户大为苦恼。…

data:image/png;base64是什么

大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么这是什么呢?这是Data URI scheme。…

网页动态加载外部js或css文件

原理解析:第一步:使用dom创建<script>或者<link>标签,并给他们附加属性,如type等第二步:使用appendChild方法把标签绑定到另一个标签,一般是绑到<head>.
应用:1、提高代码的复用,减少代码量;2、添加一个javascript控制器和 session可以实现动态改变页面样式;3、由于是页面是从上到下依次加载文件的,并且边加载边解释,所以可以添加javascript控制器控制页面文件的加载顺序,如先加载css布局文件,再显示有图片的css美化文件,之后再加载大的falsh文件,或者安内容的重要性来加载。…

现在就开始使用HTML5的十大原因

你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因;它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码。HTML5是web开发世界的一 次重大的改变,事实上不管你是否喜欢,它都是代表着未来趋势。其实HTML5并不难理解和使用。我们这里能列出许多原因为什么现在要开始使用HTML5。
 
目前有很多的文章介绍使用HTML5并且介绍了使用它的优势和好处,没错,我们这篇文章也类似。随着更多这样的文章,以及Apple的支持, Adobe围绕HTML5的产品开发,以及移动flash的死亡,如此多网站的支持,我想对那些仍旧没有或者不想接受它的人说一些话。我认为主要得原因是,它看起来像一个神秘的东西。很多感觉它像喷气背包或者飞行汽车。一个未经验证的非凡想法但是并不实际。但是事实上现在已近非常的实际了。
 
为了解密HTML5并且帮助顽固的开发设计人员,我这里写了列出了使用HTML5的几大原因,希望对大家有帮助!
 …