web前端性能优化与SEO
web前端性能优化与SEO
- 网站优化的必要性
- 浏览器的页面优化
- 使用浏览器缓存
- css Sprites
- 压缩
- css与js文件的位置
- 减少cookie运输
- javascript代码优化
- 数据访问
- 字符串拼接
- css选择器的优化
- 关于SEO技巧
- 搜索引擎工作原理
- SEO简介
- 前端SEO
- 网站结构布局优化：尽量简单、开门见山
- 网页代码的优化
网站优化的必要性
网站分为前端和后端，相对于后端的数据优化，前端更需要做出优化，因为优化不仅能够提升浏览速度，让用户在网页加载速度较快的前提下使用你网站的功能，而且还能节省企业开发成本，可谓是一举两得。
浏览器的页面优化
关于浏览器处理的几个流程，如下图（图源百度，侵删）
http协议是无状态应用层协议，每次请求都要建立连接，传输数据，而每个http请求都需要独立的线程去处理，所以http请求的多少很影响企业开发成本。所以我们可以用打包工具把js文件和css文件放在一块，这样一次请求就可以直接请求过来了。http缓存也是可以大大减少请求次数的，能缓存多少数据就缓存多少数据，设置http缓存以后，只要不刷新，再次请求的次数及数据大小会小得多。
使用浏览器缓存
对于一个网站来说，css，js，logo图片等静态资源更新频率很低，这样就可以使用浏览器缓存，而这些文件每次请求都会请求过来，如果把它们放在浏览器缓存中，通过设置http头可以设定浏览器缓存。
css Sprites
俗称“css 精灵”，关于一些小图标如果整合到一张图上，大小要比不整合小得多。
压缩
在服务器端进行压缩，浏览器进行解压缩，可以减少传输的数据大小，如果脚本文件和样式文件能合并的话就更好了，不过有时候也要考虑下带宽与服务器的情况，比如带宽良好而服务器资源不足的情况。
css与js文件的位置
一般情况下css文件都在head里，而js文件通常都是在body的最下方，让浏览器先解析css的话可以在加在页面的时候样式就有，如果页面加载出来但是样式不在，显然是很影响用户体验的。js则相反，最好等到页面加载完毕再加载js文件防止出错，但是如果在浏览器解析时就需要的js文件，放在下面显然是不合适的。
减少cookie运输
cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，所以要考虑一下应该将哪些数据写入cookie，而对于css，js文件等静态文件发送cookie显然没什么意义，可以考虑一下让静态资源使用独立域名访问，避免请求静态资源的时候发送cookie，减少cookie的传输次数。
javascript代码优化
关于代码优化方面有很多，这里就简单说两点。
数据访问
js中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象的属性以及数组的访问需要更大的开销。所以，对任何对象的属性以及数组的成员访问次数超过一次的时候，最好将数据放入局部变量。另外，还要尽可能地对对象和数组进行深查找。
字符串拼接
在js中使用“+”来拼接字符串的效率是最低的，因为每次都要开辟新内存生成新的字符串变量赋值给新变量，建议使用数组的json方法。
css选择器的优化
在初学者或者很多熟练者眼中，觉得css选择器是从左到右进行解析的，但事实上是从右到左进行解析的，比如像这样 #** span{} ，这样一个id选择符就把查找范围固定了，效率会很高，但事实上浏览器是从右到左解析的，会查找每个span的祖先节点，效率并没有所想的那样高。
关于SEO技巧
搜索引擎工作原理
在搜索引擎网站，后台都有个非常庞大的数据库，存储着海量关键词，每个关键词对应着很多网址，这些网址都是网络爬虫从互联网上一点点收集来的，这些爬虫每天在互联网上从一个链接爬到下一个链接，下载内容，分析提炼，寻找关键词，如果爬虫认为信息有用而数据库也没有的话它会将其存入数据库，它会寻找最新且有用的信息并保存起来，当用户搜索到关键词时，就能检索出相关网站。
SEO简介
SEO（Search English Optimization），搜索引擎优化，为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序的位置而做的优化。简单来说，就是希望百度等搜索引擎多多收录精美网站，并且他们访问时能排在靠前位置。
前端SEO
通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂，也能让爬虫看懂。
网站结构布局优化：尽量简单、开门见山
一般而言，网络层次越少，爬虫越容易抓取，而且据统计，大多访客如果经过网站跳转三次还没找到需求信息，便会离开，所以，三层目录结构也是体验的需要，所以，我们需要做到：
1.控制首页链接数量。如果链接太少，爬虫不能“爬”到内页，会影响到网站的收录数量的，而如果链接太多，没有太多实质性的链接，非常影响用户体验。
2.网络层次不要太多，要让每一个内页让爬虫最多经过三次跳转都能访问到。
3.关于导航优化。尽量使用文字，或者可以搭配图片使用，图片必须加上alt和title属性，这样机试图片未加载出来，用户也能看到图片未加载成功的提示文字。其次，在每个网页上搭配面包屑导航，不仅利于网站的层次感，也增加了大量内部链接，方便爬虫抓取数据，降低跳出率。
4.网站结构。采用“头部——主体——底部”的写法，头部包含了logo，主导航以及用户信息，主体包含各种主要内容以及相关内容链接，底部要附上网站版权信息与友情链接。比如分页导航，能分页数就不要放上“下一页”，特别是分页很多的时候，因为爬虫一页一页往下“爬”的话，实在是太“累”了，爬虫会很容易继续爬取。
5.控制页面的大小，减少http请求，提升网站加载速度。页面加载速度过慢的时候，不仅留不住访客，更是留不住爬虫。
网页代码的优化
1.标签系列
title标题：爬虫爬取重要对象之一，强调重点即可，重要关键词放前面，内页主页关键词最好不要重复。
meta keywords标签：关键词，列举出几个页面的重要关键字即可。
meta description标签：网页描述，需要高度概括网页内容，不能太长，每个页面也要有所不同。
a标签，title属性可以告诉用户和爬虫链接内容，链接到其他网站要加上el="nofollow"阻止爬虫继续爬取。
img标签应加alt属性说明
strong、em、b、i这些标签虽说效果亮亮相同，可对于爬虫来说前两者会引起高度重视，而后两者则很普通。
2.body标签语义化，正确的标签做正确的事，h1标签对于爬虫来说是最重要的，副标题用h2标签，而其他内容不可乱用h标签。
3.重要内容不要用爬虫不认识的js进行输出，爬虫一般不会访问iframe标签中的内容，重要的内容巧用css放在最前面，从而告诉爬虫这些内容比较重要。
4.js如果是dom操作，应当放在body结束标签之前、html代码之后。
5.精简代码。
web前端性能优化与SEO相关推荐
- 大型网站技术架构（3）：WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类 这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
- WEB前端性能优化小结
1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
- Web前端性能优化思路
本文旨在整理常见Web前端性能优化的思路,可供前端开发参考.因为力求精简,限于篇幅,所以并未详述具体实施方案. 基于现代Web前端框架的应用,其原理是通过浏览器向服务器发送网络请求,获取必要的inde ...
- Web 前端性能优化
网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...
- 列举6个常见且实用的Web前端性能优化方法
在如今这个信息爆炸的时代,人们的节奏总是快速的,对于一个网站的耐心毕竟是有限的可怜的,如果网站不进行优化必定会流失相当一部分的客户,带来不必要的损失.那么从Web前端的性能优化上来说有哪些常见.实用的 ...
- WEB前端性能优化常见方法
web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是 ...
- （2020.12.7）初次web前端性能优化记录
(转载公司内部论坛本人文章2020.12.7) 导语: 作为客户端开发,由于项目的需要,最近一年陆续做了很多web前端的需求开发.但过去做的大部分都是单页面的运营H5,上线时间短,一般保证能稳定运行就 ...
- 【JavaWeb】Web前端性能优化
本文目录 一. 浏览器访问优化 1.1 减少http请求 1.2 使用浏览器缓存 1.3 启用压缩 1.4 CSS放在页面最上面. JavaScript 放在页面最下面 1.5 减少Cookie传输 ...
- web页面性能优化及SEO优化
web页面性能优化 前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网 ...
最新文章
- 泛在电力物联网（能源互联网+物联网）浅析
- AMD Developer Center有关ATI Stream的内容
- Python内置函数之随机函数
- 乐鑫代理启明云端用图文带你一分钟快速了解ESP32-S3的功能特性：支持AI加速，更好的应用于图像、语音等识别，集成Wi-Fi + Bluetooth LE 5.0和高达44 个可编程 GPIO 管脚
- 设置storage模块的数据库操作支持、添加仓储分类列表接口（dao层）
- .NetCore如何使用ImageSharp进行图片的生成
- mysql binlog使用_mysql binlog 基本使用
- Web前端笔记（6）
- 如何正确认识大数据技术
- Intergration Service(2005)备忘（之）数据传输处理
- 全屏窗口指令_在iOS 14系统中，快捷指令原来有多达11种运行方式（上篇）
- 多媒体计算机室管理制度,多媒体教室管理规章制度
- jqTransform表单美化
- VS2008中关于“加载安装组件时遇到问题。取消安装”的解决办法
- STM32F100X RCC_APB2Periph_AFIO--复用IO时钟的使用
- 计算机网页文档无法复制怎么办,关于电脑浏览器网页不能复制网页文字的恢复教程...
- 用于 Linux* 的英特尔® 图形驱动程序 以后买本本的时候，先注意一下
- （实测可用）STM32CubeMX教程-STM32L431RCT6开发板研究串口通信（SPI flash）
- Linux服务器集群部署
- 如何使用Bootstrap 5从jQuery切换到Vanilla JavaScript