前端项目性能优化,在线css优化工具

web前端优化系列优化HTML/css可以解决的问题是，要在JS1.1导航中使用高亮1.2鼠标显示1.3自定义radio/checkbox样式1.4，需要根据数量显示不同的样式3: JS使用策略模式优化

这一系列的文章在《高效前端-Web高效编程与优化实践》这本书里被整理、记录、扩展。 这里只记录了我现在没有使用或者不知道的知识点。 大家有需要的话，请去看这整本书。 也有助于前端的进阶。

用优化HTML/CSS可以解决的问题不用JS

在几个案例中介绍

1.1导航高亮这种情况下，不是通过放置普通鼠标来高亮，而是通过显示的页面来高亮响应的要素。

正常时

nav li { opacity:0.5 }

如果选中，导航不透明度将读作1。

为了实验这个目的，首先用body在不同的页面上添加不同的类，识别不同的页面。

li也需要类别标记

因此，如果当前页面是home，则会启用名为body.home nav li.home的规则，并突出显示home导航

由JS控制时，在加载脚本之前当前页面不会突出显示，而是在加载脚本时突然突出显示。

！ - home.html---- body class=' home '/body！ - buy.html-- bodyclass=' buy '/bodyliclass=' home ' home ' home/Lili class=' buy ' buy/Li body.homenavli.home，buy

漂浮鼠标的场景的实现一般情况下，如果不以子菜单、信息框等隐藏对象作为hover目标的子要素或相邻要素，CSS控制就不容易了

代码1-2-1菜单menu紧邻用户：

li class='user '用户/lili class='menu' ul li帐户设定/li li注销/li /ul/li！ -- style代码--style/*.menu { display : none； (导航Hover时，请与相邻选择器一起查看并注意。 这里使用的是相邻选择器。 menu的位置在absolute中为*/. user : hover.menu { display : list-item }.menu { display 3360 list-item }/style 3358 ww .的位置

但是，在这里可以在Menu上再画一个透明的领域，可以用before/after疑似类别通过absolute定位来实现

ul.menu : before { content : '，position:absolute； left:0； top:-20px； width:100%； height:20px； }如果同时写入}http://www.Sina.com/CSS的hover和mouse事件，并使用mouse控件隐藏它们，双重效果会怎么样？

在mouse事件中hover时，请参阅display:block的style，问题：

也就是说，只要有一次hover，CSS的代码就没有关系。问题：

1.3自定义radio/checkbox样式http://www.Sina.com/CSS3提供的伪类：如果radio/checkbox通过checked处于选中状态，则此伪类有效，因此选择代码列表如下所示

1-3实现自定义收音机、多选按钮样式

syle input [ type=checkbox ] { display : none； }/*如果未选择checkbox的样式*/.checkbox {}/*，则为样式*/input [ type=checkbox ] : checked.checkbox { }/style 标签上的内容是为了在单击span时可以改变checkbox的状态。 最后更改选择状态的样式即可--- label input type=' checkbox ' span class=' checkbox '/span/label 1.4需要根据个数显示不同的样式

例如有1~3个item显示在同一行，但item个数不一定，这时可以用CSS3轻松解决

1-4 借助nth-last-child实现个数区分

<style>li {width:100%;}li:first-child:nth-last-child(2),li:first-child:nth-last-child(2) ~ li {width:50%;}li:first-child:nth-last-child(3),li:first-child:nth-last-child(3) ~ li {width:33%;}</style><ul><li>1</li><li>2</li><li>3</li></ul>

借助一个nth-last-of-type有时非常好用，特别是需要实现前向选择器。
如果有两个terms，想要隐藏第二个，只显示第二个，可以这样做

<style> .terms-box + .terms-box {display:none}</style><div class="terms-box"> </div><div class="terms-box"> </div>

反过来的话可以这样实现
当它是第一个元素，兵器它是倒数第二个的时候就隐藏。这样就实现了有两个term的时候隐藏第一个，只有一个的时候不隐藏

.terms-box:nth-of-type(1):nth-last-of-type(2) {display:none;} 其他

当要实现一个hover的时候显示提示信息，如果用title属性觉得效果太弱，但是又不想用JS写，这里可以用CSS3的attr属性实现，将想要展示的提示文案放单一个属性里面

<p> hello,<span data-title="Fronted Development">FED</span></p>span[data-tilte] {position:relative;}span[data-title]:hover:before{content:attr(data-title);position:absolute;top:-50%;left:50%;transform:translateX(-50%);white-space:nowrap;} css画三角形 .triagnle {border-left: 50px solid transparent;border-right: 50px soli transparent;/*border-top: 50px solid #666;*//*角度控制，可以控制底的宽度即可*/border-bottom: 50px solid #999; width:0;height:0;background-color:#ccc;} 优化2：尽可能使用伪元素

伪元素一般用于画图，特别是那种无关紧要的分隔线/点之类的小元素。
伪元素是一个元素的子元素，并且是行内元素，主要特点是无法用JS获取这个伪元素， 即可以增加视觉上的效果，但不会增加JS查DOM的负担，它对JS是透明的。

例：使用伪元素画分割线 .or {text-align:center;}.or:after,.or:before{content:"";/*注意把一个元素absolute定位后会强制把它变为块级元素*/position:absolute;top:24px;height:1px;background-color:#ccc;width:200px;}.or:after{right:-5px;}.or:before{left:0;}

这里把所有css的伪类整理出来

使用JS无法完全获取到伪元素?

并不是完全不行，getComputedStyle就是一个特例，因为它可以传第二个参数，以表示伪元素。

var style = window.getComputedStle(document.querySelector('.content'),':before')var content = style.getPropertyValue("content"); 优化3: JS使用策略模式

当某个组件或UI需要在多个地方使用，但 除里面的内容不同，其他都相同，可以使用策略模式，将里面不同的内容当作一个一个策略。
首先定义不同策略类型（这里就借用书中的例子了）
var popType =["register","favHouse","saveSearch"]
然后每种策略都有对应的内容

Data.text.pop = {register:{title:",,,,,",subTitle:"...."},favHouse:{...},saveSearch:{...}}

渲染时可以这样用

function showPop(popType){Mustache.render(popTemplate,Data.text.pop[popType]);}

回调形式

var popCallback = {favHouse:function(){...},saveSearch:function(){...}}