Skip to content

有关css hack与各浏览器前缀,前端性能优化之旅

css hack


IE6浏览器下 css hack: 属性明前加下划线, 如: _color:#666

IE7浏览器下 css hack: 属性名前加 *,如: *clolor:#666

IE8浏览器下(最新的opera浏览器也支持) css hack: 属性名前加 \0,如: clolor:#666\0

IE9浏览器下 css hack: 属性名前加 \9,如: clolor:#666\9

总结:firefox写在最前面,IE7写在中间,IE6写在最后;IE6能识别 *,不能识别!important;IE7能识别 *!importantFF能识别!important_, 不能识别 *

浏览器前缀

  • IE浏览器:属性名前添加-ms-,如: -ms-tranform:rotate(10deg)
  • Firefox浏览器:属性名前加 -moz-,如: -moz-tranform:rotate(10deg)
  • safari和chrome浏览器: 属性名前加 -webkit-,如: -webkit-tranform:rotate(10deg)
  • opera浏览器:属性名前加 -o-,如: -o-tranform:rotate(10deg)

前端性能优化之旅

● 1.缓存
	○ 1.1本地储存(cookie, localStorage, sessionStorage, indexedDB)
	○ 1.2内存缓存
	○ 1.3 Cache API
	○ 1.4 HTTP缓存(强缓存:Expires/Cache-Control, 协商缓存: Last-Modified/If-Modified-Since/Etag/If-None-Match)
	○ 1.5 Push Cache
● 2.发送请求:
	○ 2.1避免不必要的重定向(301、302)
	○ 2.2 DNS预解析
	○ 2.3预先建立连接
	○ 2.4使用CDN
● 3.服务端响应
	○ 3.1使用流(保存/撤销)
	○ 3.2业务接口内部聚合
	○ 3.3避免代码问题
● 4.页面解析与处理
	○ 4.1资源位置顺序
	○ 4.2合理使用defer/async脚本
	○ 4.3关键渲染路径
● 5.页面静态资源
	○ 5.1 Javascript
		● 5.1.1减少不必要的请求 (code split/代码合并)
		● 5.1.2减少包体大小(代码压缩,Tree Shaking,合理使用polyfill)
		● 5.1.3加快解析与执行(初始加载,删除不必要代码;避免long task;考虑是否需要框架;针对代码的编译优化)
		● 5.1.4打包导致的缓存失效(hash module id; runtime chunk split; 使用records)
	○ 5.2 CSS
		● 5.2.1使用关键CSS(内联;骨架屏)
		● 5.2.2优化资源请求(按需加载;合并文件;请求的优先级排序;慎用@import;谨慎对待Javascript脚本的位置)
		● 5.2.3减少包体积(压缩;选择合适的兼容性polyfill支持)
		● 5.2.4加快解析与渲染树构建(简化选择器;避免使用昂贵的属性;使用先进的布局方式)
		● 5.2.5利用缓存 webpack MiniCssExtractPlugin
	○ 5.3图片
		● 5.3.1优化请求(雪碧图;懒加载;base64内联)
		● 5.3.2减少图片大小(使用合适的图片格式,使用gpj,webP,SVG,video代替gif;适当降低图片质量;删除图片沉余信息)
		● 5.3.3利用缓存
	○ 5.4字体
		● 5.4.1使用font-display实现fout
		● 5.4.2内联字体
		● 5.4.3使用css font loging API
		● 5.4.4FoFT(flash of Faux Text)
	○ 5.5视频
		● 5.5.1使用合适的视频格式
		● 5.5.2进行视频压缩
		● 5.5.3移除不必要的音轨信息
		● 5.5.4使用“流”
		● 5.5.5移除页面中不必要的视频
● 6.运行时
	○ 6.1注意强制同步布局(避免代码出现在不合适的位置;批量化操作)
	○ 6.2长列表优化(实现Vir tual List机制;原生Virtual Scroller)
	○ 6.3避免Javascript运行占用时间过长(任务分解;延迟执行;并行计算)
	○ 6.4善用composite机制
	○ 6.5滚动的性能优化
	○ 6.6Passive event listeners
● 7.预加载
	○ 7.1预加载技术(Resource Hints: prefetch/prerender/preload;基于JS实现预加载)
	○ 7.2视频预加载技术(preload属性;link preload;自定义buffer)
	○ 7.3预加载策略(quicklink;guess.js)