项目：××官网改版总结经验和收获

最新推荐文章于 2023-10-24 01:08:04 发布

small-dragon

最新推荐文章于 2023-10-24 01:08:04 发布

阅读量1.3k

点赞数

分类专栏：前端心路历程

本文链接：https://blog.csdn.net/u010313768/article/details/48153657

版权

前端心路历程专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这次官网改版使用的提升网站性能的方法有：

css sprites、事件委托、加载更多使用innerHTML一次性批量加载、懒加载图片、CSS/JS代码压缩

1.透明度

color上的值:rgba是IE9+才可以支持，rgba只作用于元素

IE上的flter:alpha(opacity=60)和其他浏览器上opacity:.6和rgba不同，它们不只作用于元素，还作用于元素内的所有内容

但IE8-还是可以实现的，

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AARRGGBB,endColorStr=#AARRGGBB)

因为#AARRGGBB中的A就是rgba中的a, 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。
　　取值范围为 #FF000000 – #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。

要想详细了解，如何在IE8-上应用背景上的透明，而不是元素上所有内容都透明，

参考这篇文章：rgba颜色与兼容性的半透明背景色

2.IE只支持a:hover，其他元素上的:hover不支持，具体的CSS选择器的浏览器支持，在一个网页上总结的很好了

建议放在收藏夹或者背熟：CSS选择器的浏览器支持

3.CSS3 transition属性只在父元素设置过渡的话，子元素是不会有过渡的，顺便说一下兼容性

transition IE10+,transfrom 2d IE9+，再顺便推荐一个非常有用的网页，查看CSS3和HTML5兼容性

can i use ??

4.如何使用CSS sprite呢？

有几个方法，使用PS、firework这些类似的软件手动拼接图片，

或者使用使用自动化软件：cssGaga,看到知乎上推荐的，使用了感觉不错

又或者在线自动生成： css sprites generator

5.如何缩写font-size？

要缩写font-size属性的，font的前三个值允许以任意顺序写，并且都是可选的，而后面二个属性fong-size和font-family不仅要按顺序写，而且必须要有，所以很多时候我还是分开写font这些属性的

6.事件委托怎么写，怎么判断子元素

首先当然是先获取target啦，然后根据ID或者className或者是类型等等

7.还未解决的一个问题，大家可以粘贴在 http://www.w3school.com.cn/tiy/t.asp?f=html_intro

上去看一下，怎么让黄色小块和蓝色小块和父元素的顶部平齐呢

<html>
<body>

<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>

<p>段落元素由 p 标签定义。</p> 
<div class="big" style="height:300px;background-color:red;">
   <div class="small" style="height:100px;width: 20%;background-color: blue;display:inline-block"></div>
   <div class="small" style="height:200px;width: 30%;background-color: yellow;display:inline-block"></div >
</div>

</body>
</html>

8.JS上的innerHTML各浏览器都支持，但注意IE8-下的table，tbody，tr等设置会出错，但主流的div，p，h1等都可以用，不过有点可惜的就是fragment不支持

style上cssText和innerHTML一样，各浏览器支持，而且批量处理，只一次flow，但要记得cssText会覆盖掉原本的样式，

所以可以这样写cssText += ";" + newStyle,但务必要记得先加上分号

9.这次的官网改版我做成了单页面应用SPA，使用的方法也就是根据URL中的HASH值#value来对应事件，但要记住刷新后又回到页面最开始的时候，所以刷新的时候也要记得使用和hash值改变一样的函数，关键事件

window.onhashchange()，兼容IE8+

10.还未解决的问题，有没有批量删除子元素的方法，感觉只使用removeChild()方法效率有点慢，

难道要获取所有子元素，然后改变长度，嗯嗯，就是这样

11.怎么设置和获取块元素的文本

innerText属性：返回操作元素中包含的所有文本内容，包括子文档树中的文本，写入值中，结果会删除元素的所有子节点，插入包含相应文本值的文本节点

支持此属性的浏览器包括IE4+、Safari 3+、Opera 8+和Chrome。

firefox不支持此属性，不过支持textContent，支持此属性的浏览器IE9+

支持此跨浏览器兼容性写法如下：

function getInnerText(element){
  return (typeof  element.textContent == "string")?element.textContent ： element.innerText;
}

function setInnerText(element){
  if(typeof element.textContent == "string"){
    element.textContent = text;
  }else {
    element.innerText = text;
  }
}

12.伪元素:before和:after支持IE8+

content属性是必须的，但没什么用处可以设置为空格字符串，还可以和伪类元素一起使用

blockquote:hover:after, blockquote:hover:before {
 background-color: #555;
}

13.在IE8-的浏览器上a标签虽然可以嵌套替换元素和块级元素，显示上没问题，

但就是点击a标签时的链接不会跳转。

还有个问题是这样的，在IE8上a标签不设置宽高，只设置dispaly:block, 即使a标签下的img设置了宽高也没用，a标签的宽高还是0

这个问题困扰我真的很久，好在解决了

14.如何使左右边导航栏悬浮

①百度贴吧的做法是：当滚动条到达某一个高度让左边导航栏的某部分设置position:fixed、bottom:10px;，继续增加到底部footer要覆盖时就慢慢加载bottom属性

②而看到这个网页的左导航栏时候，点击打开链接，我惊呆了，然后还可以这样更简单

直接当滚动条到达某一个高度设置position:fixed、top:10px;继续增加到底部footer要覆盖了就让footer覆盖好了，设置一下z-index为负就好了，更简单

③或者是像新浪微博一样，当滚动条到达某一个高度是position:fixed、top:10px，之后到达footer后就设置position:absolute,top的值变化为一个固定的值

所以这一次我是使用了③的方法，但感觉②更简单方便，因为只有两个阶段

15.函数提升和声明提升

名字解析顺序
javascript中一个名字(name)以四种方式进入作用域(scope)，其优先级顺序如下：
1、语言内置：所有的作用域中都有 this 和 arguments 关键字
2、形式参数：函数的参数在函数作用域中都是有效的
3、函数声明：形如function foo() {}
4、变量声明：形如var bar;
名字声明的优先级如上所示，也就是说如果一个变量的名字与函数的名字相同，那么函数的名字会覆盖变量的名字，
无论其在代码中的顺序如何。但名字的初始化却是按其在代码中书写的顺序进行的，不受以上优先级的影响。

所以说要不能在函数提升上面定义声明提升，因为是函数提升优先级高于声明提升的，我在这个项目就犯了这个错误：

var a = document.querSelector(".article-page");
function b(){
  alert(a.value);
}

变量提升要注意的是：只是提升变量的声明，并不会把赋值也提升上来

另外也要注意Javascript是函数级作用域，if中的作用域和外部包含函数作用域是一样的，也就是if没有块级作用域

详情戳这个链接：深入解读Jvascript中的Hoisting机制

15.清除浮动，在浮动元素的父元素上运用

.cf::after {
  content:"";
  display:table;
  clear:both;
}

small-dragon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目：××官网改版总结经验和收获

前端菜鸟一个项目的总结
复制链接

扫一扫

专栏目录