页面优化

影响用户访问的最大部分是前端的页面。网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。

前端的页面主要包括xhtml,css,js。其实xhtml就是现实中所谈到的内容,页面的内容:文字,图片,flash,视频等。

我自身所了解的几种可以有效的优化页面的方法,可能不太完善:

1. 把样式表置于顶部

2. 把脚本置于页面底部

3. 将几张图片压缩在一张图片里

4.可以将图片转化为代码进行加载

5.使用外部 JavaScript 和 CSS

6.将所有的css代码合并为一行,可以有效的减少加载时间

7.所有的CSS、JS代码最好做到代码重用的效果,也可以有效的减少加载时间

就目前而言,我也就比较熟悉这几种方法,不过还是会看老师发给我们的页面优化的电子书的。

时间: 2024-10-27 05:13:44

页面优化的相关文章

页面优化——js异步加载

同步加载 在介绍js异步加载之前,我们先来看看什么是js同步加载.我们平时最常使用的就是这种同步加载形式: <script src="http://XXX.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像).渲染.代码执行.一般的script标签(不带async等属性)加载时会阻塞浏览器,也就是说,浏览器在下载或执行该js代码块时,后面的标签不会被解析,例如在he

前台页面优化全攻略(三)

经过前两篇文章的实践,你的网站加载速度一定有了非常明显的变化.能把实践跟到这篇文章的人想必一定是极客中的极客.如果你仍对网站的加载速度不满意,可以看看再尝试一下本文中几近疯狂的终极优化方案. 你可以对网站进行快速的优化,但网站日常的节食却很难.也许你已经花了很大的力气去优化你的CSS和JavaScript代码,但是你所做的努力马上又会因为老板或客户期望的新功能而付之东流.所以看来不论是人还是网页,减肥都贵在坚持. 这篇终极减肥方案可能不适合所有的网站,但是我相信它可以引起你对网页大小的重视. 1

前台页面优化全攻略(二)

在上一篇文章中,我们讨论了一些基本的页面优化和减肥方案,现在我们的页面已经被缩减了30%-50%,如果你还没有阅读上一篇文章,我建议你完成那些基础热身之后再继续进阶的训练. 如果你已经尝试了基础的热身,那我们就继续采取一些更极客的解决方案. 1. 移除网站中社交网络的组件 看到这个标题请不要惊讶,我并不是让你放弃第三方社交平台,而是希望你能放弃那些肥胖的官方组件.你的网站中有社交平台的分享按钮么?这些按钮会为你的网站增重大概0.5M.我们知道,这些分享功能都是由JavaScript实现的,有些分

ASP.NET页面优化性能提升方法记录

今天与大家分享:一种优化页面执行速度的方法.采用这个方法,可以使用页面的执行速度获得[8倍]的提升效果. 为了让您对优化的效果有个直观的了解,我准备了下面的测试结果截图: 测试环境:1. Windows Server 2003 SP22. Viaual Studio 2008,使用自带的WebDev.WebServer.EXE运行网站程序.3. (ThinkPad SL510):Core2 T6670 2.2GHz, 4G内存 二个红框中的数字反映了优化前后的执行时间.数字表明:优化前后,执行时

前台页面优化全攻略(四)

通过前几篇文章,你应该已经掌握了很多优化网站的方法.现在你的网站加载速度已经很快了,但是你必须持续的监控你的网站,了解它的大小变化,要不然一段时间过去之后,它可能又成为了一个胖子. 如今每个页面平均已经达到1.7M,每年增长大概32%.你可以通过以下几个工具来查看你的网站是不是又在暴饮暴食,而且它们都是免费的. 1. Pingdom Pingdom是我喜欢的一个在线测试工具.它会揭露出所以你想知道的细节,你可以一清二楚的看到网站的现状:重量.加载速度.代码分析.性能评分.开发者建议,它还提供了一

前端开发工程师 - 04.页面架构 - CSS Reset &amp; 布局解决方案 &amp; 响应式 &amp; 页面优化 &amp;规范与模块化

04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 多列布局 全屏布局 第3章--响应式 浏览网页使用的设备屏幕大小迥异,如何保证页面在不同设备上都正常显示呢? --  解决方法:响应式 优点:无需为不同设备编写对应的页面 --> 降低开发成本.维护成本 缺点:页面中某些部分在某些设备上会被隐藏(资源加载了,但是只是用CSS隐藏了) 为什么在手机端的页面会很小呢? 所有的移动端的页面都引入了viewport视窗 刚开始所有的元素都是加载到一个比较大的viewport视

高效率http页面优化法则一【JS对DOM的操作】

高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这并不是什么夸张的数字). 1. 批量增加Dom:使用修改innerHTML的方式 尽量使用修改innerHTML的方式而不是用appendChild的方式; 因为使用innerHTML开销更小,速度更快,同时也更加内存安全. 有一点需要注意的是,用innerHTML方式添加时,一定不要在循环中使用

页面优化有哪些方法?

一.减少操作量 尽量减少 HTTP 请求1) 合并文件,比如把多个 CSS 文件合成一个: 2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位: 不要在 HTML 中使用缩放图片缩放图片并没有减少图片的容量,只是控制了图片的大小. Image压缩使用工具对图片进行压缩,保证质量的同时减少了图片的大小. 减少对DOM的操作减少对DOM的操作,减少页面的重绘. 二.提前做加载操作 对域名进行预解析例如京东的做法<link rel="dns-prefet

网站页面优化策略

网站的页面优化,也即网页优化是对网页的程序.内容.版块.布局等多方面的优化调整,使其适合搜索引擎检索,满足搜索引擎排名的指标,从而在搜索引擎检索中获得的排名提升,增强搜索引擎营销的效果使网站的产品相关的关键词能有好的排位.使网站更容易被搜索引擎收录,提高用户体验和转化率进而创造价值.下面主要从网站代码.标签.正文等几个方面来讲述网站的页面优化. 网站重构 网站重构可以使网站的维护成本变得更低,运行得更好,遵循HTML结构化标准的设计,将网站页面的实际内容与它们呈现的格式相分离.简单来说,就是将所