您的位置:奥门新浦京网址 > Wed前段 > 网页性能提升指南,开发者需要了解的技巧和工

网页性能提升指南,开发者需要了解的技巧和工

发布时间:2020-01-03 06:40编辑:Wed前段浏览(80)

    HTML5 开发者需要了解的技巧和工具汇总

    2011/10/16 · HTML5 · HTML5

    注:本文转载自iteye

    HTML5现在已经成为了Web开发中的热门话题,大多数现代浏览器(Safari、Chrome,Firefox,IE10和移动设备)都支持HTML5。即使HTML5的规范还没有制定完成,但许多开发者已经将其作为Web开发项目中的主要技术。一些网站巨头,如Google、Facebook、Twitter和YouTube等,都建立在HTML5基础上。

    HTML5中最令人兴奋的功能莫过于画布(canvas)和强大的表单功能,画布功能已经可以在大部分浏览器中完美体验(除了IE),但对于新表单元素的支持还不是太好。对Web开发者来说,是时候开始HTML5开发了。

    要进行HTML5开发,本文中的一些技巧、工具可以让你缩短学习的时间,提高开发的效率。

    一、HTML5支持测试列表

    在开始之前,你需要了解现代的浏览器以及移动平台对于HTML5的支持情况。

    • 主流浏览器HTML5功能支持一览
    • 移动平台HTML5支持一览
    • HTML5支持测试
    • HTML5演示

    二、让HTML5元素可用

    老版本的IE浏览器不能识别新的HTML元素。但是,可以使用一些JavaScript或CSS解决方案来弥补这个缺陷。

    • HTML5Shiv:此脚本可以使IE浏览器识别HTML5元素。
    • HTML5 Enabler:功能与HTML5Shiv类似。
    • Modernizr:它使得开发者可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发,同时又不会牺牲其他不支持这些新技术的浏览器的控制。
    • HTML5 Reset:它提供了一组HTML、CSS文件,让你能够以最少的时间来启动一个新的项目。它使用modernizr来支持HTML5 和 CSS3。

    三、浏览器插件

    下面是一些JavaScript插件,可以弥补一些浏览器对HTML5的支持问题。

      1. VideoJS

    VideoJS是一个HTML5的视频播放器,可以在所有浏览器中使用,包括IE6和移动设备。对于不支持HTML5的浏览器则自动使用Flash播放器来播放。

    图片 1

      2. AudioJS

    HTML音频播放器。用来让HTML5 的 <  audio> 标签可以在各种浏览器上使用,包括移动设备。

    图片 2

      3. HTML5Widget

    HTML5的表单模块,包括日历,调色板,滑动部件,客户端验证等。

    图片 3

      4. Webforms2

    HTML5 表单属性的支持,例如pattern、required和autofocus。

    图片 4

      5. LimeJS

    LimeJS是HTML5的游戏框架,用于为现代触摸设备和桌面浏览器创建快速、本地化的游戏。

    图片 5

      6. FlexieJS

    支持CSS3弹性盒子模型(Flexible Box Model)。

    图片 6

    四、在线工具

    此外,还有一些在线工具,可以帮助开发者加快HTML5项目的开发。

    1. HTML5 Boilerplate

    HTML5Boilerplate 是一个HTML / CSS /JS模板,是实现跨浏览器正常化、性能优化、稳定的可选功能如跨域Ajax和Flash的最佳实践。开发者称之为技巧集合,目的是满足你开发一个跨浏览器,并且面向未来的网站的需求。

    图片 7

      2. Switch to HTML5

    非常有用的在线工具,可以根据你的喜好生成HTML5文档结构。

    图片 8

      3. Initializr

    Initializr是一个HTML5模板生成器,以帮助你开始HTML5项目的开发 。它建立在HTML5 Boilerplate之上。

    图片 9

      4. HTML5 Visual 速查表

    图片 10

      5. HTML5 Canvas 速查表

    图片 11

      6. HTML5 笔记

    图片 12

      五、其他

    你可以通过下面的链接来跟踪HTML5的更新。

    HTML5追踪

    你可以通过下面的链接获得HTML5网站的设计灵感。这个网站库中包含了大量的使用HTML5技术的网站。

    HTML5Gallery

     

    赞 3 收藏 评论

    图片 13

    Web 的现状:网页性能提升指南

    2017/09/21 · 基础技术 · 性能

    原文出处: Karolina Szczur   译文出处:碧青_Kwok   

    互联网发展非常迅速,所以我们创造了Web平台。通常我们会忽视连通性等问题,但用户们却不会视而不见。一瞥万维网的现状,可以发现我们并没有用同情心、变通意识去构建它,更不要说性能了。

    所以,今天的Web是什么状态呢?

    在这个星球上的74亿人中,只有46%可以上网。平均网络速度上限为7Mb/s。更重要的是,有93%的互联网用户正在通过移动设备进行访问——若不适配移动设备将引起用户反感。通常情况下,数据比我们假设的更昂贵——可能需要1到13小时才能购买500MB的数据包(德国 vs. 巴西;更有趣的统计数据参见 Ben Schwarz 的 Beyond the Bubble: The Real World Performance)。

    我们的网站也不是完美的——平均网站是原始Doom游戏的大小(约3 MB)(请注意,为了统计准确,应使用中位数,阅读 Ilya Grigorik 的优秀“平均页面”是一个神话,中档网站大小目前为1.4MB)。图像可以轻松占用1.7 MB的带宽,而JavaScript平均值也有400KB的体积。这不仅是Web平台的问题,原生应用程序可能更糟,还记得为了获取错误修复版本,而下载200MB安装包的情景吗?

    技术人员经常会发现自己处于特权状态。随着最新的高端笔记本电脑、手机和快速有线互联网连接,很容易让我们忘记,这些并不是每个人都有的条件(实际上,真的很少)。

    如果我们从特权和缺乏同情的角度来构建网络平台,那么将导致排他性的糟糕体验。

    考虑到设计和开发的性能,我们怎样才能做得更好?


    10 个打造 React.js App 的最佳 UI 框架

    2017/05/26 · 基础技术 · React, UI

    原文出处: Vladimir Metnew   译文出处:IT程序狮   

    图片 14

    10 个打造 React.js App 的最佳 UI 框架

    在本文中,我们将分享一些助你打造 React.js App 最佳的 UI 框架。它们具备你所需要的基本 React 组件,以及易用的 API,同时,在外观和体验上也非常棒。Have Fun !


    优化所有资源

    理解浏览器如何分析和处理资源,是显著提高性能的最强大但未充分利用的方式之一。事实证明,浏览器在嗅探资源方面非常出色,同时解析并确定其优先级。这里是关键请求的来源。

    如果请求中包含用户视口中呈现内容所必需的资源,则该请求至关重要。

    对于大多数网站,它将是HTML、必要的CSS、logo、网络字体,也可能是图片。在许多情况下,几十个其他不相关的资源(JavaScript、跟踪代码、广告等)影响了关键请求。幸运的是,我们能够通过仔细挑选重要资源并调整优先级来控制这种行为。

    通过``我们可以手动强制调高资源的优先级,确保所需的内容按时呈现。这种技术可以显著改善“交互时间”指标,从而使最佳的用户体验成为可能。

    图片 15

    关键请求对许多人来说,似乎仍然是一个黑匣子,可共享资料的缺乏并不能改变现状。幸运的是,Ben Schwarz
    发表了关于这个问题的非常全面并平易近人的文章——关键请求。另外,请参阅Addy的文章,在Chrome中的预加载、预取和优先级(Preload, Prefetch and Priorities in Chrome)。

    图片 16

    [在Chrome开发人员工具中启用优先级]

    要跟踪在请求优先级处理方面的情况,请使用Lighthouse性能工具和关键请求链审核工具,或查看Chrome开发人员工具中“网络”选项卡下的请求优先级。

    1. Material-UI

    图片 17

    基于谷歌 Material Design 设计规范的 React 组件

    此外,它还是 React 的第一个 UI 套件。Material-UI具备你所需要的所有组件(甚至更多),以及可配置性极高的预定义调色板和``,帮助你为应用程序定制相应的颜色主题。

    由于 Material-UI 过去的版本中存在一些性能问题,就我个人而言,不是很满意。但自3.0 版本发布后的反馈来看,它在性能方面已有所改善。

    项目地址:【传送门】

    通用性能清单

    1. 积极地缓存
    2. 启用压缩
    3. 优化关键资源的优先级
    4. 使用CDN(Content Delivery Networks)

    2. React Desktop

    图片 18

    专为 MacOS Sierra 和 Windows 10 提供的 React UI 组件

    关于Electron 框架,我相信你已经有所了解。如果你对跨平台桌面应用程序 UI 组件也感兴趣的话,那么React-Desktop绝对是你的“菜”。你可以使用它轻松获取用于 Mac OS 和 Windows 10 系统上相应的 UI 组件。

    项目地址:【传送门】

    图片优化

    图片通常占网页传输的大部分有效载荷,因此图片优化可以带来最大的性能提升。有许多现有的策略和工具可以帮助我们删除额外的字节,但是首先应考虑的问题是:“图片对于我想传达的信息和效果至关重要吗?”。如果可以消除它,不仅可以节省带宽,而且还节省了请求。

    在某些情况下,可以通过不同的技术实现类似的结果。比如CSS就具有艺术方向的一系列属性,例如阴影、渐变、动画及形状,允许我们构造适当风格的DOM元素。

    3. Semantic-UI-React

    图片 19

    由 Semantic-UI 官方出品的 React UI 组件

    就个人而言,我认为它是最好用的 React UI 框架。它是由官方基于Semantic-UI打造的 React 组件,它几乎涵盖了 Semantic-UI 上的所有组件,而且它还有一个易用的 Declarative API,以及用于 React 组件的 shorthand props,同时它能够做到 jQuery-free。

    另外,我做了一个使用 React-Semantic-UI,Webpack 构建项目的新手示例,你也可以来看看。

    项目地址:【传送门】

    选择正确的格式

    如果不能舍弃图片,确定哪种格式更合适就很重要了。首先要在矢量和光栅图形之间做出选择:

    • 矢量图形:分辨率独立,通常体积更小。非常适合logo、icon和简单的图形,包括基本形状(线,多边形,圆和点)。
    • 光栅图形:呈现更详细的信息,比较适合相片。

    做出首个决定后,可以选择以下几种格式:JPEG、GIF、PNG–8、PNG–24,或最新的 WEBP 与 JPEG-XR 格式。有了这么多的选项,如何确保我们做出正确的选择?以下是找出最佳格式的基本方法:

    • JPEG:颜色非常丰富的图片(例如照片)
    • PNG–8:色彩相对单一的图片
    • PNG–24:局部透明的图片
    • GIF:动图

    Photoshop可以通过各种设置,例如降低质量、降低噪音或色彩数量来优化以上每一种格式。确保设计师了解上述性能实践,并能够使用正确的方式优化相应格式的图片。如果您想了解更多如何处理图片,请阅读 Lara Hogan 的好文 Designing for Performance。

    4. Ant-design

    图片 20

    一套企业级 UI 设计语言和基于 React 实现的 Web 组件库的体验解决方案

    引用官方文档介绍:

    • 用于 Web 应用程序的企业级 UI 设计语言。
    • 一套开箱即用的高品质 React 组件。
    • 由 TypeScript 构建,并具备完整定义类型。
    • 基于 npm + webpack + dva 前端开发工作流。

    它支持浏览器、服务器端渲染和 Electron 环境,并具备丰富的组件,你还可以通过Create-react-app 来学习。来看看Ant-design demo吧!

    项目地址:【传送门】

    试用新格式

    图像格式有几个较新的玩家,即WebP、JPEG 2000 和 JPEG-XR。它们都是由浏览器厂商开发的:Google 的 WebP,Apple 的 JPEG 2000 和 Microsoft 的 JPEG-XR。

    WebP 是最受欢迎的竞争者,支持无损和有损压缩,这使得它非常灵活。无损的 WebP 比 PNG 小26%,比 JPG 小25-34%。WebP 有着74%的浏览器支持,它可以安全地进行降级,最多可节省1/3的传输字节。JPG 和 PNG 可以在 Photoshop 和其他图像处理应用程序以及命令行界面(brew install webp)中转换为WebP。

    如果你想探索其他格式之间的视觉差异,推荐 Github 上这个很赞的 Demo。

    5. Blueprint

    图片 21

    引用自官方文档:

    “它将为拥有复杂、数据密集的 Web 界面的桌面应用程序进行全面优化。如果你注重移动端的交互体验,并且正寻找移动优先的 UI 套件的话,它可能不适合你。”

    Blueprint 是由 TypeScript 构建,并具备良好的使用文档。它包含了丰富(30+)的 React 基础组件,从按钮到表单控件、工具提示均有涉及。此外,它的每个组件都包含了 CSS 样式。并且,你还可以使用 Sass 和 Less 变量、优雅的调色板和两种尺寸的 300+ UI 图标等工具,来打造一款专属于你的组件和应用程序。

    项目地址:【传送门】

    用工具和算法进行优化

    即使使用了高效的图像格式,也不应跳过后处理优化。这一步很重要。

    如果您选择了尺寸相对较小的 SVG,它们也是可以再次压缩的。SVGO 是一个命令行工具,可以通过剥离不必要的元数据来快速优化 SVG。另外,如果您喜欢Web界面或受操作系统的限制,请使用 Jake Archibald 的 SVGOMG。因为 SVG 是基于 XML 的格式,它也可以在服务器端进行 GZIP 压缩。

    ImageOptim 是大多其他图像类型的最好选择。包括 pngcrush、pngquant、MozJPEG、Google Zopfli等,它在一个全面的开源包中捆绑了一大堆优秀的工具。ImageOptim 可以以 Mac OS 应用程序、命令行界面和 Sketch 插件形式,轻松地实现到现有的工作流程中。对于那些在 Linux 或 Windows 上的场景,大多数 ImageOptim 的 CLI 都可以在您的平台上使用。

    如果您倾向于尝试新兴的编码器,Google 今年早些时候发布了 Guetzli——源自 WebP 和 Zopfli 的开源算法。Guetzli 可以比任何其他可用的压缩方法生成35%更小体积的 JPEG。唯一的缺点是:处理时间慢(CPU 每处理百万像素需要1分钟)。

    选择工具时,请确保它们生成所需的结果并适应团队的工作流程。理想情况是,将优化过程自动化,这样就不会产生漏掉的情况。

    6. React-Bootstrap

    图片 22

    用 React 构建的 Bootstrap 3 组件

    引用自官方文档:

    React-Bootstrap是一个可重用的前端组件库。通过使用 Facebook 的 React.js 框架来获得 Twitter Bootstrap 的外观与体验,以及更清晰的代码。

    简而言之,它是知名的 Bootstrap 组件的 React 实现。

    项目地址:【传送门】

    响应式图片

    十年前,我们使用一种分辨率,就可以为所有人服务,但时代变化太快,现今的响应式 Web 已非往日可比。这也是为什么我们必须要特别留心,去精心优化视觉资源,确保它们适应各种视口设备。幸运的是,感谢 Responsive Images 社区小组,我们可以完美使用 picture 元素和 srcset 属性(二者都有85%+支持率)。

    7. React-Toolbox

    图片 23

    一套基于谷歌 Material Design 规范和 CSS 模块的 React 组件

    你听说过CSS Modules吗? React-Toolbox便依赖于它。React-Toolbox 是一个具有 30+ 开箱即用组件的高度可定制框架。从此,你可以不必使用类似Purify-CSS这样的工具,仅通过所需的 CSS 便可以进行项目的开发。

    项目地址:【传送门】

    srcset 属性

    srcset在分辨率切换方案中效果最佳——即当我们需要根据用户的屏幕密度和大小显示图像时。基于srcsetsize属性中的一组预定义规则,浏览器将选择最佳图片,相应地提供给视口。这项技术可以带来很大的带宽和请求节省,特别是对于移动用户。
    图片 24
    [srcset 使用示例]

    8. Grommet

    图片 25

    用于企业应用的先进的 UX 框架

    Grommet 不仅仅是 UX 框架,它还提供了从理论到应用程序开发所需的所有指导、组件以及设计资源。例如,它提供了 React 编写的丰富的 UX 组件、自带的 grommet-cli 、入门学习指南、预设模版、优秀的使用文档等资源。

    项目地址:【传送门】

    picture 元素

    picture元素和media属性旨在使艺术设计变得容易。通过为不同情形提供不同图片(通过媒体查询进行测试),无论什么分辨率,我们都能始终将图像中最重要的元素保持在焦点。
    图片 26
    [picture 元素使用示例]

    请务必阅读 Jason Grigsby 的 Responsive Images 101指南,以便对这两种方法进行彻底的阐述。

    9. Fabric

    图片 27

    用于为 Office 和 Office 365 构建用户体验的 React 组件

    在过去的几年里,微软公司支持并创建了许多开源项目,例如 Angular 2、TypeScript、VS Code(基于 Electron)以及Fabric。

    Fabric是利用 TypeScript 编写的官方 Office 库,它具有“入门”指南、博客、官方调色板和字体以及项目所需的所有组件。

    项目地址:【传送门】

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:网页性能提升指南,开发者需要了解的技巧和工

    关键词: