页面加速优化

shixinzhang 发布于2019-08-21 10:33 / 3049人阅读

摘要：延迟加载当我们调用外部的时候，使用事件在页面内部被加载前，外部将不被加载脚本调用外部文件拷贝以上代码。代码代码片段组合外部工具列表页面加速优化页面请求工具工具大全扩展阅读方面的设置

内联 CSS 优点

使用内联 CSS 可以减少浏览器去服务端去下载 CSS 文件

关键 CSS 内联到 HTML 文件中

缺点

CSS 文件没法被缓存

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

优化 CSS 交付 优化策略

外部的 CSS 不要超过一个，大小应该小于 50k

对于下拉区域以上的内容，使用 style 标记内联小 CSS 到 HTML

不要使用 @import 调用 CSS

不要把 CSS 元素放在 HTML 的 divs 或者你的 h1s 中

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

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

延迟加载 javascript

当我们调用外部 javascript 的时候，使用 "onload" 事件

在页面内部被加载前，外部 javascript 将不被加载T

External javascript will then run and affect page

脚本调用外部 javascript 文件

拷贝以上代码。

把代码粘贴到你的 HTML，放置在标签之前（靠近 HTML 文件的底部）。

把 "defer.js" 变更为你外部 JS 文件的名字。

确保文件路径是正确的。例如：如果你仅仅放置 "defer.js"，这时 "defer.js" 必须与你的 HTML 文件在同一目录下面。

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

示例证明：

Page with script inline - here

Page with external script using "defer" - here

Page using the recommended code above - here

延迟图片 可能存在的问题

延迟加载会引起性能问题

延迟加载对于某些页面是不可行的

延迟加载对于 mobile 性能是不理想的

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

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

观察一个滚动位置

监控一个滚动位置

对一个滚动位置起作用R

延迟图片

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

HTML 代码：

javascript 代码片段：

组合外部 CSS 工具列表

CSS delivery tool

页面加速优化

页面请求工具

Google pagespeed insights tool

Google 工具大全

扩展阅读

Inline small CSS

Optimize CSS delivery

render-blocking-css

Defer loading javascript

https://www.feedthebot.com/pagespeed/avoid-css-import.html

Critical rendering path

How to defer images

Combine external CSS

Leverage browser caching

Render blocking javascripts

Guide to the robots.txt file

Nginx Cache方面的设置

Avoid CSS @Import

云服务器 GPU云服务器页面优化优化页面页面性能优化前端页面优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85754.html

页面性能优化实践总结

摘要：页面性能优化学而不思则惘，思而不学则殆前几天接到一个页面效果优化的任务，边做边查阅了一些关于页面性能的资料。可能只需要在中使用这类属性，即可开启硬件加速硬件加速真的那么好吗从本人在移动端开发的实践来看，硬件加速是比较坑的。页面性能优化学而不思则惘，思而不学则殆前几天接到一个页面效果优化的任务，边做边查阅了一些关于页面性能的资料。做完任务之后，抽空写了一篇总结，梳理一下思路，加深自...

LiangJ 2019-08-29 11:01 评论0 收藏0
页面性能优化实践总结

摘要：页面性能优化学而不思则惘，思而不学则殆前几天接到一个页面效果优化的任务，边做边查阅了一些关于页面性能的资料。可能只需要在中使用这类属性，即可开启硬件加速硬件加速真的那么好吗从本人在移动端开发的实践来看，硬件加速是比较坑的。页面性能优化学而不思则惘，思而不学则殆前几天接到一个页面效果优化的任务，边做边查阅了一些关于页面性能的资料。做完任务之后，抽空写了一篇总结，梳理一下思路，加深自...

caoym 2019-08-19 18:48 评论0 收藏0
页面加速优化

摘要：延迟加载当我们调用外部的时候，使用事件在页面内部被加载前，外部将不被加载脚本调用外部文件拷贝以上代码。代码代码片段组合外部工具列表页面加速优化页面请求工具工具大全扩展阅读方面的设置内联 CSS 优点使用内联 CSS 可以减少浏览器去服务端去下载 CSS 文件关键 CSS 内联到 HTML 文件中缺点 CSS 文件没法被缓存注意：该方法只适用于很小的 CSS...

Lin_YT 2019-08-28 18:10 评论0 收藏0
页面加速优化

摘要：延迟加载当我们调用外部的时候，使用事件在页面内部被加载前，外部将不被加载脚本调用外部文件拷贝以上代码。代码代码片段组合外部工具列表页面加速优化页面请求工具工具大全扩展阅读方面的设置内联 CSS 优点使用内联 CSS 可以减少浏览器去服务端去下载 CSS 文件关键 CSS 内联到 HTML 文件中缺点 CSS 文件没法被缓存注意：该方法只适用于很小的 CSS...

xiaotianyi 2019-08-01 14:46 评论0 收藏0