博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
页面加速优化
阅读量:6243 次
发布时间:2019-06-22

本文共 1014 字,大约阅读时间需要 3 分钟。

内联 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 文件

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

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

示例证明:

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

延迟图片

可能存在的问题

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

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

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

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

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

HTML 代码:

javascript 代码片段:

组合外部 CSS

工具列表

扩展阅读

转载地址:http://hhpia.baihongyu.com/

你可能感兴趣的文章
数据库之变迁
查看>>
DICOM协议中有关打印的内容
查看>>
lsmod
查看>>
server 2003 IIS无法访问asp页面,但是可以访问html静态页面
查看>>
totem成为万能播放器
查看>>
常用CSS记录
查看>>
我的友情链接
查看>>
DNS介绍和原理
查看>>
使用JIRA搭建企业问题跟踪系统3
查看>>
如何定位消耗CPU最多的线程
查看>>
Linux PAM 之cracklib模块
查看>>
buffer && cache
查看>>
Mockito
查看>>
android闹钟实现原理
查看>>
lamp
查看>>
2-12 Linux一些基础练习的实战资料整理
查看>>
在线图片处理的开源项目或开放平台
查看>>
移动设备硬件统计
查看>>
CoreData
查看>>
【step by step构建轻量级web框架】轻量级框架jbeer预览
查看>>