优化浏览器默认scroll样式小技巧】的更多相关文章

一个最简单的页面: <!DOCTYPE html> <html> <head> <title>优化scroll</title> <meta charset="utf-8"> <style type="text/css"> body{ width:2000px; height: 2000px; margin:0; padding:0; } </style> </hea…
1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden; white-space:nowrap; text-overflow:ellipsis; 3.使用 line-height 垂直居中 line-height:24px; 4.清除容器浮动 #main {    overflow:hidden;} 5.不让链接折行 a {    white-spac…
前言 在前端日常开发过程中,if else判断语句使用的次数应该是比较频繁的了,一些较为复杂的场景,可能会用到很多判断,在某个代码块使用很多if else时,代码会显得较为冗余,阅读起来不够清晰. 除了if else,在开发过程中,还经常使用 逻辑运算符 && || 以及三木运算符? : 等. if else 基本使用 let name = "zhangsan"; if (name === "zhangsan") { console.log(&quo…
在之前工作的地方,我们一直使用webpck去构建.但是,经过长达四年的更新迭代,每个人都在同一个项目中做了不同的操作和更新,这导致我们生产构建时间达到了惊人的一分半,watch模式的rebuild也达到了14秒之久. 这导致你每次保存代码都需要等待漫长的14秒之久. 有几个小技巧可以是构建时间从一分半骤降至20秒,rebuild骤降到1秒左右. smp 在此之前,我们需要有一个量化的指标证明我们做的是有意义的.这时候 speed-measure-webpack-plugin就派上用场.它可以测量…
前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式   比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决   注:经测试,目前只支持webkit内核的浏览器,比如,谷歌,Safari,edge,360安全和360极速浏览器的极速模式,火狐,IE,opera等不支持 Demo <html> <head> <meta charset="utf-8" /> <title>…
说明: 无意看到一篇小短文,猜测作者应该是一个图形学领域的程序员或专家,介绍了在光线(射线)追踪程序中是如何优化C/C++代码的.倒也有一些参考意义,当然有的地方我并不赞同或者说我也不完全理解,原文在此,我的粗糙翻译如下: 1. 牢记Ahmdal定律 funccost表示是函数func的运行时间百分比,funcspeedup是你优化后函数的运行系数: 所以,如果函数TriangleIntersect()占用40%的运行时间,而在你优化后使它运行快了两倍,那么你的程序运行能够快了25%: 这意味着…
水平居中设置-定宽块状元素 当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素.这一小节我们先来讲一讲定宽块状元素. 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的.我们来看个例子就是设置 div 这个块状元素水平居中: html代码: <body> <div>我是定宽块状元素,哈哈,我要水平居中显示.</div> </body> css代码…
源:http://www.cnblogs.com/lizhenghn/p/3969531.html 说明: 无意看到一篇小短文,猜测作者应该是一个图形学领域的程序员或专家,介绍了在光线(射线)追踪程序中是如何优化C/C++代码的.倒也有一些参考意义,当然有的地方我并不赞同或者说我也不完全理解,原文在此,我的粗糙翻译如下: 1. 牢记Ahmdal定律 funccost表示是函数func的运行时间百分比,funcspeedup是你优化后函数的运行系数: 所以,如果函数TriangleIntersec…
最近重新用起了ubuntu kylin,然后又碰到之前让我感到有些难受的一个小问题:用chrome浏览部分网页时,一部分粗体字十分难看,就像是宋体直接加粗那样. 之前就觉得这样看起来很难受,但是找到的解决方法不是特别好:比如删除这个难看的字体(字体虽然难看,有时仍然需要):修改字体配置文件中字体的优先级或重映射一些字体(问题只发生在chrome上,修改之后却不止影响到chrome). 然后就想要找找有没有更好的办法,一开始发现了可以修改-/.config/google-chrome/Defaul…
每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整齐.不同浏览器甚至同一浏览器不同版本的默认样式是不同的.这才带来了很多的坑,让大家用cssreset去填.. 一.浏览器默认样式 了解各浏览器的默认样式能让我们对每条Reset规则的写法做到心中有数,对我们了解浏览器的差异,写各浏览器兼容的代码也有很大帮助. 所以先看看浏览器默认样式长什么样: FF…
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法. 拿字体来说,各个浏览器默认的字体种类.字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此.所以我们需要统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率. 样…
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法. 拿字体来说,各个浏览器默认的字体种类.字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此.所以我们需要统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率. 样…
1.清除浮动 浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼容性最好的一种是....// 清除浮动 .clearfix{ zoom: 1; } .clearfix:after{ display: block; content: ''; clear: both; } 2.垂直水平居中 在css的世界里水平居中比垂直居中来的简单一些,经过了多年的演化,依然没有好的方式来让元素垂直居中(各种方式各有优缺点,但都不能达到兼容性好,破坏力小的目标),以下…
说到PHP代码的优化,PHP开发的小技巧我想很多人都有自己的一套,下面分享一些小技巧,希望对大家有所帮助. 1.循环内部不要声明变量,尤其是对象这样的变量. 2.foreach效率更高,尽量用foreach代替while和for循环. 3.循环里别用函数      for($x=0; $x < count($array); $x)      //count()函数在外面先计算 4.用i+=1代替i=i+1.符合c/c++的习惯,效率还高. 5.优化Select SQL语句,在可能的情况下尽量少的…
浏览器默认标签样式总结及css初始化程序   html中的大部分的标签都有一些糟糕的样式,有的是标签天然自带的,有的是浏览器默认设置的,我们在写网页时,这些默认的样式就会时不时的跳出来捣一下乱,搞得我们很是无奈.所以成手在写css样式时,一般都会在开头写一段初始化程序,来去掉这些默认样式,比如最简单的方法就是使用*{margin:0:padding:0:}.但是通常我们很少使用这种方法,因为通配符*的效率极低.那我们应该使用哪种方法呢,下面博主就来为大家介绍一些常用的方法. 一.浏览器默认样式总…
html中的大部分的标签都有一些糟糕的样式,有的是标签天然自带的,有的是浏览器默认设置的,我们在写网页时,这些默认的样式就会时不时的跳出来捣一下乱,搞得我们很是无奈.所以成手在写css样式时,一般都会在开头写一段初始化程序,来去掉这些默认样式,比如最简单的方法就是使用*{margin:0:padding:0:}.但是通常我们很少使用这种方法,因为通配符*的效率极低.那我们应该使用哪种方法呢,下面博主就来为大家介绍一些常用的方法. 一.浏览器默认样式总结 在介绍初始化程序之前,我们先了解一下都有那…
一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN缓存 通过构建工具Gulp,可以在开发的时候就将合并压缩的事情一起做掉. 之所以要做合并压缩是因为:HTTP 1.x不允许一个连接上的多个响应数据交错到达(多路复用),因而一个响应必须完全返回后,下一个响应才会开始传输. 也就是说即使客户端同时发送了两个请求,而且CSS资源先准备就绪,服务器也会先发…
个人总结:读完这篇文章需要20分钟,这篇文章主要讲解了浏览器中引擎的渲染机制. DOMtree       ----|   |---->  RenderTree CSSOMtree  ----| 这是 JavaScript 工作原理的第十一章. 迄今为止,之前的 JavaScript 工作原理系列文章集中于关注 JavaScript 语言本身的功能,在浏览器中的执行情况,如何优化等等. 然而,当在构建网络应用的时候,不仅仅只是编写自己运行的 JavaScript 代码.所编写的 JavaScri…
写在前面 首先纠正一个易错概念.div并非生来就是块元素,而是每个浏览器都有一套默认的css样式(优先级最低),默认样式里会把div设置成display: block;还有margin,padding等.这就是不同浏览器初始化样式不同的原因.也是为什么要做css reset的原因. 注:chrome等可以在调试工具里看到默认样式,是不可修改的,置灰的,如下图.各浏览器默认样式详情请参考<浏览器默认样式对比表>. 1.浏览器默认样式 这里无需过多赘述,最直观的就是上表,给大家几个地址: 1.浏览…
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十一章. 迄今为止,之前的 JavaScript 工作原理系列文章集中于关注 JavaScript 语言本身的功能,在浏览器中的执行情况,如何优化等等. 然而,当在构建网络应用的时候,不仅仅只是编写自己运行的 JavaScript 代码.所编写的 JavaScript 代码与运行环境息息相关.理解 JavaSc…
IT咨询顾问:一次吐血的项目救火   年后的一个合作公司上线了一个子业务系统,对接公司内部的单点系统.我收到该公司的技术咨询:项目启动后没有规律的突然无法登录了,重新启动后,登录一断时间后又无法重新登录,对方技术人员一头雾水不知道什么原因,后台日志没有任何错误信息.我临危受命,赶往该项目进行扑火工作,其实本来2天都可以解决的问题,让我花了5天解决.具体原因待我一一解释. 1,未掌握log日志的精髓 log日志的debug,info,error信息乱打,该用debug的用info,该用info的用…
CSS布局说到布局,就不得不提布局的核心<div>标签,它与其它标签一样,也是一个XHTML所支持的标签,专门用于布局设计的容器标签.在css布局方式中,div 是这种布局方式的核心对象,我们的页面排版不再依赖于表格, 仅从div的使用上说,做一个简单的布局只需要两样东西:div 与 css.因此我们称这种 布局方式为 div + css 布局. 语义元素 <header>.<nav>.<section>.<article>.<aside&…
对mysql优化时一个综合性的技术,主要包括 a: 表的设计合理化(符合3NF) b: 添加适当索引(index) [四种: 普通索引.主键索引.唯一索引unique.全文索引] c: 分表技术(水平分割.垂直分割) d: 读写[写: update/delete/add]分离 e: 存储过程 [模块化编程,可以提高速度] f: 对mysql配置优化 [配置最大并发数my.ini, 调整缓存大小 ] g: mysql服务器硬件升级 h: 定时的去清除不需要的数据,定时进行碎片整理(MyISAM)…
一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class="txtCenter">我想要在父容器中水平居中显示.</div></body> css代码:<style> .txtCenter{ text-align:center; }</style>>>2.块状元素(定宽)通过设置&quo…
看到这标题,是不是有点逆天的感觉,总感觉好狂拽炫酷,耳边隐隐约约传来一个声音:你这么叼,你咋不上天呢! ~~ 额,好吧! 话入正题,我为什么会提出这么一个问题呢? 阻止浏览器默认行为,真的能阻止吗?那到底是什么样的方案,我会有这样的质疑? 那,就是它了,别看,就是你: //阻止浏览器默认行为触发的通用方法 function stopDefault(e){ //防止浏览器默认行为(W3C) if(e && e.preventDefault){ e.preventDefault(); } //…
前言 sql优化是一个大家都比较关注的热门话题,无论你在面试,还是工作中,都很有可能会遇到. 如果某天你负责的某个线上接口,出现了性能问题,需要做优化.那么你首先想到的很有可能是优化sql语句,因为它的改造成本相对于代码来说也要小得多. 那么,如何优化sql语句呢? 这篇文章从15个方面,分享了sql优化的一些小技巧,希望对你有所帮助. 1 避免使用select * 很多时候,我们写sql语句时,为了方便,喜欢直接使用select *,一次性查出表中所有列的数据. 反例: select * fr…
OpenFeign 是 Spring 官方推出的一种声明式服务调用和负载均衡组件.它的出现就是为了替代已经进入停更维护状态的 Feign(Netflix Feign),同时它也是 Spring 官方的顶级开源项目.我们在日常的开发中使用它的频率也很高,而 OpenFeign 有一些实用的小技巧,配置之后可以让 OpenFeign 更好的运行,所以本文我们就来盘点一下(也欢迎各位老铁评论区留言补充). 1.超时优化 OpenFeign 底层内置了 Ribbon 框架,并且使用了 Ribbon 的请…
壹 ❀ 引 在过去的一段时间,我一直围绕项目中体验不好或者无效渲染较为严重的组件做性能优化,多少积累了一些经验所以想着整理成一片文章,下图就是优化后的一个组件,可以对比优化前一次切换与优化后多次切换的渲染颜色深度与按钮的切换速度: 关于减少组件无效渲染,与其说是提几点建议,不如说是在优化过程中所记录的一些不规范的写法,能写出更好的代码总是更棒的,也希望这几点建议能对大家能有些许帮助.当然,以下建议不管class组件还是hooks中其实都会犯,所以都有参考意义,那么本文开始. 贰 ❀ 减少无效渲染…
无意间发现了一个小技巧.如下图所示,可以发现UGUI的Image组件的RaycastTarget勾选以后会消耗一些效率,为了节省效率就不要勾选它了,不仅Image组件Text组件也有这样的问题. 一般UI里也就是按钮才需要接收响应事件,那么大部分image和text是是不需要开RaycastTarget的. 但是问题就来了,Unity默认在hierarchy窗口Create->UI->Image .Text的时候就会自动帮我们勾选上RaycastTarget, 一个复杂点的界面至少也300+个…
http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="password"的输入框赋默认值   直接给 input type="password"的输入框赋值不行,由于安全因素,不允许对密码框赋默认值,只能通过键盘的方式输入值.而又要在密码框显示*密码,换个思路使用简单的js脚本即可实现这个效果. <input type="pa…