所有由Wuweiwei发布的文章

从一段代码看缓存对性能的影响

当然,我们这里的缓存是封装在闭包里面的私有变量,外部是没办法访问到的,这里的缓存,生命周期就是程序的生命周期,在实际中,页面unload生命周期之后会被销毁(也就是刷新页面后会清空),当然,也可以自己在代码中设置该缓存的有效时间。

阅读 评论 0 阅读全文

axios跨域请求使用凭证以及默认xsrfCookieName和xsrfHeaderName的坑

对于axios而言,xsrfCookieName 和 xsrfHeaderName 其实是可以不用设置的,在服务端api不需要从header中获取token的情况下我们不需要设置。但是单单只设置 xsrfHeaderName 为空时却也是不行的,根据axios给的官方解释,应该是只要设置axios.defaults.xsrfCookieName = ”,后面xsrfHeaderName的这个设置不设置其实就不重要了。

阅读 评论 0 阅读全文

基于axios集成前端请求重试功能

请求重试的意义 我们在访问网站的时候,在发起http请求或者访问远程数据库,可能会发生一些异常,有些异常或者错误可能是短时间的网络环境不佳造成,若我们重新发请求也可能会成功获取到数据。 实际运用中,前端会使用一些第三方的库来处理请求,本文就是基于目前流行的axios来集成请求重试。 axios以及拦截器介绍 axios(官网:http:/阅读全文…

阅读 评论 0 阅读全文

webpack插件开发之异常日志收集插件

最近要做一个前端异常日志收集的功能,仔细想想,如果只是做一个日志上报的功能,貌似没多大意义。本着服务大众的想法,结合之前图片重试功能的开发,何不开发一个webpack插件来完成收集日志的功能呢。最终目标就是只需要简单配置一些配置项,就可以自动生成一份异常监控的代码,insert到入口文件。 先看看使用效果: 配置以下打包脚本: plugi阅读全文…

阅读 评论 0 阅读全文

ie6常见bug汇总

1. 强制浏览器是用Web标准解析
译文出自:http://www.1x3x.net/blog/web-design/2009/03/10-fixes-for-ie6-problems.html

HTML的写法

1
2
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd“>

或者XHTML的写法

1
2
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

2. Set Position: relative
给元素指定Position: relative能够解决很多奇怪的问题,比如对齐和显示不正确等。对于Position的属性要小心设置,特别是设为absolute。

3. 给Float的元素加上inline属性避免双倍margin
这大概是最著名的一个bug了,IE6下对于浮动元素,会莫名其妙的双倍空白边,解决的方法也很莫名,设上display:inline属性就好了,对于float元素这个属性本身没有任何意义。 (双边距bug)

4. 给特定元素加上hasLayout属性
很多IE6(甚至是IE7)的问题可以通过设置hasLayout这个ie only的内部属性来解决,比如让a这样的行级元素变成块级元素或者让元素应用透明效果。但这个属性并不能直接设置。最简单的让元素拥有hasLayout属性的方法是显式的为其设置高度或者宽度。有的时候,你不能显示的为其设定高度,可以使用设置高度为1%,而其父元素如果没有确定的高度时,该设置不会被应用到实际的高度上,但是hasLayout会被激活。

5. Fix字符重复bug
这是IE6上面一个非常奇怪的BUG,他的触发条件也是相当诡异,在浮动元素间如果有
<!– comment –> <!– comment –> <!– comment –>
这样的普通的HTML注释的话,会导致Float元素中的最后的字符会很诡异的出现在后面的clear元素中,具体的介绍大家可以看这里 positioniseverything 。

解决的方法也很奇怪
* 将所有的浮动元素设为 display:inline;
* 给最后的浮动元素设置 margin-right:-3px;
* 使用条件注释避免IE6下的问题 <!–[if !IE]>Put your commentary in here…<![endif]–>
* 在最后的容器内放入一个空的div (这种添加这种无语义的workaround并不是最理想的选择)

6. 需要悬浮效果的地方,尽量使用<a>标签
IE6中只能对<a>应用css hover效果,所以尽可能使用<a>标签来获取最大的兼容性。

7. 使用!important或者高级选择器来兼容IE6
使用!important和高级选择器来兼容IE6,可以避免使用那些通不过校验的非常规hack,比如所谓的_width这样的东西。我们来看个简单的例子。

1
2
3
4
5
#element {
min-height: 20em;
height: auto !important; /* understood by all browsers */
height: 20em; /* IE6 incorrectly uses this value /*
}

IE6是不能正确解读!important这个修饰符的,所以他会错误的使用height:20em这个属性来实现最小高度。(IE6下容器会自动扩展)

1
2
3
4
5
6
7
8
9
#element {
min-height: 20em;
height: 20em;
}

/* ignored by IE6 */
#element[id] {
height: auto;
}

