前端技术-前端优化

时间 2019-11-09

标签前端技术优化繁體版

原文原文链接

前端优化

时间花哪里去了？javascript

只有10%-20%的最终用户响应时间花在了下载html文档上,其他80%-90%时间花在了下载页面的相关组件上。如：图片、Flash等。php

因此主要优化：html

减小http请求
缓存
减小文件大小：压缩文件+优化代码前端

健康的优化因该是根据页面的加载过程，全面的优化过程java

第一步、浏览器预处理

查询Cache：读取Cache 或者发送304请求web

第二步、查询DNS

优化规则--减小DNS查找数据库

DNS缓存
浏览器DNS缓存计算机DNS缓存服务器DNS缓存（TTL）浏览器

使用Keep-Alive特性
减小DNS查找缓存

当客户端的DNS缓存为空时，DNS查找的数量与Web页面中惟一主机名的数量相等。减小惟一主机名的数量就能够减小DNS查找的数量。
较少的域名来减小DNS查找（2-4个主机）服务器

域名系统（DNS）提供了域名和IP的对应关系，就像电话本中人名和他们的电话号码的关系同样。当你在浏览器地址栏中输入www.dudo.org 时，DNS解析服务器就会返回这个域名对应的IP地址。DNS解析的过程一样也是须要时间的。通常状况下返回给定域名对应的IP地址会花费20到120毫秒的时间。并且在这个过程当中浏览器什么都不会作直到DNS查找完毕。
缓存DNS查找能够改善页面性能。这种缓存须要一个特定的缓存服务器，这种服务器通常属于用户的ISP提供商或者本地局域网控制，可是它一样会在用户使用的计算机上产生缓存。DNS信息会保留在操做系统的DNS缓存中（微软Windows系统中DNS Client Service）。大多数浏览器有独立于操做系统之外的本身的缓存。因为浏览器有本身的缓存记录，所以在一次请求中它不会受到操做系统的影响。
Internet Explorer默认状况下对DNS查找记录的缓存时间为30分钟，它在注册表中的键值为DnsCacheTimeout。Firefox对DNS的查找记录缓存时间为1分钟，它在配置文件中的选项为network.dnsCacheExpiration（Fasterfox把这个选项改成了1小时）。
当客户端中的DNS缓存都为空时（浏览器和操做系统都为空），DNS查找的次数和页面中主机名的数量相同。这其中包括页面中URL、图片、脚本文件、样式表、Flash对象等包含的主机名。减小主机名的数量能够减小DNS查找次数。
减小主机名的数量还能够减小页面中并行下载的数量。减小DNS查找次数能够节省响应时间，可是减小并行下载却会增长响应时间。个人指导原则是把这些页面中的内容分割成至少两部分但不超过四部分。这种结果就是在减小DNS查找次数和保持较高程度并行下载二者之间的权衡了。

第三步、创建链接

优化规则-- 使用内容分发网络

CDN的全称是Content Delivery Network，即内容分发网络。其目的是经过在现有的Internet中增长一层新的网络架构，将网站的内容发布到最接近用户的网络"边缘"（边缘服务器），使用户能够就近取得所需的内容，解决Internet网络拥挤的情况，提升用户访问网站的响应速度。从技术上全面解决因为网络带宽小、用户访问量大、网点分布不均等缘由所形成的用户访问网站响应速度慢的问题。

CDN技术是在美国首先兴起并迅速发展起来的一种解决互联网性能不佳问题的有效手段。其基本思路就是尽量避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳。经过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统可以实时地根据网络流量和各节点的链接、负载情况以及到用户的距离和响应时间等综合信息将用户的请求从新导向离用户最近的服务节点上。
优化规则--用域名划分页面内容

按页面内容划分域名，在合适的资源服务器上存放文件

把页面内容划分红若干部分可使你最大限度地实现平行下载。因为DNS查找带来的影响你首先要确保你使用的域名数量在2个到4个之间。例如，你能够把用到的HTML内容和动态内容放在www.example.org上，而把页面各类组件（图片、脚本、CSS)分别存放在 statics1.example.org和statics.example.org上。
你可在Tenni Theurer和Patty Chi合写的文章Maximizing Parallel Downloads in the Carpool Lane找到更多相关信息。

第四步、发送请求
优化规则-- 减小HTTP请求

终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。经过减小页面中的元素能够减小 HTTP请求的次数。这是提升网页速度的关键步骤。
减小页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减小HTTP请求次数同时又可能保持页面内容丰富的技术。
合并文件是经过把全部的脚本放到一个文件中来减小HTTP请求的方法，如能够简单地把全部的CSS文件都放入一个样式表中。当脚本或者样式表在不一样页面中使用时须要作不一样的修改，这可能会相对麻烦点，但即使如此也要把这个方法做为改善页面性能的重要一步。
CSS Sprites是减小图像请求的有效方法。把全部的背景图像都放到一个图片文件中，而后经过CSS的background-image和 background-position属性来显示图片的不一样部分；
图片地图是把多张图片整合到一张图片中。虽然文件的整体大小不会改变，可是能够减小HTTP请求次数。图片地图只有在图片的全部组成部分在页面中是紧挨在一块儿的时候才能使用，如导航栏。肯定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具备可读性，所以不推荐这种方法；
内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增长页面的大小。把内联图像放到样式表（可缓存）中能够减小HTTP请求同时又避免增长页面文件的大小。可是内联图像如今尚未获得主流浏览器的支持。
减小页面的HTTP请求次数是你首先要作的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage - Exposed!中所说，HTTP请求在无缓存状况下占去了40%到60%的响应时间。让那些初次访问你网站的人得到更加快速的体验吧！

