`

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

阅读更多

如何快速的呈现我们的网页 作者: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); }}

分享到:
评论

相关推荐

    形式感:网页视觉设计创意拓展与快速表现

    《形式感:网页视觉设计创意拓展与快速表现》是一本深度探讨网页视觉设计的专业书籍,旨在帮助设计师提升创作水平,实现设计思维的拓展与快速表现技巧。书中涵盖了多个关键知识点,旨在让读者深入理解网页设计的艺术...

    个人网页.zip(鬼刀主题,快速上手网页结构)

    这个模板适用于期末个人网页设计项目,意味着它为学生提供了一个快速理解和实践网页设计的基础框架。 在网页设计中,一个完整的个人网页通常包括以下组成部分: 1. **头部(Header)**:页面顶部通常包含logo、...

    快速截取网页工具Htmltoimage

    这个工具能够帮助用户快速保存网页的可视化呈现,对于网页设计、开发者或者需要保存网页快照的用户来说非常实用。在互联网环境中,由于网页内容的动态性和易变性,有时我们需要保存当前页面的状态,此时Htmltoimage...

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

    ### 优化网页之快速的呈现我们的网页 #### 我们需要解决的问题 为了提升用户体验、减少服务器负担并加快页面加载速度,本篇文章将探讨几种关键的技术手段与实践方法。具体而言,我们将关注以下方面: 1. **减少...

    网页设计必备,入门必备

    从压缩包文件名“网页制作技术教程”来看,我们可以推测这是一个关于网页制作的详细教程。这个教程可能涵盖了以下关键知识点: 1. HTML基础:HTML(HyperText Markup Language)是网页设计的基础,教程会讲解HTML...

    网页设计 作业 大学生 高中生 网页设计作业

    首先,我们来看"简单的网页设计"这一关键词。简单的网页设计通常是指以清晰、易用为主导的设计理念,避免过多复杂的元素,使用户能够快速理解并导航网站。设计时应注重以下几点: 1. **布局**:网页布局决定了内容...

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

    【网页快速呈现技巧详解】 网页的快速呈现是提升用户体验的关键因素之一,对于网站的加载速度和用户满意度有着直接影响。以下是一些有效的策略和技术,旨在帮助优化网页加载速度: 一、减少HTTP请求数 减少HTTP...

    轻松做网页工具、轻松做出绚丽网页

    在名为"EasyAngel"的压缩包文件中,我们可以推测这可能是一款或一组用于创建精美网页的工具或者资源集合。"EasyAngel"可能包含一系列模板、图形素材、代码片段,甚至是一整套网页设计教程,帮助用户快速打造个性化且...

    网页设计CSS快速参考

    5. **响应式设计**:了解如何使用媒体查询(@media rule)来实现响应式网页设计,使网页能在不同设备上呈现最佳效果。 6. **CSS动画和过渡**:掌握如何使用`animation`和`transition`属性创建动态效果,提升用户...

    网页设计模板 网页设计模板

    下面我们将深入探讨网页设计模板的相关知识点,并结合"漂亮的网页设计"这一标签,对网页设计的关键要素进行详细阐述。 首先,网页设计模板是一种预先设计好的布局结构,通常包括头部、导航栏、主体内容区、侧边栏和...

    网页设计大全 有关网页制作的

    本资源包“网页设计大全”似乎包含了关于网页制作的相关资料,虽然具体的效果未有明确评价,但我们可以深入探讨网页设计的一些核心知识点。 1. **HTML(超文本标记语言)**:HTML是构建网页的基础,它定义了网页的...

    100個_网页样版_網頁樣版_網頁版型_网页

    通过学习CSS,开发者可以掌握如何美化网页,实现响应式设计,让网页在不同设备上呈现良好效果。 JavaScript是一种脚本语言,它增强了网页的交互性。在这些模板中,JavaScript文件通常用于处理用户输入、动态更新...

    100套网页外国网页模版

    CSS(Cascading Style Sheets)则负责控制网页的样式和布局,使其呈现出美观的视觉效果。这两者结合使用,可以实现内容与表现的分离,提高网页的可维护性和适应性。 这些模版可能涵盖了多种类型,如企业官网、个人...

    纯HTML网页源码

    这种网页在本地计算机上直接打开,浏览器会解析HTML源码并呈现网页内容。 纯HTML网页的优势在于简洁、轻量级,易于理解和编辑。对于初学者来说,学习HTML是理解网页工作原理的第一步。HTML由一系列元素组成,每个...

    完美网页设计CSS快速参考chm电子书

    《完美网页设计CSS快速参考》是一本专门为网页设计师和开发者准备的CSS(Cascading Style Sheets)学习资源。这本书以CHM(Compiled HTML Help)格式呈现,这种格式便于阅读和检索,是电子书籍常见的形式之一。书中...

    一个风景网页加动态网页

    模板和框架如Bootstrap或Elementor,为初学者提供了快速创建网页的工具,它们预设了设计元素和布局,只需要简单修改即可。使用这些工具,可以节省大量的设计和编码时间,同时也降低了学习曲线。 然而,文件名“008...

    学生单页面网页作业下载 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页下载

    在本资源中,我们主要关注的是一个学生网页设计作业,这是一个单页面的静态HTML网页,设计用于呈现404错误页面。这个作业是基于Dreamweaver进行制作的,Dreamweaver是一款由Adobe公司开发的知名网页设计软件,它提供...

    春节习俗网页设计

    总的来说,"春节习俗网页设计"是一个综合性的实践项目,涉及到HTML结构设计、网页布局、网页制作工具的运用以及文化内容的呈现。通过这个项目,设计师不仅可以提升技术能力,还能深入了解传统文化的传播方式,为用户...

    小型网页CSS网页模板

    这种布局方式可以实现响应式设计,使得网页能在不同设备和屏幕尺寸上呈现出良好的适应性。 "商务"和"企业"的标签提示,这套模板可能包含了一些常见企业网站的功能,如导航栏、关于我们、服务介绍、产品展示、新闻...

Global site tag (gtag.js) - Google Analytics