现代前端技术解析(4)

最新推荐文章于 2021-02-12 08:00:00 发布

浴盆

最新推荐文章于 2021-02-12 08:00:00 发布

阅读量1.5k

点赞数

文章标签： javascript 编程技术前端

前端防御性编程规范

防御性编程是指通过检测任何可能存在的逻辑异常问题的代码实现，提高脚本执行过程健壮性的编程手段。
首先我们要对外部数据进行安全检测判断。先看一个模板数据填充渲染的栗子

   <div>{{ data.userinfo.name }}</div>

如果变量data是后端请求返回的外部数据，那么当data没有定义userinfo字段(如data={})时，前端模板就会直接报错。所以

   <div>{{ data.userinfo && data.userinfo.name }}</div>

再如我们对前端提交的数据进行处理时，要先进行检验再进行处理

   let id = req.query['id'];
   if(!/^d+$/g.test(id)){
       this.body = errorMsg;
   } else {
       let sql = 'select * where id=${id}';
       let data = exec(sql);
       this.body = data;
   }

第二个是规范化的错误处理。对于常用的AJAX请求或长时间文件读写等可能失败的异步操作，需要进行错误情况的处理或异常补货，而不应该被静默，否则一旦出错，用户将得不到正确的提示。

   $.ajax({
      url: 'path/url',
      type: 'get',
      success(data){
         //请求成功逻辑
      },
      error(exception){
         //请求失败逻辑
      }
   })

自动化构建

前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理，将文件或资源处理成需要的最佳输出结构和格式。在处理过程中，我们可以对文件进行模块化引入、依赖分析、资源合并、压缩优化、文件嵌入、路径替换、生成资源包等操作，这样就能完成很多原本需要手工完成的工作，极大提高开发效率。
首先要明确的是，自动化构建是基于项目代码文件级的分析处理，构建的流程主要分成7个步骤：读取入口文件 -> 分析模块引用 -> 按照引用加载模块 -> 模块文件编译处理 -> 模块文件合并 -> 文件优化处理 -> 写入生成目录。举个栗子

   <head>
       <!--style-->
   </head>
   <body>
      <mod-A></mod-A>
      <mod-B></mod-B>
      <script src="main.js"></script>
      <!-- script-->
   </body>

其中模块A和模块B组件对应的目录文件如下

   index.es
   index.html
   index.scss
   img/

以上面这一个入口文件的index.html源文件为例，这个入口页面文件index.html中含有A和B两个模块，模块A、B组件遵循统一的模块规范：每个文件都包含js、SCSS、HTML和img目录。我们希望构建之后将模块A和模块B的内容全部引用到页面上，CSS和js的脚本资源也经过压缩编译处理，而且最后打包的资源引用达到最优预上线的状态，根据上面的构建处理流程，我们将构建任务分成7个阶段：

读取入口文件阶段。构建工具会读取index.html源文件到一个字符串Buffer(或文件对象)中
分析模块引用阶段，根据特定的标识(例如mod-开头的自定义标签)分析出页面字符串Buffer中含有的两个模块A和模块B的引用
按照引用加载模块文件阶段。进入模块A、B目录中读取模块A和模块B包含的js、SCSS、HTML文件
模块文件编译阶段。进行对应的脚本转译(转译的工具都是通过插件完成的)和依赖分析，例如将ES6转译成ES5脚本模块引入，将SCSS文件预处理为CSS等。该阶段完成后，构建工具将生成编译后的代码字符串Buffer
模块文件合并阶段。将所有js、CSS代码代码字符串Buffer写入一个新的字符串Buffer中，将模块A、B的HTML字符串Buffer插入index.html的字符串Buffer中，生成线上域名路径http://www.domain.com/dist/css/main.css和http://www.domain.com/dist/js/main.js，将路径名插入到index.html字符串Buffer中代替注释和的位置，表示CSS和js最后引用的路径
文件优化处理阶段，将合并后的js、CSS代码字符串Buffer进行优化，例如去注释、压缩等。这个阶段也都是可以通过不同插件来优化完成的。
将优化完成的字符串Buffer写入配置好的输出目录中。

处理的文件以字符串Buffer或文件对象的形式存在于整个过程中，最终生成文件的规则一般是按照用户自定义的配置来完成的。

前端性能优化

通常前端性能可以认为是用户获取所需要页面数据或执行某个页面动作的一个实时性指标，一般以用户希望获取数据的操作到用户实际或得数据的时间间隔来衡量。用户的等待延时可以分成两部分：可控等待延时和不可控等待延时。可控等待延时可以理解为通过技术手段和优化来改进缩短的部分，例如减少图片大小让请求加载更快，减少HTTP请求等。不可控等待延时例如鼠标点击延时、CPU计算时间延时、ISP(Internet Service Provider互联网服务提供商)网络传输延时等。
获取和衡量一个页面的性能，主要可以通过以下几个方面：Performance Timing API，Profile工具，页面埋点计时，资源加载时序图分析。

