Web加载速度优化清单

时间  2019-11-07
标签 web 加载 速度 优化 清单 栏目 HTML 繁體版
原文   原文链接

网页加载速度是衡量一个网页好坏的重要标准，网页遗弃率随网页加载时间的增长而增长。听说近一半的用户但愿网页加载时间不超过2s，超过3s通常就放弃该网页。时间就是生命，干等着，谁愿意无缘无故地+1s呀，因此今天来整理下具体如何加快网页javascript

HTML

  • 压缩 HTML: HTML代码压缩，将注释、空格和新行从生产文件中删除。css

    为何：html

    删除全部没必要要的空格、注释和中断行将减小HTML的大小，加快网站的页面加载时间，并显著减小用户的下载时间。

    怎么作：前端

    大多数框架都有插件用来压缩网页的体积。你可使用一组能够自动完成工做的NPM模块。

  • 删除没必要要的注释： 确保从您的网页中删除注释。java

    为何：git

    注释对用户来讲是没有用的，应该从生产环境文件中删除。可能须要保留注释的一种状况是：保留远端代码库（keep the origin for a library）。

    怎么作：github

    大多数状况下，可使用HTML minify插件删除注释。

  • 删除没必要要的属性： 像 type="text/javascript" or type="text/css" 这样的属性应该被移除。web

    <!-- Before HTML5 -->
<script type="text/javascript">
    // Javascript code
</script>

<!-- Today -->
<script>
    // Javascript code
</script>

    为何npm

    类型属性不是必需的，由于HTML5把text/css和text/javascript做为默认值。没用的代码应在网站或应用程序中删除，由于它们会使网页体积增大。

    怎么作：浏览器

    ⁃ 确保全部link和script标记都没有任何type属性。

   

  • 在JavaScript引用以前引用CSS标记： 确保在使用JavaScript代码以前加载CSS。

    为何：

    在引用JavaScript以前引用CSS能够实现更好地并行下载，从而加快浏览器的渲染速度。

    怎么作：

    确保 head 中的 link 和 style 始终位于 script 以前。
  • 最小化iframe的数量： 仅在没有任何其余技术可行性时才使用iframe。尽可能避免使用iframe。

  • DNS预取： 一次 DNS 查询时间大概在60-120ms之间或者更长，提早解析网页中可能的网络链接域名

    <link rel="dns-prefetch" href="http://example.com/">

CSS

  • 压缩: 全部CSS文件都须要被压缩，从生产文件中删除注释，空格和空行。

    为何：

    缩小CSS文件后，内容加载速度更快，而且将更少的数据发送到客户端，因此在生产中缩小CSS文件是很是重要，这对用户是有益的，就像任何企业想要下降带宽成本和下降资源。

    怎么作：

    使用工具在构建或部署以前自动压缩文件。

  • Concatenation: CSS文件合并（对于HTTP/2效果不是很大）。

    <!-- 不推荐 -->
<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>

<!-- 推荐 -->
<link rel="stylesheet" href="foobar.css"/>

    为何：

    若是你还在使用HTTP/1，那么你就须要合并你的文件。不过在使用HTTP/2的状况下不用这样（效果待测试）。

    怎么作：

    在构建或部署以前使用在线工具或者其余插件来合并文件。
    固然，要确保合并文件后项目能够正常运行。

  • 非阻塞： CSS文件须要非阻塞引入，以防止DOM花费更多时间才能渲染完成。

    <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>

    为何：

    CSS文件能够阻止页面加载并延迟页面呈现。使用 preload实际上能够在浏览器开始显示页面内容以前加载CSS文件。

    怎么作：

    须要添加 rel属性并赋值 preload，并在 <link>元素上添加 as=“style”。

  • CSS类(class)的长度: class的长度会对HTML和CSS文件产生（轻微）影响。

    为何：

    甚至性能影响也是有争议的，项目的命名策略会对样式表的可维护性有重大影响。若是使用BEM，在某些状况下可能会写出比所须要的类名更长的字符。重要的是要明智的选择名字和命名空间。

    怎么作：

    可能有些人更关注类名的长度，可是网站按组件进行划分的话能够帮助减小类名的数量和长度。

  • 不用的CSS: 删除未使用的CSS选择器。

    为何：

    删除未使用的CSS选择器能够减少文件的大小，提升资源的加载速度。

    怎么作：

    ⚠️ 检查要使用的CSS框架是否已包含reset/normalize代码，可能不须要用到reset/normalize文件中的内容。

JavaScript

  • JS 压缩: 全部JavaScript文件都要被压缩，生产环境中删除注释、空格和空行（在HTTP/2仍然有效果）。

    为何：

    删除全部没必要要的空格、注释和空行将减小JavaScript文件的大小，并加快网站的页面加载时间，提高用户体验。

    怎么作：

    建议使用下面的工具在构建或部署以前自动缩小文件。

  • 非阻塞JavaScript： 使用defer属性或使用async来异步加载JavaScript文件。

    <!-- Defer Attribute -->
<script defer src="foo.js">

<!-- Async Attribute -->
<script async src="foo.js">

    为何：

    JavaScript阻止HTML文档的正常解析，所以当解析器到达script标记时（特别是在<head>内），它会中止解析而且执行脚本。若是您的脚本位于页面顶部，则强烈建议添加 async和 defer，但若是在</body>标记以前加载，没有太大影响。可是，使用这些属性来避免性能问题是一种很好的作法。

    怎么作：

    添加 async（若是脚本不依赖于其余脚本）或 defer（若是脚本依赖或依赖于异步脚本）做为script脚本标记的属性。
    若是有小脚本，能够在异步脚本上方使用内联脚本。

    • 使用 tree shaking 技术减小 js 大小: 经过构建工具分析 JavaScript 代码并移除生产环境中用不到的 js 模块或方法

      • 📖 [

Reduce JavaScript Payloads with Tree Shaking](https://developers.google.com...

  • 使用 code splitting 分包加载 js: 经过分包加载，减小首次加载所需时间

    怎么作：

    Vendor splitting 根据库文件拆分模块，例如 React 或 lodash 单独打包成一个文件
    Entry point splitting 根据入口拆分模块，例如经过多页应用入口或者单页应用路由进行拆分
    Dynamic splitting 根据动态加载拆分模块，使用动态加载语法 import() ，实现模块按需加载

图片资源

    • 服务部署

    以上清单仅为节选，来源 https://github.com/w3cay/Fron...

    原文连接： Web加载速度优化清单-安望云海

    相关文章
    相关标签/搜索
    每日一句
      每一个你不满意的现在，都有一个你没有努力的曾经。
    本站公众号
       欢迎关注本站公众号,获取更多信息
    联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程