1.为什么要将 CSS 放在最顶层,将 JavaScript 放在最底层?

Published on:

css 放头部主要是为了避免最后加载Css引起的浏览器白屏,改善用户体验。
而js放底部是因为浏览器渲染HTML文件是从上往下渲染的。先执行head标签,再执行body标签,一行行渲染下去。无论当前script代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。script执行过程耗时越久,浏览器等待响应用户输入的时间久越长。所以js尽量放底部可以有一定的性能优化效果。

2.如何尽可能减少HTTP Requests?

一个网页不可避免的要引入大量的外部文件:JavaScript、css、背景图片……由于Http协议的无状态性,用户的每一次访问,都会重新向服务器请求所有文件,而大量Http请求的累加,正是影响网站速度的最主要原因。

所以这里的解决方法只有一个:合并。最理想的情况莫过于一个网页只包含一个css,一个js,一张背景图。

合并Js和Css文件很好理解,背景图片要怎么合并?这里采用的主要方法是CSS Sprites,简单说就是把所有的图片拼接成一张大图,在不同的Css里指定背景图坐标来显示不同图片。具体可以参考Dave Shea的Image Slicing’s Kiss of Death 一文,还有网站提供了在线的CSS Sprites服务 ,只需要上传小图片,就可以获得拼接后的大图以及相应坐标。

不过在当前越来越多动辄包含10余个文件的开发框架面前,减少Http请求数也变得越来越难。一直都认为所谓框架,给出的应该是一整套完善的开发思 想,从服务器配置到数据库设计甚至是到UI体验乃至SEO,但现在很多Framework总是各自为战,后台与前端脱节,只在自己的一片领域里提供一定程 度上的方便,没有考虑到最终产品的统合,甚至连基本的代码侵入性问题没有处理好(这里点名批评dojo,恨不得在所有的html标签上印上dojo的章 子),不能不说是一种遗憾。

所以如果网站中采用框架的话,在框架的选择面前,建议多采用轻量级,侵入性低的框架,也是为了日后产品的优化维护着想。

3.CDN是什么?请用自己的话解释

CDN(Content delivery network)内容分发网络,能够智能根据网络节点情况选择服务节点,大型网站部署时尤为重要。
自己的话解释就是离你最近速度最快的云服务器

4.如何提升自己的网站加载速度?

使用良好的结构
可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显。XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 标记),这意味着浏览器要下载更多代码。
所以,事情都有两面性,尝试在您的网页中使用较少的XHTML代码,以减小页面大小。
如果您确实不得不使用XHTML,试着尽可能对它进行优化。

不要使用图像来表示文本
使用图像表示文本的最常见示例就是在导航栏中,美观的按钮更加具有吸引力,但是它们的加载速度很慢。
此外,图像仍然不能由搜索引擎直接索引,因此,使用图像进行导航不利于搜索引擎优化,当无需图像就可以通过大量 CSS 技巧创建漂亮的按钮时,绝不使用图像来表示文本。

不要包含不必要的JavaScript代码,尽可能将其外部化
应该明智地使用JavaScript(仅在真正必要时才使用)并优化脚本的大小和速度,缩短JavaScript下载时间的另一种方式是使用外部文件,而不是包含脚本内联,这种方法也适用于CSS,因为浏览器会缓存外部化的文本,而(在HTML页面自身中)以内联方式编码的 CSS 或 JavaScript 每次都会随 HTML 一起加载。

设置图像大小
与表格单元格、行和列一样,当您未明确设置图像大小时,浏览器需要执行计算来显示图像,这会降低处理速度。
你会给每个图片加上height和width属性吗?这两个属性可以让浏览器在加载图片之前就知道图片的长和宽,并预留出指定的长宽待图片加载后显示,如果没有这两个属性,浏览器还需要在读取图片成功后再处理一次页面布局样式,这无疑减慢了网页加载速度,所以在固定图片大小的情况下最好都使用上长和宽属性。

按需加载 JavaScript 文件
要按需加载 JavaScript,使用 import() 函数。
function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}

使用内容分布网络
内容分布网络(Content-distribution network,CDN)是另一种缩短下载时间的好方法,当您将静态图像放在 Internet 上的许多服务器上时,用户能够从离他们最近的服务器下载这些图像。
此外,大多数 CDN 都在快速服务器上运行,因此无论服务器的加载速度如何,其响应速度都比小型的超载服务器快。

使用 PNG 格式的图像
Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了:Portable Network Graphic (PNG) 是未来流行的格式。当然,您可以说 GIF 和 JPEG 已经消亡,或者 PNG 没有任何缺陷,但是所有事物都有各自的优缺点,PNG以最佳的文件大小提供了出色的质量,因此,如果进行选择的话,应该尽可能使用 PNG 图像

使用内容分发网络CDN
服务器在处理大流量的数据是十分困难的,这最终导致页面加载速度变慢。CDN是位于全球不同地方的高性能网络服务,它会复制你网站的静态资源,并以最有效的方式来为访客服务,使用CDN,可以提升页面的加载速度。

把CSS文件放在页面头部,JS文件放在底部
把CSS文件放在头部可以禁止逐步渲染,节省浏览器加载和重绘页面元素的资源,把JS文件放在页面底部可以避免代码执行前的等待时间,从而提升页面的加载速度。

压缩整合CSS、JS文件减少HTTP请求次数
压缩会移除一些不必要的字符,从而帮助减少文件大小和网页后续的加载时间。
现在的网页都有多个图片、CSS外部文件链接、Javascript外部脚本链接,所以当访问一个网页时浏览器需要多次向服务器请求这些文件,在请求和加载之间会产生不少的时间差,特别是一些网页上有多个小图片、图标按钮的网页,有多少图片,浏览器就需要请求多少将这些小文件,多将请求这些小图片文件将明显影响网页的加载速度。
所以,我们应该尽可能将小图片拼合一个PNG大图片上,然后通过坐标来显示图标,一次请求一个大图片比多次请求小图片速度要快不少。
同样,最好将CSS和Javascript尽可能地整合到一个文件中都有助于加快网页载入速度。

Comments

comments powered by Disqus