前端优化已经是一门写得很烂的学科了。虽然要做的人成千上万，但在这里我只分享一些我的实践经验。欢迎与我交流。欢迎关注我的个人公众号，不定期更新工作心得。正文如下前端性能1.模块化严格来说，代码模块化并不能带来性能的提升，但我还是提出模块化，因为它真的很重要，重要到几乎所有的优化都和它息息相关。常见的模块化方案包括：AMD、CMD、UMD、ES6如何选择？团队习惯个人喜好，业务需要我依靠！您如何才能将业务需求放在最后？因为任何一项业务都不会因为使用不同的模块化解决方案而产生不同的结果。而我认为软件开发中的“以人为本”恰到好处，只能用在其他地方。毕竟，商业高于一切，这是道德。2.Cache缓存一定要加！必须添加缓存！必须添加缓存！因为CDN真的很贵。..没有CDN？那么就需要缓存！！！缓存的方式有很多种，最常见的有以下两种：浏览器304缓存localstorage在本地存储界，对于304缓存和localstorage的性能一直存在争议。这里我们不讨论两者的区别，或者性能问题。我一直选择面向业务的解决方案。这里我选择localstorage。如果需要，您可以使用localstorage来处理缓存。可以这样做：通过localstorage存储js和css资源；资源版本控制；只要你愿意，localstorage也可以控制缓存时间！通过写一小段js代码实现；活动期间，可以将活动相关资源提前缓存到localstorage中，减少活动当天的CDN消耗，同时提高用户访问速度，减轻服务器端压力。PS：localstorage对于开发环境来说真的很恶心，但是可以在框架底层写一小段代码，支持不同环境下的缓存控制，例如：对于开发环境的域名，禁止缓存，某个url参数禁止缓存等等。当然你也可以像我一样写一个chrome插件来控制缓存，开心就好！因此，我的建议是尽量使用localstorage。如果你的公司没事干，搞大促销，你就知道CDN有多贵了。以后我们localstorage的解决方案应该是开源的。3、图片的懒加载做Hybrid开发的懒加载真的很有必要！另外，写一个图片懒加载插件有多难？，这里已经有人给出了答案，点击查看JS懒加载模块化的好处之一就是我们可以实现对js资源的懒加载控制，RequireJS，SeaJS？只要你开心。这里我们使用RequireJS。如果你要问我为什么，也许是因为我们使用的是AMD方案！如果你要问我为什么用AMD方案，我只能告诉你，因为我快乐！以人为本，是不是~4.前端模板渲染相对于拼接字符串，jQuery.append，我们多了一个选择，前端模板。有很多前端模板解决方案。这里推荐腾讯的tmodjs。它的优点是可以将前端模板预编译成js文件，同时支持模块加载。如果你要问我为什么不能拼接字符串，或者为什么jQuery.append不好用，这可能是我下一篇文章的主题。至少今晚不会。或者你可以研究一下浏览器的渲染机制？5.如何写DOM很重要。浏览器有一种叫做重绘的机制。任何改变dom元素位置的操作都会导致浏览器重绘该操作，这是不可避免的。重绘是浏览器性能优化的一个重点，尤其是webview的优化。既然无法避免，那怎么办呢？虽然我们无法避免浏览器重绘的发生，但是我们可以通过对dom元素的精确控制来尽量减少浏览器重绘的范围。这里我们可以使用浏览器的开发者工具来优化页面。你也可以写一篇关于调整的文章。如果你有兴趣，我们可以私聊。客户端性能代理webview发送一个ajax请求，据说这样可以节省三次握手的时间？在iOS中，使用WKWebView代替UIWebview。UIWebview是iOS8.0之前的产品。iOS8.0之后的系统推荐使用WKWebView。经过实际测试，性能可以提升40%左右，稳定性也有很大的提升，几乎是质量的提升。webview支持加载webp格式的图片。静态资源预加载，除了localstorage的缓存机制外，我们还可以使用客户端来缓存前端静态资源。在WIFI环境下，我们可以预先下载静态资源到本地。服务端性能1.服务端渲染在前后端分离被奉为向日葵的时代，提及服务端渲染显然是不合适的。但如果考虑到客户端弱化的Webview，或许这是一个不错的选择。毕竟服务器端的性能要好很多。对于已经前后端分离的项目，我建议大家可以尝试使用Node.js直接导出页面，也是一个不错的选择。Node.js的性能这里就不用赘述了！对了，首屏数据服务器输出，再加上懒加载，不要太爽。2.响应式界面响应式界面真的很重要！！！可以优化代码，优化sql，优化缓存（redis还是memcached？），优化Nginx配置？双服务器？ComeOn总是有事可做！无论如何，不??要限制自己。我们是开发者，不是侍应生！好的？3、图片转webp由于webp格式的图片并不是所有环境都支持，所以需要配合不同的客户端动态返回相应格式的图片。PS：如果你对前端性能优化有自己的想法，欢迎来骚扰我。焦糖玛奇朵可能只是我们之间的焦糖玛奇朵。
