没有合适的资源?快使用搜索试试~ 我知道了~
面试宝典面试宝典面试宝典面试宝典面试宝典面试宝典面试宝典
需积分: 14 0 下载量 144 浏览量
2022-04-23
21:36:52
上传
评论
收藏 479KB PDF 举报
温馨提示
试读
53页
1、前端需要注意哪些SEO - 合理的`title`、`description`、`keywords`:搜索对着三项的权重逐个减⼩,title值强调重点即可, 重要关键词出现不要超过2次,⽽且要靠前,不同⻚⾯`title`要有所不同;`description`把⻚⾯内容 ⾼度概括,⻓度合适,不可过分堆砌关键词,不同⻚⾯`description`有所不同;`keywords`列举出 重要关键词即可 - 语义化的`HTML`代码,符合W3C规范:语义化代码让搜索引擎容易理解⽹⻚ - 重要内容`HTML`代码放在最前:搜索引擎抓取`HTML`顺序是从上到下,有的搜索引擎对抓取⻓ 度有限制,保证重要内容⼀定会被抓取 - 重要内容不要⽤`js`输出:爬⾍不会执⾏js获取内容 - 少⽤`iframe`:搜索引擎不会抓取`iframe`中的内容 - ⾮装饰性图⽚必须加`alt` - 提⾼⽹站速度:⽹站速度是搜索引擎排序的⼀个重要指标 ### 2、``的`title`和`alt`有什么区别 - 通常当⿏标滑动到元素上的时候显示 - `alt`是``的特有属性,是图⽚内容的等价描述,⽤于图⽚⽆法加载时显
资源详情
资源评论
资源推荐
### 1、前端需要注意哪些SEO!
- 合理的`title`、`description`、`keywords`:搜索对着三项的权重逐个减⼩,title值强调重点即可,
重要关键词出现不要超过2次,⽽且要靠前,不同⻚⾯`title`要有所不同;`description`把⻚⾯内容
⾼度概括,⻓度合适,不可过分堆砌关键词,不同⻚⾯`description`有所不同;`keywords`列举出
重要关键词即可!
- 语义化的`HTML`代码,符合W3C规范:语义化代码让搜索引擎容易理解⽹⻚!
- 重要内容`HTML`代码放在最前:搜索引擎抓取`HTML`顺序是从上到下,有的搜索引擎对抓取⻓
度有限制,保证重要内容⼀定会被抓取!
- 重要内容不要⽤`js`输出:爬⾍不会执⾏js获取内容!
- 少⽤`iframe`:搜索引擎不会抓取`iframe`中的内容!
- ⾮装饰性图⽚必须加`alt`!
- 提⾼⽹站速度:⽹站速度是搜索引擎排序的⼀个重要指标!
### 2、``的`title`和`alt`有什么区别!
- 通常当⿏标滑动到元素上的时候显示!
- `alt`是``的特有属性,是图⽚内容的等价描述,⽤于图⽚⽆法加载时显示、读屏器阅读图⽚。可
提图⽚⾼可访问性,除了纯装饰图⽚外都必须设置有意义的值,搜索引擎会重点分析。!
### 3、HTTP的⼏种请求⽅法⽤途!
- 1、`GET`⽅法!
- 发送⼀个请求来取得服务器上的某⼀资源!
- 2、`POST`⽅法!
- 向`URL`指定的资源提交数据或附加新的数据!
- 3、`PUT`⽅法!
- 跟`POST`⽅法很像,也是想服务器提交数据。但是,它们之间有不同。PUT指定了资源在服务
器上的位置,⽽`POST`没有!
- 4、`HEAD`⽅法!
- 只请求⻚⾯的⾸部!
- 5、`DELETE`⽅法!
- 删除服务器上的某资源!
- 6、`OPTIONS`⽅法!
- 它⽤于获取当前`URL`所⽀持的⽅法。如果请求成功,会有⼀个`Allow`的头包含类似
`“GET,POST”`这样的信息!
- 7、`TRACE`⽅法!
- `TRACE`⽅法被⽤于激发⼀个远程的,应⽤层的请求消息回路!
- 8、`CONNECT`⽅法!
- 把请求连接转换到透明的`TCP/IP`通道!
### 4、从浏览器地址栏输⼊url到显示⻚⾯的步骤!
- 浏览器根据请求的`URL`交给`DNS`域名解析,找到真实`IP`,向服务器发起请求;!
- 服务器交给后台处理完成后返回数据,浏览器接收⽂件(`HTML、JS、CSS`、图象等);!
- 浏览器对加载到的资源(`HTML、JS、CSS`等)进⾏语法解析,建⽴相应的内部数据结构(如
`HTML`的`DOM`);!
- 载⼊解析到的资源⽂件,渲染⻚⾯,完成。!
### 5、如何进⾏⽹站性能优化!
- `content`⽅⾯!
1. 减少`HTTP`请求:合并⽂件、`CSS`精灵、`inline Image`!
2. 减少`DNS`查询:`DNS`缓存、将资源分布到恰当数量的主机名!
3. 减少`DOM`元素数量!
- `Server`⽅⾯!
1. 使⽤`CDN`!
2. 配置`ETag`!
3. 对组件使⽤`Gzip`压缩!
- `Cookie`⽅⾯!
1. 减⼩`cookie`⼤⼩!
- `css`⽅⾯!
1. 将样式表放到⻚⾯顶部!
2. 不使⽤`CSS`表达式!
3. 使⽤``不使⽤`@import`!
- `Javascript`⽅⾯!
1. 将脚本放到⻚⾯底部!
2. 将`javascript`和`css`从外部引⼊!
3. 压缩`javascript`和`css`!
4. 删除不需要的脚本!
5. 减少`DOM`访问!
- 图⽚⽅⾯!
1. 优化图⽚:根据实际颜⾊需要选择⾊深、压缩!
2. 优化`css`精灵!
3. 不要在`HTML`中拉伸图⽚!
### 6、HTTP状态码及其含义!
- ```!
1XX!
```!
:信息状态码!
- `100 Continue` 继续,⼀般在发送`post`请求时,已发送了`http header`之后服务端将返回此信
息,表示确认,之后发送具体参数信息!
- ```!
2XX!
```!
:成功状态码!
- `200 OK` 正常返回信息!
- `201 Created` 请求成功并且服务器创建了新的资源!
- `202 Accepted` 服务器已接受请求,但尚未处理!
- ```!
3XX!
```!
:重定向!
- `301 Moved Permanently` 请求的⽹⻚已永久移动到新位置。!
- `302 Found` 临时性重定向。!
- `303 See Other` 临时性重定向,且总是使⽤ `GET` 请求新的 `URI`。!
- `304 Not Modified` ⾃从上次请求后,请求的⽹⻚未修改过。!
- ```!
4XX!
```!
:客户端错误!
- `400 Bad Request` 服务器⽆法理解请求的格式,客户端不应当尝试再次使⽤相同的内容发起
请求。!
- `401 Unauthorized` 请求未授权。!
- `403 Forbidden` 禁⽌访问。!
- `404 Not Found` 找不到如何与 `URI` 相匹配的资源。!
- ```!
5XX:!
```!
服务器错误!
- `500 Internal Server Error` 最常⻅的服务器端错误。!
- `503 Service Unavailable` 服务器端暂时⽆法处理请求(可能是过载或维护)。!
### 7、语义化的理解!
- ⽤正确的标签做正确的事情!!
- `html`语义化就是让⻚⾯的内容结构化,便于对浏览器、搜索引擎解析;!
- 在没有样式`CSS`情况下也以⼀种⽂档格式显示,并且是容易阅读的。!
- 搜索引擎的爬⾍依赖于标记来确定上下⽂和各个关键字的权重,利于 `SEO`。!
- 使阅读源代码的⼈对⽹站更容易将⽹站分块,便于阅读维护理解!
### 8、介绍⼀下你对浏览器内核的理解?!
- 主要分成两部分:渲染引擎(`layout engineer`或`Rendering Engine`)和`JS`引擎!
- 渲染引擎:负责取得⽹⻚的内容(`HTML`、`XML`、图像等等)、整理讯息(例如加⼊`CSS`
等),以及计算⽹⻚的显示⽅式,然后会输出⾄显示器或打印机。浏览器的内核的不同对于⽹⻚
的语法解释会有不同,所以渲染的效果也不相同。所有⽹⻚浏览器、电⼦邮件客户端以及其它需
要编辑、显示⽹络内容的应⽤程序都需要内核!
- `JS`引擎则:解析和执⾏`javascript`来实现⽹⻚的动态效果!
- 最开始渲染引擎和`JS`引擎并没有区分的很明确,后来JS引擎越来越独⽴,内核就倾向于只指渲
染引擎!
### 9、html5有哪些新特性、移除了那些元素?!
- `HTML5` 现在已经不是 `SGML` 的⼦集,主要是关于图像,位置,存储,多任务等功能的增加!
- 绘画 `canvas`!
- ⽤于媒介回放的 `video` 和 `audio` 元素!
- 本地离线存储 `localStorage` ⻓期存储数据,浏览器关闭后数据不丢失!
- `sessionStorage` 的数据在浏览器关闭后⾃动删除!
- 语意化更好的内容元素,⽐如`article`、`footer`、`header`、`nav`、`section`!
- 表单控件,`calendar`、`date`、`time`、`email`、`url`、`search`!
- 新的技术`webworker`, `websocket`, `Geolocation`!
- 移除的元素:!
- 纯表现的元素:`basefont`,`big`,`center`,`font`, `s`,`strike,`tt,u`!
- 对可⽤性产⽣负⾯影响的元素:`frame`,`frameset`,`noframes`!
- ⽀持`HTML5`新标签:!
- `IE8/IE7/IE6`⽀持通过`document.createElement`⽅法产⽣的标签!
- 可以利⽤这⼀特性让这些浏览器⽀`持HTML5`新标签!
- 浏览器⽀持新标签后,还需要添加标签默认的样式!
- 当然也可以直接使⽤成熟的框架、⽐如`html5shim`!
### 10、`HTML5`的离线储存怎么使⽤,⼯作原理能不能解释⼀下?!
- 在⽤户没有与因特⽹连接时,可以正常访问站点或应⽤,在⽤户与因特⽹连接时,更新⽤户机
器上的缓存⽂件!
- 原理:`HTML5`的离线存储是基于⼀个新建的`.appcache`⽂件的缓存机制(不是存储技术),通过
这个⽂件上的解析清单离线存储资源,这些资源就会像`cookie`⼀样被存储了下来。之后当⽹络在
处于离线状态下时,浏览器会通过被离线存储的数据进⾏⻚⾯展示!
- 如何使⽤:!
- ⻚⾯头部像下⾯⼀样加⼊⼀个`manifest`的属性;!
- 在`cache.manifest`⽂件的编写离线存储的资源!
- 在离线状态时,操作`window.applicationCache`进⾏需求实现!
```javascript!
CACHE MANIFEST!
#v0.11!
CACHE:!
js/app.js!
css/style.css!
NETWORK:!
resourse/logo.png!
FALLBACK:!
/ /offline.html!
```!
### 11、浏览器是怎么对`HTML5`的离线储存资源进⾏管理和加载的呢!
- 在线的情况下,浏览器发现`html`头部有`manifest`属性,它会请求`manifest`⽂件,如果是第⼀
次访问`app`,那么浏览器就会根据manifest⽂件的内容下载相应的资源并且进⾏离线存储。如果
已经访问过`app`并且资源已经离线存储了,那么浏览器就会使⽤离线的资源加载⻚⾯,然后浏览
器会对⽐新的`manifest`⽂件与旧的`manifes`t⽂件,如果⽂件没有发⽣改变,就不做任何操作,如
果⽂件改变了,那么就会重新下载⽂件中的资源并进⾏离线存储。!
- 离线的情况下,浏览器就直接使⽤离线存储的资源。!
### 12、请描述⼀下 `cookies`,`sessionStorage` 和 `localStorage` 的区别?!
- `cookie`是⽹站为了标示⽤户身份⽽储存在⽤户本地终端(Client Side)上的数据(通常经过加
密)!
- cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递!
- `sessionStorage`和`localStorage`不会⾃动把数据发给服务器,仅在本地保存!
- 存储⼤⼩:!
- `cookie`数据⼤⼩不能超过4k!
- `sessionStorage`和`localStorage`虽然也有存储⼤⼩的限制,但⽐`cookie`⼤得多,可以达到5M
或更⼤!
- 有期时间:!
剩余52页未读,继续阅读
燕穗子博客
- 粉丝: 7w+
- 资源: 6
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0