发表于

2020年难过的一年，经历了一大波的裁员，部门从最多100来人到20来人，团队也从最多20来人到现在只剩4人，是时候趁着现在回忆下在这里都干了啥

时间线

  • 入职 uxd 部门
  • 调到前台核心业务部门参与重构中项目（最佳时全球alex排名200内）
  • 做了前端团队负责人，人数达到18人+
  • 加入公司技术委员会前端序列
  • 摆脱了负责人角色，组织架构调整为按产品线，挂技术管理部虚职
  • 开始更多精力做技术
  • 经历最大程度人员优化
  • 再次调整组织架构划分到事业部
  • 现在

做了啥

到底干了啥，收货了啥

事项

单点登录客户端

基于 electron 开发公司办公必备的内部单点登录客户端（原有.net版本无法跨平台）。也是第一次接触electron整个使用还算流程，业务简单就没遇到啥大问题。

痛点是没人知道数据是怎么传输怎么加密，接口通过抓包找到，数据加密问了一大圈说的都不太一样。

阅读全文 »

发表于

公司做海外业务，所有的对外项目都需要实现多语言，聊一些常见的多语言方案。

下面讨论的重点，不是在怎么去实现或者调用多语言，而是在对多语言 key 管理上的一些思考。

常见多语言方案

主要是两种方案，一种就是直接构建多份源文件，或者就是在运行时按需加载对应的语言包。

构建多份源文件

针对每种语言构建多份文件，假如现在需要 [zh-cn, en, ru]，那会构建出来这三份代码

比如：index.zh-cn.js、index.en.js index.ru.js

这种做单从文件冗余上来看是最纯粹的，但问题也很明显

  1. 对于我们需要后台配置语言包的场景无法实现。
  2. 分别每种语言构建，语言多了速度会很慢。
  3. 多个语言下资源无法缓存，增加网络费用成本。
阅读全文 »

发表于

背景

一个pc站点反馈偶尔会受到 apple-touch-icon.png 文件的404请求，这个是属于ios的特殊 favicon 图标请求文件。

在没有明确配置apple-touch-icon时，ios设置会自动尝试去根目录加载这些文件， 由于是pc项目所以就没配置这个图标，所以就 404 这里记录下 apple-touch-icon 的相关配置。

配置

使用如下配置设置 apple-touch-icon 即可，图片格式使用 png

1
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>

apple-touch-icon 支持size 配置，用来适配不同的设备

阅读全文 »

发表于

感觉每次用的时候都需要去查一次文档，做下汇总记录，只记录ie9+ 兼容性

详细描述参考 MDN

概念

innerWidth

  • 兼容性：兼容ie9+
  • 来源：window 对象上的属性值
  • 取值方式：返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度，也就是 viewport 的宽度。

outerHeight / outerWidth 类似inner的值，会包括浏览器框架在内，比如地址栏、书签栏、侧边栏、窗口镶边

innerWidth、innerHeight、outerWidth、outerHeight 类似

vw/vh

css单位 vw 是以 viewport 的相对单位，vh 也是类似；

比如：1vw 单位是1% viewport 的宽度，100vw 即是 viewport 的宽度

滚动条宽度计算

知道了浏览器视窗的大小，就顺便说下关于滚动条宽度的计算。

css中，100% 表示可用宽度（这里假设为根节点上的元素，所以 calc(100vw - 100%) 即可计算出滚动条的宽度

在JS中则如下：

window.innerWidth - document.documentElement.clientWidth || document.body.clientWidth

阅读全文 »

发表于

记录下http常见缓存，比如常说的协商缓存，强缓存 …

概述

缓存的种类可分为两大类，私有缓存 、共享缓存

  • 共享缓存：共享缓存可以被多个用户使用，比如为特定的用户提供热门资源缓存，缓存服务器等。
  • 私有缓存：私有缓存只能用于单独用户，这里主要介绍浏览器http缓存

http缓存就是避免相同的资源反复加载，用来提高web程序的响应性能。

常见的HTTP缓存只能存储 GET 响应，缓存内容由请求地址（URI）和方法（request method），针对一些特定的请求，也可以通过关键字区分多个存储的不同响应以组成缓存的内容，参考：Vary

按照日常使用，把缓存配置分为 强缓存 和 协商缓存 逐个介绍，如下。

强缓存包括： Expires 、Cache-control
协商缓存包括： ETag、Last-Modified

Cache-control

Cache-control 由 HTTP1.1 配置，请求头和响应头都支持这个属性。

主要包含如下关键字配置：

阅读全文 »

