Blog

1. 正则(xxx?typeId=2)

   1 2 3 4 5 6 7 8 9 10

   function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var r = window.location.search.substr(1).match(reg); if (r != null) { // return unescape(r[2]); // 中文会乱码 return decodeURI(r[2]); } return null; } getQueryString("typeId") // "2"

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。

https其实是有两部分组成：http + SSL / TLS加密数据包，也就是在HTTP上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过TLS进行加密，所以传输的数据都是加密后的数据。

https比http要占用更多的资源，http使用TCP 三次握手建立连接，客户端和服务器需要交换3个包，https除了 TCP 的三个包，还要加上 ssl握手需要的9个包，所以一共是12个包。

SSL的全称是Secure Sockets Layer，即安全套接层协议，是为网络通信提供安全及数据完整性的一种安全协议。SSL最新的版本是3.0。TLS的全称是Transport Layer Security，即安全传输层协议，是建立在SSL 3.0协议规范之上，是SSL 3.0的后续版本。

SSL/TLS = 非对称加密（如RSA、ECC） + 对称加密（如AES、DES） + 散列算法（如MD5）

1.对数据加密 2.验证网站服务器身份

埋点的需求：一个网站上线,开发者除了保证网站功能正常,体验优好之外,还有一项重要的工作是数据收集,通过收集用户的行为数据可以帮助了解网站的功能是否满足用户的需求,导流方式是否有效,新功能上线后是否效果是否达到设计初衷,根据数据指引有效优化产品体验以及发现新的产品方向是产品经理的必备技能,而如何采集准确并且足够的网站数据则应该是开发者的责任.在大数据处理能力越来越强下,以及机器学习等依赖数据哺育的工具进化下,采集足够多的数据往往是网站向着良性方向进化的必备条件

浏览器内核

• Trident:IE，360，搜狗

• Gecko：firefox

• webkit:safari，旧版chrome

• presto：旧版opera

• blink(webkit的一个分支)：新版chrome，新版opera

浏览器的渲染方式

1. 构建DOM树 浏览器请求到html代码后，在生成DOM的最开始阶段，并行发起css、图片、js的请求。（解码->令牌化->词法分析->dom树创建）

2. 构建CSSOM css文件加载完成，开始构建CSSOM（CSSOM只输出包含有样式的节点）

3. 生成渲染树（Render Tree） CSSOM构建结束后，和DOM一起生成Render Tree

4. 计算渲染树布局（Layout） 有了Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的CSS定义以及他们的从属关系。依照盒子模型，计算出每个节点在屏幕中的位置及尺寸。

5. 将布局Paint绘制到屏幕上 布局之后，浏览器知道哪些节点要显示，每个节点的CSS属性是什么，每个节点在屏幕中的位置。所以接下来按照算出来的规则，通过显卡，把内容画在屏幕上。

CSS阻塞渲染：由于CSSOM负责存储渲染信息，浏览器就必须保证在合成渲染树之前，CSSOM是完备的，这种完备是指所有的CSS（内联、内部和外部）都已经下载完，并解析完，只有CSSOM和DOM的解析完全结束，浏览器才会进入下一步的渲染。CSS阻塞渲染意味着，在CSSOM完备前，页面将一直处理白屏状态，这就是为什么样式放在head中，仅仅是为了更快的解析CSS，保证更快的首次渲染。 JS阻塞页面：JS可以操作DOM来修改DOM结构，可以操作CSSOM来修改节点样式，这就导致了浏览器在解析HTML时，一旦碰到script，就会立即停止HTML的解析，也阻塞了其后的CSS解析，整个解析进程必须等待JS的执行完成才能够继续。从性能角度上讲，将script放在页面底部，也就合情合理了。

重绘（Repaint）：

当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

• 重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少。

触发重绘

1. DOM改动
2. CSS改动

重排（Reflow）：

DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。

• 回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。

触发重排

1. 当增加、删除、修改DOM节点时，会导致reflow或repaint
2. 当移动DOM的位置，或是插入动画的时候
3. 当修改CSS样式的时候
4. 当Resize窗口的时候，或是滚动的时候
5. 当修改网页的默认字体时

最小化重绘和重排

1. 避免频繁使用 style，而是采用修改class的方式。

2. 批量修改DOM：使用文档片段创建一个子树，然后再拷贝到文档中（document.fragment）使用createDocumentFragment进行批量的 DOM 操作。

3. 缓存布局信息

4. 对于 resize、scroll 等进行防抖/节流处理。

前端的工程化、模块化、组件化。

1. 广义的前端工程化

前端工程是软件工程的一个子类，指的是将软件工程的方法和原理运用在前端开发中, 目的是实现高效开发，有效协同，质量可控。

2. 狭义的前端工程化

前端工程是指将开发阶段代码转变成生产环境的代码的一系列步骤。主要包括构建，分支管理，自动化测试，部署等。

前端工程化的具体内容

1. 代码规范：保证团队所有成员以同样的规范开发代码。

2. 分支管理：不同的开发人员开发不同的功能或组件，按照统一的流程合并到主干。

3. 模块管理：一方面，团队引用的模块应该是规范的；另一方面，必须保证这些模块可以正确的加入到最终编译好的包文件中。

4. 自动化测试：为了保证和并进主干的代码达到质量标准，必须有测试，而且测试应该是自动化的，可以回归的。

5. 构建：主干更新以后，自动将代码编译为最终的目标格式，并且准备好各种静态资源，

6. 部署：将构建好的代码部署到生产环境。

在做前端页面渲染时，经常会遇到有的组件需要跟随数据的变化而实时的变化，例如：一个线上报名系统，总人数有一定限制，所以要实时的展现已经报名的人数，应该怎么实现呢？最基本有如下3种方案：

• Ajax轮询
• Ajax长轮询(comet)
• websocket长连接

字符串扩展的方法

• includes()：返回布尔值，表示是否找到了参数字符串。数组也可以 a[1]=1 且能判断undefined

  1 2 3 4 5 6

  var a=[1,2,3] a[4]=5 // [1, 2, 3, undefined × 1, 5] empty // a[3]=undefined [1, 2, 3, undefined, 5] a.indexOf(undefined) // -1 a.includes(undefined) // true

• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

  1 2 3 4 5 6

  // polyfill if (String.prototype.startsWith) { String.prototype.startsWith = function (search, index) { return this.substr((!index || index < 0) ? 0 : index, search.length) === search; } }

• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。 str | index
• repeat()：返回一个新字符串，表示将原字符串重复n次。参数如果是小数，会被取整(不四舍五入)。参数是负数或者Infinity，会报错。0/NaN返回空字符串,参数是字符串，则会先转换成数字，不传则为空字符串。
• padStart()：头部补全。
• padEnd()：尾部补全

  1 2 3 4 5

  'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba'

  如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。默认使用空格

简单描述下微信小程序的相关文件类型？

答：微信小程序项目结构主要有四个文件类型,如下： 一、WXML （WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。 二、WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式， 二、js 逻辑处理，网络请求 三、json 小程序设置，如页面注册，页面标题及tabBar。 四、app.json 必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置导航条样式，配置默认标题。 五、app.js 必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。 六、app.wxss