首页  思维导图  详情

高性能网站建设指南

2017-08-28 18:08:08   40  举报





AI智能生成

web性能

web

作者其他创作

大纲/内容

前端性能的重要性

性能黄金法则

只有10%-20%的最终用户响应时间花在html下载上，其余80%-90%时间花在下载页面的组件资源上

使用资源瀑布跟踪页面下载

HTTP概述

压缩

request headers

<ol class="children expanded" style="min-width: 0px; min-height: 0px; box-sizing: border-box; list-style-type: none; padding-left: 12px; padding-bottom: 5px; color: rgb(34, 34, 34); font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 12px;"><li style="min-width: 0px; min-height: 0px; box-sizing: border-box; position: relative; margin-top: 1px; text-overflow: ellipsis; white-space: nowrap; margin-left: 10px;"><div class="header-name" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: rgb(84, 84, 84); display: inline-block; margin-right: 0.5em; font-weight: bold; vertical-align: top; white-space: pre-wrap;">Accept-Encoding:</div><div class="header-value source-code" style="min-width: 0px; min-height: 0px; box-sizing: border-box; font-family: Consolas, 'Lucida Console', monospace; white-space: pre-wrap; display: inline; margin-right: 1em; word-break: break-all; margin-top: 1px;">gzip, deflate, sdch</div></li></ol>

response headers

<ol class="children expanded" style="min-width: 0px; min-height: 0px; box-sizing: border-box; list-style-type: none; padding-left: 12px; padding-bottom: 5px; color: rgb(34, 34, 34); font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 12px;"><li style="min-width: 0px; min-height: 0px; box-sizing: border-box; position: relative; margin-top: 1px; text-overflow: ellipsis; white-space: nowrap; margin-left: 10px;"><div class="header-name" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: rgb(84, 84, 84); display: inline-block; margin-right: 0.5em; font-weight: bold; vertical-align: top; white-space: pre-wrap;">Content-Encoding:</div><div class="header-value source-code" style="min-width: 0px; min-height: 0px; box-sizing: border-box; font-family: Consolas, 'Lucida Console', monospace; white-space: pre-wrap; display: inline; margin-right: 1em; word-break: break-all; margin-top: 1px;">gzip</div></li></ol>

GET请求

request headers

<ol class="children expanded" style="min-width: 0px; min-height: 0px; box-sizing: border-box; list-style-type: none; padding-left: 12px; padding-bottom: 5px; color: rgb(34, 34, 34); font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 12px;"><li style="min-width: 0px; min-height: 0px; box-sizing: border-box; position: relative; margin-top: 1px; text-overflow: ellipsis; white-space: nowrap; margin-left: 10px;"><div class="header-name" style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: rgb(84, 84, 84); display: inline-block; margin-right: 0.5em; font-weight: bold; vertical-align: top; white-space: pre-wrap;">If-Modified-Since:</div><div class="header-value source-code" style="min-width: 0px; min-height: 0px; box-sizing: border-box; font-family: Consolas, 'Lucida Console', monospace; white-space: pre-wrap; display: inline; margin-right: 1em; word-break: break-all; margin-top: 1px;">Fri, 22 Jul 2016 02:52:39 GMT</div></li></ol>

Expires

Keep-Alive

持久连接

多对一请求服务器导致socket连接低效性的问题

一个单独的连接上进行多个请求

减少http请求

css sprites

内联图片

将小块数据内联

图片base64编码后嵌入

跨越不同页面无缓存

放到外部css内作为背景，通过缓存外部css缓存数据

合并css和js

使用内容分发网络

分离应用程序web服务器和组件web服务器

使用CDN部署组件web服务器

发布静态内容

CDN是一组分布在多个不同地理位置的web服务器，用于更加有效的向用户发布内容

添加Expires头

Expires头 1.0

资源的有效时间

需要客户端和服务器的时间同步

到期需要提供一个新的日期

<span style="color: rgb(84, 84, 84); font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 12px; font-weight: bold; white-space: pre-wrap;">Cache-Control：</span>max-age头 1.1

指定资源被缓存多久

修改文件名

压缩组件

<span style="color: rgb(84, 84, 84); font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 12px; font-weight: bold; white-space: pre-wrap;">Accept-Encoding</span>

<span style="color: rgb(84, 84, 84); font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 12px; font-weight: bold; white-space: pre-wrap;">Content-Encoding</span>

apache压缩

将css放到顶部

将js放到底部

避免css表达式

使用外部css和js

减少dns查找

精简js

精简：移除不必要的字符以减少其大小

混淆：更改函数或变量的名字为更短的字符串

避免重定向

移除重复脚本

配置Etag