深圳网站制作网页加载前端性能思路

成都网站制作网页加载前端性能思路
前端性能优化23条
Web应用的性能优化思路
网页加载效果实现

前端性能优化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等。

四川网站优化排名公司

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(){} })1234567
16. 使用GET来完成AJAX请求

当使用xmlhttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。
17. 减少DOM元素数量

这是一门大学问，这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量，就会减少浏览器的解析负担。
18. 避免404

比如外链的css、js文件出现问题返回404时，会破坏浏览器的并行加载。

19. 减少Cookie的大小

Cookie里面别塞那么多东西，因为每个请求都得带着他跑。
20. 使用无cookie的域

比如CSS、js、图片等，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。 完全避免使用AlphaImageLoader的方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。
22. 不要在HTML中缩放图片

比如你需要的图片尺寸是50* 50，那就不用用一张500*500的大尺寸图片，影响加载（说到这里可能有朋友会说了，后台上传的图片我也没办法控制他上传的尺寸啊，这里只是说的最开始做静态页面的时候的一些注意事项，至于后面怎么去操作，那就看网编怎么办了，尽可能把自己能做的做到就行了）
23. 缩小favicon.ico并缓存

以上是Yslow的23个优化原则，基本可以涵盖现在前端大部分的性能优化原则了，很多更加geek和精细优化方法都是从这些原则里面延伸出来的。

前端优化是条漫长的路，不是说一天两天就能全部做完的。我们可以参考上面的准则去把我们目前能做的都给优化了，剩下的更加小的一些细节点不用太过着急，毕竟也是要考虑优化性价比的。比如为了减小一个文件几个字节花上个把月根本不值得。这些优化的东西都可以在我们的工作中慢慢去通过积累，去通过google解决。

网页加载效果实现
<style>
/*opacity是设置遮罩透明度的，可以自己调节*/
#loading{position:static;top:0;left:0;width:100%;height:100%;background:#f8f8f8;opacity:1;z-index:15000;}
#loading img{position:static;top:46%;left:46%;width:150px;height:150px;margin-top:-15px;margin-left:-15px;}
</style>

<div id="loading">
<img alt="" src="__PUBLIC__/img/timg.gif"><br>
</div>
<script>
document.onreadystatechange = completeLoading;

//加载状态为complete时移除loading效果
function completeLoading() {
if (document.readyState == "complete") {
$("#loading").hide();
}

Web应用的性能优化思路
一个Web应用，不管是何种语言开发，粗略的结构无非是三层：

1. 页面模板

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

2. 业务逻辑

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

3. 数据库

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

我们假设用户访问一个页面，也就是请求一个URL地址，然后得到内容，所需要的时间是3秒钟。其中大部分时间可能用在网络传输上，而真正页面执行并生成HTML内容所需的时间是很小的，这里假设需要100毫秒。

相当于用户花了两秒多钟在传输数据上，这部分时间如果能缩减，可以大大提升访问的速度，但是这部分一般也难以提升了，因为取决于用户本身的网络情况，服务器的网络情况以及中间整个路由的情况。对于一个网站来说，能做的就是尽可能的提升服务器的带宽，或者使用CDN来减少中间路由环节，很不幸的是，这个成本很高。

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

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

前面我们提到的结构中的三层：页面模板，业务逻辑和数据库，根据经验值，在这100毫秒中，三个部分占用的时间差不多为：页面模板(5%)、业务逻辑+数据库(95%)。

几个准则：

1. 没必要去优化页面模板，这都是一些很成熟的技术，就算你好不容易提升了10%的性能，这10%在整个页面的执行过程中只占了0.5%的比例，微乎其微，等于是前面例子中的4车道变8车道的傻瓜，我们不要去充当傻瓜。

2. 一般瓶颈所在以及相应处理办法
数据库连接：使用连接池来减少连接次数重复的数据库查询：使用缓存来避免重复的数据库查询慢查询：使用索引来提升查询速度，使用连接查询替换子查询等

简简单单的三条，里面却包含了很深的功夫，特别是在数据库查询优化上。

你必须在充分解决了这些应用程序所属的性能瓶颈之后，再去考虑系统级别的优化。

泸州网站建设

一些常用系统级别优化包括：

1. 静态文件和动态页面分开处理 2. 应用服务器的集群 3. 数据库的集群

不要本末倒置，一个性能很差的应用程序，你就算集群了100个节点，也不会有什么效果。

所以Web网站优化三部曲：应用程序优化、

文章名称：深圳网站制作网页加载前端性能思路
文章位置：/news20/19420.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站制作等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联