Performance Timing API是一个支持IE9以上和Webkit内核浏览器中用于记录页面加载和解析过程中关键时间点的机制，它可以详细记录每个页面资源从开始加载到解析完成这一过程中具体操作发生的时间点。
Performance Timing API描述了页面资源从加载到解析各个阶段的执行关键点时间记录，但是无法统计js执行过程中系统资源的占用情况。Profile是Chrome和Firefox等标准浏览器提供的关于测试页面脚本运行时系统内存和CPU资源占用情况的API，可以实现这几个功能：1. 分析页面脚本执行过程中最耗资源的操作。2. 记录页面脚本执行过程中js对象消耗的内存与堆栈的使用情况。3. 检测页面脚本执行过程中CPU占用情况。
页面埋点计时。将某个操作开始和结束的时间戳手动记录到数组中，获得其中的时间间隔。
浏览器的资源加载时序图

前端用户数据分析

通常页面上用户访问统计主要包括以下几种：

PV(Page View)作为单个页面的统计量参数，通常用来统计获取关键入口页面或临时推广性页面的访问量或推广效果，由于PV的统计一般是不做任何条件限制的，可以人为地刷新来提升统计量，所以单纯靠PV是无法反应页面被用户访问的具体情况。
UV(Unique Visitor)可以认为是最有价值的统计指标，因为直接反映页面的访问用户数。目前有较多站点的UV是按照一天之内访问目标页面的IP数来计算的，因此我们也可以根据UV来统计周活跃用户量和用户月活跃量。如果是在办公区或者校园网上，只根据IP可能导致统计不准确，可以通过浏览器cookie和IP统计，在目标页面每次打开时写入唯一cookie，在结合IP一起上报统计。由于cookie可能被用户手动清除，可以通过IP和userAgent来统计。
VV(Visit View)是用户访问整个网站的统计指标，例如用户打开站点，并在内部做了多次跳转操作，最后关闭网站所有页面，即为一次VV

用户的行为分析主要包括以下几种：

页面点击量用来统计用户对于页面某个可点击或可操作区域的点击或操作次数。
用户点击流分析用来统计在页面中发生点击或操作动作的顺序。所以统计上报时需要在浏览器上先记录用户的操作顺序。
用户访问路径和用户点击流类似，我们将用户访问的路径存入localStorage中，在VV结束前或者下一次VV开始前将用户访问路径字符串上传到服务器。
用户点击热力图是为了统计用户的点击或操作发生在整个页面或操作发生在整个页面哪些区域位置的一种分析方式。这种上报点的方式主要是捕获鼠标事件在屏幕中的坐标位置进行上报，然后在服务器端进行归类分析并绘图。

用户转化率的分析一般在一些临时推广页面或拉取新用户宣传页面上比较常用，要统计某个新产品推广页面的用户转化率，只需要计算经过该页面注册(购买)的用户数相对于用户的PV比例就可以得出。还有一种导流的页面统计分析，导流转化率可以通过源页面导入的页面访问PV相对于源页面的总PV比例来表示，导流转化率 = 通过源页面导入的页面访问PV/源页面PV。
用户访问时长和内容分析则是统计分析用户在某些关键内容页面的停留时间，来判断用户对该页面的内容是否感兴趣，从而分析出用户对网站可能感兴趣的内容，方便以后精确地向该用户推荐他们感兴趣的内容。

前端日志上报

当用户点击按钮没反应而且能复现，我们试了一下却一切正常，于是追问用户所用的环境，我们会花费很多时间去定位问题，更可怕的是，用户遇到这种场景有可能直接抛弃这个产品。

怎样获取错误日志。浏览器提供了try…catch和window.onerror两种机制来帮助我们获取用户页面的脚本错误信息。一般来说，使用try…catch可以捕捉到js的运行时信息，同时拿到出错信息例如错误信息描述、堆栈、行号、列号等。需要注意的是，try…catch无法捕捉到语法错误。而window.onerror可以捕捉到脚本语法错误，并且可以在任何上下文中执行。
怎么样将错误信息上传到服务器。如果捕获到具体的错误或栈信息，就可以将错误信息上报了。通过创建HTTP请求的方式即可将他们发送到日志收集服务器。如果页面访问量很大，那么就需要按照一定的条件上报。
为了方便查看收集到的信息，可以建立一个简单的内容管理系统.
文件加载监控。

SEO

title、keywords、description是可以在HTML的< meta>标签内定义的，有助于搜索引擎抓取到网页内容。一般title的设置要尽量能够概括页面内容，可以使用多个title关键字组合的形式，并用分隔符连接起来。如果页面兼容性条件允许，尽量使用H5语义化标签。

浴盆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
现代前端技术解析(4)

前端防御性编程规范防御性编程是指通过检测任何可能存在的逻辑异常问题的代码实现，提高脚本执行过程健壮性的编程手段。首先我们要对外部数据进行安全检测判断。先看一个模板数据填充渲染的栗子 <div>{{ data.userinfo.name }}</div>如果变量data是后端请求返回的外部数据，那么当data没有定义userinfo字段(如data={})时，前端模板就会直接报错。所以 <
复制链接

扫一扫