或者使用高级选择器,同样也能实现该目的,这样代码既能保持合法性,也能很好的去兼容IE6这个诡异的产品。

8. 避免在IE6下使用百分比尺寸
1
2
3
4
body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}

在IE6下是用百分比的尺寸是件非常让人头疼的事情,尽可能避免这样的使用,而是采用结合!important和精确尺寸来明确元素的大小。

9. 频繁测试,尽早测试
别忘记尽早测试,经常测试, 除非你的程度已经完成。不然,你可能花更多的时间来解决IE6的问题。一般情况下,如果你的网站能在IE6和firefox下良好表现,估计其他浏览器就不会有什么大问题了。

10. 重构你的代码
很多情况下,解决一个问题,可能比重构你的代码要花更多的时间。比如上一次给公司写一个频道页面的,没有一边制作,一边测试IE6的表现,导致最近有很多奇怪的问题,因为布局比较复杂。后来,干脆重构代码。用了2天。我想,如果是想解决方法,或许2天都搞不定

阅读 评论 0 阅读全文

关于FONT-ICON在网页设计中的运用

在IUNI商城和IUNI Town的项目开发中,我在网页中使用字体ICON方面做了一些尝试,通过与图片对比,发现兼容效果非常好。 FONT-ICON在CSS3中被普遍使用,但实际上css2中就已经支持了这个font-face属性,通过自定义字体,可以实现很多图标效果。 为什么舍弃png24的图标使用ICON呢,主要优点如下: 字体ICON阅读全文…

阅读 评论 0 阅读全文

浏览器内核知多少?

我们每天上网都离不开浏览器,但是你可能不会关心到浏览器内核的问题。浏览器的性能差异,与其使用的内核不无关系。今天,我们就来充实一下自己,了解了解有关浏览器内核的知识吧。

浏览器内核是什么东西
首先解释一下浏览器内核是什么东西。英文叫做:Rendering Engine,中文翻译很多,排版引擎、解释引擎、渲染引擎,现在流行称为浏览器内核,至于为什么流行这么称呼,请自行领悟。
Rendering Engine,顾名思义,就是用来渲染网页内容的,将网页的代码转换为最终你看得见的页面。因为是排版,所以肯定会排版错位等问题。为什么会排版错位呢?有的是由于网站本身编写不规范,有的是由于浏览器本身的渲染不标准。

现在有几个主流的排版引擎,因为这些排版引擎都有其代表的浏览器,所以常常会把排版引擎的名称和浏览器的名称混用,比如常的说IE内核、Chrome内核。其实这样子是不太合理的,因为一个完整的浏览器不会只有一的排版引擎,还有自己的界面框架和其它的功能支撑,而排版引擎本身也不可能实现浏览器的所有功能。
下面罗列一下几款主流的排版引擎和浏览器。
1、Trident 内核(Windows)
Trident 就是大名鼎鼎的 IE浏览器 所使用的内核,也是很多浏览器所使用的内核,通常被称为IE内核。基于Trident内核的浏览器非常多,这是因为Trident内核提供了丰富的调用接口。老的Trident内核(比如常说的IE6内核)一直是不遵循W3C标准的,但是由于当时IE6的市场份额最大,所以后果就是大量的网页专门为IE6等老Trident内核编写,在IE6下显示很正常,但其实这些网页的代码并不符合W3C标准,于是,完全依据W3C标准写的网页在老的Trident内核下面又出现偏差,这就是为什么很多人觉得后来的IE9的网页排版有时会乱了,而IE6则正常,其实不是浏览器兼容性差了,而是你访问的网页不符合新的标准。目前可供调用的最新版的Trident内核是IE9所用的内核,相较之前的版本对W3C标准的支持增强了很多。

IE浏览器使用Trident 内核
Trident内核的常见浏览器有:       IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0);

