十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
HTML
1.网页三要素title(标题)、keywords(关键字)、description(描述)
2.一个页面h2标签只能出现一次
成都创新互联公司-云计算及IDC服务提供商,涵盖公有云、IDC机房租用、成都服务器托管、等保安全、私有云建设等企业级互联网基础服务,沟通电话:028-86922220
CSS
1.命名与备注
命名是提高代码可读性的第一步,也是及其重要的一步。很多人都有这样的体会:命名是写代码中最让程序员头疼的事情之一,尤其是对母语非英语的开发人员来说,要找一个合适贴切的名字并不容易。提高自己命名的能力,可以多看看别人的代码。下面是CSS中的一些命名相关的建议:头:header 内容:content/container 尾:footer 导航:nav侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left right cente登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download子导航:subnav 菜单menu子菜 submenu 搜索:search 友情链接:friendlink 页脚:footer版权:copyright 滚动:scroll 内容:content 标签:tags 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 加入:joinus 指南:guide服务:service 注册:regsiter 状态:status 投票:vote 合作伙伴:partner 导航:nav 主导航:mainnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu子菜单:submenu 标题: title 摘要: summary。
2.提取重复样式
这一个方法很容易理解,简单说就是提取相同的样式成为一个单独的类再引用,这样不仅可以精简CSS文件大小,而且CSS代码变少,更易于重用和维护。
3.书写顺序
这个书写顺序指的是各个样式的书写顺序,下面是推荐的CSS书写顺序(1)位置属性(position, top, right, z-index, display, float等)(2)大小(width, height, padding, margin)(3)文字系列(font, line-height, letter-spacing, color- text-align等)(4)背景(background, border等)(5)其他(animation, transition等),reflow和repaint都是耗费浏览器性能的操作,这两者尤以reflow为甚;因为每次reflow,浏览器都要重新计算每个元素的形状和位置。由于reflow和repaint都是非常消耗性能的,我们的浏览器为此做了一些优化。浏览器会将reflow和repaint的操作积攒一批,然后做一次reflow。但是有些时候,你的代码会强制浏览器做多次reflow。
4.标准化各种浏览器前缀
带浏览器前缀的在前,标准属性在后。
5属性值为浮动小数0.,可以省略之前的0
6.如果只有一项值,最好不要应用复合属性。以免带来不必要的麻烦。
比如 .sample1 {font-weight: bold} ,如果写成 .sample1 {font: bold} 就没任何作用了。再举个列子,比如 .sampl2 {background-color: #CCCCCC; } ,如果写成 .sampl2 {background: #CCCCCC; } ,浏览器虽然能正确解释,但这不是规范的写法,因为这样会导致浏览器多次计算其他无用的属性。
7.减少文件的大小
比如属性值简写#FFFFFF可以简写为#FFF,#BB44DD可以简写为#B4D
8.多用精灵图
一个网页上有很多的小图片,比如有20个,如果我们都请求一遍,就需要使用20个http请求,这是很耗时的,但是我们可以把这些图片合成一个大的图片,然后将之作为 background-img插入进去, 根据不同的图片设置不同的background-postion即可,虽然在不同的位置需要请求很多的图片,但是,实际上我们查看网络只会请求一次
9.精简页面的样式文件,去掉不用的样式
很多时候,我们会把所有的样式文件合并成一个文件,但是这样有一个问题:很多其他页面的CSS同时引用到当前页面中,而当前页面并没有用到它们,这种情况会造成两个问题:(1)样式文件偏大,影响加载速度 (2)浏览器会进行多余的样式匹配,影响渲染时间。正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。PS:合并成一个文件有一个优点:样式文件会被浏览器缓存,进入到其他页面样式文件不用再去下载。这条规则应根据场景来区别对待,如果是大项目,应该合并成不同的样式文件,如果是简单的项目,建议合并成一个文件即可。如果无法确认项目规模,建议分开成不同的样式文件,日后要合并也比较方便。
10.将 css放在 head中
如果将 css放在其他地方比如 body中,则浏览器有可能还未下载和解析到 css就已经开始渲染页面了,这就导致页面由无 css状态跳转到 css状态,用户体验比较糟糕。除此之外,有些浏览器会在 CSS下载完成后才开始渲染页面,如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。
11.避免使用css @import
这样做会导致css无法并行下载,因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后,浏览器才会知道还有另外一个css需要下载,这时才去下载,然后下载后开始解析、构建render tree等一系列操作。 浏览器会在页面所有css下载并解析完成后才会开始渲染页面,因此css @import引起的css解析延迟会加长页面留白期。 所以,要尽量避免使用css @import而尽量采用link标签的方式引入。
12.避免使用复杂的选择器,层级越少越好
有时候项目的模块越来越多,功能越来越复杂,我们写的CSS选择器会内套多层,越来越复杂。建议选择器的嵌套最好不要超过三层
13.避免让选择符看起来像正则表达式
css添加了一些类似~=的复杂属性,也不是所有浏览器都支持,需谨慎使用
14.正确使用display的属性
由于display的作用,某些组合样式会无效,徒增样式体积的同时也影响性能
display:inline;后不应再使用width、height、margin、padding、float。
display:inline-block后不应再使用float。
display:block后不应再使用vertical-align。
display:table后不应再使用margin、left。
15.利用继承减少代码量
我们知道有一部分CSS代码是可以继承的,如果父元素已经设置了该样式,子元素就不需要去设置该样式,这个也是提高性能的行之有效的方法。常见的可以继承的属性比如:Color、Font 、Letter-spacing、Line-height 、List-style 、Text-align 、Text-indent 、Text-transform 、White-space 、Word-spacing 等等。不可继承的比如:position,display,float等。
16.不滥用浮动
虽然浮动不可避免,但不可否认很对css bug是由浮动引起的,css Lint一旦检测出样式文件中有超过10次的浮动便会提示警告
17.不滥用web字体
对于中文网站来说,Web Fonts可能很陌生,但是国外却很流行,Web Fonts通常体积庞大,而且一些浏览器在下载Web Fonts时会阻塞页面渲染,损伤性能。
18.不重复定义h2~h7元素,不给h2~h7元素定义过多的样式
19.不声明过多的font-size
20.不在选择符中使用ID标识符
21.值为0时不需要任何单位
22.移除空的规则
23.不要在ID选择器前面进行嵌套,ID本来就是唯一的而且人家权值那么大,前方嵌套完全是浪费性能。
24.减少通配符*或者类似[hidden="true"]这类选择器的使用,挨个查找所有...这性能能好吗?当然重置样式这些必须的东西是不能少的。
25.有些人喜欢在类名前面加上标签名:p.ty_p 来进行更加精确的定位,但是这样往往效率更差,类名应该在全局范围除非公用是唯一的,所以这种做法是应该便面的。
26.避免使用 Filter:
IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“冻结”浏览器,停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素(使用到该 filter 样式)渲染时都会被浏览器分析一次,而不是像一般的背景图片渲染模式:使用过该背景图片的所有元素都是被浏览器一次性渲染的。
针对这种情况,最好的解决办法就是使用 PNG8。
JS
1.减少DOM操作
在脚本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection类型的集合,在平时使用的时候大多将它作为数组来使用,因为它有 length属性,也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多,原因是这个集合并不是一个静态的结果,它表示的仅仅是一个特定的查询,每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的 “访问集合” 包括读取集合的 length属性、访问集合中的元素。因此,当你需要遍历 HTML Collection的时候,尽量将它转为数组后再访问,以提高性能。即使不转换为数组,也请尽可能少的访问它,例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
2.减少http请求
一方面,恰当的缓存设置可以大大的减少 HTTP请求,能缓存越多越好,能缓存越久越好。例如,很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。另一方面,Lazy Load Images,能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言,在页面刚加载的时候可以只加载第一屏,当用户继续往后滚屏的时候才加载后续的图片。这样一来,假如用户只对第一屏的内容感兴趣时,那剩余的图片请求就都节省了
3.js脚本写在body标签的最下方
浏览器是可以并发请求的,这一特点使得其能够更快的加载资源,然而外链脚本在加载时却会阻塞其他资源,例如在脚本加载完成之前,它后面的图片、样式以及其他脚本都处于阻塞状态,直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置,则会影响整个页面的加载速度从而影响用户体验。
4.for循环最佳写法(把length提出来或者预存出来,用一个内存地址变量指引数值来替代迭代器,这样写的好处是降低时间复杂度)
var divs = document.getElementsByITagName('div')
for(var i=0,len = divs.length;i } 4.实现元素移动的动画过程有三中方法 定位 、 margin 、translate ,但是transform里面的translate 是最佳选择,它比前两者的效率高几十倍,因为它不会 5.能用css实现的效果就不要用js
for(var i = 0 , div ; div = divs[ i++ ] ; ){
dosomething(div)
}
触发整个页面的重排,从而大大降低了页面渲染时间
网站题目:代码性能优化
文章源于:http://6mz.cn/article/jjdpes.html