您的位置：首页 > Web前端

前端页面性能优化

2017-03-20 22:03 183 查看

恰当放置 CSS

Web 设计者喜欢在网页建立起主要的 HTML 骨架之后再来创建样式表。这样一来，网页中的样式表往往会放在 HTML 的后面，接近文档结束的地方。

然而推荐的做法是把 CSS 放在 HTML 的上面部分，文档头之内，这可以确保正常的渲染过程。这个策略不能提高网站的加载速度，但它不会让访问者长时间看着空白屏幕或者无格式的文本（FOUT）等待。如果网页大部分可见元素已经加载出来了，访问者才更有可能等待加载整个页面，从而带来对前端的优化效果。这就是知觉性能。

此外，不少网站管理员在网页中错误的使用 @import指令来引入外部样式表。这是一个过时的方法，它会阻止浏览并行下载。link 标签才是最好的选择，它也能提高网站的前端性能。多说一句，通过 link 标签请求加载的外部样式表不会阻止并行下载。

避免使用CSS表达式（CSS Expression），又称Dynamic properties(动态属性)。

<head>
<link>..
</head>

正确放置 Javascript

如果将 JavaScript 放置在 head 标签内或 HTML 文档的上部，这会阻塞 HTML 和 CSS 元素的加载过程。这个错误会导致页面加载时间增长，增加用户等待时间，容易让人感到不耐烦而放弃对网站的访问。不过，您可以通过将JavaScript属性置于HTML底部来避免此问题。

此外，在使用 JavaScrip时，人们通常喜欢用异步脚本加载。这会阻止

压缩 CSS, JS 和 HTML

压缩技术可以从文件中去掉多余的字符。你在编辑器中写代码的时候，会使用缩进和注释，这些方法会让你的代码简洁而且易读，但它们也会在文档中添加多余的字节。

使用压缩工具可以非常简单地把无用的字节从你的 CSS、JS 和 HTML 文件修剪掉。Gzip、Brotli

使用预先获取 link

预先获取可以在真正需要之前通过取得必需的资源和相关数据来改善访问用户的浏览体验，主要有3类预先获取:链接预先获取、DNS 预先获取、预先渲染,在 HTML 中的链接属性上增加 rel=”prefetch”、rel=”dns-prefetch”或者 rel=”prerender” 标记。

链接预先获取：在HTML5中,有个很有用但常被忽略的特性，就是预先加载(prefetch)，它的原理是：利用浏览器的空闲时间去先下载用户指定需要的内容，然后缓存起来，这样用户下次加载时，就直接从缓存中取出来，效率就快了。

<link rel="prerender" href="http://www.example.com/"> <!-- Chrome -->
<link rel="prefetch" href="http://www.example.com/">  <!-- Firefox -->

即使在不支持的浏览器,用了这个特性其实是不会出错的,只不过浏览器解析不到而已。

如果你感觉能有办法预先预测到用户期望点的页面(比如用户看最新的受欢迎的热图,他可能看了第一页后,会继续看下一页)，这个时候就可以用预先加载这个特性了。比如

<link rel="prefetch" href="/images/test.jpg"/> <!-- 取图片 -->
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">

CDN

CDN的全称是Content Delivery Network，即内容分发网络，内容分发网络能显著提高网站的速度和性能。

CDN 是一种缓存方法，可极大改善资源的分发时间，同时，它还能实现一些其他的缓存技术，如，利用浏览器缓存。

如果您使用 CDN，您网站内的文件将自动压缩

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 性能优化前端恰当放置-CSS CDN

相关文章推荐

新的分享

章节导航