发表于

CORS 说了无数次，基本都是个别资源需要配置而已，在前面全站跨域的情况下还是出现了些小问题。

项目需要国内国外使用不同的api域来避免主域不能在国内备案的问题。所以在国内环境会启用新的备案域名做api接口请求域，不就是跨域嘛 简单…

原本以为只是需要配置下 Access-Control-Allow-xx 相关响应头，异步请求配置下 withCredentials 携带cookie，调整下相对路径，后面实际又陆续发现了新的问题，这个做下记录。

同源策略

首先还是说下同源策略，源文档和加载的资源需要 协议/主机/端口 完全一致，不完全相同的情况下会存在一定的限制，也就是跨域。

限制包含不限于如下：

  • LocalStorage、SessionStorage、Cookie等存储读写操作
  • 异步请求比如xhr、fetch 等
  • iframe，无法跨域读写操作等
  • script 无法捕获详细异常
  • canvas 无法导出图片等
  • …

但是也恰恰是因为了这些限制才保证了我们可以安全的浏览网页。常见的前端安全问题可以参见这里：常见前端安全问题

阅读全文 »

发表于

Safari ITP

智能跟踪防护（也称为ITP）用来防止网站数据追踪，保护用户隐私，是Webkit开发的隐私功能，也就是苹果的Safari浏览器使用的内核。

官方对各个版本的说明如下：

限制是逐步的加强，下个版本不知会有什么 惊喜 …

概念

主要影响都是涉及到 一方cookie、三方cookie 的限制，这里先解释下一方和三方的区别

比如有一个网站 a.com，加载可 g.com 的资源，并且请求 g.com 资源时会通过 response 写入用户标识cookie，然后 b.com 也加载了 g.com 的资源。

这样当你访问过 a，然后又访问了 b，那 g.com 依旧可以通过之前的标识知道就是你访问过 a ，然后推你喜欢小广告，这就是一个简单的跨站追踪，被广泛应用在广告转换，用户数据收集等方面。

在上面这个过程中 g.com 所使用的cookie就是 三方cookie（不是写在访问站点域下的cookie），a.com、 b.com 下的就是 一方cookie

跨站cookie 主要通过 iframe 内js写入，或者直接跨站请求 response 返回头写入。

阅读全文 »

发表于

背景

Chrome80 之后会启用 SameSite 默认为 Lax ，限制三方cookie的访问

SameSite

SameSite 是用来防止CSRF攻击和用户追踪。

支持如下三个配置：

Lax

默认 Lax 大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。

1
Set-Cookie: CookieName=CookieValue; SameSite=Lax;

导航到目标网址的 GET 请求，只包括三种情况：链接，预加载请求，GET 表单。详见下表。

请求类型 示例 正常情况 Lax
链接 <a href="\.\.\."></a> 发送 Cookie 发送 Cookie
预加载 <link rel="prerender" href="..."/> 发送 Cookie 发送 Cookie
GET 表单 <form method="GET" action="..."> 发送 Cookie 发送 Cookie
POST 表单 <form method="POST" action="..."> 发送 Cookie 不发送
iframe <iframe src="..."></iframe> 发送 Cookie 不发送
AJAX $.get("...") 发送 Cookie 不发送
Image <img src="..."> 发送 Cookie 不发送
阅读全文 »

发表于

在前端性能的标准上并没有一个大家都统一使用的标准，从老旧的DOMContentLoaded或者Load时间到现在较多的首屏和较新的草案Time to Interactive(TTI)，标准越来越以用户为中心
结合Chrome Performance和 Google PageSpeed Insights / lighthouse 出现的指标，记录下各个指标的含义

DL

DOMContentLoaded，表示HTML加载完成时间，包括同步js css，在Network、Performance中都可以直接查看

L

Load，页面所有资源加载完成的时间，包括图片等这两个指标大家相对熟悉

FP

First Paint， 浏览器首次绘制的时间，不包括默认的背景，这是开发人员关心页面加载的第一个关键时刻-当浏览器开始呈现页面时的时间

可以在 performance中直接查看或者PerformanceObserver来监听记录的出现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 记录出现后可以通过如下获取
window.performance.getEntriesByType('paint');

// 或者直接监听相关记录
var observer = new PerformanceObserver(function(list) {
    var perfEntries = list.getEntries();
    for (var i = 0; i < perfEntries.length; i++) {
        // Process entries
        // report back for analytics and monitoring
        // ...
    }
});

// register observer for paint timing notifications
observer.observe({entryTypes: ["paint"]});

阅读全文 »