CSS优化+技巧

1、-webkit-font-smoothing 字体锯齿

div {
    -webkit-font-smoothing: antialiased;
}

2、css实现不换行、自动换行、强制换行

//不换行
white-space:nowrap;

//自动换行
word-wrap: break-word;
word-break: normal; 

//强制换行
word-break:break-all;

3、使用CSS transforms 或者 animations时可能会有页面闪烁的bug

-webkit-backface-visibility: hidden;

4、CSS开启硬件加速

-webkit-backface-visibility: hidden;

5、-webkit-touch-callout 禁止长按链接与图片弹出菜单

-webkit-touch-callout: none;

6、清除手机tap事件后ele时候出现的一个高亮

ele{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

7、user-select 禁止用户选中文本

div {
    user-select: none; /* Standard syntax */
}

8、contenteditable 设置element是否可编辑

<div contenteditable="true">可编辑</div>

9、图片运动过程中,图片模糊问题

transform: translate3d(0, 0, 0);

时间: 2024-10-19 12:17:42

CSS优化+技巧的相关文章

10个CSS简写/优化技巧

CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写. CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读. 下面介绍常见的CSS简写规则: 一.盒子大小 这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同. 盒子有上下左右四个方向,每个方向都有个外边距: margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4p

DIV CSS优化 CSS压缩技巧教程

DIV CSS优化 DIVCSS5为大家介绍简单的CSS优化.涉及优化内容:CSS代码优化.CSS重用优化.缩短字符.删除换行等处优化 目录 CSS样式单词简写优化 标点符号优化 删除换行 CSS重用优化 CSS代码优化简写总结 一.CSS样式属性单词代码简写优化 - TOP 1.border(CSS边框)简写: 1).4个边边框宽度为1px,颜色为#000 border-color:#000; border-style:solid; border-width:1px 可以简写为:体感音乐放松椅

你不可不知的HTML优化技巧(转)

具体内容看原文连接: 你不可不知的HTML优化技巧 http://www.cnblogs.com/powertoolsteam/p/5125229.html 何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript.图像优化.服务器配置,文件压缩或是调整CSS. 很显然HTML 已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言.HTML页面的负载也是越来越重.大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素,页面Size会更大. 如何有效的

CSS小技巧

CSS 小技巧 总结的网络上的资源,以备自己后续参考... 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框… /* 添加边框 */ .nav li { border-right: 1px

10个CSS简写技巧让你永远受用

转自:http://blog.bingo929.com/10-css-shorthand-tips.html 前言: CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化.CSS简写的最大好处就是能够显著减少CSS文件的大小,其实还有很多其他益处.臃肿而杂乱的CSS样式表会使你遇到问题是难以调试.尤其是当一个团队在进行设计的时候,你的臃肿的CSS代码会使你的团队其他成员的工作效率下降. 今天,暴风彬彬整理了一些CSS简写技巧,它们其实是CSS最常用的写法,但是太多的人使用Drea

移动端网站提升页面加载性能的优化技巧

移动端网站提升页面加载性能的优化技巧 收藏到:1时间:2015-06-17   文章来源:马海祥博客   访问次数:2501 网页性能的优化一直是网站成功的关键,越来越多的研究证明,不管是小型电商,还是大型连锁企业,即使是页面加载时间方面的细微改善,都可以带来更多的业务,更多的广告收入,更多的用户粘性和更多的客户满意度. 在过去几年,Web开发者都是基于改善硬件或者提高带宽速度来优化用户体验,但是最近几年,爆炸式的移动Web浏览器的使用打破了这个途径,低带宽,高延迟,小内存,低处理器性能的移动设

前端页面优化技巧

1.首先说说浏览器的加载流程: (1) 用户在地址栏中打开一个URL,浏览器首先会寻找该URL所在服务器,通过DNS服务器查询浏览器会获 得该URL所在网站的IP地址,然后向该地址发起请求,连接到服务器: (2) 建立连接后,向服务器发送http请求,请求对应的HTML文档: (3) 解析HTML文档,目的是知道该页面需要哪些资源以及生成DOM树:生成DOM树和获取到相应需要的 资源文件同时进行:解析HTML文档时,一旦发现一个标签,就会根据标签的要求分配对指定的资源进行下载,当DOM树生成后,

JavaScript 性能优化技巧分享

JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上下文.解析.编译.执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧,以便让更多的前端开发人员掌握这方面知识. 什么是高性能的 JavaScript 代码? 尽管目前没有高性能代码的绝对定义,但却存在一个以用户为中心的性能模型,可以用作参考:RAIL模型. 响应 如果你的应用程序能在1

JavaScript 如何工作:渲染引擎和性能优化技巧

翻译自:How JavaScript works: the rendering engine and tips to optimize its performance 这是探索 JavaScript 及其构建组件专题系列的第 11 篇.在识别和描述核心元素的过程中,我们分享了在构建 SessionStack 时使用的一些经验法则.SessionStack 是一个需要鲁棒且高性能的 JavaScript 应用程序,它帮助用户实时查看和重现它们 Web 应用程序的缺陷. 当构建 Web 应用程序时,