Chinaunix首页 | 论坛 | 博客
  • 博客访问: 9167105
  • 博文数量: 1669
  • 博客积分: 16831
  • 博客等级: 上将
  • 技术积分: 12594
  • 用 户 组: 普通用户
  • 注册时间: 2011-02-25 07:23
个人简介

柔中带刚,刚中带柔,淫荡中富含柔和,刚猛中荡漾风骚,无坚不摧,无孔不入!

文章分类

全部博文(1669)

文章存档

2023年(4)

2022年(1)

2021年(10)

2020年(24)

2019年(4)

2018年(19)

2017年(66)

2016年(60)

2015年(49)

2014年(201)

2013年(221)

2012年(638)

2011年(372)

分类: 架构设计与优化

2013-12-04 15:45:31

网站前端优化与调优

今天北京下雪了,整理了一份前端优化的PPT,希望对大家有帮助。

一、为什么

时间花在哪了?
(1)大量的HTTP请求产生
(2)在请求脚本时不发生并行请求
注:大多情况下,浏览器在下载脚本时会阻塞额外的HTTP请求

二、怎么想

性能黄金法则
只有10%-20%的最终用户响应时间花在了下载HTML文档上,其余的80%-90%时间花在了下载页面中的所有组件上。
如:图片、FLASH
1、减少HTTP请求
2、缓存
3、减少文件大小

三、怎么做

(1)减少HTTP请求

1、图片地图
2、CSS Sprites
3、内联图片
4、合并JS和CSS
注(1)一般来说,使用外部脚本和样式表对性能更有利
(2)一般来说,一个页面应该不多于一个脚本和样式表文件
(3)脚本模块化

(2)CDN

CDN即内容分发网络。CDN是构筑在现有Internet上的一种先进的流量分配网络,能够提高访问的响应速度和服务的可用性 。CDN是一个经策略性部署的整体系统,能够帮助用户解决分布式存储、负载均衡、网络请求的重定向和内容管理等问题。

(3)将样式表放在顶部

为什么要这样做?
HTML页面是逐步呈现的,在用户打开页面的同时,我们需要考虑到用户的体现—打开网页的速度。而显示页面第一需求是HTML,而HTML是由一个一个的DIV组成,CSS是一切的基础。
怎么放?
使用LINK标签将样式表放在文档的HEAD中

(4)将脚本放在底部

脚本带来的问题

因为页面是逐步呈现的, 对于脚本以下的内容,会被阻塞。直到脚本加载完毕才会继续呈现页面。正确的放位置(1)最差的情况:将脚本放在顶部。会阻塞其后内容呈现、会阻塞其后组件下载。 (2)最佳的情况:将脚本放在底部。不会阻止页面的呈现。

PPT下载:


本条目发布于。属于分类,被贴了 、、 标签。作者是
阅读(670) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~