澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

31读书笔记,关于web端的优化

资源

这里是丰富的有用资源,让你深入了解网站性能。

  • 深入谷歌PageSpeed
  • SpeedCurve
  • WebPagetest
  • 我的网站耗费的流量有多少?
  • 网页设计师和前端开发人员需要关注的前端性能
  • 如何让RWD网站的速度飙起来
  • 提升Smashing Magazine的性能:案例学习
  • 网站更庞大并不意味着更多的等待时间
  • 优化性能
  • RWD 膨胀 第一部分 和 第二部分
  • 谷歌PageSpeed模块
  • 负责任的社交分享链接
  • 首次访问的内联关键CSS
  • async 和 defer属性的比较
  • 使用字体事件加载字体
  • 使用字体事件再次加载字体
  • 关于字体加载后续——仿文本闪动
  • 播客——通往高性能网站

    1 赞 9 收藏 1 评论

2、压缩、优化

现在找到了减少请求的方法,然后就可以开始寻找各种方法来减重。文件越小,加载速度越快。

则建议你使用下面的代码来替代。

Web字体

Web字体使内容更加清晰和漂亮,但是也对页面渲染产生了负面影响。在加载页面时,特别是移动端的连接,你可能已经注意到文本在一段时间看不见。这被称为 FOIT(不可见文本闪动)。

澳门皇冠844网站 1

我的网站出现FOIT的样子

当浏览器尝试下载一个web字体,它将隐藏文本一段时间,直到它完成字体下载,才显示文本。在最糟糕的情况下,文本无限期地不可见,使内容完全不能阅读。

我处理FOIT 的方式是逐步加载字体,首先依赖默认和系统字体(例如Helvetica和Georgia)允许快速呈现的内容。Web字体然后使用loadCSS异步加载,同时通过 Font Face Observer库来检测字体何时下载成功。一旦字体下载且可用,一个类被添加到文档中,用于设置页面正确的字体。

JavaScript

