关于网站性能的深入研究_html/css_WEB-ITnose
程序员文章站
2022-05-31 09:53:25
...
网页自动化测试工具iMacros试用下载
1、基本网络优化
CSS和JS的串联和压缩:
- 文件串联: grunt-contrib-concat 或gulp-concat
- JavaScript的压缩/缩小: grunt-contrib-uglify 或gulp-uglify
- CSS压缩: grunt-contrib-cssmin 或gulp-cssmin
图像无损压缩:
- 工作流插件: grunt-contrib-imagemin 或gulp-imagemin
- Mac桌面应用程序: ImageOptim
- web应用程序: TinyPNG
利用浏览器缓存:对static assets设置合适的缓存时间,大大提高加载页面的速度。
启用gzip压缩设置:如果您的服务器和客户端支持gzip压缩,,可以节约90%的响应时间。
2.浏览器兼容性快速修复
怎样很好的支持旧版本的浏览器?这里有一些开源的解决方案,可以解决一些常见的旧版本浏览器问题。
- Selectivizr :IE9以下的版本对CSS3的支持有限,因此大多数的新版CSS selectors不可以没有polyfill。
- Respond.js :IE8以下的版本不支持CSS媒体查询。在样式表加载之后加载这个,长期忍受IE这一缺点的用户会感激你的。
- Webshim : 传统的浏览器polyfill library允许开发人员动态地为常用HTML5功能加载polyfill,包括form、geolocation和Canvas。
3.快速修复收集和平板
这里有几个很棒的开源JS项目,有助于提升您的移动应用程序的性能。
- FastClick :消除用户点击屏幕之后事件触发的时间延迟。尤其适用于ios,而Android版Chrome可以使用user-scalable=no来消除,IE11+可以使用touch-action: manipulation,移动Safari浏览器目前还没有这样的设置。
- Offline :当处于脱机状态时通知您的用户,并在重新上线之后存储用户的行为。
4.JavaScript的模块捆绑和软件包管理
使用bundler组织您的客户端代码,例如Webpack、Browserify、RequireJS或JSPM with System.js。尤其当您依赖很多第三方时,在非捆绑本地开发模式和生产开发模式下都可以运行。
Bundlers可以减少JS请求blocking、压缩代码,并只加载目前正在页面上使用的脚本。
5. usemin
Usemin作为工作流程的一部分介绍,自动替换参考模板中没有进行优化的设置。usemin可以轻松整合串联、压缩和文件提速。
原文翻译自: dzone
转载请注明: evget
慧都科技,十三年行业经验,专注提供软件技术整体解决方案,致力打造全球最大的软件技术一站式服务平台。
慧都控件|帮助企业打造成功软件
慧都提供全球优质控件产品/控件培训/项目定制开发/方案咨询/现场实施/项目外包/专业测试
微信ID:EVGET_Huidu
企业QQ:800018081|电话:023-66090381
扫码关注微信
上一篇: 知网系列caj nk kdh系列文档 服务器端转化为flash
下一篇: testaa
推荐阅读
-
关于CSS+div两列布局的问题_html/css_WEB-ITnose
-
关于微信缓存、浏览器缓存等各种顽固缓存的解决方法_html/css_WEB-ITnose
-
经典网页设计:20个与众不同的国外 HTML5 网站_html/css_WEB-ITnose
-
精品欣赏:30个养眼的精美自然风光的网站设计《上篇》_html/css_WEB-ITnose
-
请教关于bootstrap对话框的问题_html/css_WEB-ITnose
-
一个已经完成的PC网站,如何快速改造,让它能适应平板、手机等不同分辨率?_html/css_WEB-ITnose
-
根据一个旅游网站的psd素材还原的静态页面_html/css_WEB-ITnose
-
关于制作公司网站_html/css_WEB-ITnose
-
关于IE8下css的background属性不起作用的解决办法_html/css_WEB-ITnose
-
关于jquery中css,addclass,sttr修改样式的效率问题?_html/css_WEB-ITnose