高性能网站建设指南 读书笔记(一)

news/2024/4/28 6:03:17/文章来源:https://blog.csdn.net/weixin_34060741/article/details/88953118

这本书的绪言讲得很好,对于网站来说,页面从发送请求到看到页面,只有10%~20%的时间是花在Web服务器获取HTML文档并且传输到浏览器的,剩余的80%~90%的工作都是前端部分来做的,作为一个前端开发人员,与其希望后台提升效率,不如自己通过一些方法来提升前端的效率。作者说,将这本书的14条规则合理的运用在网站上,可以节省25%甚至更高的时间!

规则一 减少HTTP请求

性能黄金法则:最终用户响应时间10%~20%~花费在接受所请求的html文档上,而其余80%~90%的时间是花费在HTML文档所引用的其他资源(图片、脚本、样式表、Flash等)进行的HTTP请求上,

减少HTTP请求的数量可以有效的减少请求过多资源花费的时间从而提升性能。

  • 图片地图

    这种方法可能很古老了,现今的浏览器或者网站可能很少用了,可以去书上看看demo

  • CSS Sprites
    CSS Sprites可以将多幅图片拼接成一幅图片,从而减少请求数量来提升性能。但是CSS Sprites也有缺点,那就是都不适合大容量图片,适合小size的多张图片合并。

    其实雪碧图在http1.1以下的版本用处是非常大的,在 HTTP/1.1 协议中 「浏览器客户端在同一时间,针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞」。所以,很多张图片同时请求,可能需要分批次请求很多次,雪碧图很好的解决了这个问题,而HTTP/2.0采用了多路复用,取消了网络请求数量这一块的限制。
    http/2.0相比1.1性能的提升
    HTTP/1.1:
    image
    HTTP/2.0:
    image
    从上面两张图可以看出,HTTP/1的请求次数是有限制的,大概同义词只可以发送6个请求左右;而在HTTP/2下,几乎所有的请求是同时发出的,大大提高了性能。

  • 内联图片

    优点:使用data:URL的形式可以在页面中使用图片而无需额外的HTTP请求。
    缺点:data:URL形式存在兼容性问题,如低版本的IE浏览器以及过大的图片进行base64编码的同时,其data:URL的代码也非常大,从而虽然节省了HTTP请求,但是加大了HTML文档的容量。

  • 合并脚本和样式表
    每个页面都会额外引用脚本和样式表,否则就会使用内联脚本和样式表。对于开发和维护的角度来说,是推荐使用引用样式表的这种形式的,但是每一个引用又会多一次HTTP请求,所以,合理的合并脚本以及样式表,可以减少HTTP请求的次数并缩短最终用户响应时间。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_776150.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用phpcms如何将静态页面制作成企业网站(上)

首先,先要准备好这个静态网页的源文件,如图 bs里面是一些css和js的文件,img则是放图片的,文件中的index是网页的首页 运行一下,看看 是这样的 然后打开phpcms文件,上篇博客中有提到,把首页的文件…

什么是云服务器?云服务器建站有哪些优势

社会需求永远是推动技术发展的动力,随着云计算的快速发展,云计算的相关产品也逐渐得到站长的青睐,由原来的虚拟主机、服务器托管、服务器租用到现在的云服务器,站长们也在寻找适合他们的产品。而越来越多的IDC服务商也为用户提供云…

常用网站学习网站

2019独角兽企业重金招聘Python工程师标准>>> 1.Git教程 - 廖雪峰的官方网站 https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/ 2.ionic 常有网址angular2 http://angular2.axuer.com/docs/ts/latest/api/ 3.大学精品课和去跟…

Springboot+JPA+Thymeleaf 校园博客完整小网站

本文所属【知识林】:http://www.zslin.com/web/article/detail/35此项目是一个比较简易的校园博客。麻雀虽小五脏俱全,虽然是比较简易的但是涉及的知识点还是比较全面的。 此项目涵盖了【知识林】中Springboot和Thymeleaf中所有知识点的内容。 主要功能有…

天融信从安全事件发生全过程谈网站安全防护

一、网站安全严峻形势 据国家互联网应急中心《2014年互联网网络安全报告》统计显示,2014年,监测到我国境内被篡改的网站数量为36969个,较2013年24034个大幅增长53.8%,仿冒网站99409个,网站被植入后门40186个。在2014年…

如何在prometric(普尔文)网站上用信用卡预约微软考试

最近发现以下一个链接:http://www.prometric.com.cn/testtakerit.asp?page_id1192由于之前看到新闻说7月份微软考试费用要上涨,趁热打铁,再怎么样,也要挤点时间考个,工作都4年半,岁月不饶人呀!…

精选31个网站界面设计实践教程

