快速web app之道

我最近提到，一个快速的Web App的关键是Ajax架构、Javascript和缓存。虽然这样说是基于我的经验——我并没有每一项的贡献的实际数据或者量化的可能节省的性能。但请听我细说～～

Ajax架构——Web 1.0的基于用户每次操作来重新加载页面显然不是正确的选择。让用户拉下页面（移动终端拉下页面来刷新的方法）然后重新请求没有任何改变的资源会是一种很 2B的用户体验。使用Web 2.0的App来维持稳定的UI就会更优雅，而且Ajax允许我们通过轻量的数据API请求和客户端Javascript来实现内容更新，这会显得平滑而快速。

Javascript——Javascript是网站性能的中流砥柱，但是几年前它更糟糕。还记得吗？过去通常会加载一个脚本，然后阻塞HTML解析和页面中其它资源的下载。脚本一次只下载一个！在2009年，IE8成为第一个支持并行脚本加载的浏览器。Firefox 3.5、Chrome 2、Safari4也很快跟进了，然后最近Opera 12也才跟上队伍。（在我看来对网站性能来说，并行脚本加载是唯一的、最重要的改进）除了加载脚本以外，Javascript引擎自身的速度也有了显著的提高。所以我们比几年前强太多了。但是当我深入研究主流网站的性能的时候发现Javascript依然是导致网站比较慢的最常见的因素，特别是减慢渲染。这主要源于几个原因。比如，Javascript请求已经增加到了约200kb了。浏览器仍然屏蔽Javascript的一些行为，比如，在有些浏览器中一个后面跟有内联脚本的样式会阻塞后面资源的下载。然后直到我们开始广泛支持渐进增强之前，很多网页在等待一个比较大的javascript加载、解析和执行之前还是一个空白页面。

缓存——更好的缓存对第一次访问的用户来说并不会让网站更快。但是在web app的背景下，我们谈论的用户是那些会停留较长时间或者会再次访问的人。在创建web app体验的过程中，与桌面页面和Native app对比，缓存是一个关键的因素。缓存让我感到忧伤。站长们并没有尽可能多的使用缓存。58%的请求没有缓存header，89%缓存期小于一个月尽管其中的38%没有变化。浏览器缓存太小，他们的清除算法需要更新。我们有带有超级简单API的LocalStorage，但是浏览器厂商说它对性能有害。应用缓存（application cache）是一个很稳重的方案，但是它比较难用（请查看Jake Archibald的牛B的分享——不知道为什么，这个国外的视频无法播放，可先查看与之对应的PPT）。

结语：

网站性能优化是前端开发的一个永恒的话题，也是前端工程师的基本技能，steve shoulder的这篇文章很有用，重点是，老外思考和解决问题的方法值得我们学习——那就是用事实和数据说话，而我们通常很少思考“为什么”和“真的是这样吗？”。。。

本文整理自：Keys to a fase web app
中文原文：快速web app之道
请尊重版权，转载请注明来源，多谢~~

快速web app之道相关推荐

快速生成 web app 动态展示机器学习项目
1. Streamlit 一句话,Streamlit是一个可以用python编写web app的库,可以方便的动态展示你的机器学习的项目. 优点你不需要懂html, css, js等,纯python ...
从 SPA 到 PWA：Web App的下一站在哪？
从AJAX(Asynchronous JavaScript + XML,异步JavaScript和XML)开始, 尤其是 AngularJS 推出之后,SPA(Single Page App,单页应用 ...
如何使用Next.js创建动态的Rick and Morty Wiki Web App
Building web apps with dynamic APIs and server side rendering are a way to give people a great exper ...
Python+Dash快速web应用开发——基础概念篇
作者:费弗里来源:Python大数据分析 ❝本文示例代码与数据已上传至https://github.com/CNFeffery/DataScienceStudyNotes ❞ 1 简介这是我的新系 ...
你的首个 Progressive Web App
Progressive Web Apps 是结合了 web 和原生应用中最好功能的一种体验.对于首次访问的用户它是非常有利的, 用户可以直接在浏览器中进行访问,不需要安装应用.随着时间的推移当用户渐 ...
IE7的web标准之道——7：（修正）float双倍margin bug
IE7的web标准之道 IE历来被web标准的拥护者所诟病,而当FireFox横空出世以后,更多的网页制作者开始关注web标准设计.看着FireFox的市场占有率不停的上升,微软终于推出了IE7.但I ...
力软框架转 mysql_快速web开发框架——learun framework
快速web开发框架--learun framework 一个好的 web技术框架往往与他速度有关,他需要帮助程序员尽可能快的完成项目的同时确保它的安全性, 力软敏捷框架是基于 .net语言的 web ...
何为Web App，何为Hybird App
这些概念听起来很火,当下也很流行,真正理解起来却并非易事.如果让我来全面的解释Web App和Hybird App,我觉得还有些困难. 这篇文章只是我深入了解移动领域开发过程中的不断整理和总结,其中涉 ...
web app开发技巧总结
Web APP开发技巧总结一.META/LINK相关: 1.百度禁止转码通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心.不过我们可以通过这个meta标签来禁 ...

快速web app之道

快速web app之道相关推荐

最新文章

热门文章