您的位置：首页 > 编程技术 > html  >  WEB程序代码优化和提高网站访问速度

WEB程序代码优化和提高网站访问速度

 更新时间：2016年9月20日 19:06  点击：2228

这里对web程序方面的优化作一个总结，虽然我用的是PHP其实不管理是什么语言方向都是一样的。
1.编码规范化可读性优化
编码规范我想一般程序员不会不了解，如果你这方面是空白你应该好好补补基础了，做到编码规范是一个好的程序员的最基础要求，一个团队也应该有自己的编码规范。所以程序的优化也应该包含到这个方面，在你开发程序的过程中可能会有些遗漏，所以在我们进行编码规范化可读性优化是很有必要的。其实一份再好的程序代码若干年后你自己都未必能看的懂更不用说别人来看你的代码，使你自己写出的代码有更好的可读性，这个是一个好的程序员应该做的，并且是对一个团队和你自己作品的责任感。
优化方向就是使你的代码更清析更易懂。
2.程序效率、流程逻辑优化
程序效率的优化是最重要的，程序运行速度是程序代码好坏最重要的因素，程序逻辑其实就是你的解决思路，解决思路并不是唯一的，所以我们可以对它进行优化。逻辑的设计也和可读性有一定的关系，逻辑清晰可读性就更强。
优化的方向就很明确了提高速度，清晰逻辑。简单的逻辑并不代表一定是速度快，复杂的逻辑并不一定是慢的。所以在这两方面是关联。
3.SQL优化，减少查询次数
在使用数据库的程序中我们知道数据库的查询是在整个程序执行中占很大比例的，所以SQL的优化是非常重要的。
优化的方向一方面是SQL语句本身的优化，熟悉SQL的人应该会知道，不同的SQL写法执行的效率差别是很大的，如：尽量不对字段加函数操作，更多的大家可以去查找高效SQL这方面的资料。第二在一个页面中减少查询次数，这个道理很清楚，我们可以把整个页面的SQL都输出来进行分析，是否可以合并语句，是否可以做冗余字段等等，尽量减少SQL的查询次数，坚绝不在循环中使用查询。
4.缓存优化
缓存优化其实就是对上一点的补充，但缓存优化是很重要的，所以可以单独列为一点。缓存的数据主要就是从数据库中读取出来的。对缓存的一些介绍：http://www.coderhome.net/zifa/?p=195,当然缓存也应该适当，应该只把需要缓存的数据进行缓存。
5.html,css,js文件优化，减少冗余代码
这一点与服务端程序没有关系，主要是与浏览器相关的几方面。html的结构是会影响到浏览器的解析，所以好的html代码也会影响访问速度。相比之下客户端的代码就不允许有一点无用的东西存在，能把文件减少一K就应该减少。js虽然是在客户端执行但也应该去考虑它的效率问题，网络上也有这方面的文章介绍。
6.可用性优化
可用性优化主要指的是UED方面的，并不是每一个团队都有专门的UED，作为web程序的开发人员也应该有这方面的意识，去了解用户，而不是埋头写代码。努力使你开发的页面对用户更友好，更容易使用。
7.框架架构优化
如果有使用到开发框架，也应该考虑到对框架的优化，减少框架本身占用的资源。
其它：服务器架构优化、数据库优化
这些方面和程序开发没有直接关系，但和web程序的运行也是关系密切的，所以顺便提一提。

1.创建链接

<script language="javascript">
var o = document.body;
//创建链接
function createA(url,text)
{
    var a = document.createElement("a");
    a.href = url;
    a.innerHTML = text;
    a.style.color = "red";
    o.appendChild(a);
}
createA("http:///","网页教学网");
</script>

2.创建DIV

<script language="javascript">
var o = document.body;
//创建DIV
function createDIV(text)
{
    var div = document.createElement("div");
    div.innerHTML = text;
    o.appendChild(div);
}
createDIV("网页教学网：http:///");
Webjx.Com

</script>

3.创建表单项

<script language="javascript">
var o = document.body;
//创建表单项
function createInput(sType,sValue)
{
    var input = document.createElement("input");
    input.type = sType;
    input.value = sValue;
    o.appendChild(input);
}
createInput("button","ooo");
</script>

4.创建表格


<script language="javascript">
var o = document.body;
//创建表格
function createTable(w,h,r,c)
{
    var table = document.createElement("table");
    var tbody = document.createElement("tbody");
    table.width = w;
    table.height = h;
    table.border = 1; 网页教学网
    for(var i=1;i<=r;i++)
    {
        var tr = document.createElement("tr");
        for(var j=1;j<=c;j++)
        {
            var td = document.createElement("td");
            td.innerHTML = i + "" + j;
            //td.appendChild(document.createTextNode(i + "" + j));
            td.style.color = "#FF0000";
            tr.appendChild(td);
        }
        tbody.appendChild(tr);


    }
    table.appendChild(tbody);
    o.appendChild(table);
}
createTable(270,270,9,9);
</script>