世界之窗、 360安全浏览器、傲游;搜狗浏览器;腾讯TT;阿云浏览器(早期版本)、百度浏览器(早期版本)、瑞星安全浏览器、Slim Browser; GreenBrowser、爱帆浏览器(12 之前版本)、115浏览器、155浏览器; 闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器;
其中部分浏览器的新版本是“双核”甚至是“多核”,其中一个内核是Trident,然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”,而Trident则是“兼容浏览模式”,用户可以来回切换。

2、Gecko(跨平台)

Netscape6 启用的内核,现在主要由Mozilla基金会进行维护,是开源的浏览器内核,目前最主流的Gecko内核浏览器是Mozilla Firefox,所以也常常称之为火狐内核。因为Firefox的出现,IE的霸主地位逐步被削弱,Chrome的出现则是加速了这个进程。非Trident内核的兴起正在改变着整个互联网,最直接的就是推动了编码的标准化,也使得微软在竞争压力下不得不改进IE。不过比较可惜的是,虽然是开源的,也开发了这么多年,基于Gecko的浏览器并不多见,除了一些简单的改动(坑爹的X浏览器)或者是重新编译(绫川ayakawa、tete009),深度定制或者增强型外壳的还比较少见。另外就是有一些其它软件借用了Gecko内核,比如音乐管理软件SongBird。
常见的Gecko内核的浏览器:Mozilla Firefox、Mozilla SeaMonkey、Epiphany(早期版本)、Flock(早期版本)、K-Meleon。

Gecko内核的浏览器:Mozilla Firefox
3、KHTML(Linux)
KDE开发的内核,速度快捷,容错度低。这个内核可能不见得很多人知道,但是后面再看下去你就明白了。常见的KHTML内核的浏览器:Konqueror。
4、WebKit(跨平台)

由KHTML发展而来,也是苹果给开源世界的一大贡献。是目前最火热的浏览器内核,火热倒不是说市场份额,而是应用的面积和势头。因为是脱胎于KHTML,所以也是具有高速的特点,同样遵循W3C标准。从目前看来,WebKit 内核是最有潜力而且是已经有相当成绩的新兴内核,性能非常好,而且对W3C标准的支持很完善,本人非常看好它。

常见的WebKit内核的浏览器:Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器。

5、Chromium(跨平台)

其实 Chromium 就是 WebKit,维基百科里面并没有将Chromium从WebKit分出来,这个区分完全是基于我个人的恶趣味。记得以前看过一个大牛的博文说过,Chromium把WebKit的代码梳理得可读性提高很多,所以以前可能需要一天进行编译的代码,现在只要两个小时就能搞定。这个我自己也没有考究过,但是估计可信。这个也能解释为什么Gecko和WebKit出来了这么久,第三方编译、定制的版本并不多,但是由Chromium衍生出来的浏览器早就满坑满谷了。
常见的Chromium内核的浏览器:Google Chrome、Chromium、SRWare Iron、Comodo Dragon。
Google Chrome浏览器内核是Chromium

6、Presto(跨平台)
Opera 所采用的内核,准确地说,是Opera 7.0及以后版本的内核,Opera 3.5-6.1版本使用的内核叫做Elektra。不用说,Presto对W3C标准的支持也是很良好的。虽然我很喜欢Opera,但是我对Presto的渲染速度一直有保留态度。之前在OperaChina论坛看见有人说过,Presto优先解析文字,保证可阅读性,媒体资源的渲染放后。常见的Presto内核的浏览器:Opera。

阅读 评论 0 阅读全文

C​S​S​定​位​规​则​之​B​F​C

1. BFC(block formatting context,中文常译为块级格式化上下文)是 W3C CSS

2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。
也就是说,如果一个元素符合了成为BFC的条件,该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC),是一个隔离了的独立容器。
在 CSS3 中,BFC 叫做 Flow Root。
2. 形成BFC的条件(符合以下任一条件即可):
1) float的值不为none; 2) overflow的值不为visible;
3) display的值为 table-cell、table-caption和inline-block之一; 4) position的值不为 static或 relative中的任何一个; 3. BFC常见作用
1) 包含浮动元素
BFC会根据子元素的情况自适应高度,这个特性是对父元素使用overflow:hidden/auto/scroll、float:left/right样式可以闭合浮动的原理。
此外网上有资料说使用display:table可以隐式触发table-cell/table-caption,来创建BFC。

阅读 评论 0 阅读全文

HTML标签的SEO权重排名

HTML标签权重分值排列

内部链接文字:10分