<head> <style> body { font-family: Helvetica, Arial, sans-serif; } .fonts-loaded body { font-family: Roboto, Helvetica, Arial, sans-serif; } </style> <script> // inline loadCSS function loadCSS( href, before, media, callback ){ ... } // load webfonts loadCSS("//fonts.googleapis.com/css?family=Roboto:400,500,700"); // inline FontFaceObserver (function(){ ... } // detect loading of fonts var roboto400 = new FontFaceObserver("Roboto", { weight: 400 }); var roboto700 = new FontFaceObserver("Roboto", { weight: 700 }); Promise.all([澳门皇冠844网站, roboto400.check(), roboto700.check() ]).then(function() { document.documentElement.className = " fonts-loaded"; }); </script> </head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<head>
  <style>
    body { font-family: Helvetica, Arial, sans-serif; }
    .fonts-loaded body { font-family: Roboto, Helvetica, Arial, sans-serif; }
  </style>
  <script>
    // inline loadCSS
    function loadCSS( href, before, media, callback ){ ... }
    // load webfonts
    loadCSS("//fonts.googleapis.com/css?family=Roboto:400,500,700");
    // inline FontFaceObserver
    (function(){ ... }
    // detect loading of fonts
    var roboto400 = new FontFaceObserver("Roboto", {
      weight: 400
    });
    var roboto700 = new FontFaceObserver("Roboto", {
      weight: 700
    });
 
    Promise.all([
      roboto400.check(),
      roboto700.check()
    ]).then(function() {
      document.documentElement.className = " fonts-loaded";
    });
  </script>
</head>

逐步加载字体将导致FOUT(没有样式的文本闪动)和FOFT(仿文本闪动),这取决于它是如何做的。

澳门皇冠844网站 2

字体逐步加载,不产生FOIT

然而,好处是内容一直可见,而不会出现看不见的情况。关于如何击败FOIT,我写了一篇的深入文章 使用字体事件加载字体。

文章是这篇 快速提升前端性能。

通过以上的优化建议和优化工具,可以轻松找到影响你的Web页面性能的瓶颈,轻松实现Web页面性能的提升。如果你也有Web优化方面的经验,欢迎分享。

CSS和JavaScript

压缩样式表和JavaScript文件可以明显减少文件大小,我仅在压缩上就从一个文件上节省了56%的空间。

压缩前 压缩后 节省比例
CSS 135KB 104KB 23.0%
JS 16KB 7KB 56.3%

我使用 BEM (代码、元素、修饰符) 方法论编写CSS,这将导致冗长的类名。重构我的一些代码变得更简短(“navigation”为 “nav”, “introduction” 为 “intro”),这让我节省了一些空间,但和我期望的后期压缩相比并不是那么明显。

冗长的类 精简后 节省比例
104KB 97KB 6.7%

澳门皇冠金沙网站,我也重新评估了使用jQuery的必要性。对于压缩的135KB的JavaScript,大约96KB是jQuery库——71%之多!这里并没有很多需要依赖于jQuery,所以我花时间重构了代码。我通过剥离jQuery和在Vanilla重写它,去除了122KB,最终压缩后的文件大小减少到13KB。

jQuery Vanilla JS 节省比例
135KB 13KB 122KB (90%)

从那时起,我设法去掉更多空间(压缩后7KB),最后脚本在压缩和gzipped后只有0.365KB。

其它

其他方法,如启用gzip和缓存、配置SSL和从内容分发网络(CDN)获取资源,可以提高前端性能,但需要一些服务器端支持。

这就是所有内容了,其他还有一些细节以及推荐,可以自己去看一下。希望不算侵权。

优化图片大小
通过CSS Sprites优化图片
不要在HTML中使用缩放图片
favicon.ico要小而且可缓存

快速提升前端性能

2015/09/26 · HTML5, JavaScript · 1 评论 · 性能

本文由 伯乐在线 - cucr 翻译,唐尤华 校稿。未经许可,禁止转载!
英文出处:Jonathan Suh。欢迎加入翻译组。

去年,我写了一篇文章Need for Speed,分享了在开发我的网站中使用的工作流程和技术(包含工具)。从那时起,我的网站又经过了一次重构,完成了很多工作流程和服务器端改进,同时我对前端性能也给与了额外关注。以下就是我做的工作,为什么我要这么做,以及我在网站上用来优化前端性能的工具。

2、页面渲染

消除render-blocking的JavaScript和CSS。

render-blocking文件增加了浏览器显示内容的时间,因为这些文件需要先下载并处理。多个render-blocking文件需要浏览器使用多个线程去获取和处理它们,等待时间进一步增加。

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

JavaScript

JavaScript也会导致render-blocking因此它的加载也应该优化可以使用以下的方法:

  1. 小的内联脚本。
  2. 在文档底部加载外部脚本。
  3. 使用defer属性推迟执行脚本。
  4. 使用async属性异步加载的脚本。

XHTML

<head> <script> // small inline JS </script> </head> <body> ... <script src="/path/to/independent-script.js" async> <script src="/path/to/parent-script.js" defer> <script src="/path/to/dependent-script.js" defer> </body>

1
2
3
4
5
6
7
8
9
10
11
<head>
  <script>
    // small inline JS
  </script>
</head>
<body>
  ...
  <script src="/path/to/independent-script.js" async>
  <script src="/path/to/parent-script.js" defer>
  <script src="/path/to/dependent-script.js" defer>
</body>

在解析HTML时 defer推迟下载脚本,一旦页面渲染完成执行脚本。defer支持很不错,但据报道存在不一致和不可靠性,所以最好同时使用defer并把脚本放置在文档底部。

在HTML解析和执行时异步下载脚本文件。这允许多个脚本文件并发下载和执行;然而,他们不能保证在一个特定的顺序加载。如果相互依赖可能需要在这些场景下修改任意脚本。

async支持大不如defer,这就是为什么我选择使用loadJS,用来异步加载JS文件的脚本。它支持老式浏览器,同时有一个有用的特性,即根据条件加载脚本。

XHTML

<head> <script> // small inline JS </script> </head> <body> ... <script> // inline loadJS function loadJS( src, cb ){ .. } // then load your JS loadJS("/path/to/script.js"); </script> <script src="/path/to/parent-script.js" defer> <script src="/path/to/dependent-script.js" defer> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
  <script>
    // small inline JS
  </script>
</head>
<body>
  ...
  <script>
    // inline loadJS
    function loadJS( src, cb ){ .. }
    // then load your JS
    loadJS("/path/to/script.js");
  </script>
  <script src="/path/to/parent-script.js" defer>
  <script src="/path/to/dependent-script.js" defer>
</body>

1、最小化请求

这个是说一般的页面中发的请求过多,会导致页面打开速度变慢。
解决的一种方法是分别编译或连接(组合、合并)CSS和javascript到一个文件中。让这个过程自动化(Grunt 或者 Gulp)是理想的效果,但至少也应该在生产环境下手动完成。

第三方脚本是增加额外请求最常见的罪魁祸首,很多获取额外的文件如脚本、图像或CSS的请求都不止1个。

<script src="another.js"></script>

页面渲染

在这一点上,经过工作和汗水得出这些细节,我确信我的 Google PageSpeed Insights 的分数将是90s。

澳门皇冠844网站 3

在移动平台PSI分数为73/100,而桌面平台上好一点在88/100。它建议我“消除render-blocking的JavaScript和CSS”。

render-blocking文件增加了浏览器显示内容的时间,因为这些文件需要先下载并处理。多个render-blocking文件需要浏览器使用多个线程去获取和处理它们,等待时间进一步增加。

澳门皇冠844网站 4

优化JavaScript、CSS和web字体的传输,可以提高页面的“第一时间渲染。将这个时间降到最低,理解“关键的渲染路径”很重要,它描述了在当页面的第一个字节被收到,与页面第一次渲染成像素之间发生了什么。

WebPagetest 是用来帮助你配置网站和页面性能最好的可视化工具。

澳门皇冠844网站 5

About页面在渲染优化前的WebPagetest结果

当最小化第一次渲染时间时,我们更多的关注以尽可能快的速度渲染内容,然后允许额外的“东西”在处理过程中逐步渲染。

文章主要介绍了如下一些需要关注的点:

  1. JavaScript优化

综述

在过去的几个月中我一直在做性能改进,尽管这有很多工作,我确实注意到了差别。我偶尔得到关于我的网站速度的评论,这是性能调整的结果。

我还没有在指标跟踪上做得很好(特别是早期),但让我们看看基于已有数据的一些比较。

平均大小 我的站点 差别
Requests 93 19 -87.6%
Page size 1950KB 524KB -73.1%
HTML 58KB 2.8KB -95.1%
Images 1249KB 66.3 -94.7%
CSS 60KB 14.6KB -75.7%
JS 303KB 6.1KB -98.0%
Fonts 87KB 10.2KB -88.3%

总体上87.5%优于平均水平!不是很坏。现在谷歌PageSpeed也给我的网站一个不错的分数。

澳门皇冠844网站 6

优化后谷歌PageSpeed的结果

关于WebPagetest的结果**,**我注意到,尽管About页面字节增加了,但开始渲染和加载的时间大大减少。

澳门皇冠844网站 7

About页面在渲染优化后的WebPagetest结果

性能改进将永远是进行时,在 HTTP/2到来的路上其中一些将改变,之前好用的技术可能不再好用,同时有些可能完全弃用。

我觉得在过去的几个月,我取得了很大的进展,也学到了很多。我的网站在Github上是开源的,所以大家可以随时看一看。我还没有弄明白这一切,但希望我所分享的所做所学,会给你一些见解。如果你有任何问题或想聊一聊,随时骚扰我的Twitter @jonsuh或者给我发 邮件。

CSS和JavaScript

压缩样式表和JavaScript文件可以明显减少文件大小,我仅在压缩上就从一个文件上节省了56%的空间。

编写CSS,可以将一些冗长的类精简,比如“navigation” 变为 “nav”, “introduction” 变为 “intro”,都可以节省了一些空间。

有时候需要评估类库的必要性。作者总共写了135kb的代码,其中96kb是jquery,然后通过剥离jQuery和在Vanilla重写它,去除了122KB,最终压缩后的文件大小减少到13KB。(Vanilla是个梗具体可以看这个
Vanilla JS——世界上最轻量的JavaScript框架(没有之一))

之后作者设法去掉更多空间(压缩后7KB),最后脚本在压缩和gzipped后只有0.365KB。

在线分析你的网站
安装浏览器插件( Chrome、 Firefox)
通过 Insights API在应用中嵌入PageSpeed功能

CSS

默认情况下,浏览器将CSS作为渲染阻塞;因此,当它加载时,浏览器暂停渲染,等待CSS已经被下载和处理。外部样式表意味着更多的网络线程,它增加了等待时间,同时大型样式表也会增加等待时间。

我们可以通过在<head>标签内联“关键CSS”来改善页面渲染时间,这样浏览器可以不用再等待下载整个样式表,就可以快速地渲染页面内容,然后通过non-rendering-blocking方式加载完整的样式表。

XHTML

<head> <style> /* inline critical CSS */ </style> </head>

1
2
3
4
5
<head>
  <style>
    /* inline critical CSS */
  </style>
</head>

确定哪些CSS是关键需要(1)查看移动或桌面下页面视口(viewport )大小,(2)识别视口中可见的元素(3)选择这些元素关联的CSS。

这可能有点棘手,特别是手工完成,但是有一些神奇的工具可以帮助加快甚至自动化这个过程。我使用 Filament Group编写的 grunt-criticalcss来帮助我为页面生成关键CSS,然后再手动优化一些CSS(合并重复的媒体查询和删除我认为不必要的CSS)。

澳门皇冠844网站 8

About页面只加载关键CSS(左侧)和加载整个CSS(右侧)的对比

现在关键CSS已经内联到<head>标签内,我使用loadCSS工具来异步加载样式表的其余部分。

XHTML

<head> <style> /* inline critical CSS */ </style> <script> // inline the loadCSS script function loadCSS( href, before, media, callback ){ ... } // then load your stylesheet loadCSS("/path/to/stylesheet.css"); </script> <noscript> <link href="/path/to/stylesheet.css" rel="stylesheet"> </noscript> </head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
  <style>
    /* inline critical CSS */
  </style>
  <script>
   // inline the loadCSS script
   function loadCSS( href, before, media, callback ){ ... }
   // then load your stylesheet
   loadCSS("/path/to/stylesheet.css");
  </script>
  <noscript>
    <link href="/path/to/stylesheet.css" rel="stylesheet">
  </noscript>
</head>

谷歌也给出non-render-blocking加载CSS的 另一个示例 。

CSS

默认情况下,浏览器将CSS作为渲染阻塞;因此,当它加载时,浏览器暂停渲染,等待CSS已经被下载和处理。外部样式表意味着更多的网络线程,它增加了等待时间,同时大型样式表也会增加等待时间。
我们可以通过在<head>标签内联“关键CSS”来改善页面渲染时间,这样浏览器可以~~~~不用再等待下载整个样式表,就可以快速地渲染页面内容,然后通过non-rendering-blocking方式加载完整的样式表。

确定哪些CSS是关键需要
(1)查看移动或桌面下页面视口(viewport )大小
(2)识别视口中可见的元素
(3)选择这些元素关联的CSS

你的Web页面的速度是否已经足够快了?其实可能还有很多可以提升的地方。Google和雅虎也提出了一些Web应用的前端优化建议,并发布了一些工具,你可以逐一检验你的Web应用,以便达到更高的性能。
这些优化不仅仅可以给用户提供更好的体验,从开发者角度来说,进行优化还可以减少页面的请求数、降低请求所占的带宽、减少资源的浪费。
下面来看看Google和雅虎提供的Web页面优化最佳实践。
一、Google的Web优化最佳实践

最小化请求

所有在你的网站加载时用来渲染页面(外部CSS或JS文件、web字体、图片等等)的资源,都是不同的HTTP请求。一般的网站平均有 93个请求!

我的目标是减少HTTP请求。一种方法是分别编译或连接(组合、合并)CSS和javascript到一个文件中。让这个过程自动化(例如使用构建工具 Grunt 或 Gulp)是理想的效果,但至少也应该在生产环境下手动完成。

第三方脚本是增加额外请求最常见的罪魁祸首,很多获取额外的文件如脚本、图像或CSS的请求都不止1个。浏览器内置的开发者工具可以帮助你发现这些元凶。

澳门皇冠844网站 9
Google Chrome开发者工具的网络选项卡

例如,Facebook的脚本发起3次请求。测试环境中使用一些来自著名社交网站的社交分享脚本,可以看到他们快速增加:

站点 文件 大小
Google 1 15.1KB
Facebook 3 73.3KB
LinkedIn 2 47.7KB
Pinterest 3 12.9KB
Tumblr 1 1.5KB
Twitter 4 52.7KB
Total 14 203.2KB

来源:更有效的社会分享链接

这有额外的14个HTTP请求,共203.2KB。相反,我看看 “share-intent” 这个url,它基本上是通过传递和构建数据来生成一个共享,可以只使用HTML来创建社交共享链接。它让我丢掉用于共享的第三方脚本,这些脚本需要7次请求。我在Responsible Social Share Links这篇文章有更多的阐述。

评估每一个第三方脚本并确定其重要性。也许存在一种不依赖第三方的方法来完成它。你可能会失去一些功能(例如like、tweet、分享数量),但是请问一下自己:“像数量统计就那么重要吗?”

JavaScript

JavaScript也会导致render-blocking,因此它的加载也应该优化。可以使用以下的方法:
小的内联脚本。
在文档底部加载外部脚本。
使用defer属性推迟执行脚本。
使用async属性异步加载的脚本。

  1. 利用浏览器缓存
    在显示页面时,浏览器需要加载logo、CSS文件和其他一些资源。浏览器缓存所做的工作就是“记住”已经加载的资源,让页面的加载速度更快。
  2. 压缩CSS代码
    不管你在页面中如何使用CSS,CSS文件都是越小越好,这会帮助你提升网页的加载速度。你可以通过 Minify CSS工具 来压缩你的CSS代码。
    压缩前:

关于作者:cucr

澳门皇冠844网站 10

新浪微博:@hop_ping 个人主页 · 我的文章 · 17

澳门皇冠844网站 11

Web字体

Web字体使内容更加清晰和漂亮,但是也对页面渲染产生了负面影响。在加载页面时,特别是移动端的连接,你可能已经注意到文本在一段时间看不见。这被称为 FOIT(不可见文本闪动)。(FOIT:当浏览器尝试下载一个web字体,它将隐藏文本一段时间,直到它完成字体下载,才显示文本。在最糟糕的情况下,文本无限期地不可见,使内容完全不能阅读。)

  1. 避免使用document.write
    在JavaScript中,可以使用 document.write在网页上显示内容或调用外部资源,而通过此方法,浏览器必须采取一些多余的步骤——下载资源、读取资源、运行JavaScript来了解需要做什么,调用其他资源时需要重新再执行一次这个过程。由于浏览器之前不知道要显示什么,所以会降低页面加载的速度。
    要知道,任何能够被document.write调用的资源,都可以通过HTML来调用,这样速度会更快。检查你的页面代码,如果存在类似于下面的代码:

图片

图片通常占到一个网站的大头。通常网站平均有1249 KB的图片。

我抛弃了图标字体,取而代之的是内联SVG。此外,任何可以矢量化的图片都使用内联SVG替换。我的网站先前版本的一个页面仅仅图标web字体就加载了145KB,同时对于几百个web字体,我只使用了一小部分。相比之下,当前网站的一个页面只加载10KB内联SVG,这可是93%的差异。

SVG sprites看起来很有趣,它可能是我在整个网站使用普通内联SVG图标的一个可行的替代解决方案。

在可能的情况下使用CSS代替图片,现在的CSS能做的已经很多了。然而,浏览器兼容性可能是现代CSS使用的一个问题;因此,充分利用 caniuse.com 和逐步改进。

你也可以通过优化图片来压缩字节。有两种方法来优化图片:

  1. 有损压缩:降低图像的质量
  2. 无损压缩:不影响质量

要同时使用两种方法取得最好的效果,顺序是很重要的。首先使用有损图像压缩方法,比如在不超过必要大小的情况下调整图像大小然后在略低质量且不压缩太多的情况下导出如我通常在82 – 92%下导出JPG图片

澳门皇冠844网站 12

ImageOptim是OS X下的一个图像优化工具

接下来,使用无损图像优化工具比如 ImageOptim进行处理,从而通过删除不必要的信息,如元数据或颜色配置文件来进一步减少图像文件大小。

今天看的是之前保存的一篇前端优化的相关文章。但是人家写了禁止转载,我这边学习的话就不抄太多东西了。

蜘蛛模拟器:这个工具可以分析你的页面,并提供一些优化建议。
图像SEO工具:这个工具可以检查图片的alt标签,并提供一些优化建议。
请求检查器:找出页面中需要加载哪些资源和服务。
链接检查器:检查页面中内部、外部和无效链接。
HTTP头检查:显示网页或资源的HTTP响应头。
社交检查器:检查页面中的社交组件,比如Google 、Facebook、Twitter、Linkedin和Pinterest。
If modified检查器:检查页面是否接受 If-Modified-Since HTTP头。
Gzip检查器:检查页面是否经过了Gzip压缩。
CSS delivery工具:检查页面中所使用的CSS文件。
面包屑工具:可根据你输入的信息提供面包屑导航的代码。
CSS压缩工具:用于压缩CSS代码。

压缩、优化

现在我找到了减少请求的方法,我开始寻找各种方法来减重。文件越小,加载速度越快。通常平均的页面大小为1950KB。按照内容分类:

图片:1249KB HTML:58KB CSS:60KB JS:303KB 字体:87KB Flash:67KB 其它:126KB

我使用这些数据作为参考和比较的起点,同时找到我可以用来为网站减负的方法。 我的网站耗费的流量有多少?是一个由Tim Kadlec编写的很棒的工具,可以用来帮助你测试和可视化,来自世界各地的访问在你的网站上消耗的流量。

图片

图片通常占到一个网站的大头。

可以抛弃了图标字体,使用内联SVG。SVG sprites可能是作者在整个网站使用中普通内联SVG图标的一个可行的替代解决方案。

在可能的情况下使用CSS代替图片,现在的CSS能做的已经很多了。

你也可以通过优化图片来压缩字节。有两种方法来优化图片:
有损压缩:降低图像的质量
无损压缩:不影响质量

压缩后:

其它

其他方法,如启用gzip和缓存、配置SSL和从内容分发网络(CDN)获取资源,可以提高前端性能,但需要一些服务器端支持。基于篇幅所限,我不会深入他们。然而我想强调的是,我推荐使用这些方法,他们将会对你的网站性能有一个全面和积极的影响。

我将提到,因为我的网站的访问量百分比相当一部分来自美国以外,而我的服务器是位于纽约,我于是决定把我的一些资源发布到CDN上。他们部署到一个 Amazon S3  bucket上,绑定到一个CloudFront版本。

  1. 其他分析优化工具

<style type="text/css">

  1. Google PageSpeed
    Google提供了 PageSpeed工具,这是一个浏览器插件,可以很好地应用上文中Google所提到的Web优化实践——帮助你轻松对网站的性能瓶颈进行分析,并为你提供优化建议。

Web前端优化最佳实践及工具集锦
发表于2013-09-23 19:47| 34107次阅读| 来源Googe & Yahoo| 124 条评论| 作者王果 编译
Web优化
Google
雅虎
PageSpeed
YSlow
摘要:前端的性能对于Web应用的用户体验来说非常重要。不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方。本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验你的Web应用。
前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快、对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升。下图显示了页面加载速度对于用户体验的影响。

使用内容分发网络(CDN):把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
添加Expires或Cache-Control信息头:对于静态内容,可设置文件头过期时间Expires的值为“Never expire(永不过期)”;对于动态内容,可使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。
Gzip压缩
设置ETag:ETags(Entity tags,实体标签)是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
提前刷新缓冲区:当用户请求一个页面时,服务器会花费200到500毫秒用于后台组织HTML文件。在这期间,浏览器会一直空闲等待数据返回。在PHP中,可以使用flush()方法,它允许你把已经编译的好的部分HTML响应文件先发送给浏览器,这时浏览器就会可以下载文件中的内容(脚本等)而后台同时处理剩余的HTML页面。
对Ajax请求使用GET方法:当使用XMLHttpRequest时,浏览器中的POST方法会首先发送文件头,然后才发送数据。因此使用GET最为恰当。
避免空的图像src

将JavaScript脚本放在页面的底部
将JavaScript和CSS作为外部文件来引用:在实际应用中使用外部文件可以提高页面速度,因为JavaScript和CSS文件都能在浏览器中产生缓存。
缩小JavaScript和CSS
删除重复的脚本
最小化DOM的访问:使用JavaScript访问DOM元素比较慢
开发智能的事件处理程序

  1. 启用压缩/ GZIP
    使用gzip对HTML和CSS文件进行压缩,通常可以节省大约50%到70%的大小,这样加载页面只需要更少的带宽和更少的时间。
    你可以通过这个 Gzip压缩工具 来检测页面是否已经经过Gzip压缩。
  2. 启用Keep-Alive
    HTTP协议采用“请求-应答”模式,当使用普通模式(非KeepAlive模式)时,每个请求/应答客户和服务器都要新建一个连接,完成之后立即断开连接(HTTP协议为无连接的协议);当使用 Keep-Alive模式(又称持久连接、连接重用)时,Keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接。
    在HTTP 1.0中Keep-Alive默认是关闭的,需要在HTTP头中加入“Connection: Keep-Alive”,才能启用Keep-Alive;在 HTTP1.1中Keep-Alive默认启用,加入“Connection: close”可关闭。目前大部分浏览器都是用HTTP 1.1协议,也就是说默认都会发起Keep-Alive的连接请求了,所以是否能完成一个完整的Keep- Alive连接就看Web服务器的设置情况。
  3. 将小的CSS和JavaScript代码内嵌到HTML中
    如果你的CSS代码比较小,可以将这部分代码放到HTML文件中,而不是一个外部CSS文件,这样可以减少页面加载所需的文件数,从而加快页面的加载。同样,也可以将小的 JavaScript脚本代码内嵌到HTML文件中。
  1. 针对移动优化

<head>
<meta name=description content="description"/>
<title>title</title>
<style>
page specific css code goes here
</style>
<script type="text/javascript">
javascript code goes here
</script>
</head>

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:31读书笔记,关于web端的优化