前端性能优化

一、搜索引擎工作原理

        在搜索引擎网站的后台会有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为“搜索引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载收集而来的。当用户搜索时，就能检索出与关键字相关的网址显示给访客。一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。

        在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js等，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容可以被搜索引擎能识别，那么搜索引擎就会提高该网站的权重，增加对该网站的友好度。这样一个过程我们称之为SEO。

二、为什么要做SEO

        提高网站的权重，增强搜索引擎友好度，以达到提高排名，增加流量，改善（潜在）用户体验，促进销售的作用。

三、从三个方面来说明前端性能优化

◆ 1、网站结构布局优化

        （1）控制首页链接数量

        （2）扁平化的目录层次

        （3）导航优化

        （4）网站的结构布局---不可忽略的细节

        （5）利用布局，把重要内容HTML代码放在最前

        （6）控制页面的大小，减少http请求，提高网站的加载速度。

 ◆ 2、网页代码优化        

（1）突出重要内容---合理的设计title、description和keywords

（2）语义化书写HTML代码，符合W3C标准

（3）事件代理

（4）事件的节流和防抖

（5）页面的回流和重绘

（6）EventLoop事件循环机制

◆ 3、前端网站性能优化

（1）减少 http 请求

        1、合并CSS、JS文件     2、 CSS Sprites精灵     3、 资源懒加载lazyload 

（2）控制资源文件加载优先级

（3）尽量外链CSS、JS（结构、表现和行为分离）

（4）浏览器缓存

（5）减少重排（ Reflow ）

（6）减少 DOM 操作

（7）使用 iconfont 替换图标

（8）不使用 CSS 表达式（会影响效率）

（9）使用 CND 网络缓存，加快用户访问速度，减轻服务器压力

（10）开启Nginx gzip压缩

（11）伪静态设置