标题title:10分

域名:7分

H1,H2字号标题:5分

每段首句:5分

路径或文件名:4分

相似度(关键词堆积):4分

每句开头:1.5分

加粗或斜体:1分

文本用法(内容):1分

title属性:1分 (注意不是title》, 是title属性, 比如a href=… title=”)

alt标记:0.5分

Meta描述(Description属性):0.5分

Meta关键词(Keywords属性):0.05分

SEO优化

1、 静态页面

将信息页面和频道、网站首页改为静态页面,有利于搜索引擎更快更好的收录。

2、 页面标题(Page Title)的关键词优化

必须列出信息的标题、网站的名称以及相关关键字。

3、 Meta标签的优化(过去搜索引擎优化的重要手法,现在已经不是关键因素,但仍不可忽略)

主要包括:Meta description、Meta keywords的设置。关键字密度要适度,通常为2%-8%,也就是说你的关键字必须在页面中出现若干次,或者在搜索引擎允许的范围内,要避免堆砌关键字。

4、针对Google制作Sitemaps

Google的sitemaps是对原来robots.txt的扩展,它使用 XML格式来记录整个网站的信息并供Google读取,使搜索引擎能更快更全面的收录网站的内容。  可以使用Google提供的Sitemap生成器制作(需要技术人员制作):  https://www.google.com/webmasters/tools/dashboard?hl=zh-CN也可以由技术部人员制作更全面的Sitemaps。

5、 图片的关键词优化

图片的替代关键词也不要忽略,其另外一方面的作用是,当图片不能显示的时候,可以给访问者一个替代解释语句。

6、 避免表格的嵌套

表格嵌套太多,搜索引擎通常只读取3个

7、 采用web标准进行网站重构

尽量使网站的代码符合W3C的HTML 4.0或XHTML 1.0规范。通过XML+CSS技术进行网站重构,减少不表格及冗余代码,提高网站页面的扩展性,兼容性,可以使更多浏览器支持。

8、 网站结构的扁平化规划

目录和内容结构最好不要超过3层,如果有超过三层的,最好通过子域名来调整和简化结构层数。另外目录命名的规范做法是使用英文而不是拼音字母

9、 页面容量的合理化

合理的页面容量会提升网页的显示速度,增加对搜索引擎蜘蛛程序的友好度。同时建议js脚本和css脚本尽量用链接文件

10、外部文件策略

把javascript文件和css文件分别放在js和css外部文件中。这样做的好处是把重要的页面内容放到页面顶部,同时能缩小文件大小。有利于搜索引擎快速准确地抓取页面重要内容。其他的字体(FONT)和格式化标签也尽量少用,建议采用CSS定义。

11、外部链接

尽可能多地让其他跟你主题相关的网站链接本站,同时尽量同PR值更高的网站进行相互链接。如果网站提供与主题相关的导出链接,被搜索引擎认为有丰富的与主题相关的内容,也有利于排名,例如各类招商网站、投融资网站的概念。另外避免链接不顾质量的大面积撒网,对搜索引擎而言宁少要精。

12、网站地图

网站自身的网站地图是搜索引擎更全面索引收录你的网站的重要因素。建议制作基于文本的网站地图,内含网站所有栏目、子栏目。网站地图的三大因素:文本、链接、关键词,都极其有利于搜索引擎抓取主要页面内容。特别是动态生成目录网站尤其需要 创建网站地图。

13、图像热点

除AltaVista、Google明确支持图像热点链接外,其他引擎暂不支持。当“蜘蛛” 程序遇到这种结构时,就会无法辨别。因此尽量不要设置图像热点(Image Map)链接。

14、FLASH应用

FLASH由于不含文字信息,应尽量用于功能展示和广告,少用于网站栏目和页面。

15、JS脚本

在不支持JS脚步的浏览器里 NOSCRIPT》 标签会起到重要提示作用,对搜索引擎的Spider搜索也会有帮助。

16、Frame框架

Frame标签会被搜索忽略,尽量少用,如果一定要用,则应正确使用Noframe标签, 在Noframe》/Noframe》区域中包含指向frame页的链接或带有关键词的描述文本,同 时在框架以外的区域也出现关键词文本。

17、资讯的内部链接

有助提高网站排名和PR值,例如相关资讯、推荐资讯等。

阅读 评论 0 阅读全文

记录工作生活点滴。

返回
顶部