HTML、HTTP、web综合问题
1.前端需要注意哪些SEO
- 合理的
title
、description
、keywords
:搜索对着三项的权重逐个减小,title
值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title
要有所不同;description
把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description
有所不同;keywords
列举出重要关键词即可 - 语义化的
HTML
代码,符合W3C规范:语义化代码让搜引擎容易理解网页 - 重要的内容
HTML
代码放在最前:搜索引擎抓取HTML
顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取 - 重要内容不要用
js
输出:爬虫不会执行js
获取的内容 - 少用
iframe
:搜索引擎不会抓取iframe
中的内容 - 非装饰性图片必须加
alt
- 提高网站速度: 网站速度是搜索引擎排序的一个重要指标
2.<img>
的title
和alt
有什么区别
title
属性当鼠标滑动到元素上时显示内容alt
是<img>
的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。可提高图片可访问i性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析
3.HTTP的几种请求方法用途
-
GET
方法- 发送一个请求来取得服务器上的某一资源
-
POST
方法- 向URL指定的资源提交数据或附加新的数据
-
PUT
方法- 跟POST方法很像,也是想服务器提交数据。但是,它们之间有不同。PUT指定了资源在服务器上的位置,而POST没有
-
HEAD
方法- 只请求页面的首部
-
DELETE
方法- 删除服务器上的某资源
-
OPTIONS
方法- 它用于获取当前URL所支持的方法。如果请求成功,会有一个Allow的头包含类似“GET,POST”这样的信息
-
TRACE
方法- TRACE方法被用于激发一个远程的,应用层的请求消息回路
-
CONNECT
方法- 把请求连接转换到透明的TCP/IP通道
4.从浏览器地址栏输入url到显示页面的步骤
基础版本
- 浏览器根据请求的
URL
交给DNS
域名解析,找到真实IP
,向服务器发送请求; - 服务器交给后台处理完成后返回数据,浏览器接收文件(
HTML、JS、CSS
、图像等); - 浏览器对加载到资源 (
HTML、JS、CSS
等)进行语法解析,建立相应的内部数据结构,如(HTML
的DOM
); - 载入解析到的资源文件,渲染页面,完成。
详细版
- DNS解析
-
将域名解析为ip地址
-
走缓存
-
浏览器DNS缓存
-
本机DNS缓存
-
路由器DNS缓存
-
网络运营商服务器DNS缓存 (80%的DNS解析在这完成的)
-
递归查询 www.a.b.com.cn
- TCP连接
- TCP三次握手
- 第一次握手:浏览器发给服务器,告诉服务器,我将要发送请求
- 第二次握手:服务器发送浏览器,告诉浏览器,我准备好了,你放马过来
- 第三次握手:浏览器发送服务器,告诉浏览器,我来了
-
发送请求
- 请求报文
-
返回响应
- 响应报文
-
解析报文,渲染页面
-
先预解析(将需要发送请求的标签的请求发出去)
-
从上到下解析html文件
-
遇到HTML标签,调用html解析器将其解析DOM树
-
遇到css标记,调用css解析器将其解析CSSOM树
-
link 阻塞 - 为了解决闪屏,所有解决闪屏的样式
-
style 非阻塞,与闪屏的样式不相关的
-
-
-
将DOM树和CSSOM树结合在一起,形成render树
-
layout布局 render渲染
-
遇到script标签,阻塞,调用js解析器解析js代码,可能会修改DOM树,也可能会修改CSSOM树,
-
将DOM树和CSSOM树结合在一起,形成render树
-
layout布局 render渲染(重排重绘)
-
script标签的属性
- async 异步 谁先回来谁就先解析,不阻塞
- defer 异步 按照先后顺序(defer)解析,不阻塞
-
script标签放在body下,放置多次重排重绘,能够操作dom
- 断开链接
-
TCP四次挥手(浏览器挥手两次,服务器挥手两次。 断开请求需要两次挥手, 断开响应需要两次挥手)
-
第一次挥手:浏览器发送服务器,告诉服务器,我东西(请求报文)发完了,服务器准备关闭
-
第二次挥手:服务器发送浏览器,告诉浏览器,我东西接受完了,我准备关闭,你也准备关闭
-
第三次挥手:服务器发送浏览器,告诉浏览器,我东西(响应报文)发完了,浏览器准备关闭
-
第四次挥手:浏览器发送服务器,告诉服务器,我东西接受完了,我准备关闭,你也准备关闭
5.如何进行网站性能优化
content
方面- 减少
HTTP
请求:合并文件、CSS
精灵、inline Image
- 减少
DNS
查询:DNS
缓存、将资源分布到恰当数量的主机名 - 减少
DOM
元素数量
- 减少
Server
方面- 使用
CDN
- 配置
ETag
- 对组件使用
Gzip
压缩
- 使用
Cookie
方面- 减小
cookie
大小
- 减小
css
方面- 将样式表放到页面顶部
- 不使用
CSS
表达式 - 使用
<link>
不使用@import
javascript
方面- 将脚本放到页面底部
- 将
javascritpt
和css
从外部引入 - 压缩
javascript
和css
- 删除不需要的脚本
- 减少
DOM
访问
- 图片方面
- 优化图片:根据实际颜色需要选择色深、压缩
- 优化
css
精灵 - 不要在
HTML
中拉伸图片
6.HTTP状态码及其含义
1xx
:信息状态码100 Continue
继续,一般在发送post
请求时,已发送了http header
之后服务端将返回此信息,表示确认,之后发送具体参数信息
2xx
:成功状态码200 ok
正常返回信息201 Created
请求成功并且服务器创建了新的资源202 Accepted
服务器已接受请求,但尚未处理
3xx
: 重定向301 Move Permanently
请求的网页已永久移动到新网址,搜索引擎抓新网址内容和新网址302 Found
临时重定向,资源临时被转移到新网址,搜索引擎抓新网址内容和旧网址303 See Other
临时性重定向,且总是使用 GET 请求新的 URI。304 Not Modified
资源重定向浏览器缓存中 自从上次请求后,请求的网页未被修改过
4xx
:客户端错误400 Bad Requset
服务为其无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求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
引擎越来越独立,内核就倾向于只指渲染引擎.有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多,如加上没什么人使用的非商业的免费内核,可能会有10多种,但是常见的浏览器内核可以分这四种:Trident
、Gecko
、Blink
、Webkit
。Trident(IE内核)
:国内很多的双核浏览器的其中一核便是 Trident,美其名曰 "兼容模式"。代表: IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。Window10 发布后,IE 将其内置浏览器命名为 Edge,Edge 最显著的特点就是新内核 EdgeHTML。Gecko(firefox)
: Mozilla FireFox(火狐浏览器) 采用该内核,Gecko 的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。 可惜这几年已经没落了, 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。webkit(Safari)
:Safari 是苹果公司开发的浏览器,所用浏览器内核的名称是大名鼎鼎的 WebKit。现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了),苹果感觉像被别人抢了媳妇,都哭晕再厕所里面了。代表浏览器:傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器Chromium/Bink(chrome)
在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。Presto(Opera)
:Presto 是挪威产浏览器 opera 的 "前任" 内核,为何说是 "前任",因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。
- 移动端的浏览器内核主要说的是系统内置浏览器的内核:目前移动设备浏览器上常用的内核有 Webkit,Blink,Trident,Gecko 等,其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit,Android 4.4 之前的 Android 系统浏览器内核是 WebKit,Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink,Windows Phone 8 系统浏览器内核是 Trident。
9.html5有哪些新特性、移除了哪些元素?
html5
现在已经不是SGML
的子集,主要是关于图像,位置,存储,多任务等功能的增加- 绘画
canvas
- 用于媒体播放的
video
和audio
- 本地离线存储
localStorage
长期存储数据,浏览器关闭后数据不丢失 sessionStorage
的数据在浏览器关闭后自动删除- 语义化更好的内容元素,比如
article
、footer
、header
、nav
、section
- 表单控件,
calendar
、date
、time
、email
、url
、search
- 新的技术
webworker
、webscket
、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
一样被存储从了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储技的数据进行页面展示 - 如何使用:
- 页面头部加入一个
mainfest
的属性。 - 在
cache.mainfest
文件中编写离线存储的资源。 - 在离线状态时,操作
window.applicationCache
进行需求实现
- 页面头部加入一个
11.浏览器是怎么对html5
的离线存储资源进行管理和加载的呢?
- 在线的情况下,浏览器发现
html
头部有mainfest
属性,它会请求mainfest
文件,如果是第一次访问app
,那么浏览器就会根据mainfest
文件的内容下载相应的资源并且进行离线存储。如果已经访问过app或网页
并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的mainfest
文件与旧的mainfest
文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。 - 离线的情况下,浏览器就直接使用离线存储的资源。
12.请描述一下cookie
,sessionStorage
,和localStorage
的区别?
cookie
是网站为了标示用户身份而存储在用户本地终端(Client Side
)上的数据(通常经过加密)cookie
数据始终在同源的http
请求中携带(即使不需要),就会在浏览器和服务器间来回传递sessionStorage
和localStorage
不会自动把数据发给服务器,仅保存在本地- 存储大小;
cookie
数据大小不能超过4ksessionStorage
和localStorage
虽然也有存储大小的限制,但比cookie
大得多可以达到5M或者更大
- 有期时间:
localStorage
存储持久数据,浏览器关闭后数据不丢失除非主动删除数据sessionStorage
数据在当前浏览器窗口关闭后自动删除cookie
设置的cookie
过期时间之前一直有效,即使窗口或浏览器关闭
13.iframe
有哪些缺点
iframe
会阻塞主页面的Onload
事件- 搜索引擎的检索程序无法解读这种页面,不利于
SEO
iframe
和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载- 解决:
- 使用
iframe
之前需要考虑这两个缺点。如果需要使用iframe
,最好是通过JavaScript
动态给iframe
添加src
属性值,这样可以绕开以上两个问题
- 使用
14.WEB标准以及W3C标准是什么?
- 标签闭合、标签小写、不乱嵌套、使用外链
CSS
和JS
、结构行为表现的分离
15.xhml和html有什么区别?
- 一个是功能上的差别
- 主要是XHTML可其兼容各大浏览器、手机以及PDA,并且浏览器也能快速正确地编译网页
- 另外是书写习惯的差别
- XHTML元素必须被正确的嵌套,闭合,区分大小写,文档必须拥有根元素
16.Doctype作用?严格模式与混杂模式如何区分?它们有何意义
<!DOCTYPE>
声明位于文档中的最前面,处于<html>
标签之前。告知浏览器的解析器, 用什么文档类型 规范来解析这个文档- 严格模式的排版和
JS
运作模式是 以该浏览器支持的最高标准运行 - 在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
Doctype
不存在或格式不正确会导致文档以混杂模式呈现
17.行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?
- 行内元素有:
a
b
span
img
input
select
strong
- 块级元素有:
div
ul
ol
li
dl
dd
h1~h6
p
- 空元素:
<br>
<hr>
<img>
<input>
<link>
<meta>
- 行内元素不可以设置宽高,不独占一行
- 块级元素可以设置宽高,独占一行
- 块级元素可以包含块级元素和内联元素,而行内元素只能包含文本
- 块级元素可以设置
margin
和padding
属性,行内元素只有margin-left
、margin-right
、padding-left
、padding-right
起作用
18.Html全局属性(global attribute)有哪些
class
:为元素设置类标识data-
: 为元素增加自定义属性draggable
: 设置元素是否可拖拽id
: 元素id,文档内唯一lang
: 元素内容的的语言- style: 行内css样式
- title: 元素相关的建议信息
19.Canvas和SVG有什么区别?
svg
绘制出来的每一个图形的元素都是独立的DOM
节点,能够方便的绑定事件或用来修改。canvas
输出的是一整幅画布svg
输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会失真和锯齿。而canvas
输出标量画布,就像一张图片一样,放大会失真或者锯齿
20.HTML为什么只需要写
HTML5
不基于SGML
,因此不需要对DTD
进行引用,但是需要doctype
来规范浏览器的行为- 而
HTML4.01
基于SGML
,所以需要对DTD
进行引用,才能告知浏览器文档所使用的文档类型
21.如何在页面上实现一个圆形的可点击区域?
svg
border-radius
- 纯
js
实现需要一个点在不在圆上的简单算法、获取鼠标坐标等等
22.网页验证是干嘛的,是为了解决什么安全问题?
- 区分用户是计算机爱是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
- 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
23.viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 设置viewport宽度,为一个正整数,或字符串‘device-width’
// device-width 设备宽度
// height 设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置
// initial-scale 默认缩放比例(初始缩放比例),为一个数字,可以带小数
// minimum-scale 允许用户最小缩放比例,为一个数字,可以带小数
// maximum-scale 允许用户最大缩放比例,为一个数字,可以带小数
// user-scalable 是否允许手动缩放
复制代码
-
延伸提问
- 怎么处理移动端1px被渲染成2px的问题 局部处理
-
mate标签中的viewport属性,initial-scale设置为1
-
rem按照设计稿标准走,外加利用transform的scale(0.5)缩小一倍即可;
全局处理
- mate标签中的viewport属性,initial-scale设置为0.5
- rem按照设计稿标准走
24.渲染优化
- 禁止使用
iframe
(阻塞父文档onload
事件)iframe
会阻塞主页面的onload
事件- 搜索引擎的检索程序无法解读这种页面,不利于
SEO
iframe
和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载- 如果需要使用
iframe
,最好是通过javascript
动态给iframe
添加src
属性值,这样可以绕开以上两个问题
- 禁止使用GIF图片实现loading效果(降低cpu消耗,提升渲染性能)
- 使用css3代码替代JS动画(尽可能避免重绘重排)
- 对于一些小图标,可以使用base64位编码,以减少网络请求。但不太建议大图使用,比较耗费cpu
- 小图标优势在于
- 减少HTTP请求
- 避免文件跨域
- 修改及时生效
- 小图标优势在于
- 页面头部的
<style></style>
<script></script>
会阻塞页面,(因为renderer
进程中JS
线程和渲染线程是互斥的) - 页面中空的
href
和src
会阻塞页面其他资源的加载(阻塞下载进程) - 网页
gzip
,CDN
托管,data
缓存,图片服务器 - 前端模板JS+数据,减少由于
HTML
标签导致的带宽浪费,前端用变量保存ajax
请求结果,每次操作本地变量,不用请求,减少请求次数 - 用
innerHTML
代替DOM
操作,减少DOM
操作次数,优化JavaScript
性能 - 当需要设置的样式很多时设置className而不是直接操作style
- 少用全局变量。缓存DOM节点查找的结果,减少IO读取操作
- 图片预加载,将样式表放在顶部,将脚本放在底部,加上时间戳
- 对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO
25.meta viewport相关
<!DOCTYPE html> <!--H5标准声明,使用 HTML5 doctype,不区分大小写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′> <!--声明文档使用的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使用 IE 最新版本和 Chrome-->
<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=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> <!--为移动设备添加 viewport-->
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的标题(iOS 6 新增)
是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏-->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
<!--添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/> <!--设置苹果工具栏颜色-->
<meta name=”renderer” content=”webkit”> <!-- 启用360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!--避免IE使用兼容模式-->
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> <!--不让百度转码-->
<meta name=”HandheldFriendly” content=”true”> <!--针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓-->
<meta name=”MobileOptimized” content=”320″> <!--微软的老式浏览器-->
<meta name=”screen-orientation” content=”portrait”> <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”> <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”> <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”> <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”> <!--UC应用模式-->
<meta name=”x5-page-mode” content=”app”> <!-- QQ应用模式-->
<meta name=”msapplication-tap-highlight” content=”no”> <!--windows phone 点击无高亮
设置页面不缓存-->
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
复制代码
26.你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么?
IE
:trident
内核Firefox
:gecko
内核Safari
:webkit
内核Opera
:以前是presto
内核,Opera
现已改用Google - Chrome
的Blink
内核Chrome
:Blink
(基于webkit
,Google
与Opera Software
共同开发)
27.div+css布局较table布局有什么优点?
- 改版的时候更方便 只要更改
css
文件 - 页面加载速度更快、结构化更清晰、页面显示简洁
- 表现与结构相分离。
- 易于优化(
seo
)搜索引擎更友好,排名更容易靠前
28.a:img的alt与title有何异同?b:strong与em的异同?
-
alt
(alt text):为不能显示图像、窗体或
applets的用户代理
(UA),
alt属性用来指定替换文字。替换文字的语言由
lang属性指定。(在IE浏览器下会在没有
title时把
alt当成
tool tip`显示) -
title(tool tip)
:该属性为设置该属性的元素提供建议性的信息 -
strong
:粗体强调标签,强调,表示内容的重要性 -
em
:斜体强调标签,更强烈强调,表示内容的强调点
29.你能描述一下渐进增强和优雅降级之间的不同吗?
- 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
- 区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带
30.为什么利用多个域名来存储网站资源会更有效?
CDN
缓存更方便- 突破浏览器并发限制
- 节约
cookie
带宽 - 节约主域名的连接数,优化页面响应速度
- 防止不必要的安全问题
31.简述一下src与href的区别
src
用于替换当前元素,href
用于在当前文档和引用资源之间确立联系。src
是source
的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所咋位置,在请求src
资源时会将其指向的资源下载并应用到文档内,例如js
脚本,img
图片和frame
等元素
<script src ="js.js"></script> 当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
复制代码
href
是Hypertext Reference
的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加- 那么浏览器会识别该文档为`css`文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用`link`方式来加载`css`,而不是使用`@import`方式
32.知道的网页制作会用到的图片格式有哪些?
-
png-8
、png-24
、jpeg
、gif
、svg
-
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是
Webp,Apng
。(是否有关注新技术,新鲜事物) -
Webp
:WebP
格式,谷歌(google
)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG
的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay
等知名网站已经开始测试并使用WebP
格式。 -
在质量相同的情况下,
WebP
格式图像的体积要比JPEG
格式图像小40%。 -
Apng
:全称是“Animated Portable Network Graphics”
, 是PNG
的位图动画扩展,可以实现png
格式的动态图片效果。04年诞生,但一直得不到各大浏览器厂商的支持,直到日前得到iOS safari 8
的支持,有望代替GIF
成为下一代动态图标准
33.在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求一般情况下有哪些地方会有缓存处理?
dns
缓存,cdn
缓存,浏览器缓存,服务器缓存
34.一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。
- 图片懒加载,在页面上的未可视区域可以添加一个滚动事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。
- 如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载。
- 如果图片为
css
图片,可以使用CSSsprite
,SVGsprite
,Iconfont
、Base64
等技术。 - 如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。
- 如果图片展示区域小于图片的真实大小,则因在服务器端根据业务需要先行进行图片压缩,图片压缩后大小与展示一致。
35.web开发中会话跟踪的方法有哪些
cookie
session
url
重写- 隐藏
input
ip
地址
37.Web存储技术总结
一、Cookie
- 是什么?
- 本质上是一个存储浏览器端的文本
- 作用:
- 可以用来给浏览器存储数据的
- 解决
http
协议无状态问题
- 工作原理
- 首次:浏览器发送请求给服务器,服务器返回响应给浏览器,此时返回了
cookie
,浏览器自动保存下来 - 下次:浏览器发送请求时就会自动携带上
cookie
,服务器通过解析cookie
,从而判断浏览器之前的行为(是否登录过),返回给浏览器相应响应
- 服务器端使用
- 设置/修改
cookie
res.cookie(key, value, options)
- 获取
cookie
app.use(cookieParser());
req.cookies
- 删除
cookie
res.clearCookie(key)
- 浏览器使用
-
document.cookie
读写二合一 -
document.cookie = 'hello=123;expires=' + new Date(Date.now() + 1000 * 3600 * 24);
cookie
的有效期
- 会话
cookie
(浏览器打开到浏览器关闭是一次会话)- 会话开始时产生,会话结束自动销毁
- 持久化
cookie
res.cookie('userId', 'sunwukong', {maxAge: 1000 * 3600 * 24 * 7});
7天内生效res.cookie('userId', 'sunwukong', {maxAge: 1000 * 3600 * 24 * 365 * 10});
10年内生效,永久
- 缺点:
- 存储容量有限 大约4kb左右, 数量为20个左右
- 传输流量比较大 如果
cookie
数量比较多,每次请求时都会自动携带cookie
二、ession
- 是什么?是一个存储服务器端会话对象
- 作用?存储数据、解决
http
协议无状态问题 - 工作原理
- 浏览器首次发送给服务器请求,此时开启会话,服务器会为本次会话创建session对象
- 服务器会将
session
的id
作为cookie
返回给浏览器,浏览器接受后就存起来 - 下一次浏览器发送请求就会自动携带上
cookie
,服务器就要解析cookie
得到session_id
, - 通过
session_id
找到对应session
对象,然后根据session
对象中的内容返回给浏览器相应的响应
- 使用:
- 想将会话存储的
session
进行持久化储存,就得使用上数据库 - 设置一个中间件
- 今后通过
req.session
读写二合一
cookie
和session
区别
- 储存位置:
cookie
在浏览器端session
在服务器端 - 存储容量大小:
cookie
较小session
无限大 - 传输流量:
cookie
较多session
只产生一个cookie
,较小 - 安全性:
cookie
安全更低(保存不是敏感数据)session
安全更高(登陆、注册)
三、Webstorage
SessionStorage
和LocalStorage
都是本地存储,不会被发送到服务器上。同时空间比Cookie
大很多,一般支持5-10M- 浏览器端通过
Window.sessionStorage
和Window.localStorage
属性来实现本地存储机制。Storage.getItem('key')
;- 该方法接受一个键名作为参数,返回键名对应的值。
Storage.setItem('key', 'value')
;- 该方法接受一个键名和值作为参数,将会把键值对添加到存储中,如果键名存在,则更新其对应的值。
Storage.removeItem('key')
;- 该方法接受一个键名作为参数,并把该键名从存储中删除。
Storage.clear()
- 调用该方法会清空存储中的所有键名
- ·:
Storage
对象发生变化时(即创建/更新/删除数据项时,重复设置相同的键值不会触发该事件,Storage.clear()
方法至多触发一次该事件)会触发
- 在同一个页面内发生的改变不会起作用
- 在相同域名下的其他页面发生的改变才会起作用。(修改的页面不会触发事件,与它共享的页面会触发事件)
- 区别
LocalStorage
是浏览器本地持久化存储技术,也叫永久存储SessionStorage
是浏览器本地临时存储技术,也叫会话存储
- 使用
store
库完美兼容所有浏览器
四、IndexDB
和WebSQL
IndexedDB
和WebSQL
都是用于客户端存储大量结构化数据。- 该
API
使用索引来实现对该数据的高性能搜索。 - 不同的是
IndexedDB
是非关系型,而WebSQL
是关系型。 WebSQL
官方不在维护,但兼容性较好,基本不使用。IndexedDB
在维护,兼容性较差- 结合
localForage
库使用IndexDB
和WebStorage
- juejin.im/post/5bdd67…
- github.com/localForage…
五、PWA
- 渐进式网络应用程序(
Progressive Web Application - PWA
),是一种可以提供类似于原生应用程序(native app)
体验的网络应用程序(web app)
。PWA
可以用来做很多事。其中最重要的是,在离线(offline)
时应用程序能够继续运行功能。这是通过使用名为Service Workers
的网络技术来实现的。 - 简单来讲:
- 能够离线访问资源
- 能够使用原生系统功能
- zoumiaojiang.com/article/ama…
六、Manifest
- html5 离线缓存文件
- juejin.im/post/59cdb4…
38.GET请求报文结构是怎样的
- 首行是
Request-Line
包括:请求方法,请求URI
,协议版本,CRLF
- 首行之后是若干行请求头,包括
general-header
,request-header
或者entity-header
,每个一行以CRLF结束 - 请求头和消息实体之间有一个CRLF分隔
- 根据实际请求需要可能包含一个消息实体 一个请求报文例子如下:
报文首行
GET http://localhost:3000/test?username=123&password=456 HTTP/1.1
请求方式 请求地址 协议名/版本号 1.0 1.1 2.0
请求方式、请求地址、get请求查询字符串参数
报文头
Host: localhost:3000
主机地址
Connection: keep-alive
保持长连接
Cache-Control: max-age=0
不使用缓存
强缓存 Cache-Control(1.1) expires(1.0)
协商缓存 last-modified etag if-modified-since if-none-match
Upgrade-Insecure-Requests: 1
允许使用https协议
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
用户代理:浏览器内核版本信息
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
允许接受数据
text/html html文件
application/xhtml+xml xhtml文件
application/xml;q=0.9 xml数据,优先级更低
image/webp,image/apng 图片的格式 webp chrome推出的压缩程度更好的图片,只能在android和chrome使用
*/*;q=0.8 允许接受任意文件/数据,优先级最低
Accept-Encoding: gzip, deflate, br
允许接受的文件压缩格式
Accept-Language: zh-CN,zh;q=0.9
语言
Cookie: Webstorm-129da853=8726c2d8-3b88-48b8-8db0-dd82e62fb79a; _ga=GA1.1.1365509058.1552220281
cookie解决http协议问题。
空行
报文体
复制代码
39.POST请求报文的结构是怎样的
报文首行
POST http://localhost:3000/test HTTP/1.1
报文头
Host: localhost:3000
Connection: keep-alive
Content-Length: 29
请求体的长度,单位byte
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
Origin: http://localhost:3000
访问服务器的地址
Content-Type: application/x-www-form-urlencoded
application/x-www-form-urlencoded form表单默认值,传输数据是采用urlencoded编码 key=value&key=value
application/json 传输数据是json
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Referer: http://localhost:63342/class1128/01.nodejs/day03/index.html?_ijt=vdq7mfcge1jbednt6is99tah4c
请求来源的地址: 广告计费、防盗链
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cookie: Webstorm-129da853=8726c2d8-3b88-48b8-8db0-dd82e62fb79a; _ga=GA1.1.1365509058.1552220281
报文空行
报文体
username=admin&password=admin
post请求请求参数
复制代码
40.HTTP response响应报文结构是怎样的
- 首行是状态行包括:
HTTP
版本,状态码,状态描述,后面跟一个CRLF
- 首行之后是若干行响应头,包括:通用头部,响应头部,实体头部
- 响应头部和响应实体之间用一个CRLF空行分隔
- 最后是一个可能的消息实体 响应报文例子如下:
响应首行
HTTP/1.1 200 OK
响应状态码
* 响应头
X-Powered-By: Express
Content-Type: text/html; charset=utf-8
响应体类型
Content-Length: 46
ETag: W/"2e-E6oVGh8rOKZ0GZBtPMn6O0HzO+s"
Date: Tue, 12 Mar 2019 07:27:03 GMT
Connection: keep-alive
* 空行
* 响应体
<h1>这是express服务器返回的响应</h1>
汉字占3字节 普通占1字节
复制代码