如何快速的呈现我们的网页的技巧整理_javascript技巧

前几天小芳同学一直在群发起一些加速的话题，我已经把聊天记录抽出来，正打算整理出份像样的，没想到小芳同学非常速度的出了这篇。我的就省掉了，挖哈哈。

特别说一下了，这些方案并非适合所有的网站，很多部分有的网站还是不要做反而会更好。如果你还有更多的想法，可以到这里讨论或者评论，我只是归档成为方便阅读的，对了论坛和群讨论的另一些结果如果有价值我也会补充进来。

如何快速的呈现我们的网页 作者：flashsoft，（内容被我略修删过）。

一.我们需达解决的麻烦

  • 减少HTTP请求数. 减少HTTP请求数有什么好处

    • 降低服务器跟客户端的建立和消除HTTP请求和响应Header的开销
    • 减少服务器为HTTP连接的进程和线程的开销,如果可能,还会包括GZIP压缩的CPU开销.
  • 减小被请求文件大小, 减少请求数据占用的网络带宽.
  • 让用户更快的看到想要的结果.
  • 提高客户端渲染速度.
  • 让浏览器同时能请求更多的数据.
  • 提高服务器相应速度.
  • 通过版本化控制客户端Cache.

二.如何解决我们的麻烦

A.如何减少HTTP请求数

  1. 合并JS文件跟CSS文件。
  2. 合并框架图片以及相对变动较少的图片成一张，通过CSS背景切割来完成渲染，比如：加速图片显示。
  3. 合理使用本地Cache来缓存JS/CSS/IMAGE。
  4. 合理使用UserData缓存JS文件,对于FF用户可以单独请求服务器,这样能解决80%用户的问题.代码可以蓉儿(meizz)的js framework1。
  5. 把JS跟CSS合并成一个文件

B.减小被请求文件大小,减少请求数据占用的网络带宽

  1. 压缩JS体积：删除JS中空白换行,注释,混淆把长变量换成短变量；
  2. 压缩CSS体积：删除CSS注释、写法尽量用简写；
  3. 使用(X)HTML+CSS方式搭建网站结构,提高CSS重用性,来减少(X)HTML文件大小；
  4. 使用服务器端GZIP压缩JS/ CSS文件,缩小传输文件大小。附注:Apache1跟Apache2的GZIP的效率跟方式不一样的，根据需要自行选择。

嗷嗷补充说明：压缩、合并JS和CSS都由程序处理。而不是自己手动去缩删，不然不利于后期维护。

C.让用户更快的看到想要的结果

用户对于一个站点的白页的忍受时间根据统计是8-12秒。白页的产生可能由于各种原因引起,我们能做的就是怎么让用户能变的稍微能等待更久。

  • 方案1.多做一个引导页,让用户体会其中的变化
    案例:mail.aol.com中的loading引导页
  • 方案2.优先载入页面结构以及结构图片,后一步载入当前页面数据,再后一步载入Iframe,Flash等数据.让用户尽早的看到被打开页面的希望.

D.提高客户端渲染速度

这个问题就比较泛泛了,影响客户端的渲染速度有多方面的,主要目的都是提高程序方面的效率.

  1. 对于大索引的结构,尽可能的少用索引访问,能用访问兄弟节点的方式尽可能用访问兄弟节点的方式.
  2. 字符串拼接尽可能用数组方式
  3. 大规模添加节点数据,请不要使用appendChild方式,尽量使用类似innerHTML的insertAdjacentHTML方式,FF下需修正2

E.让浏览器同时能请求更多的数据.

浏览器默认只是支持单域名同时有两个HTTP请求,使用多域名将能把请求数提高,在网络条件优良的情况下,能更快的下载数据,呈现结果.

F.提高服务器相应速度

对于需快速响应的文件,把其放入快速响应的服务器,应该是不错的方案,优化方案请系统储备组提供.

G.通过版本化控制客户端Cache.

通常js/css这类文件改动比较频繁,但是为了加载速度变快,我们有可能需要设定这类文件的过期时间为几天后,这样我们碰到的问题就是,如何及时更新这些在cache的文件?
通过一个简单的配置,通过修改JS的版本来及时告诉浏览器,这些文件必须重新请求了,不要继续使用浏览器cache中的数据. 方案有好几个:

  1. 手动改这些js的文件名
  2. 手动改这些js的路径
  3. 通过URL Rewrite方式来改重定位js路径
  4. 通过一个在高响应服务器上的一个js配置告知页面,这个页面该链接哪些JS文件
  5. 大版本不变,小版本不断追加,等一定时间后,统一更新,高效利用cache

