`
wu_quanyin
  • 浏览: 208274 次
  • 性别: Icon_minigender_1
  • 来自: 福建省
社区版块
存档分类
最新评论

高性能网页开发规则(转)

阅读更多

1、原则一如果能使页面HTML显示跟后台处理同时进行,这是一个比较好的方式; 

比如说将页面上容易显示的部分优先反馈给浏览器,然后再接着继续处理下面的步骤这样比较; 

象PHP中在HTML的<head>后可以使用flush()方法,提前将部分信息返回给客户端,通常有CSS、JS等信息;然后可以将JS、CSS打包 压缩 尽量减少HTTP的请求次数。 


2、POST请求将执行两步,首先发送信息头,然后才识传送数据;而GET方式只是用一个TCP数据包传递,速度要快一些,如果仅仅是为获得数据而非发送数据给服务器时,使用GET更好。IE中URL的最大长度为2K。 


3、后加载组件,确定哪些数据是页面显示时就必须的,确定之后那些不必须就的可以通过JS控制onload来实现延迟加载;如拖动页面元素、或页面排序等的JS可以采取延迟加载;YUI库提供图片延迟加载功能; 


4、第一次访问站点比较慢的原因是没有缓存过,之后访问就会直接取缓存的数据。 


5、不要滥用table和div,只有当它有确实语义的时候才使用,不要为了换行,格式化,显示效果等原因使用div; 

DOM的数据可以在firebug的console中输入document.getElementsByTagName('*').length获得; 

页面HTML标签数量理想状态下应控制在700以下。 


6、最占响应时间的是客户端组件的请求响应速度,建议将组件从不同域名下载,可达到并发的目的; 

HTTP1.1协议建议允许并发下载,IE8支持6个并发请求;但是DNS有查询损耗,域名不要超过2-4个; 


7、iframe要尽量少用; 

优点:有延迟加载功能,能并发的请求响应; 

缺点:即便是个空的html文件在iframe里面,消耗也是相当高的,不利于提高响应速度;而且它会阻止整个页面的onload的响应。 


8、应当尽量阻止404没有资源响应的错误,因为它会阻止其他组件的并发,浏览器会一直尽力的去解析404请求的内容。 


9、cookie是用于身份认证尤其是个性化等操作,它是在http的请求头中进行交换的,它体积越大,则响应越慢; 

每3000字节的cookie在DSL的带宽中会增加80毫秒的响应; 

所以除去不必要的cookie,已经使用短小的文件名和尽可能小的减少cookie的大小都有利于改善响应时间; 


10、避免使用JS大面积的操作DOM,修改页面布局,这样速度很慢; 


11、采用JS时,尽量使用事件委托,就象jquery通过类绑定一样,避免每个按钮都去绑定一个JS,应通过循环来实现绑定;

 

12、使用<link>标签而不使用IE的@import有利于提高用户体念; 


13、优化图片; 


14、压缩JS软件 JSMIN 


分享到:
评论

相关推荐

    高性能网页开发新20条规则详解(一).pdf

    高性能网页开发的新20条规则旨在提升网页的加载速度和用户体验,主要分为七大类别:服务器端、cookies、页面内容、JavaScript、CSS、图片以及移动手机应用。以下是对这些规则的详细解析: 一、尽早清除缓冲区 ...

    高性能网页爬虫

    在IT领域,高性能网页爬虫是数据挖掘和分析的关键技术之一。它允许我们高效地从互联网上抓取大量数据,用于研究、市场分析、搜索引擎优化等目的。本项目以"高性能网页爬虫"为主题,采用Python语言实现,并利用分布式...

    iPad网页开发教程及规则.pdf

    iPad网页开发涉及多种技术和规则的适应与应用,以确保网站在iPad的Safari浏览器中能够正确地显示和操作。在iPad网页开发中,以下是一些重要的知识点: 1. 浏览器和设备检测:由于iPad的Safari不支持Flash,开发者...

    CSS高性能开发-源代码

    通过深入理解和实践这些CSS高性能开发的技巧,开发者能够构建出更加高效、可维护的网页,提升用户的浏览体验。而“CSS高性能开发-源代码”这个资料包很可能是书籍《CSS高性能开发》的配套源代码,它将提供实例和示例...

    网页源代码开发

    网页源代码开发是构建互联网应用的基础,它涉及到HTML、CSS、JavaScript等关键技术,以及与数据库交互和前后端协作的相关知识。...深入理解和熟练运用这些知识点,才能构建出高质量、功能丰富的网页应用。

    网页开发技术

    总的来说,掌握HTML、CSS和JavaScript是网页开发的基石,随着技能的提升,还可以探索更高级的主题,如网页性能优化、无障碍访问(Web Accessibility)和前端框架的深度应用。不断地学习和实践,你将在网页开发的世界...

    HTML+CSS网页开发技术精解.pdf

    《HTML+CSS网页开发技术精解.pdf》文件标题和描述表明,本文档是一本关于HTML和CSS技术的详细指南。HTML和CSS作为网页设计和开发的核心技术,对于构建和展示网页内容至关重要。以下是从文件标题、描述和相关内容中...

    DivCss网页布局和高性能Web站点

    网页布局和高性能Web站点是现代互联网开发中的关键领域。DivCSS,全称为“层叠样式表(Cascading Style Sheets)”,是用于控制网页元素样式和布局的主要技术。DivCSS布局利用HTML的div标签,结合CSS,实现了内容与...

    网易游戏高性能、分布式服务器开发框架 Pomelo.zip

    pomelo 是由网易开发的基于node.js开发的高性能、分布式游戏服务器框架, 也可作为高实时web应用框架。 Pomelo的应用范围 pomelo最适合的应用领域是网页游戏、社交游戏、移动游戏的服务端,开发者会发现pomelo可以...

    高性能网站建设指南.pdf

    随着互联网技术的发展,用户对网站性能的要求越来越高,因此建立高性能网站已成为现代网站设计与开发的核心目标之一。 - **目标读者**:本书适合Web架构师、信息架构师、Web开发人员以及产品经理等专业人士阅读。 #...

    网站开发CSS网页模板

    综上所述,"网站开发CSS网页模板"涵盖了从CSS基础到高级应用的各种知识,包括选择器、布局、响应式设计、预处理和性能优化等多个方面。在实际开发中,熟练掌握这些概念和技术,能够帮助创建美观且高效的网页模板。

    html5开发的连连看网页游戏源码

    HTML5是一种先进的网页开发技术,它极大地扩展了Web应用程序的功能,使得开发者能够创建出更为丰富、交互性更强的网页内容。在这个"html5开发的连连看网页游戏源码"中,我们可以深入研究HTML5在游戏开发中的应用,...

    java 网页浏览器开发

    虽然Java可能不如JavaScript那样直接支持高性能的浏览器渲染,但开发者可以使用JavaFX的Scene Graph或自定义的绘图API来实现基本的渲染功能,如文本渲染、图片加载等。 此外,考虑到安全性,开发者还需要关注Java的...

    CSS高性能开发-源代码.zip

    在CSS高性能开发中,我们关注的是如何有效地编写和优化CSS代码,以确保网页在各种设备和浏览器上快速加载和流畅运行。以下是一些关键的知识点,涵盖了从基础到高级的CSS性能优化技巧。 1. **选择器的效率**:CSS...

    AS 3 网页编程 实现网页游戏开发

    压缩包中的`aswing_a3_1.2_fx`可能是一个AS 3的框架或库,专注于提供更高级别的游戏开发组件和工具,如图形渲染、动画控制等。使用这样的框架可以简化开发过程,提高效率。 总结来说,AS 3为网页游戏开发提供了全面...

    Nginx高性能WEB服务器最佳实践.pdf

    Nginx的高性能主要得益于它的异步非阻塞模型epoll,而这种模型是Linux内核2.6版本后引入的。epoll模型的选择机制效率高于传统的select模型,它无需遍历所有句柄,而是直接响应有事件发生的句柄。 Nginx的架构分为...

    CSS标准网页布局开发指南.rar

    《CSS标准网页布局开发指南》是一本专注于网页布局设计的资源集合,主要针对使用CSS(层叠样式表)来创建高效、响应式和易于维护的网页布局。在现代Web开发中,CSS是不可或缺的一部分,它使得我们可以独立于内容来...

    ASP.NET网页设计与网站开发上机实践和实例解析源程序(马骏 党兰学 杜莹)

    ASP.NET还包含了ASP.NET Core,这是一个跨平台的高性能开发框架,可用于构建Web应用、APIs和微服务。ASP.NET Core引入了依赖注入、中间件等概念,提高了开发的灵活性和效率。在源程序中,你可能找到关于Kestrel...

    网页教学网收集20个方便网页开发的工具.pdf

    以上20个工具涵盖了网页开发的各个环节,包括设计、编码、测试、优化和协作,它们的存在大大提升了开发者的生产力,使得网页开发变得更加高效和专业。在实际工作中,根据项目需求和个人喜好,选择合适的工具组合,...

    手机网页开发指南(英文版)

    《手机网页开发指南》是一本专门针对移动设备上的网页开发的英文参考资料,旨在帮助...以上只是《手机网页开发指南》可能涵盖的部分内容,通过深入阅读和实践,开发者能够掌握构建高质量移动网页的技巧和最佳实践。

Global site tag (gtag.js) - Google Analytics