网站优化思路总结之前端

简介: 一:减少HTTP请求 1:把多张图片处理成一张图片以减少HTTP请求 background-image:url('a.gif');background-position:-260px -90px;width:20px;height:20px; 可以通过如上CSS代码显示一张大图片中的某个位...

一:减少HTTP请求

1:把多张图片处理成一张图片以减少HTTP请求

background-image:url('a.gif');
background-position:-260px -90px;
width:20px;height:20px;

可以通过如上CSS代码显示一张大图片中的某个位置

2:合并脚本和样式表

一个页面应该使用不多于一个的脚本和样式文件

但是用什么样的办法才能使一个大型网站达到这个要求

我的想法:前端开发人员可以尽可能的按自己的架构和思路开发JS和CSS文件

最后发布代码的时候通过工具把这些文件进行合并(目前暂时没有发现类似的工具,不过开发一个不难)

二:为静态文件建立不同的域

把图片、脚本、FLASH、CSS等静态的内容放到单独的域当中去

如果有资金充足可以建立多个服务器分别存储图片脚本等静态文件

如果资金欠缺可以仅把这些静态文件放到不同的域当中去

之所以这样做就是为了让我们的网站有并行响应一些客户端请求的能力

注意:如果是建立多个不同的服务器或者选虚拟主机提供商,如果能让及其离客户近一些最好了

三:处理HTTP头中的状态码

1:Expires头
如:Expires:2010-12-30 0:00:00
标志着组件(js,图片等)在这个时间之前,保存在客户端的版本是有效的

2:Cache-Control头
如:Cache-Control:max-age=315360000
秒为单位,标志着组件在这个时间段之后过期

以上两种头可以同时使用,
第二中是HTTP1.1中引入的

如下是在IIS下给指定目录添加HTTP头的方法
在IIS中选中某个网站下的一个目录,点属性,HTTP头,添加即可。

四:启用Gzip压缩

Gzip压缩的应该针对的是HTML文档,JS脚本文件,或CSS样式表文件

不应使用Gzip压缩图片和FLASH,因为这些文件本就是被压缩过的.

(在IIS上启用Gzip压缩比较麻烦,以后有机会应开发一个工具。)

Gzip压缩耗费了CPU的执行时间而减少了网络传输流量,有得必有失。但在这里90%的情况得大于失,而且效果显著

给IIS启用GZIP的方法:

需要在硬盘上建一个目录,并给它“IUSR_机器名”这个用户的写权限。如果压缩动态文件(PHP,asp,aspx)就不需要了,因为它的页面是每次都动态生成的,压缩完就放弃。然后在IIS管理器中,“网站”上面右键-属性,不是下面的某个站点,而是整个网站。进入“服务”标签,选上启用动态内容压缩,静态内容压缩。然后选中网站下面那个服务器扩展,新建一个服务器扩展。名字无所谓,下面的添加文件的路径是:c:\windows\system32\inetsrv\gzip.dll,然后启用这个扩展。在c:\windows\system32\inetsrv\下面有个MetaBase.xml文件,可以用记事本打开,找到IIsCompressionScheme,有三个相同名字的段,分别是deflate,gzip,Parameters,第三段不用管它,前两段有基本相同的参数,在这两段的参数HcScriptFileExtensions下面都加上一行shtml,如果你有其它的动态程序要压缩,也加在这里。HcDynamicCompressionLevel改成9,(0-10,9是性价比最高的一个)。

五:将样式表放在顶部

如果把CSS文件放到HTML的尾部

当HTML内容全部加载完后才下载CSS文件

浏览器在加载完CSS之前是不会呈现任何内容的(因为它现在还不知道如何呈现)

应该在Html文档的head标签中使用<link  rel="stylesheet" href="css.css">来引用CSS文件

不应该使用@import在CSS文档内部引用其他的CSS文件,这样做不利于调试

 

未完待续...

 

目录
相关文章
|
前端开发
前端总结:块级元素和行内元素及其区别
前端总结:块级元素和行内元素及其区别
87 0
前端总结:块级元素和行内元素及其区别
|
存储 移动开发 前端开发
Vue-Router 前端路由实现的思路
Vue-Router 前端路由实现的思路
174 0
Vue-Router 前端路由实现的思路
|
前端开发 JavaScript 容器
|
移动开发 小程序 JavaScript
总结10条~高级前端必知的小程序体积优化策略
我们都知道微信小程序有包体积限制,整个小程序所有分包大小不超过 20M,单个分包/主包大小不能超过 2M。然而面对业务的不断更新迭代,代码和资源会越来越多,如果不尽早规划包体积的治理,势必有一天会对业务的发展造成阻碍。所以如何在有效支持业务逻辑的同时,尽量减少资源占用,在小程序开发环境中显得尤为重要。 代码包体积是其中的一个重要方面,本文将就此进行分析与探讨。
381 0
总结10条~高级前端必知的小程序体积优化策略
|
前端开发 JavaScript
前端静态页面基本开发思路(二)
由于第一篇的反响不错,所以今天抽空写写前端静态页面基本开发思路(二) 第一篇开发思路直通车→前端静态页面基本开发思路(一) 现在的静态页面的设计基本上都涉及到了轮播图,而且一般都是顶部菜单栏过了就是轮播图的区域,比如小米官网,京东官网等,所以今天我们就从轮播图的实现开始讲
102 2
前端静态页面基本开发思路(二)
|
编解码 前端开发 JavaScript
前端静态页面基本开发思路(一)
有不少刚入门前端的同学经常问我前端布局的问题,总是跟我说在面对学校布置的作业或者想自己搭建博客的时候不知道怎么下手,不知道怎么去写静态的页面,每当我解决了一个又一个同学的问题的时候,又有新的同学来问,故思来想去,还是出一篇博客来讲一下怎么去开发前端静态页面,开发的基本思路是什么
182 2
前端静态页面基本开发思路(一)
|
前端开发 安全 网络协议
前端面试题目总结(Http)
前端面试题目总结(Http)
88 0
前端面试题目总结(Http)
|
存储 XML 资源调度
前端面试题目总结(Vue)(下)
前端面试题目总结(Vue)(下)
159 0
|
缓存 JavaScript 前端开发
前端面试题目总结(Vue)(上)
前端面试题目总结(Vue)
166 1
|
存储 JSON 前端开发
前端面试题目总结(JavaScript)(下)
前端面试题目总结(JavaScript)(下)
146 0