您的位置：首页 > Web前端

前端优化：提高Web性能

2017-02-19 20:02 471 查看

1. 清理 HTML 文档

HTMl写简洁而有效

恰当放置 CSS

正确放置 Javascript ：置于 HTML 底部避免导致页面加载时间增长

HTTP/2，通过使用多路技术将单个 TCP 连接以异步方式收发 HTTP 请求和响应：不再需要频繁地将多个脚本绑定到单个文件

2.优化 CSS 性能

link 标签才是最好的选择，它也能提高网站的前端性能

3.减少外部HTTP请求

简略地检查去掉不必要的图片，没用的 JavaScript 代码，过多的 css，多余的插件

4. 压缩 CSS, JS 和 HTML

5. 使用预先获取

方法

1.链接预先获取

2.DNS 预先获取

3.预先渲染

预先渲染

在网站 HTML 中的链接属性上增加 rel=”prefetch”,rel=”dns-prefetch”，或者 rel=”prerender”标记，对应每个链接的URL地址，CSS，图片和脚本都会被预先获取，保证了访问者能在最短时间内使用链接在画面间切换

dns-prefetch

dns-prefetch可以指示浏览器去预先解析DNS域名。这样可以减少将要打开页面的延迟，

<head>
<link rel='dns-prefetch' href='example.com'>
...
</head>

prefetch

prefetch用来初始化对后续导航中资源的获取。prefetch指定的资源获取优先级是最低的。

<head>
<link rel="prefetch" href="checkout.html">
...
</head>

subresource

subresource用来标识出重要的资源，浏览器会在当前访问页面时立即下载它们。

<head>
<link rel="subresource" href="critical/app.js">
...
</head>

subresource的优先级高于prefetch

prerender

合适的适合，你甚至可以用prerender来让浏览器在后台事先渲染好整个页面，这样它的打开速度将会是0秒！

<head>
<link rel="prerender" href="checkout.html">
...
</head>

6. 使用 CDN 和缓存提高速度（贵）

将网站的静态内容链接到全球各地的服务器扩展网络，

CDN 允许您的网站访问者从最近的服务器加载数据，

显著提高网站的速度和性能

7. 压缩文件

文件压缩方法是 Gzip、Brotli

8. 优化你的图片

Optimus 无损的图片压缩工具，它不会影响图像画质，只是压缩图片体积

9. 使用轻量级框架

Milligram，Skeleton

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

标签： html 优化前端

相关文章推荐

新的分享

章节导航