注意：一定要有tbody，否则IE下不能创建表格，FF下可以！

 

<html>
<head>
<style type="text/css">
html,body{
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 overflow:hidden;
}
#Main{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 overflow:auto;
 z-index:1;
}
#ToolBar{

 position:absolute;
 top:3px;
 left:50px;
 width:300px;
 height:20px;
 background:#ccc;
 z-index:2;
 overflow:hidden;
}
</style>
</head>
<body scroll="no"><!-- scrol="no" IE中必须 -->
<div id="ToolBar">固定在上方不动</div>
<div id="Main">
<p>&nbsddddddddddddddddddddddddddddddddddddddddddddddddddp;</p>
<p>&nbsxxxxxxxxcccccccccccccccccccxp;</p>
<p>&nbsp;</p>
<p>&nbcxvcxvcxvscfgdfgxvxvcxzvcsp;</p>
<p>&ncxvcxzvczxvcxzvczbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;dfdf</p>
<p>&nbscxzvcxzvcxzvczxvcxzp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsxzvcccccccccccccccccccccccccccccccccccccccccccccccccccp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsxcvcvvvvddddfffffffffffffffffffffffffffffffffp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;ddddddddddddddddd</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsxp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbxsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>v
</div>
</body>

</html>

代码二.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html,body{
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 overflow:hidden;
}
#Main{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 overflow:auto;
 z-index:1;
}
#ToolBar{

 position:absolute;
 top:3px;
 left:50px;
 width:300px;
 height:20px;
 background:#ccc;
 z-index:7;
 overflow:hidden;
}
#ToolBa_2{

 position:absolute;
 top:300px;
 left:50px;
 width:300px;
 height:20px;
 background:#ff0000;
 z-index3;
 overflow:hidden;
       color:#fff;
}
#ToolBa_3{

 position:absolute;
 top:600px;
 left:50px;
 width:300px;
 height:20px;
 background:#ff0000;
 z-index32;
 overflow:hidden;
       color:#fff;
}
#ToolBa_4{


 width:300px;
 height:200px;
 background:#ff0000;
 z-index35;
 overflow:hidden;
       color:#fff;
}
#ToolBa_5{


 width:300px;
 height:200px;
 background:#ff0000;
 z-index39;
 overflow:hidden;
       color:#fff;
}
</style>
</head>
<body scroll="no"><!-- scrol="no" IE中必须 -->
<div id="ToolBar">固定在上方不动</div>

 

<div id="ToolBa_2">可是这样页面上所有div的位置都固定不动了!</div>

<div  id="ToolBa_3">可是这样页面上所有div的位置都固定不动了!</div>

<div  id="ToolBa_4">可是这样页面上所有div的位置都固定不动了!</div>

<div  id="ToolBa_5">可是这样页面上所有div的位置都固定不动了!</div>
<div id="Main">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>

</html>

Javascript

　　 JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的Livescript 重新进行设计，并改名为JavaScript。

　　　JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。

　　 JavaScript具有很多优点：
　　 1.简单性 　JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

　　 2.动态性　 JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

　　 3.跨平台性 　JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。

　　 4.节省CGI的交互时间　 随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流，确浏览的身份、需服务的内等等，这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时，需要一个进程为它服务，它要占用服务器的资源(如CPU服务、内存耗费等)，如果用户填表出现错误，交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多，服务器的性能影响就越大。

　　　JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用CGI的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。

关于SPAN和DIV的总结性报告！！！

SPAN 和 DIV 的区别在于

1。div是块级 span是内嵌式
2。DIV有结构的意义 SPAN没有
3。DIV包含的对象前后都有换行，SPAN没有

共性
他们都是容器元素，都是用来包含其他同类型的元素的，
最重要的是：
***************************
他们都是为CSS而专门而成立的
***************************

补充：
块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。

如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。

你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.


内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。


可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。

 

[!--infotagslink--]

