浏览器兼容性问题，前端性能优化、SEO优化

一、常见浏览器兼容性问题及解决

不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。
不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。

浏览器前缀：
-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

常见的浏览器内核：

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同

解决方案：使用css 里增加通配符 * { margin: 0; padding: 0; }，或者通过给在页面中使用到的标签元素逐个增加初始margin、padding 值为 0 的设置。

2、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

解决方案：在float的标签样式控制中加入 display:inline；将其转化为行内属性

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

4、图片默认有间距

解决方案：使用float 为img 布局

5、IE9以下浏览器不能使用opacity

解决方案：

opacity: 0.5; filter: alpha(opacity = 50); filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；

解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

7、cursor:hand 显示手型在safari 上不支持

解决方案：统一使用 cursor:pointer

8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决方案：父级元素设置position:relative

二、前端性能优化

从用户的角度而言，当打开一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个过程需要的时间，这个时间越短，用户体验越好。所以作为网页的开发者，就从输入url到页面渲染呈现这个过程中去提升网页的性能。

所以输入URL后发生了什么呢？
在浏览器中输入url会经历域名解析、建立TCP连接、发送http请求、资源解析等步骤。（具体可参考此处）

优化方案：

1、减少http请求，合理设置HTTP缓存

2、优化DOM，删除不必要的代码和注释包括空格，尽量做到最小化文件；避免重复操作DOM

3、优化JS，当浏览器遇到 script 标记时，会阻止解析器继续操作，直到 CSSOM 构建完毕，JavaScript 才会运行并继续完成 DOM 构建过程。可以推迟它们的下载（defer）或者使它们异步解析（async）等等

4、避免回流，可以通过避免使用 table 布局。避免设置多层内联样式。
将动画效果应用到 position 属性为 absolute 或 fixed 的元素上。
避免使用 CSS 表达式（例如：calc()）。

5、图片懒加载，原理是通过监听鼠标滚动事件

6、事件委托机制，原理利用JS事件冒泡机制把原本需要绑定在子元素的响应事件（click、keydown……）委托给父元素。（优点1大量减少内存占用，减少事件注册。2新增元素实现动态绑定事件）

7、使用第三方资源时。尽量做到按需加载；

8、路由懒加载，ES6 的 import机制

三、SEO优化

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的（抓取互联网页面）规则提高网站在有关搜索引擎内的自然排名。吸引更多的用户访问网站，提高网站的访问量，提高网站的销售能力和宣传能力，从而提升网站的品牌效应，让其在行业内占据领先地位。
搜索引擎优化的技术手段主要有黑帽（black hat）、白帽（white hat）两大类。当然我们在做优化时是基于白帽的的优化。

优化策略：

明确网站主题
在设计制作网站之前，根据设计图和需求文档，明确网站的主题、用途和内容。然后根据不同的用途来定位网站特性，使该网站对于开发者而言更加明确
在明确网站主题后，设定突出的关键词
（关键词设定原则）关键词的设定与网站主题相关即可，没必要一味的追求华丽热门词汇；同时避免使用含义很广的一般性词汇；我们可以根据产品的种类及特性，尽可能选取具体的词，5至10个关键词数量是比较适中的。
在代码中的体现就是合理的对 title、description、keywords 的设置使用，同时在网页内容、图片的alt属性等网页描述上均可不同的程度设置突出关键词。
title、description、keywords搜索对于三项的权重逐个减小，title值强调重点即可；description 把页面内容高度概括；keywords列举出重要关键词。
alt 属性是 img 标签一个必需的属性，用于在图像无法显示时或者用户禁用图像显示时的替代文本。
比如基于搜索引擎抓取HTML顺序是从上到下，所以我们可以把重要内容HTML代码放在最前面，像常见的网站风格，首屏一个大的横幅 banner，保证重要内容一定会被抓取。示例：
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="keywords" content="浏览器兼容性问题，SEO优化"> <meta name="description" content="常见浏览器兼容性问题及解决、 SEO就是搜索引擎优化"> <title>前端问题和优化</title> </head> </html> 
```
使用语义化的HTML代码，符合W3C规范
语义化代码让搜索引擎容易理解网页，同时保证即使在只加载html代码的情况下也能展现清晰的网站结构。网页中的JavaScript和CSS尽可能和网页分离。
页面容量要合理化
网站要尽量使用静态网页，减少使用动态网页。网页容量越小显示速度越快，对搜索引擎蜘蛛程序的友好度越高，因而在制作网页的时候要尽量精简HTML代码，通常网页容量不超过15kB。
网站发布要更新
为了更好的实现与搜索引擎对话，将经过优化的企业网站主动提交到各搜索引擎，让其免费收录，争取较好的自然排名。一个网站如果能够进行有规律的更新，那么搜索引擎更容易收录。因而合理的更新网站也是搜索引擎优化的一个重要方法。
友情链接，好的友情链接可以快速的提高你的网站权重
友情链接，也称为网站交换链接、互惠链接、互换链接、联盟链接等，是具有一定资源互补优势的网站之间的简单合作形式，即分别在自己的网站上放置对方网站的LOGO图片或文字的网站名称，并设置对方网站的超链接（点击后，切换或弹出另一个新的页面），使得用户可以从合作网站中发现自己的网站，达到互相推广的目的，因此常作为一种网站推广基本手段。
少用iframe
搜索引擎不会抓取iframe中的内容
iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
提高网站速度
网站速度是搜索引擎排序的一个重要指标。

原文链接：https://blog.csdn.net/candyHZhou/article/details/116593847?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169114700016800211528415%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=169114700016800211528415&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-9-116593847-null-null.268%5Ev1%5Ekoosearch&utm_term=seo%E4%BC%98%E5%8C%96

原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/22371