2020-08-28 面试题

最新推荐文章于 2023-04-19 21:02:19 发布

-小雏菊

最新推荐文章于 2023-04-19 21:02:19 发布

阅读量186

点赞数

分类专栏：学习记录

本文链接：https://blog.csdn.net/qq_42198300/article/details/108289624

版权

学习记录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. H5应用缓存和浏览器缓存的区别

H5引入了应用缓存的概念，就是离线缓存

提高性能，借助manifest文件实现

使用

引入

<html manifest="test.appache">

https://www.w3school.com.cn/html5/html_5_app_cache.asp

编写manifest文件

manifest文件

CACHE MANIFEST   文件将在首次下载后进行缓存
NETWORK			文件需要与服务器的连接，且不会被缓存
FALLBACK		文件规定当页面无法访问时的回退页面

window.applicationCache

浏览器实现离线缓存

有网络的情况，html标签设置了manifest属性后，浏览器第一次加载网页，会根据manifest属性访问到.appache结尾的文件，然后根据文件内容进行离线缓存。已经访问过的情况下，浏览器会利用已经离线存储的文件资源加载页面，再对比manifest文件时候改变，如果改变了，重新下载文件中的资源并进行离线存储。

没有网络的时候直接使用离线缓存的资源文件

2.H5存储

cookie localstorage sessionstorage

作用
存储时长
存储大小

3. h5文档类型和字符集

H5文档类型：HTML使用的UTF-8

https://www.cnblogs.com/wuqiutong/p/5986191.html

Doctype作用

文件类型定义（DTD）声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

4. HTML全局属性

https://www.w3school.com.cn/tags/html_ref_standardattributes.asp

5.viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width  设置viewport宽度 device-width  设备宽度
height 设置viewport高度   一般设置了宽度，会自动解析出高度
initial-scale 默认缩放比例（初始缩放比例）
minimum-scale 允许用户最小缩放比例
maximum-scale 允许用户最大缩放比例
user-scalable 是否允许手动缩放

6.meta

<DOCTYPE html> <!--H5 标准声明，使用 HTML5 doctype，不区分大小写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8ʹ><!--声明文档使用的字符编码-->
<meta name=”description” content=”不超过 150 个字符”/><!--页面描述-->
<meta name=”keywords” content=””/><!-- 页面关键词-->
<meta name=”author” content=”name, email@gmail.com”/><!--网页作者--> 
<meta name=”robots” content=”index,follow”/><!--搜索引擎抓取-->
<meta name=”apple-mobile-web-app-title” content=”标题”><!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/><!--添加到主屏后的标题（i 是
否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏-->
<meta name=”renderer” content=”webkit”><!-- 启用 360 浏览器的极速模式(webkit)--> 
<meta name=”x5-orientation” content=”portrait”> <!--QQ 强制竖屏-->
    
    
<!--设置页面不缓存--> 
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

7.响应式布局

viewport

网格视图

*{
	box-sizing:border-box;
}
//将网页划分成12列   100% / 12 列 = 8.33%   class="col-"

媒体查询

@media only screen and (max-width:457px){
	/*浏览器窗口小于457px时的样式*/
}

8.SEO优化

title，description，keywords 搜索对着三项的权重逐个减小每个页面标题合适描述合适

title：重点，越是关键内容放在越前面

description：页面内容高度概括，长度合适

keywords：列举重要关键词
使用语义化HTML标签让搜索引擎容易理解网页
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用 js 输出：爬虫不会执行 js 取内容
少用 iframe ：搜索引擎不会抓取 iframe 中的内容
非装饰性图片必须加 alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标