页面加速优化

yexiaobai

内联 CSS

优点

  1. 使用内联 CSS 可以减少浏览器去服务端去下载 CSS 文件
  2. 关键 CSS 内联到 HTML 文件中

缺点

  1. CSS 文件没法被缓存

注意:该方法只适用于很小的 CSS 文件,如果你的 CSS 文件足够大以及复杂,应该使用外部 CSS 的方法。

优化 CSS 交付

优化策略

  1. 外部的 CSS 不要超过一个,大小应该小于 50k
  2. 对于下拉区域以上的内容,使用 style 标记内联小 CSS 到 HTML
  3. 不要使用 @import 调用 CSS
  4. 不要把 CSS 元素放在 HTML 的 divs 或者 你的 h1s 中

以上步骤可以最小化渲染阻塞 CSS,使得页面加载非常快速。

如果你有多个 CSS 文件,应该把他们合并成一个。

延迟加载 javascript

  1. 当我们调用外部 javascript 的时候,使用 "onload" 事件
  2. 在页面内部被加载前,外部 javascript 将不被加载T
  3. External javascript will then run and affect page

脚本调用外部 javascript 文件

<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>
  1. 拷贝以上代码。
  2. 把代码粘贴到你的 HTML,放置在 </body> 标签之前(靠近 HTML 文件的底部)。
  3. 把 "defer.js" 变更为你外部 JS 文件的名字。
  4. 确保文件路径是正确的。例如:如果你仅仅放置 "defer.js",这时 "defer.js" 必须与你的 HTML 文件在同一目录下面。

把 javascript 分为两组,一组是加载页面必须的,一组是加载完成页面后需要使用到的(比如分析数据的 js,交互用的等等)。

示例证明:

  1. Page with script inline - here
  2. Page with external script using "defer" - here
  3. Page using the recommended code above - here

延迟图片

可能存在的问题

  1. 延迟加载会引起性能问题
  2. 延迟加载对于某些页面是不可行的
  3. 延迟加载对于 mobile 性能是不理想的

不使用延迟加载或 jQuery 延迟图片

延迟加载实际会做的事情:

  1. 观察一个滚动位置
  2. 监控一个滚动位置
  3. 对一个滚动位置起作用R
  4. 延迟图片

在以上 4 个事情中,仅仅只有一个是延迟图片。

HTML 代码:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">

javascript 代码片段:

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

组合外部 CSS

工具列表

扩展阅读

阅读 4.6k

yexiaoxiaobai
刀锋上的跳舞的 SRE,喜爱 Perl, Python, Go,常被正则婊戏耍,热衷于鼓捣一些小玩具。

就是不告诉你 O(∩_∩)O哈哈~。

4.8k 声望
867 粉丝
0 条评论

就是不告诉你 O(∩_∩)O哈哈~。

4.8k 声望
867 粉丝
文章目录
宣传栏