标注

  1. meizz的js framework还没出正式版，有兴趣在CSDN的页面翻一下
  2. Firefox修正方式 
    function addHTML(oParentNode, sHTML) {   if(window.addEventListener) {// for MOZ     var oRange = oParentNode.ownerDocument.createRange();     oRange.setStartBefore(oParentNode);     var oFrag = oRange.createContextualFragment(sHTML);     oParentNode.appendChild(oFrag);   }   else {// for IE5+     oParentNode.insertAdjacentHTML("BeforeEnd", sHTML);   }}

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ppt呈现技巧、课堂呈现技巧、商务演讲与呈现技巧、快速序列视觉呈现范式、ppt工作汇报呈现技巧，以便于您获取更多的相关知识。

时间： 2024-09-20 05:38:39

如何快速的呈现我们的网页的技巧整理_javascript技巧的相关文章

如何快速的呈现我们的网页

一.我们需达解决的麻烦 减少HTTP请求数. 减少HTTP请求数有什么好处 降低服务器跟客户端的建立和消除HTTP请求和响应Header的开销 减少服务器为HTTP连接的进程和线程的开销,如果可能,还会包括GZIP压缩的CPU开销. 减小被请求文件大小, 减少请求数据占用的网络带宽. 让用户更快的看到想要的结果. 提高客户端渲染速度. 让浏览器同时能请求更多的数据. 提高服务器相应速度. 通过版本化控制客户端Cache. 二.如何解决我们的麻烦 A.如何减少HTTP请求数 合并JS文件跟CSS文

优化网页之快速的呈现我们的网页_javascript技巧

一.我们需要解决的麻烦        A.减少HTTP请求数.                减少HTTP请求数有什么好处:                       降低服务器跟客户端的建立和消除HTTP请求和响应Header的开销                         减少服务器为HTTP连接的进程和线程的开销,如果可能,还会包括GZIP压缩的CPU开销.        B.减小被请求文件大小, 减少请求数据占用的网络带宽.        C.让用户更快的看到想要的结果.    

PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)_javascript技巧

PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG. PhantomJS 可以用于 页面自动化 , 网络监测 , 网页截屏 ,以及 无界面测试 等. PhantomJs官网:http://phantomjs.org/ GitHub:https://github.com/ariya/phantomjs/wiki/Quick

Javascript脚本实现静态网页加密实例代码_javascript技巧

Javascript脚本实现静态网页加密,阅读Javascript脚本实现静态网页加密,前两天看见有人问静态网页加密问题,就写了这个代码思路:加密时:先把用户的密钥A用md5加密为B,然后用B异或源文件S0得到目标文件S1,把S1存入js变量中.解密时:询问密钥,然后操作同加密 前两天看见有人问静态网页加密问题,就写了这个代码 思路: 加密时:先把用户的密钥A用md5加密为B,然后用B异或源文件S0得到目标文件S1,把S1存入js变量中. 解密时:询问密钥,然后操作同加密. 因为用了md5,个人

JS实现兼容性好,带缓冲的动感网页右键菜单效果_javascript技巧

本文实例讲述了JS实现兼容性好,带缓冲的动感网页右键菜单效果.分享给大家供大家参考.具体如下: 这是一款兼容好带缓冲的动感网页右键菜单,应该来说做的非常棒,完全JavaScript的实现,我觉得挺不错,感谢作者. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-dg-right-button-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

JavaScript网页定位详解_javascript技巧

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

使用开源工具制作网页验证码的方法_javascript技巧

开发工具:eclipse.kaptcha-2.3.jar包. 一.创建Web项目: 二.新建一个Jsp页面(内容有,一个文本框,一个图片容器,一个提交按钮) <body> <img alt="random" src="randomcode.jpg" onclick="changeR(this)" style="cursor: pointer;"> <form action="check.

JavaScript快速检测浏览器对CSS3特性的支持情况_javascript技巧

在项目中需要快速检测浏览器是否支持某CSS3特性,比如检测是否支持"transform",然后我的布局会有两种完全不同的版式. 当然除开本文介绍的这种快速方法,还有一种更有名和更通用的方法,那就是modernizr,运行脚本之后它会在html的class上加上浏览器支持的所有特性的列表. 优点: js是可配置的,不需要的特性检测可以在配置脚本中去掉基于特性检测js库简单好用 除此之外还有一种不太好的方法,那就是判断浏览器的UA,不好的原因是UA可能会伪造,而且版本判断繁琐,还有不稳定.

javascript html实现网页版日历代码_javascript技巧

本文实例为大家分享了网页版日历代码,供大家参考,具体内容如下 效果图: 实现代码: <html> <head> <link rel="stylesheet" type="text/css" href="Skin.css"> <style> <!-- table{ text-align: center } --> </style> </head> <body&