一.视差滚动(经过优化后的代码)

.front::before {
content: '';
position: fixed; // 代替background-attachment
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
background: url(/img/front/mm.jpg) no-repeat center center;
background-size: cover;
will-change: transform; // 创建新的渲染层
z-index: -1;
}

  

前端---css3优化的更多相关文章

  1. CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  2. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  3. 移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  4. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  5. 移动H5前端性能优化指南(转载)

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

  6. web前端性能优化指南

    web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...

  7. [好文翻译]WEB前端性能优化的14条规则

    作为一个半前端工程师,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益 ...

  8. 移动H5前端性能优化指南[转]

    移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首 ...

  9. 移动 H5(PC Web)前端性能优化指南

    原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...

随机推荐

  1. bootstrap 学习 ---css样式学习

    bootstrap 适用于响应式布局,移动设备优先的web项目 1.学习bootstrap需要引入bootstrap的css,jquery,bootstrap的js,注意:jquery文件必须在boo ...

  2. mysql远程导出

    D:\phpStudy\PHPTutorial\MySQL\bin>mysqldump -h192.168.1.1 -u用户名 -p密码 --default-character-set=utf8 ...

  3. 浮动框架iframe

    浮动框架式一种比较特别的框架,和frame比较类似.不过frame必须在frameset中才可以,而iframe不一样,首先, 他是一种内联框架,其次,他可以放在网页中的任何位置. 所以,iframe ...

  4. ReentrantLock(重入锁)的源码解析

    转自:从源码角度彻底理解ReentrantLock(重入锁)](https://www.cnblogs.com/takumicx/p/9402021.html)) 公平锁内部是FairSync,非公平 ...

  5. [LC] 295. Find Median from Data Stream

    Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...

  6. Java入门级文件下载_学习笔记

    文件下载和上一篇文件上传很像,就不多说了,传一个我写的一个下载歌曲的代码: 下面是Servlet代码: public class DownLoadServlet extends HttpServlet ...

  7. 科研伴我成长——上海交通大学ACM班学生在微软亚洲研究院的幸福实习生活

    每一年,微软亚洲研究院都会迎来一批"特殊的"实习生--他们既不是从五湖四海汇聚而来,也不是在读的硕士和博士.他们相识已久,知道对方的小秘密.小八卦,也相互敬佩.惺惺相惜--他们就是 ...

  8. res文件夹及xml资源文件详解

    目录 一.values文件:存放字符串(strings).颜色(colors).尺寸(dimens).数组(arrays).样式(styles类似于CSS文件).类型等资源 二.drawable:存放 ...

  9. 使用face_recognition进行人脸特征检测

    效果图调用face_recognition.face_landmarks()方法即可得到人脸特征点, 返回一个字典, 下图是返回的数据, 包括chin(下巴), left_eye(左眼)等.我画了两种 ...

  10. Python获取内网IP

    Python 获取本机内网IP 本文记录使用Python获取本机IP的两种方法. 通过hostname来获取本机IP import socket print(socket.gethostbyname( ...