-
图片优化有哪些方法
2020-05-10 23:17:55对于服务器来说,图片始终是最消耗系统资源的,如果将图片服务和应用服务放在同一服务器的话,应用服务器很容易会因为图片的高I/O负载而崩溃,所以当网站存在大量的图片读写操作时,建议使用图片服务器。(注:图片...常遇问题:1.加载的图片太多导致向服务器请求的次数太多;2.图片太大导致每次请求的时间过长,页面加载完成慢。
解决目标:减少资源到客户端的延迟。
那么问题来了,应该如何解决呢?
优化方法
1.将图片服务和应用服务分离(从架构师的角度思考)
对于服务器来说,图片始终是最消耗系统资源的,如果将图片服务和应用服务放在同一服务器的话,应用服务器很容易会因为图片的高I/O负载而崩溃,所以当网站存在大量的图片读写操作时,建议使用图片服务器。(注:图片服务器是专门为图片读写操作优化的独立服务器,运行网站的服务器称为应用服务器。)另外,浏览器在同一时间对同一域名下的资源的并发请求数目是有限制的,一般在2-6之间,超过限制数目的请求就会被阻塞。把图片服务器与应用服务器分开,图片服务器采用独立域名 ,css、js和图片就可以并发请求了。
2.图片质量压缩(简单粗暴)
图片压缩应该是图片优化时最常用的方案,因为很简单,只需要将图片上传到tinypng或者智图等第三方软件的在线压缩图片平台,对图片进行压缩,就可以得到较小的图片质量。
3.图片懒加载
像淘宝或者京东这样的APP页面上有很多图片,当我们滑到下一屏时下一屏的图片才会加载,这就采用了图片懒加载的方式。
图片懒加载的目的就是为加快页面加载速度而做的,为了不让图片一次全部加载出来,通过将图片地址存放在一个img标签的属性上,当图片被滚动到页面上时,再将src属性替换成图片地址来达到懒加载的效果。(通过js将img标签的data-src属性赋值给src属性)
4.css Sprites(即雪碧图)
当网站或者APP有大量小icon,如果上传到图片服务器比如CDN,要加载所有这些小icon将增加大量请求,而CDN是按流量收费的,这无疑将增加很多成本。
雪碧图就是将这些小icon合并成一张图片,只需要加载一次,减少图片的网络请求,每次通过background-position来控制显示icon。(个人通常使用gopng这个网站在线生成,还可以自动生成对应的css代码)
不过这也有一定的缺点:在长期开发多人合作的项目中,会不好维护这些sprites,每次对icon做修改,都得相应的改动css里background-position的值,相当繁琐。
5.将图片压缩成base64格式来节约请求
将图片压缩成base64,随html或者css一起下载到浏览器,不需要额外的请求,这样就节约了请求。
将一个图片地址进行base64编码后会得到一串字符串,将这个字符直接放到img的src属性上,你会发现浏览器是可以识别这一串字符的,不需要发送网络请求直接解析,这样就可以达到减少网络请求的目的,但是base64编码后的图片质量比原图图片质量要大,因此也只会在一些质量较小的图标类图片上面使用,否则得不偿失,常见使用base64编码的方案就是webpack的url-loader,举个例子:
module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] } ] } }
上面的这个配置就是把8k以下的通过url-loader进行base64编码,转换成一串DataUrl。
针对decode base64编码的图片比较慢的问题,我们可以选择使用canvas来加速。当向canvas发出绘画命令时,浏览器直接将指令发到图形加速器而不需要开发者更多的干预,硬件图形加速器则以难以执行的运算速度实时绘画和渲染图形。因此,我们可以使用canvas来渲染base64编码后的图片。
6.css替换简单图标
这个优化方案应该都懂,其实就是在写代码之前先考虑一下设计稿里面的哪些内容是可以通过代码来实现的,能通过代码实现的尽量用代码实现,同时实现的时候多考虑绘制性能,能使用css3做GPU硬件加速的就尽量使用css3属性,这些都能减少图片使用而且不影响渲染性能。
7.响应式图片加载
什么是响应式图片加载?其实就是在不同分辨率的设备上显示不同尺寸的图片,避免资源的浪费,常用的方法就是css3的媒体查询(media query),来看个例子:
@media screen and (max-width: 375px) { img { background-image: url('phone.png'); } } @media screen and (max-width: 768px) { img { background-image: url('tablet.png'); } }
-
为什么会有同源策略? 什么情况下会碰到跨域问题?有哪些解决方法?
2019-10-29 20:45:101、同源策略是为了保护网站的安全,防止用户信息泄露,防止身份伪造等(读取Cookie) 2、ajax请求不到数据的时候 3、jsonp 声明一个回调函数,其函数名(如fn)当做参数值,要传递给跨域请求数据的服务器,函数形参为要...1、同源策略是为了保护网站的安全,防止用户信息泄露,防止身份伪造等(读取Cookie)
2、ajax请求不到数据的时候
3、jsonp声明一个回调函数,其函数名(如fn)当做参数值,要传递给跨域请求数据的服务器,函数形参为要获取目标数据(服务器返回的data)。 创建一个<script>标签,把那个跨域的API数据接口地址,赋值给script的src,还要在这个地址中向服务器传递该函数名(可以通过问号传参:?callback=fn)。 服务器接收到请求后,需要进行特殊的处理:把传递进来的函数名和它需要给你的数据拼接成一个字符串,例如:传递进去的函数名是fn,它准备好的数据是fn([{"name":"jianshu"}])。 最后服务器把准备的数据通过HTTP协议返回给客户端,客户端再调用执行之前声明的回调函数(fn),对返回的数据进行操作。 其中 fn 是客户端注册的回调的函数,目的获取跨域服务器上的json数据后,对数据进行在处理。
最后服务器返回给客户端数据的格式为:
3、CORS
CORS的兼容性不如jsonp在响应头上添加Access-Control-Allow-Origin属性,指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了CORS,并且允许的源包括了本网站,那么就不会拦截请求响应。
3、ngix反向代理
最后:有一点必须要注意:跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。之所以会跨域 -
为什么要禁止除GET和POST之外的HTTP方法?
2021-02-01 15:34:01HTTP请求方法有哪些 众所周知,GET、POST是最为常见方法,而且大部分主流网站只支持这两种方法,因为它们已能满足功能需求。其中,GET方法主要用来获取服务器上的资源,而POST方法是用来向服务器特定URL的资源提交...HTTP请求方法有哪些
众所周知,GET、POST是最为常见方法,而且大部分主流网站只支持这两种方法,因为它们已能满足功能需求。其中,GET方法主要用来获取服务器上的资源,而POST方法是用来向服务器特定URL的资源提交数据。而其它方法出于安全考虑被禁用,所以在实际应用中,九成以上的服务器都不会响应其它方法,并抛出404或405错误提示。以下列举几个HTTP方法的不安全性:
1、OPTIONS方法,将会造成服务器信息暴露,如中间件版本、支持的HTTP方法等。
2、PUT方法,由于PUT方法自身不带验证机制,利用PUT方法即可快捷简单地入侵服务器,上传Webshell或其他恶意文件,从而获取敏感数据或服务器权限。
3、DELETE方法,利用DELETE方法可以删除服务器上特定的资源文件,造成恶意攻击。 -
实现301永久重定向对SEO的意义和设置方法
2010-12-20 21:18:00所谓301永久重定向(或叫301转向,301跳转),是指当用户或搜索引擎向网站服务器发出浏览请求时,服务器返回的HTTP数据流中头信息(header)中的状态码的一种,表示本网页永久性转移到另一个地址。 301永久...所谓301永久重定向(或叫301转向,301跳转),是指当用户或搜索引擎向网站服务器发出浏览请求时,服务器返回的HTTP数据流中头信息(header)中的状态码的一种,表示本网页永久性转移到另一个地址。
301永久重定向有何作用?在哪些情况下适用?
从301永久重定向的定义可以看出,它是一种状态码,会向搜索引擎或浏览器发出信息:本网页的地址已经永久改变了。并会把新的地址传达过去。而相应的就是:我们输入网址A访问,显示出来的是转向后的网址B,转向过程极短以至无法察觉。所以,301永久重定向对于访客来说,作用就是将他要访问的而实际上已不存在的网址转到另一个网址,避免出现“此网页无法显示”之类的错误;对于搜索引擎优化|SEO来说,给搜索引擎一个友好的信息,告诉它此页面已永久重定向,避免搜索引擎找不到页面。这对于网站的SEO是很重要的,因为301永久重定向对SEO无任何不好的影响!而且网页A的关键词排名和PR级别都会传达给网页B!
一、当出于需要删除网站中的某些目录时,可以通过301永久重定向将此目录重定向到网站首页。
二、网站更换域名时,通过301永久重定向将旧域名重定向至新域名,挽回流量损失和SEO。
三、想要多个域名同时指向同一网站时,通过301永久重定向可以实现。一般的虚拟主机后台提供将smugseo.com和www.smugseo.com等多个域名绑定到同一网站的功能,但这样对收录可能有影响:《绑定多个域名对搜索引擎收录的影响》。而用301永久重定向就没有这样的担忧。
四、实现网址规范化。
有以下4个网址:
http://smugseo.com
http://www.smugseo.com
http://smugseo.com/index.html
http://www.smugseo.com/index.html
查询上面4个网址的PR值,或用site:smugseo.com查看网站首页,如果结果一致,说明网站没有规范化问题;如果不一致,表明有规范化问题。出现此问题时,可以将上面4个网址通过301永久重定向指向同一个网址http://www.smugseo.com,解决了。如何实现301永久重定向?
一、通过代码实现301永久重定向。
HTML网页无法实现301永久重定向。因为HTML文件一被读取,就已经返回表示一切正常的200状态码了。
ASP或PHP网页。比如,你要删除某个目录A,想实现访问http://www.smugseo.com/A/时跳转到http://www.smugseo.com,可以:
ASP:在目录A下新建index.asp,写入代码:
<%@ Language="VBScript" %>
<%
Response.Status = "301 Moved Permanently"
Response.AddHeader "Location", "http://www.smugseo.com"
%>那么访问http://www.smugseo.com/A/其实就是访问http://www.smugseo.com/A/index.asp,就会自动跳转到http://www.smugseo.com。
PHP:在目录A下新建index.php,写入代码:
<?
header("HTTP/1.1 301 Moved Permanently");
header("Location:http://www.smugseo.com");
exit();
?>访问http://www.smugseo.com/A/其实就是访问http://www.smugseo.com/A/index.php,就会自动跳转到http://www.smugseo.com。
上面的代码经老孙亲自测试可行!注意代码不要写成一行,不然会出错!直接复制上面的代码使用可能会因为字体的原因导致出错,所以出错时请自己写一遍!
有个技巧:如果http://www.smugseo.com网站目录下同时存在index.html和index.asp,设置文档优先级html>asp时,输入http://www.smugseo.com访问到的是http://www.smugseo.com/index.html;设置文档优先级asp>html时,访问的是http://www.smugseo.com/index.asp.
二、虚拟主机301永久重定向
如果你的网站空间是使用虚拟主机或合租空间,无法对WEB服务器(IIS、Apache)进行设置,可以利用子目录绑定实现301永久重定向。首先建立子目录A,然后把你要进行重定向的域名A绑到这个目录,在这个子目录里面建立一个index.asp或index.php文件,写入上面介绍的代码。那么访问子目录A下的index.asp或index.php也即访问域名A,就会跳转到绑定在其他子目录上的域名B。
三、IIS实现301永久重定向。如果你有自己的服务器,有对IIS或Apache管理的权限,那么就可通过对IIS或Apache进行设置来实现301永久重定向。
进入IIS管理窗口,右键点击网站名或某个目录或某个文件,在弹出菜单选择“属性”,在“目录”或“主目录”窗口下选中“重定向到URL(U)”,输入将要定向到的网址,并勾选“资源的永久重定向”,确定即可。
四、Apache实现301永久重定向。
Apache中的分布式配置文件“.htaccess”提供了针对每个目录改变配置的方法,即在一个特定的目录中放置一个包含指令的文件,其中的指令作用于此目录及其所有子目录。比如,在目录A下放.htaccess,写入代码:
redirect 301 /A http://www.smugseo.com 或
redirect permanent /A http://www.smugseo.com访问http://www.smugseo.com/A/及其子目录时即可重定向到http://www.smugseo.com。若将整个网站或域名重定向到另一网站或域名,则可写入redirect 301 / http://www.smugseo.com,将.htaccess放在根目录即可。
如果要实现“批量重定向”,比如,把http://smugseo.com/a.html重定向到http://www.smugseo.com/a.html,把http://smugseo.com/b.html重定向到http://www.smugseo.com/b.html。。。等等,即把http://smugseo.com下的所有文件重定向到http://www.smugseo.com下的同名文件,则要用到mod_rewrite模块。在.htaccess中写入:Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^smugseo.com [NC]
RewriteRule ^(.*)$ http://www.smugseo.com/$1 [L,R=301]即可。
或将绑定的其他多个域名重定向到主域名:
RewriteEngine on
RewriteCond % ^smugseo.com$ [OR]
RewriteCond % ^bbs.smugseo.com$ [OR]
RewriteRule ^(.*)$ http://www.smugseo.com/ [R=301,L] -
超级有影响力霸气的Java面试题大全文档
2012-07-18 09:47:04如果在一个类中定义了多个同名的方法,它们或有不同的参数个数或有不同的参数类型,则称为方法的重载(Overloading)。Overloaded的方法是可以改变返回值的类型。 18、error和exception有什么区别? error 表示恢复... -
我自己总结的测试面试问题
2018-10-09 23:13:594. 编写测试用例方法有哪些:因果图,场景法、等价类划分法、边界值分析法、错误推测法、判定表驱动法、正交实验法、功能图法、大纲法 5. 测试的六条基本法则是什么:一功(功能)二可(可靠性)三效(效率)四易... -
java 面试题 总结
2009-09-16 08:45:341、面向对象的特征有哪些方面 1.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面。抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节。抽象包括... -
net学习笔记及其他代码应用
2010-11-16 18:15:0922.常用的调用WebService的方法有哪些? 答:1.使用WSDL.exe命令行工具。 2.使用VS.NET中的Add Web Reference菜单选项 23..net Remoting 的工作原理是什么? 答:服务器端向客户端发送一个进程编号,一个程序域... -
应急响应-powershell挖矿
2019-02-10 15:43:24而针对通过访问合法网站自动执行挖矿劫持的方式, Vaystikh表示,培训效果不佳,因为你没办法告诉用户不能访问哪些网站。 在Web浏览器上安装广告拦截或反挖矿插件。 由于挖矿劫持脚本通常通过网络广告进行传播,... -
NetSupport School .v11.41.0007简体中文版(含注册机)
2017-10-20 09:27:53采用“游戏节目”的方法,教师可以快速向班级提出口头问题,允许根据回答速度、以小组方式或随机地选择学生。可以对个人或在适当情况下对小组给分并加以跟踪 此功能的核心是能够迅速而有效地提供同学间互评和对学生... -
NetSupport School 课堂管理软件(简体中文版)
2014-09-05 16:53:07采用“游戏节目”的方法,教师可以快速向班级提出口头问题,允许根据回答速度、以小组方式或随机地选择学生。可以对个人或在适当情况下对小组给分并加以跟踪 此功能的核心是能够迅速而有效地提供同学间互评和对学生... -
Oracle 9i & 10g编程艺术:深入数据库体系结构(09年度畅销榜TOP50)(08年度畅销榜TOP50)--详细书签版
2013-02-06 18:24:201.1 我的方法 2 1.2 黑盒方法 4 1.3 开发数据库应用的正确(和不正确)方法 8 1.3.1 了解Oracle体系结构 8 1.3.2 理解并发控制 14 1.3.3 多版本 19 1.3.4 数据库独立性? 25 1.3.5 “怎么能让应用运行得更快... -
C#微软培训教材(高清PDF)
2009-07-30 08:51:1711.3 静态和非静态的方法.129 11.4 方法的重载.130 11.5 操作符重载.134 11.6 小 结.137 第十二章 域 和 属 性 .139 12.1 域 .139 12.2 属 性 .143 12.3 小 结 .146 第十三章 事件和索引指示器 .148 ... -
C#微软培训资料
2014-01-22 14:10:1711.3 静态和非静态的方法.129 11.4 方法的重载.130 11.5 操作符重载.134 11.6 小 结.137 第十二章 域 和 属 性 .139 12.1 域 .139 12.2 属 性 .143 12.3 小 结 .146 第十三章 事件和索引指示器 .148 ... -
普遍使用的 Android APP 技术架构,往往是在一个界面中存在大量的业务逻辑,而业务逻辑中充斥着各种网络请求、数据操作等行为,整个项目中也没有模块的概念,只有简单的以业务逻辑划分的文件夹,并且业务之间也是...
-
电脑蓝屏对照码
2019-05-05 14:16:40(2)有问题的设备驱动、系统服务或内存冲突和中断冲突: 如果在蓝屏信息中出现了驱动程序的名字, 请试着在安装模式或者故障恢复控制台中禁用或删除驱动程序, 并禁用所有刚安装的驱动和软件. 如果错误出现在系统启动... -
Oracle Database 9i10g11g编程艺术:深入数据库体系结构(第2版)--详细书签版
2013-02-03 11:42:531.1 我的方法 2 1.2 黑盒方法 3 1.3 开发数据库应用的正确(和不正确)方法 10 1.3.1 了解Oracle体系结构 11 1.3.2 理解并发控制 19 1.3.3 多版本控制 22 1.3.4 数据库独立性 28 1.3.5 怎么能让应用运行得更... -
WIN XP蓝屏代码大全
2013-08-08 12:29:21(2)有问题的设备驱动、系统服务或内存冲突和中断冲突: 如果在蓝屏信息中出现了驱动程序的名字, 请试着在安装模式或者故障恢复控制台中禁用或删除驱动程序, 并禁用所有刚安装的驱动和软件. 如果错误出现在系统启动... -
C++网络爬虫项目
2018-07-04 00:59:17互联网产品形形色色,有产品导向的,有营销导向的,也有技术导向的,但是 以技术见长的互联网产品比例相对小些。搜索引擎是目前互联网产品中最具技 术含量的产品,如果不是唯一,至少也是其中之一。 经过十几年的... -
深入理解计算机系统(中文版)
2014-03-05 22:49:05“这本书讲述事物的方法与众不同,但是和我想要的课程进行方式类似。” ――John Greiner, Rice大学 “这是一项出色的工作,是这一领域教学方法的一次革命。” ――Michael Scott, 罗切斯特大学 程序员... -
iPhone开发秘籍(第2版)--源代码
2012-12-11 13:51:22CruiseYoung提供的带有详细书签的电子书籍目录 http://blog.csdn.net/fksec/article/details/7888251 该资料是《iPhone开发秘籍:第2版》的源代码 对应的书籍资料见: iPhone开发秘籍:第2版(iphone开发必备佳作,在... -
Oracle 数据库管理艺术:11g新特性(世界级Oracle专家权威力作)--详细书签版
2013-02-06 17:57:47CruiseYoung提供的带有详细书签的电子书籍目录 http://blog.csdn.net/fksec/article/details/7888251 Oracle 数据库管理艺术:11g新特性(世界级Oracle专家权威力作) 基本信息 原书名: Oracle Database 11g: New ... -
Android移动应用开发从入门到精通--详细书签版
2013-02-08 11:45:33CruiseYoung提供的带有详细书签的电子书籍目录 http://blog.csdn.net/fksec/article/details/7888251 Android移动应用开发从入门到精通 基本信息 原书名: Android Wireless Application Development 原出版社: ... -
OAuth 2.0有哪些角色? 资源拥有者(resource owner):能够授权访问被保护资源的一个实体。当它指的一个人时,就是称之为终端用户。 资源服务器(resource server):管理受保护资源的服务器。当使用访问令牌访问...
-
入门学习Linux常用必会60个命令实例详解doc/txt
2011-06-09 00:08:45所以要识别IDE硬盘的方法分别就是hda、hdb、hdc、 hdd。hda1中的“1”代表hda的第一个硬盘分区 (partition),hda2代表hda的第二主分区,第一个逻辑分区从hda5开始,依此类推。此外,可以直接检查 /var/log/messages... -
Android开发入门教程(汇集Android社区智慧图)--详细书签版
2013-02-08 11:01:1036.7 合作伙伴的错误有哪些 280 第37章 手机的处理 281 37.1 该应用程序包含显式指令 281 37.2 按钮 282 37.3 有保障的市场 282 37.4 细枝末节 283 37.4.1 Archos 5 Android Internet Tablet 283 37.4... -
React & Npm 组件库维护经验
2020-12-29 20:29:42因为 defaultProps 中定义了的字段默认是有含义的,因此不会对其进行操作,避免多次定义产生的风险。 现在 fit-input 就将 props 透传到了原生 Input 组件上,因此虽然我没有处理各类事件,... -
聊一聊前端自动化测试
2021-01-10 04:41:54<div><h2>前言 为何要测试 ...断言库提供了很多语义化的方法来对值做各种各样的判断。当然也可以不用断言库,Node.js中也可以直接使用原生assert库。这里后续以Should.js为例 3. 代码覆盖率:...
-
PAT甲级题解 1023
-
中央广播电视大学《婚姻家庭法》期末总复习资料(含答案).pdf
-
新款PM9811通讯协议(改款).pdf
-
1094 The Largest Generation (25 分)
-
中央广播电视大学《工程经济与管理》期末总复习资料(含答案).pdf
-
中央广播电视大学《混凝土结构设计原理》期末总复习资料(含答案).pdf
-
Liunx 优化思路与实操步骤
-
1--『人加智能』商业计划书.pdf
-
龙芯生态应用开发基础:C语言精要
-
LVS + Keepalived 实现 MySQL 负载均衡与高可用
-
中央广播电视大学《个人与团队管理-专科》期末总复习资料(含答案).pdf
-
FsonFormat.7z
-
中央广播电视大学《国际经济法》期末总复习资料(含答案).pdf
-
1.1 java的基本数据类型与包装类
-
没有未来,我们还是分手吧
-
职场“奇葩说”:我的老板有多坑?
-
python字段转化为百分比展示
-
PPT大神之路高清教程
-
每个工程师都应该了解的:聊聊幂等
-
MySQL 事务和锁