相关文章

  • php漏洞之跨网站请求伪造与防止伪造方法

    今天我来给大家介绍在php中跨网站请求伪造的实现方法与最后我们些常用的防止伪造的具体操作方法，有需要了解的朋友可进入参考。 伪造跨站请求介绍 伪造跨站请求...2016-11-25

  • 不打开网页直接查看网站的源代码

    　　有一种方法，可以不打开网站而直接查看到这个网站的源代码.. 　　这样可以有效地防止误入恶意网站... 　　在浏览器地址栏输入： 　　view-source:http://...2016-09-20

  • 如何获取网站icon有哪些可行的方法

    获取网站icon，常用最简单的方法就是通过website/favicon.ico来获取，不过由于很多网站都是在页面里面设置favicon，所以此方法很多情况都不可用。 更好的办法是通过google提供的服务来实现：http://www.google.com/s2/favi...2014-06-07

  • php 调用goolge地图代码

    <?php require('path.inc.php'); header('content-Type: text/html; charset=utf-8'); $borough_id = intval($_GET['id']); if(!$borough_id){ echo ' ...2016-11-25

  • JS基于Mootools实现的个性菜单效果代码

    本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考，具体如下：这里演示基于Mootools做的带动画的垂直型菜单，是一个初学者写的，用来学习Mootools的使用有帮助，下载时请注意要将外部引用的mootools...2015-10-23

  • JS实现自定义简单网页软键盘效果代码

    本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考，具体如下：这是一款自定义的简单点的网页软键盘，没有使用任何控件，仅是为了练习JavaScript编写水平，安全性方面没有过多考虑，有顾虑的可以不用，目的是学...2015-11-08

  • JS+CSS实现分类动态选择及移动功能效果代码

    本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码。分享给大家供大家参考，具体如下：这是一个类似选项卡功能的选择插件，与普通的TAb区别是加入了动画效果，多用于商品类网站，用作商品分类功能，不过其它网站也可以用，...2015-10-21

  • php 取除连续空格与换行代码

    php 取除连续空格与换行代码，这些我们都用到str_replace与正则函数 第一种： $content=str_replace("n","",$content); echo $content; 第二种： $content=preg_replac...2016-11-25

  • php简单用户登陆程序代码

    php简单用户登陆程序代码 这些教程很对初学者来讲是很有用的哦，这款就下面这一点点代码了哦。 <center> <p>&nbsp;</p> <p>&nbsp;</p> <form name="form1...2016-11-25

  • PHP实现清除wordpress里恶意代码

    公司一些wordpress网站由于下载的插件存在恶意代码，导致整个服务器所有网站PHP文件都存在恶意代码，就写了个简单的脚本清除。恶意代码示例...2015-10-23

  • JS实现双击屏幕滚动效果代码

    本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。运行效果截图如下：在线演...2015-10-30

  • js识别uc浏览器的代码

    其实挺简单的就是if(navigator.userAgent.indexOf('UCBrowser') > -1) {alert("uc浏览器");}else｛//不是uc浏览器执行的操作｝如果想测试某个浏览器的特征可以通过如下方法获取JS获取浏览器信息 浏览器代码名称：navigator...2015-11-08

  • JS日期加减,日期运算代码

    一、日期减去天数等于第二个日期function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() +...2015-11-08

  • Mysql效率优化定位较低sql的两种方式

    关于mysql效率优化一般通过以下两种方式定位执行效率较低的sql语句。通过慢查询日志定位那些执行效率较低的 SQL 语句，用 --log-slow-queries[=file_name] 选项启动时， mysqld 会 写一个包含所有执行时间超过 long_quer...2015-11-08

  • PHP开发微信支付的代码分享

    微信支付，即便交了保证金，你还是处理测试阶段，不能正式发布。必须到你通过程序测试提交订单、发货通知等数据到微信的系统中，才能申请发布。然后，因为在微信中是通过JS方式调用API，必须在微信后台设置支付授权目录，而且要到...2014-05-31

  • MySQL针对Discuz论坛程序的基本优化教程

    过了这么久，discuz论坛的问题还是困扰着很多网友，其实从各论坛里看到的问题总结出来，很关键的一点都是因为没有将数据表引擎转成InnoDB导致的，discuz在并发稍微高一点的环境下就表现的非常糟糕，产生大量的锁等待，这时候如果...2015-11-24

  • mac下Apache + MySql + PHP搭建网站开发环境

    首先为什不自己分别搭建Apache，PHP和MySql的环境呢？这样自己可以了解更多知识，说起来也更酷。可也许因为我懒吧，我是那种“既然有现成的，用就是了”的人。君子生非异也，善假于物也。两千年前的荀子就教导我们，要善于利用工具...2014-06-07

  • Android用MemoryFile文件类读写进行性能优化

    java开发的Android应用，性能一直是一个大问题，，或许是Java语言本身比较消耗内存。本文我们来谈谈Android 性能优化之MemoryFile文件读写。 Android匿名共享内存对外A...2016-09-20

  • PHP常用的小程序代码段

    本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考，具体如下：1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24

  • 几种延迟加载JS代码的方法加快网页的访问速度

    本文介绍了如何延迟javascript代码的加载，加快网页的访问速度。 当一个网站有很多js代码要加载，js代码放置的位置在一定程度上将会影像网页的加载速度，为了让我们的网页加载速度更快，本文总结了一下几个注意点...2013-10-13