深圳网站建设网页加载前端性能思路_网站建设_建站学院

前端性能优化23条1. 降低HTTP请求次数

尽可能合并图片、CSS、JS。譬如加载一个页面，假如有5个css文件的话，那样会发出5次http请求，如此会让用户首次访问你的页面的时候会长期等待。而假如把这个5个文件合成一个的话，就仅需发出一次http请求，节省互联网请求时间，加快页面的加载。2. 用CDN

网站上静态资源即css、js全都用cdn分发，图片亦然。3. 防止空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把目前页面的URL作为它们的属性值，从而把页面的内容加载进去作为它们的值。所以要防止犯如此的疏忽。4. 为文件头指定Expires

ExiPRes是用来设置文件的过期时间的，通常对css、js、图片资源有效。他可以使内容具备缓存性，如此下回再访问同样的资源时就通过浏览器缓存区读取，无需再发出http请求。

5. 用gzip压缩内容

gzip可以压缩任何一个文本种类的响应，包含html，xml，json。大大缩小请求返回的数据量。6. 把CSS放到顶部

网页上的资源加载时从上网下顺序加载的，所以css放在页面的顶部可以优先渲染页面，让用户感觉页面加载非常快。7. 把JS放到底部

加载js时会对后续的资源导致阻塞，需要得等js加载完才去加载后续的文件，所以就把js放在页面底部最后加载。8. 防止用CSS表达式

举个css表达式的例子font-color:expression((new Date()).getHours()%3 ? "#fff" : "#aaa");1

这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。

9. 将CSS和JS放到外部文件中

目的是缓存文件，可以参考原则4。但有时为了降低请求，也会直接写到页面里，需依据PV和IP的比率权衡。10. 权衡DNS查找次数

降低主机名可以节省响应时间。但同时，应该注意，降低主机会降低页面中并行下载的数目。IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会遭到影响。所以新浪会搞N个二级域名来放图片。

11精简CSS和JS

这里就涉及到css和js的压缩了。譬如下面的新浪的一个css文件，把空格回车全部去掉，降低文件的大小。目前的压缩工具备不少，基本主流的前端构建工具都能进行css和js文件的压缩，如grunt，glup等。

四川SEO排名公司

12. 防止跳转

有种现象会比较坑爹，看着没什么差别，其实多次了一次页面跳转。譬如当URL本该有斜杠（/）却被忽视掉时。比如，当大家要访问 http:// baidu.com 时，事实上返回的是一个包括301代码的跳转，它指向的是 http:// baidu.com/ （注意末尾的斜杠）。在nginx服务器可以用rewrite；Apache服务器中可以用Alias 或者 mod_rewrite或者the DirectorySlash来防止。另一种是不需要域名之间的跳转，譬如访问 http:// baidu.com/bbs 跳转到 http:// bbs.baidu.com/ 。那样可以通过用Alias或者mod_rewirte打造CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。13. 删除重复的JS和CSS

重复调用脚本，除去增加额外的HTTP请求外，多次运算也会费时。在IE和Firefox中不管脚本是不是可缓存，它们都存在重复运算javascript的问题。14. 配置ETags

它用来判断浏览器缓存里的元素是不是和原来服务器上的一致。比last-modified date更具备弹性，比如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。服务器集群用，可取后两个参数。用ETags降低Web应用带宽和负载15. 可缓存的Ajax

异步请求同样的导致用户等待，所以用ajax请求时，要主动告诉浏览器假如该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的需要假如目前请求有缓存的话，直接用缓存$.ajax({ url : url, dataType : "json", cache: true, success : function(son, status){}, error : function(){} })123456716. 用GET来完成AJAX请求

当用xmlhttpRequest时，浏览器中的POST办法是一个两步走的过程深圳网站建设网页加载前端性能思路

1. 页面模板

可以是jsp、asp、php等页面技术，依据数据生成最后的HTML页面，性能重要指标只有一个，页面的渲染速度。综合各种页面技术而言，渲染速度相差不会太大，10倍以内。

2. 业务逻辑

用于依据业务需要将数据库中的数据读取到内存中，以便通过页面模板渲染成HTML页面。这里面可能还包含缓存、连接池等技术。

3. 数据库

就是数据库，负责实行SQL查看并返回查看结果。

大家假设用户访问一个页面，也就是请求一个URL地址，然后得到内容，所需要的时间是3秒钟。其中大多数时间可可以用在互联网传输上，而真的页面实行并生成HTML内容所需的时间是非常小的，这里假设需要100毫秒。

等于用户花了两秒多钟在传输数据上，这部分时间假如能缩减，可以大大提高访问的速度，但这部分通常也很难提高了，由于取决于用户本身的互联网状况，服务器的互联网状况与中间整个路由的状况。对于一个网站来讲，能做的就是尽量的提高服务器的带宽，或者用CDN来降低中间路由环节，非常不幸的是，这个本钱非常高。

好吧，前面提到的更多是非技术原因，假设你已经耗费巨资解决了这个问题，然后忽然发现互联网太快了，可是服务器顶不住了，生成一个页面居然要100毫秒，才几十个并发用户就差点要把服务器搞崩溃了。

于是来到了本文的重点部分找出应用的性能瓶颈。

前面大家提到的结构中的三层深圳网站建设网页加载前端性能思路页面模板(5%)、业务逻辑+数据库(95%)。