wordpress 多语言 切换,网站运营优化推广,做企业网站用什么字体,wordpress三栏怎么实现一、减少HTTP请求
1.图片地图#xff1a;
假设导航栏上有五幅图片#xff0c;点击每张图片都会进入一个链接#xff0c;这样五张导航的图片在加载时会产生5个HTTP请求。然而#xff0c;使用一个图片地图可以提高效率#xff0c;这样就只需要一个HTTP请求。 服务器端图片…一、减少HTTP请求
1.图片地图
假设导航栏上有五幅图片点击每张图片都会进入一个链接这样五张导航的图片在加载时会产生5个HTTP请求。然而使用一个图片地图可以提高效率这样就只需要一个HTTP请求。 服务器端图片地图将所有点击提交到同一个url同时提交用户点击的x、y坐标服务器端根据坐标映射响应
客户端图片地图直接将点击映射到操作
img srcplanets.jpg border0 usemap#planetmap altPlanets /map nameplanetmap idplanetmaparea shaperect coords180,139,14 href venus.html altVenus /area shaperect coords129,161,10 href mercur.html altMercury /area shaperect coords0,0,110,260 href sun.html altSun /area shaperect coords140,0,110,260 href star.html altSun /
/map
使用图片地图的缺点指定坐标区域时矩形或圆形比较容易指定而其它形状手工指定比较难 2.CSS Sprites
CSS Sprites直译过来就是CSS精灵但是这种翻译显然是不够的其实就是通过将多个图片融合到一副图里面然后通过CSS的一些技术布局到网页上。特别是图片特别多的网站如果能用css sprites降低图片数量带来的将是速度的提升。 divspan idimage1 classnav/spanspan idimage2 classnav/spanspan idimage3 classnav/spanspan idimage4 classnav/spanspan idimage5 classnav/span
/div .nav {width: 50px;height: 50px;display: inline-block;border: 1px solid #000;background-image: url(E:/1.png);
}
#image1 {background-position: 0 0;
}
#image2 {background-position: -95px 0;
}
#image3 {background-position: -185px 0;
}
#image4 {background-position: -275px 0;
}
#image5 {background-position: -366px -3px;
} 运行结果 PS使用CSS Sprites还有可能降低下载量可能大家会认为合并后的图片会比分离图片的总和要大因为还有可能会附加空白区域。实际上合并后的图片会比分离的图片总和要小因为它降低了图片自身的开销譬如颜色表、格式信息等。 3.字体图标
在可以大量使用字体图标的地方我们可以尽可能使用字体图标字体图标可以减少很多图片的使用从而减少http请求字体图标还可以通过CSS来设置颜色、大小等样式何乐而不为。 4.合并js和css
将多个样式表或者脚本文件合并到一个文件中可以减少HTTP请求的数量从而缩短效应时间。
然而合并所有文件对许多人尤其是编写模块化代码的人来说是不能忍的而且合并所有的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需要的样式或者脚本对于只访问该网站一个或几个页面的人来说反而增加了下载量所以大家应该自己权衡利弊。 二、使用CDN
如果应用程序web服务器离用户更近那么一个HTTP请求的响应时间将缩短。另一方面如果组件web服务器离用户更近则多个HTTP请求的响应时间将缩短。
CDN内容发布网络是一组分布在多个不同地理位置的Web服务器用于更加有效地向用户发布内容。在优化性能时向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如CDN可能选择网络阶跃数最小的服务器或者具有最短响应时间的服务器。
CDN还可以进行数据备份、扩展存储能力进行缓存同时有助于缓和Web流量峰值压力。
CDN的缺点
1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。
2、如果CDN服务质量下降了那么你的工作质量也将下降
3、无法直接控制组件服务器 三、添加Expires头
页面的初次访问者会进行很多HTTP请求但是通过使用一个长久的Expires头可以使这些组件被缓存下次访问的时候就可以减少不必要的HTPP请求从而提高加载速度。
Web服务器通过Expires头告诉客户端可以使用一个组件的当前副本直到指定的时间为止。例如
Expires: Fri, 18 Mar 2016 07:41:53 GMT
Expires缺点 它要求服务器和客户端时钟严格同步过期日期需要经常检查
HTTP1.1中引入Cache-Control来克服Expires头的限制使用max-age指定组件被缓存多久。
Cache-Control max-age12345600
若同时制定Cache-Control和Expires则max-age将覆盖Expires头 四、压缩组件
从HTTP1.1开始Web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持
Accept-Encoding: gzip,deflate
如果Web服务器看到请求中有这个头就会使用客户端列出来的方法中的一种来进行压缩。Web服务器通过响应中的Content-Encoding来通知 Web客户端。
Content-Encoding: gzip
代理缓存
当浏览器通过代理来发送请求时情况会不一样。假设针对某个URL发送到代理的第一个请求来自于一个不支持gzip的浏览器。这是代理的第一个请求缓存为空。代理将请求转发给服务器。此时响应是未压缩的代理缓存同时发送给浏览器。现在假设到达代理的请求是同一个url来自于一个支持gzip的浏览器。代理会使用缓存中未压缩的内容进行响应从而失去了压缩的机会。相反如果第一个浏览器支持gzip第二个不支持你们代理缓存中的压缩版本将会提供给后续的浏览器而不管它们是否支持gzip。
解决办法在web服务器的响应中添加vary头Web服务器可以告诉代理根据一个或多个请求头来改变缓存的响应。因为压缩的决定是基于Accept-Encoding请求头的因此需要在vary响应头中包含Accept-Encoding。 vary: Accept-Encoding 五、将样式表放在头部
首先说明一下将样式表放在头部对于实际页面加载的时间并不能造成太大影响但是这会减少页面首屏出现的时间使页面内容逐步呈现改善用户体验防止“白屏”。
我们总是希望页面能够尽快显示内容为用户提供可视化的回馈这对网速慢的用户来说是很重要的。
将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素浏览器会阻塞内容逐步呈现造成“白屏”。这源自浏览器的行为如果样式表仍在加载构建呈现树就是一种浪费因为所有样式表加载解析完毕之前务虚会之任何东西 六、将脚本放在底部
跟样式表相同脚本放在底部对于实际页面加载的时间并不能造成太大影响但是这会减少页面首屏出现的时间使页面内容逐步呈现。
js的下载和执行会阻塞Dom树的构建严谨地说是中断了Dom树的更新所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。
下载脚本时并行下载是被禁用的——即使使用了不同的主机名也不会启用其他的下载。因为脚本可能修改页面内容因此浏览器会等待另外也是为了保证脚本能够按照正确的顺序执行因为后面的脚本可能与前面的脚本存在依赖关系不按照顺序执行可能会产生错误。 七、使用外部的JavaScript和CSS
内联脚本或者样式可以减少HTTP请求按理来说可以提高页面加载的速度。然而在实际情况中当脚本或者样式是从外部引入的文件浏览器就有可能缓存它们从而在以后加载的时候能够直接使用缓存而HTML文档的大小减小从而提高加载速度。
影响因素
1、每个用户产生的页面浏览量越少内联脚本和样式的论据越强势。譬如一个用户每个月只访问你的网站一两次那么这种情况下内联将会更好。而如果该用户能够产生很多页面浏览量那么缓存的样式和脚本将会极大减少下载的时间提交页面加载速度。
2、如果你的网站不同的页面之间使用的组件大致相同那么使用外部文件可以提高这些组件的重用率。 八、减少DNS查找
当我们在浏览器的地址栏输入网址譬如 www.linux178.com 然后回车回车这一瞬间到看到页面到底发生了什么呢
域名解析 -- 发起TCP的3次握手 -- 建立TCP连接后发起http请求 -- 服务器响应http请求浏览器得到html代码 -- 浏览器解析html代码并请求html代码中的资源如js、css、图片等 -- 浏览器对页面进行渲染呈现给用户。
DNS也是开销通常浏览器查找一个给定域名的IP地址要花费20~120毫秒在完成域名解析之前浏览器不能从服务器加载到任何东西。那么如何减少域名解析时间加快页面加载速度呢
当客户端DNS缓存浏览器和操作系统缓存为空时DNS查找的数量与要加载的Web页面中唯一主机名的数量相同包括页面URL、脚本、样式表、图片、Flash对象等的主机名。减少主机名的 数量就可以减少DNS查找的数量。
减少唯一主机名的数量会潜在减少页面中并行下载的数量HTTP 1.1规范建议从每个主机名并行下载两个组件但实际上可以多个这样减少主机名和并行下载的方案会产生矛盾需要大家自己权衡。建议将组件放到至少两个但不多于4个主机名下减少DNS查找的同时也允许高度并行下载。 九、精简JavaScript
精简
精简就是从代码中移除不必要的字符以减少文件大小降低加载的时间。代码精简的时候会移除不必要的空白字符空格换行、制表符这样整个文件的大小就变小了。
网上有很多在线压缩可以尝试一下。
在以上提到了关于用gzip之类的压缩方式来压缩文件这边说明一下就算使用gzip等方式来压缩文件精简代码依然是有必要的。一般来说压缩产生的节省是高于精简的在生产环境中精简和压缩同时使用能够最大限度的获得更多的节省。 十、避免重定向
什么是重定向
重定向用于将用户从一个URL重新路由到另一个URL。
常用重定向的类型
301永久重定向主要用于当网站的域名发生变更之后告诉搜索引擎域名已经变更了应该把旧域名的的数据和链接数转移到新域名下从而不会让网站的排名因域名变更而受到影响。
302临时重定向主要实现post请求后告知浏览器转移到新的URL。
304Not Modified主要用于当浏览器在其缓存中保留了组件的一个副本同时组件已经过期了这是浏览器就会生成一个条件GET请求如果服务器的组件并没有修改过则会返回304状态码同时不携带主体告知浏览器可以重用这个副本减少响应大小。 重定向如何损伤性能?
当页面发生了重定向就会延迟整个HTML文档的传输。在HTML文档到达之前页面中不会呈现任何东西也没有任何组件会被下载。
来看一个实际例子对于ASP.NET webform开发来说对于新手很容易犯一个错误就是把页面的连接写成服务器控件后台代码里例如用一个Button控件在它的后台click事件中写上Response.Redirect()然而这个Button的作用只是转移URL这是非常低效的做法因为点击Button后先发送一个Post请求给服务器服务器处理Response.Redirect()后就发送一个302响应给浏览器浏览器再根据响应的URL发送GET请求。正确的做法应该是在html页面直接使用a标签做链接这样就避免了多余的post和重定向。 重定向的应用场景
1. 跟踪内部流量
重定向经常用于跟踪用户流量的方向,当拥有一个门户主页的时候同时想对用户离开主页后的流量进行跟踪这时可以使用重定向。例如: 某网站主页新闻的链接地址http://a.com/r/news点击该链接将产生301响应其Location被设置为http://news.a.com。通过分析a.com的web服务器日志可以得知人们离开首页之后的去向。
我们知道重定向是如何损伤性能的为了实现更好的效率可以使用Referer日志来跟踪内部流量去向。每个HTTP请求都有一个Referer表示原始请求页(除了从书签打开或直接键入URL等操作)记录下每个请求的Referer就避免了向用户发送重定向从而改善了响应时间。 2. 跟踪出站流量
有时链接可能将用户带离你的网站在这种情况下使用Referer就不太现实了。
同样也可以使用重定向来解决跟踪出站流量问题。以百度搜索为例百度通过将每个链接包装到一个302重定向来解决跟踪的问题例如搜索关键字“前端性能优化”搜索结果中的一个URL为https://www.baidu.com/link?urlpDjwTfa0IAf_FRBNlw1qLDtQ27YBujWp9jPN4q0QSJdNtGtDBK3ja3jyyN2CgxR5aTAywG4SI6V1NypkSyLISWjiFuFQDinhpVn4QE-uLGGwdeqid9c02bd21001c69170000000556ece297即使搜索结果并没有变但这个字符串是动态改变的暂时还不知道这里起到怎样的作用个人感觉字符串中包含了待访问的网址点击之后会产生302重定向将页面转到目标页面待修改求大神们给我指正
除了重定向外我们还可以选择使用信标(beacon)——一个HTTP请求其URL中包含有跟踪信息。跟踪信息可以从信标Web服务器的访问日记中提取出来信标通常是一个1px*1px的透明图片不过204响应更优秀因为它更小从来不被缓存而且绝不会改变浏览器的状态。 十一、删除重复脚本
在团队开发一个项目时由于不同开发者之间都可能会向页面中添加页面或组件因此可能相同的脚本会被添加多次。
重复的脚本会造成不必要的HTTP请求如果没有缓存该脚本的话并且执行多余的JavaScript浪费时间还有可能造成错误。 十二、使Ajax可缓存 异步与即时
Ajax的一个明显的有点就是向用户提供了即时反馈因为它异步的从后端web服务器请求信息。
用户是否需要等待的关键因素在于Ajax请求是被动的还是主动的。被动请求是为了将来来使用而预先发起的主动请求是基于用户当前的操作而发起的
什么样的AJAX请求可以被缓存
POST的请求是不可以在客户端缓存的每次请求都需要发送给服务器进行处理每次都会返回状态码200。可以在服务器端对数据进行缓存以便提高处理速度
GET的请求是可以而且默认在客户端进行缓存的除非指定了不同的地址否则同一个地址的AJAX请求不会重复在服务器执行而是返回304。
Ajax请求使用缓存
在进行Ajax请求的时候可以选择尽量使用get方法这样可以使用客户端的缓存提高请求速度。 如果是原创文章转载请注明出处http://www.cnblogs.com/MarcoHan/
