渲染优化

渲染优化

禁止使用iframe（阻塞父文档onload事件）

 - iframe会阻塞主页面的Onload事件
 - 搜索引擎的检索程序无法解读这种页面，不利于SEO
 - iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
 - 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript，动态给iframe添加src属性值，这样可以绕开以上两个问题

禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）

使用CSS3代码代替JS动画（尽可能避免重绘重排以及回流）

对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU

 - 减少HTTP请求
 - 避免文件跨域
 - 修改及时生效

用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

标题 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作

前端需要注意哪些SEO

• 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

语义化的理解

• 用正确的标签做正确的事情！
• HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
• 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
• 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

iframe有那些缺点？

• iframe会阻塞主页面的Onload事件
• 搜索引擎的检索程序无法解读这种页面，不利于SEO
• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
• 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

浏览器的五大内核

• IE: trident内核
• Firefox：gecko内核
• Safari:webkit内核
• Opera:以前是presto内核，Opera现已改用Google - Chrome的Blink内核
• Chrome:Blink(基于webkit，Google与Opera Software共同开发)