1.HTML&浏览器

2019-11-25  本文已影响0人  helloyoucan

原文链接:https://github.com/helloyoucan/knowledge

(1)html相关

1、语义化

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码;同时让浏览器的爬虫和机器很好地解释。

具体可以这样处理:

  1. 少用无语义的标签div和span。
  2. 语义不明显时可用div和p时,优先用p,p有默认的间距,有利于兼容特殊终端。
  3. 不使用纯样式标签b、font、u等,使用css设置。
  4. 强调文本用strong,斜体用em
  5. 表格标题用caption,表头用thead和th,主体用tbody和td,尾部用tfoot
  6. 表单用fieldset包起来,用legend说明表单用途
  7. input标签用label说明,并设input的id与label对应
  8. 新标签:nav、header、main、article、section、footer、aside、details、dialog、time、progress等等
2、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=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport
<meta name="renderer" content="webkit">  启用360浏览器的极速模式(webkit)
<meta http-equiv="X-UA-Compatible" content="IE=edge">     避免IE使用兼容模式
设置页面不缓存
<meta http-equiv="pragma" content="no-cache">   向后兼容http1.0,当该属性适用,会忽略下面的cache-control和expires
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">     缓存失效日期

# 不常用
<meta name="author" content="name, email@gmail.com"/>    网页作者
<meta name="robots" content="index,follow"/>      搜索引擎抓取
<meta name="apple-mobile-web-app-title" content="标题"> 添加到主屏后的标题(iOS 6 新增)
<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="format-detection" content="telphone=no, email=no"/> 忽略页面中的数字识别为电话,忽略email识别

<meta name="apple-mobile-web-app-status-bar-style" content="black"/> 设置苹果工具栏颜色
<meta name="google" value="notranslate" />  关闭chrome浏览器下  翻译   插件
3、src vs href
href
src
4、Doctype
5、HTML5

新特性

移除的元素

6、页面可见性(Page Visibility API)

document.visibilityState的值如下:

document.visibilityState 属性只针对顶层窗口

visibilitychange事件
document.addEventListener('visibilitychange', function () {
  // 用户离开了当前页面
  if (document.visibilityState === 'hidden') {
    document.title = '页面不可见';
  }
  // 用户打开或回到页面
  if (document.visibilityState === 'visible') {
    document.title = '页面可见';
  }
});

(2)浏览器相关

1、从URL到页面加载过程
  1. DNS解析获取IP
  2. 建立TCP连接:三次握手
  3. 发送http请求
  4. 服务器接收请求并返回HTTP报文
  5. 浏览器解析渲染页面
  6. 关闭连接:TCP4次挥手
2、渲染过程
页面加载事件
3、Repaint & Reflow (重绘和回流)
Repaint(重绘)

当页面中元素样式改变时(不影响文档流中的位置,如:outline、visibility、color、background-color等),浏览器会将新样式赋予给元素并重新绘制它,这个过程成为重绘。

Reflow (回流)

当Render Tree中部分或者全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程称为回流。

回流必定会发生重绘,重绘不一定会引发回流。

如何避免?

CSS

JavaScript

4、width & height

dom.style.width/height 内联样式的宽高
dom.currentStyle.width/height IE支持,渲染后的宽高
window.getComputedStyle(dom).width/height 渲染后的宽高
dom.getBoundingClientRect().width/height 根据元素在视窗的绝对位置获取宽高
dom.offsetWidth/offsetHeight 常用

拓展
屏幕宽高:window.screen.width/height
屏幕去除状态栏的宽高:window.screen.availWidth/availHeight
网页全文宽高:document.body.scrollHeight/Width
滚动条移动的距离:document.body.scrollTop/scrollLeft
网页可见区域不带边框的宽高:document.body.clientHeight/clientWidth
网页可见区域带边框对的宽高:document.body.offsetHeight/offsetWidth

5、缓存
  1. Service Worker
    • 运行于浏览器背后的独立线程
    • 必须使用https
    • 可自由控制缓存内容
    • 步骤:注册Service Worker → 监听install事件后缓存文件 → 下次请求时查询是否有缓存,有则直接返回
  2. Memory Cache
    • 内存中的缓存
    • 读取高效,持续性短,随进程释放而释放
    • 是计算机的内存,容量小
    • 部分缓存资源可能是preloader相关指令(preload(提前加载资源)、prefetch(告知浏览器下一页面可能会用到的资源,优先级低,影响下一页面加载速度))
    • 不关心返回资源http缓存头Cache-Control,可能会对Content-Type、CROS等其它特征做校验
  3. Disk Cache
    • 存储在硬盘中,读取速度慢
    • 覆盖广
    • 根据HTTP Header中的缓存字段判断资源的缓存、是否可直接使用、资源过期需重新请求
    • 可跨站点
  4. Push Cache(推送缓存)
    • HTTP/2
    • 前三种缓存都不命中时,才使用
    • 只在会话中存在,会话结束就释放,缓存时间短(谷歌浏览器5分钟左右)
    • 只能被使用一次
    • 浏览器可以拒绝接受已存在的资源推送
    • 可给其它域名推送资源
6、浏览器内核
7、常见兼容

(3)前端监控

数据埋点(数据上报)

Ajax

上一篇 下一篇

猜你喜欢

热点阅读