性能优化和SEO
作为一个前端,能在性能上做的事无非是减少或者延迟HTTP请求、减少代码量和提高代码效率。减少请求的方式也就是合并js、css代码,图片合成图片精灵,有些小图片可以用base64代替,或者直接用css3来实现;把一些不在页面渲染时候需要的js代码(如googleAnalytics.js)放在body的最下面,这样不会影响页面的加载,用户不会因为js加载的未完成而影响阅读。减少代码量就是在压缩代码上下点功夫,有工具实现,很简单。
eg:
1.减少http请求数(性能优化的起点)
1,雪碧图技术 2.webpack打包技术,打包所有资源,只需要请求一次 3.缓存页面资源
2.压缩页面元素,如gzip服务器端压缩,压缩js文件,压缩css文件等
3.把样式表放在页面头部,可以提高界面加载速度
4.把js文件放在页面底部,防止阻塞
5.避免css表达式
6.ajax保存下来,缓存,如加载一个页面需要同时发送很多次相同的ajax,就将该ajax缓存下来,这里解释ajax原理
7.使用CDN(内容分发网络,CDN 是地理上分布的 web server集合, 用于更高效地发布内容,通常基于网络远近来选择给具体用户服务的web server)
8.增加Expires Header
app.use(express.static(path.join(__dirname, 'public'), {maxAge:31557600000}));
9.把js和css放在外部文件中
10.减少DNS查询次数
11.最小化js代码
12.避免重定项
2.影响网页加载速度的因素。
1,网络最小带宽 2.DNS解析时间 3,http请求数多 4,加载的文件较多,如多个css,js文件 5.图片过大
SEO:
Seo分类:
白帽:改良和规范网站设计,使之对搜索引擎和用户更加友好,是一种搜索引擎推荐的做法
黑帽:利用或者放大搜索引擎的缺陷,使用不正当竞争获取更多的访问量。(例如最近花千骨电视剧热播,马上有一些网站使用这个标题标题,但是内容却是推销广告的,给广大网名造成很大困扰)。
前端seo做法:
1,网站标题、关键字、描述
2,网站内容优化
3,合理设置Robot.txt文件
4,生成对搜索引擎友好的网站地图
5,增加外链引用
其中最重要的是以下2个方面:
6,网站结构布局优化——扁平化布局:网站的目录层级要尽可能少,中小型网站不要超过3级 1,控制首页的链接数量(网站首页的权重最高 2,扁平化的目录层次。尽量让Spider跳转3次就可以到达网站的任意一个内页
7,网页代码优化 1,<head>标签放网页的标题,各个页面不同。 2,<meta keywords>列举出几个重要的关键词。 3,<meta description>网页内容的高度概括。 4,<br />标记应该放在文本中间,即使用<p><br /></p>替代突兀的<br />标记。 5,html语义化。例如我们要做一个导航,可以使用div+span标记 等