简单优化前端工程几种方式（上篇）-低调大师

简单优化前端工程几种方式（上篇）

2018-07-19 460

使用CDN

如果A网站和B网站, 同时使用了 https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js的资源, 在访问其他网站A时, 浏览器会缓存jquery.min.js资源文件, 访问网站B时,就可以免于下载jquery.min.js的文件, 这样既节省了服务器流量, 又提升了资源加载的速度, 一举两得~

减少网络请求

使用雪碧图(用Photoshop将多个icon拼接到一张图上)

将多个js文件合并压缩为单个js文件(使用Webpack,或在线工具)

减少图片尺寸

可以使用PP鸭一键压缩, 具体介绍: PP鸭为你的图片瘦瘦瘦身 (支持快速压缩jpg, png, gif三种格式)

将图片保存为渐进式jpg

将图片保存为渐进式jpg后, 图片在浏览器显示时, 可以由模糊到清晰渐进式加载, 提升用户体验

将javascript脚本放到html的底部

HTML文件是从上往下渲染的, 如果js脚本有大量耗时操作, js执行期间, 用户是不能看到页面的

mdn的解释链接: https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics

一般我们会把css样式文件放在html的头部, javascript脚本文件放在页面底部, 但什么事情都有特例, 比如bootstrap的部分组件依赖jquery,也就是jquery必须在bootstrap之前引入, 如果我们要在页面头部引入bootstrp样式的话, 那jquery也必须放到了页面的头部!

微信关注我们

原文链接：https://yq.aliyun.com/articles/632991

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

XLua热更新用法全流程总结（所有容易出问题的点）

Xlua热更新流程总结本文提供全流程，中文翻译。 Chinar 坚持将简单的生活方式，带给世人！（拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例） Chinar —— 心分享、心创新！记录 Xlua 完成热更新流程为新手节省宝贵的时间，避免采坑！ Chinar 教程效果： 1 Description —— 描述 2 Xlua Import and Open Hotfix —— Xlua导入项目并且开启热更新 3 Generate and Inject Scripts —— 生成与注入脚本文件 4 Custom LuaLoader —— 自定义Loader 5 Before the LuaEnv.Dispose —— 释放Lua环境之前 6 private Variable —— 私有变量支持 May Be —— 搞开发，总有一天要做的事！全文高清图片，点击即可放大观看 (很多人竟然不知道) 1 Description —— 描述 Xlua 是腾讯出品的热更新方案由于其开源，且热更新方案简单易用，便于开发者对代码进行维护与修改，而得到广泛认可这里 Chinar...

2018-07-20

686

1、JS 正则 (https://www.cnblogs.com/moqing/archive/2016/07/13/5665126.html) (https://www.cnblogs.com/wupeiqi/archive/2016/07/13/5602773.html) test - 判断字符串是否符合规定的正则正则表达式写法: rep = /\d+/; /\d+/ rep.test("dsfdsjkh1243824fdsfdskjg") true rep.test("dsfdsjkhfdsfdskjg") false 在浏览器打开调试工具F12如下图: p3a1.png p1.png exec - 获取匹配的数据方法: image.png image.png JavaScript全局匹配:(var pattern = /\bJava\w*\b/g;)正则后加g text="JavaScript is more fun than Java or JavaBeans!" "JavaScript is more fun than Java or JavaBeans!" var pa...

2018-07-20

612

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。