前端优化

来源：互联网发布：怎么预测时间序列数据编辑：程序博客网时间：2024/05/16 00:44

我经常将js放置在head中，但是很多浏览器都是使用单一线程处理界面UI和js，他们必须逐一执行，此时很多元素会处于锁死状态。这样自然就增加了页面等待的时间了，这就得考验用户的耐心了。那么如何优化？

优化1：既然js阻止了UI渲染，那么我们可以考虑将js放在</body>前，这样就可以让<script>前的html完美的呈现，不会让用户看到页面空白等待而苦恼的情况，自然就提高了友好性。

优化2：多少个js就会有多少次“Get”请求，大家都知道Get请求是需要带http头的，所以说需要耗费时间，那么我们采取的方案自然就是减少Get请求，将多个js合并到一个js里面去。

优化3：不管是把js文件放在脚尾，还是三个合并一个，其本质都是”阻塞模式“，就是说锁死浏览器，当web页面越来越复杂，js文件越来越多，还是让我们头疼的，此时我们就提倡一种“无阻塞模式“加载js脚本，也就是页面全部呈现完再追加js，也就对应着window.onload事件触发后，我们才追加js，这就是所谓的“无阻塞“，但是其中有一个非常要注意的地方就是我们对js的要求是否有严格的顺序。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>  <!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 id="head">     <title></title>     <link href="Styles/Site.css" rel="stylesheet" type="text/css" /> </head> <body>     <img src="1.jpg" width="200" height="300" />     <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>     <script type="text/javascript">         window.onload = function () {             $("#head").append("<script src='js/hello.js' type='text/javascript'><\/script>")             $("#head").append("<script src='js/world.js' type='text/javascript'><\/script>");         }     </script> </body> </html>

而当第三种有顺序要求的时候，可以这样做：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>  <!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 id="head">     <title></title>     <link href="Styles/Site.css" rel="stylesheet" type="text/css" /> </head> <body>     <img src="1.jpg" width="200" height="300" />     <script type="text/javascript">         function loadScript(url, callback) {             var script = document.createElement("script");             script.type = "text/javascript";              //IE             if (script.readyState) {                 script.onreadystatechange = function () {                     if (script.readyState == "loaded" || script.readyState == "complete") {                         script.onreadystatechange = null;                         callback();                     }                 }             } else {                 //非IE                 script.onload = function () {                     callback();                 }             }             script.src = url;             document.getElementById("head").appendChild(script);         }         //第一步加载jquery类库         loadScript("jquery/jquery-1.4.1.js", function () {             //第二步加载hello.js             loadScript("js/hello.js", function () {                 //第三步加载world.js                 loadScript("js/world.js", function () {                  });             });         });     </script> </body> </html>

据自己亲身试过，确实是节省了时间，所以要感谢这位：http://www.cnblogs.com/huangxincheng

另外css如果多的话也可以合并一下。

使用CSS Sprite(合并图片)提高加载性能和减少请求连接数，所有小图标都放在一张图片上面。

缓存DNS查找可以改善页面性能。

推迟加载内容

你可以仔细看一下你的网页，问问自己“哪些内容是页面呈现时所必需首先加载的？哪些内容和结构可以稍后再加载？

把整个过程按照onload事件分隔成两部分，JavaScript是一个理想的选择。例如，如果你有用于实现拖放和动画的JavaScript，那么它就以等待稍后加载，因为页面上的拖放元素是在初始化呈现之后才发生的。其它的例如隐藏部分的内容（用户操作之后才显现的内容）和处于折叠部分的图像也可以推迟加载。

工具可以节省你的工作量：YUI Image Loader可以帮你推迟加载折叠部分的图片，YUI Get utility是包含JS和 CSS的便捷方法。比如你可以打开Firebug的Net选项卡看一下Yahoo的首页。

当性能目标和其它网站开发实践一致时就会相得益彰。这种情况下，通过程序提高网站性能的方法告诉我们，在支持JavaScript的情况下，可以先去除用户体验，不过这要保证你的网站在没有JavaScript也可以正常运行。在确定页面运行正常后，再加载脚本来实现如拖放和动画等更加花哨的效果。

配置ETag

Entity tags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内容”，包括图片、脚本、样式表等）。增加ETag为实体的验证提供了一个比使用“last-modified date（上次编辑时间）”更加灵活的机制。Etag是一个识别内容版本号的唯一字符串。唯一的格式限制就是它必须包含在双引号内。原始服务器通过含有 ETag文件头的响应指定页面内容的ETag。

不知道这样算不算优化，可能是钻个空子吧，我把消耗时间很长，而也不急着获取的方法，用Settimeout延迟一下执行，也可以让网页快一点呈现出来。

解决