优化规则- – 优化CSS Spirite
在Spirite中水平排列你的图片，垂直排列会稍稍增长文件大小；
Spirite 中把颜色较近的组合在一块儿能够下降颜色数，理想情况是低于256色以便适用PNG8格式；
便于移动，不要在Spirite的图像中间留有较大空隙。这虽然不大会增长文件大小但对于用户代理来讲它须要更少的内存来把图片解压为像素地图。100x100的图片为1万像素，而 1000x1000就是100万像素。

优化规则– 避免404错误

HTTP请求时间消耗是很大的，所以使用HTTP请求来得到一个没有用处的响应（例如404没有找到页面）是彻底没有必要的，它只会下降用户体验而不会有一点好处。
有些站点把404错误响应页面改成“你是否是要找***”，这虽然改进了用户体验可是一样也会浪费服务器资源（如数据库等）。最糟糕的状况是指向外部 JavaScript的连接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分看成JavaScript代码来执行。

规则优化 –不要使用frameset，少使用iframe

搜索引擎不友好、即时内容为空，加载也须要时间、会阻止页面加载
禁止使用iframe引入外部资源，不包括allyes广告，不包括about:blank的空页面。

ifrmae元素能够在父文档中插入一个新的HTML文档。了解iframe的工做理而后才能更加有效地使用它，这一点很重要。

iframe优势：

解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本
iframe的缺点：

即时内容为空，加载也须要时间
会阻止页面加载
没有语意

第五步、等待响应

优化规则 --避免重定向

在重定向完毕而且HTML下载完毕以前，是没有任何东西显示给用户的

涉及服务器负载、数据查询、服务器端缓存等

跳转是使用301和302代码实现的。下面是一个响应代码为301的HTTP头：
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
浏览器会把用户指向到Location中指定的URL。头文件中的全部信息在一次跳转中都是必需的，内容部分能够为空。无论他们的名称，301和302 响应都不会被缓存除非增长一个额外的头选项，如Expires或者Cache-Control来指定它缓存。<meat />元素的刷新标签和JavaScript也能够实现URL的跳转，可是若是你必需要跳转的时候，最好的方法就是使用标准的3XXHTTP状态代码，这主要是为了确保“后退”按钮能够正确地使用。
可是要记住跳转会下降用户体验。在用户和HTML文档中间增长一个跳转，会拖延页面中全部元素的显示，由于在HTML文件被加载前任何文件（图像、 Flash等）都不会被下载。
有一种常常被网页开发者忽略却每每十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠（/）却被忽略掉时。例如，当咱们要访问http: //astrology.yahoo.com/astrology 时，实际上返回的是一个包含301代码的跳转，它指向的是http://astrology.yahoo.com/astrology/ （注意末尾的斜杠）。在Apache服务器中可使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。
链接新网站和旧网站是跳转功能常常被用到的另外一种状况。这种状况下每每要链接网站的不一样内容而后根据用户的不一样类型（如浏览器类型、用户帐号所属类型）来进行跳转。使用跳转来实现两个网站的切换十分简单，须要的代码量也很少。尽管使用这种方法对于开发者来讲能够下降复杂程度，可是它一样下降用户体验。一个可替代方法就是若是二者在同一台服务器上时使用Alias和mod_rewrite和实现。若是是由于域名的不一样而采用跳转，那么能够经过使用 Alias或者mod_rewirte创建CNAME（保存一个域名和另一个域名之间关系的DNS记录）来替代。

第七步、接收数据

优化规则 -- 压缩组件

HTML文档、脚本和样式表、XML和JSON的文本响应压缩如何工做
压缩一般能将响应的数据量减小将近70%

优化规则 -- 精简Javascript和Css

从代码中移除没必要要的字符以减小其大小，减小加载时间。

规则规则– 尽可能缩减页面大小

页面必须小于150K(不含图片）
a) 静态文件是否gzip
b) 图片是否压缩优化过

第八步、读取Cache

优化规则-- 添加Expire或Cache-Control

应用于不常常变化的组件，包括脚本、样式表、Flash组件、图片
Expires和Cache-Control

规则规则 -- 使用外部的Js和Css文件

尽量使用外部Js和Css，由于咱们目前大部分Js和Css都作了Gzip和缓存技术，能够充分利用。

第九步、处理元素

不要对image和pdf等二进制文件进行gzip压缩

第十步、渲染元素

优化规则 -- 将样式表放在顶部

界面原型页面必须将样式表置于页面顶部，开发人员如无特殊缘由也必须将样式表置于顶部。

以往多数是由于masterpage缘由没法将全部样式表置顶，在改版修改masterpage时，尽量按照此原则进行设计。

优化规则 – 建议将脚本放在底部

通常浏览器能够容许并行下载，取决于主机个数、带宽等

（默认状况下，IE是2个而FF是8个）

下载脚本时并行下载其实是被禁用的。

优化规则-- 移除重复脚本

优化规则 -- 避免CSS表达式

影响浏览器渲染时间

优化规则 – 优化图像

尽可能使用GIF和PNG

尽可能使用png/gif格式的图片，png的图片优先，可是必须注意如要兼容IE6，则png使用必定要注意透明问题。

图片在上次前必定要先用工具压缩优化（png、jpg）

-------------------------------------------------------------------------------------------------------------------------------------

完

转载需注明转载字样，标注原做者和原博文地址。

http://www.cnblogs.com/fullhouse/archive/2012/01/05/2312956.html

http://www.php100.com/html/webkaifa/javascript/2012/0619/10568.html

http://www.cnblogs.com/zhengyun_ustc/archive/2013/05/09/frontendoptimize.html

http://www.cnblogs.com/and/p/3390676.html