设计一个网站从来都不是一件容易的事。如果你去询问一位在该行业有丰富经验的网页设计师,他会告诉你以前根本没有太多关于Web设计/开发的资源、文章和各种沟通交流平台,更不用说高质量免费教程了。 如果您打算建立自己的个人网站或者重新设计您的博客的…

新建 SharePoint 网站集

进入管理中心,主菜单选择“服务设置”选项卡,此菜单选择SharePoint Online 点击网站集的“新建”按钮,看到新建ShartPoint Online网站集对话框 填写一些信息 然后点击“创建” 创建完成将得到以后界面提示 然后将在网站集列表中看到网站集列表…

大型网站技术架构(七)网站的可扩展性架构

2019独角兽企业重金招聘Python工程师标准>>> 扩展性是指对现有系统影响最小的情况下,系统功能可持续扩展或提升的能力。 设计网站可扩展架构的核心思想是模块化,并在此基础上,降低模块间的耦合性,提供模块的复用性。模…

基于Elasticsearch构建网站日志处理系统

Elasticsearch在离线和在线日志处理场景的应用日志处理可以分为三个场景,离线场景、在线场景,以及流式场景。今天给大家分享的话题是,如何使用Elasticsearch和X-Pack在离线和在线日志处理场景的应用。日志处理系统架构简介我们通过搭建网站日…

网站安全检测服务之PHP代码的后台绕过登录漏洞

针对于PHP代码的开发的网站,最近在给客户做网站安全检测的同时,大大小小的都会存在网站的后台管理页面被绕过并直接登录后台的漏洞,而且每个网站的后台被绕过的方式都不一样,根据SINE安全渗透测试多年来经验,来总结一下…

结合案例教你如何做好SEO搜索引擎优化

这是一个很很普通老生常谈的标题,没有任何的吸引力,但是真正能做好的草根站长估计少之又少,我问我一个做了多年草根站长的朋友,我说如何做好SEO搜索引擎优化,他给我的答复是很难,范围太广了,没法…

WAMPServer自定义网站根目录

一、WAMPServer默认的网站根目录是: 如要改成自己想要的网站根目录: 需要将下图中的httpd.conf打开 然后找到DocumentRoot,并改成自己想要的网站根目录(改两个地方),如图: 然后点击图中的Restar…

如何10分钟建立一个网站

1、将网站模板压缩,并以英文名命名,后缀为zip; 2、在服务器中添加站点,并创建数据库 3、文件-上传安装包并解压 4、查看install文件夹中,有没有文件的后缀为.lock字样,如果有将后缀去掉 5、进入安装界面 6、填写数据库…

威运通:信息时代,网站和安全缺一不可。

企业名称:深圳威运通科技有限公司公司行业:化学品工业公司规模:21-50人建站目的:展示企业理念、公司产品、解决方案网址:https://www.hgq99.com/建站产品:云企业官网--阿里云市场自营建站产品 深圳威运通科…

PHP网站打开太慢,如何解决!

如果你们公司的业务是用PHP语言开发的,那么使用的环境十有八九就是LNMP。在日常的运维工作中,占到9成以上的故障是遇到性能问题。 你可能会想,我们的业务运行的好好的,为啥平白无故就出现性能问题? 原因有太多可能&…

企业网站怎么才能防御DDOS***?

昨天一个政府的站长告诉墨者安全,他想要做一个网络安全防护,因为网站设计到了支付这一块的业务,所以要做网络安全防护,想要实时监测,如果有***发生需要第一时间知道情况。墨者安全告诉他可以的,那今天就讲讲…

大型网站技术架构(二)架构模式

2019独角兽企业重金招聘Python工程师标准>>> 每一个模式描述了一个在我们周围不断重复发生的问题及该问题解决方案的核心。这样,你就能一次又一次地使用该方案而不必做重复工作。 所谓网站架构模式即为了解决大型网站面临的高并发访问、海量数据、高可靠…

使用github+hexo搭建自己的博客网站--入门篇

前言 这一篇主要介绍如何使用搭建GitHub.io网站 我自己的网站:https://lijie-1024.github.io 使用hexonext主题GitHub搭建,具体问题可以留言问我。 本篇所包含的内容如下: 正文 一、申请github.io网站 github注册我就不讲了。。。能想到这…

网站服务器改数据库密码忘记了怎么办,服务器数据库密码忘记了怎么办

服务器数据库密码忘记了怎么办 内容精选换一换FTP/SFTP连接适用于从线下文件服务器或ECS服务器上迁移文件到OBS或数据库。当前仅支持Linux操作系统的FTP 服务器。连接FTP或SFTP服务器时,他们的连接参数相同,如表1所示。FTP/SFTP连接参数参数名说明取值样…