Front-end optimization and other knowledge

A front end performance optimization

Page generation process, can be divided into five steps. Time-consuming is the fourth step and the fifth step

HTML code into DOM
CSS code into CSSOM (CSS Object Model)
DOM binding and CSSOM, generating a rendering tree (containing visual information for each node)
Generating a layout (layout), all coming all the render tree nodes planar Synthesis
The layout drawing (paint) on the screen

Rearrangements and will continue to redraw the trigger, it is inevitable. However, they are very resource-intensive, it is the root cause of poor web performance. Improve page performance, is to reduce the "rearrangement" "redraw" the frequency and cost, as little as possible to trigger re-rendering.

Reduce HTTP requests
Use CDN
Add Expires header
Compression Components
The style sheet on the head
The script at the bottom
Avoid CSS expressions
Using external JavaScript and CSS
Reduce DNS lookup
Streamlining JavaScript
Avoid redirects
Remove duplicate scripts

Nine tips to improve performance

First, DOM plurality of read operations (or write) should be put together. Do not read between the two operations, adding a write operation.

Second, if a pattern is obtained by rearrangement, it is best to cache the results. When next time to avoid the use of browser but also rearrangements.

Third, do not be a bar to change the style, but through changing the class, or csstext property, a one-time change style.

Fourth, to make use of offline DOM, rather than a true mesh DOM, to change element styles. For example, the operation Document Fragment objects, the object is added after the completion of the DOM. Another example, using the cloneNode () method, operating on the cloned node, and then replace the original node and then cloned.

Fifth, the first set of elements display: none(1 requires rearrangement and redraw), then the node 100 operations, and finally restore the display (1 requires rearrangement and redraw). As a result, you can re-rendered with twice the potential to replace up to 100 times to re-render.

Article VI, position attributes absoluteor fixedelements, rearranging the overhead will be relatively small, because without considering its impact on other elements.

Article VII, only when necessary, it will display attribute of the element is visible, because the invisible elements do not affect the rearrangement and redrawn. In addition, visibility : hiddenthe elements only to redraw influential, does not affect the rearrangement.

Article VIII, using virtual DOM scripting library, such as React so on.

IX, using window.requestAnimationFrame (), window.requestIdleCallback () method for adjusting the two re-rendered.

1. Page DOM node too much, what will happen? How to optimize?

Caton problem

This part of the reference link: https://blog.csdn.net/u013929284/article/details/56483035

2. How do performance monitoring

Timeline panel Chrome browser developer tools, is to look at "refresh rate" is the best tool. The upper left corner there is a gray dot, this is the record button, press it will turn red. Then, do something on a web page, press the button again to complete the recording.

Timeline panel offers two types of views: bar is the "event mode" (Event Mode), the display re-rendering of the events of the time spent; vertical bar is the "frame mode" (Frame Mode), display each frame time spent where.

Note: After chrome57 version timeline panel changed the performance panel

Look at the "event mode", from which you can judge, in which part of the performance problems, the implementation of JavaScript, or rendering?

Different colors represent different events.

Blue: network communication and HTML parsing
Yellow: JavaScript execution
Purple: the style and layout of the calculation, i.e., rearrangement
Green: Redraw

Which color more, it shows the performance cost there. The longer the color, the greater the problem.

window.requestAnimationFrame to () method. It can put some code executed when the next re-rendered.

We can use window.requestAnimationFrame(), so read and write separation, all the write operation into the next re-rendering.

function doubleHeight(element) {
  var currentHeight = element.clientHeight;
  window.requestAnimationFrame(function () {
    element.style.height = (currentHeight * 2) + 'px';
  });
}
elements.forEach(doubleHeight);

Events page scrolling (scroll) listener function, it is suitable for window.requestAnimationFrame (), postponed to the next re-rendering.

$(window).on('scroll', function() {
   window.requestAnimationFrame(scrollHandler);
});

Animation is the most suitable Scene

3. SEO and semantic

SEO (Search Engine Optimization) translated as search engine optimization. seo search rules are designed to take advantage of search engines to improve the way the site is currently ranked in the natural search engine related.

Search engines look at page three major labels of the most important:

title标签
keywords 标签
description标签

3.1 Web page optimization

The main website optimization interface, clear and reasonable layout, navigation bar eye-catching and practical, do not use a large area occupied by the ad page.
Code tag optimization, Baidu SEO optimization , production site map.

3.2 Content Optimization

SEO optimization focused on long-tail keywords, which is optimized content pages. Usually talk about 28 law determines the primary and secondary keyword optimization.
Different page to be set different title (title), description (description) and keywords (keyword).
Positioning title title: Home has a title and description, there are columns page title and description, content pages have a title, the title multiple pages at the same time not to the same site. Content body graphic combination, and add to each image alt attribute, SEO ranking , but also the surrounding pictures relevant keywords do supplement. Content Page Title settings: page content title name - site name. The contents of the page header there is a need to find keyword ranking, the content must appear at the same time.
The site must maintain a regular update and publish content, do not post information clutter, because the value of the station original title of the article is very high.

3.3 internal link optimization

A route optimized for all links within the website, SEO rankings , to make use of text-based links between the lines, do not appear dead links.

3.4 External links Operation

Navigation is an indispensable part of the site, site navigation is generally divided into 主导航、副导航和分类导航. Site navigation generally appear in the head, or the bottom of the site, or even be in the content section, mainly for the convenience of small spiders crawling and users quickly locate the desired sector. With sf, for example, from SEOthe perspective of navigation should be text-based, but it is best not to take pictures, to the use of pictures, then, should also be part of the picture with the necessary titlecontent and altcontent.

This section is taken from: http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

Second, the micro-channel applet

Applets and h5 micro-channel differences:

Applet and H5APP development has some similarities, but micro-letter team provides a unique file format WXML and WXSS respectively H5APP HTML and CSS for the applet.

1.Javascript restrictions

For security reasons, the ability to execute code by passing strings are disabled (new Function, eval, Generator).

Due to the small program is not run in a browser so associated with the browser's object model (BOM) associated API are not, so the document, window objects can not be used, there is no cookie, have to pass cookie can only be sent by request Header.

wx.request({
    header:{cookie:''},
    url:'',
    data:{},
    success:function(){},
    fail:function(){}
});

2. small program storage instead of localstorage, sessionstorage.strage size of each program is 5M, supports both synchronous and asynchronous.

3. Open the pages of five quantitative restrictions.

4.WXML, WXSS and traditional HTML, CSS, there are some differences.

Three, git

1. git status code converter of FIG.

Git management code to ensure continuity iterative code version, namely: A time to merge the branch or push code A branch code must be on a version of the current code, or will conflict. (In other words: Git ensure that the current local code up to date)
Git has modifications have submitted, there is a new version of the code, git management and maintenance is modified.
Git branch copy of the code is stored.
push: in fact, the local branch into a distal branch libraries; pull: the remote branch is actually merged into the local branch.

2. Useful operation instruction

2.1 Create a git repository

　　git init # .git generates a directory in the current directory (i.e., the directory contains a directory .git git repository)

2.2 git registered users

　　用于在团队合作开发中，表明代码作者。

　　git config --global user.name XXX #用户名

　　git config --global user.email XXX #用户邮箱

　　git config --list #查看用户信息

注：加--global，全局设置。

2.3 向git库添加修改

　　git add [path］ #会把对应目录或文件，添加到stage状态
　　git add . #会把当前所有的untrack files和changed but not updated添加到stage状态

实际上是为修改内容添加index索引。

2.4 向版本库提交修改

　　git commit –m “XXXX” #提交修改,添加注释

注：git 提示：未有add红色字体，未有commit绿色字体，已提交则worktree是干净的

2.5 查看当前代码库的状态

　　git status

2.6 查看版本信息

　　实际是查看修改提交信息

　　git log

　　git log --graph #以图形化（节点）展示当前git库的提交信息。

2.7 查看指定版本信息

　　git show sdjf974654dd…. #(show后面为每次提交系统自动生成的一串哈希值)

　　git show sdji97 #一般只使用版本号的前几个字符即可

2.8 撤销修改

　　git reset
　　① 撤销整体修改
　　　　git reset --hard #回到原来编辑的地方,改动会丢失。（同样适用于团队对于其他人的修改恢复）
　　　　git reset --hard sdv143kvf…... #可回到指定的版本#(hard后面为每次提交系统自动生成的一串哈希值)
　　 git reset [path] 会改变path指定的文件或目录的stage状态，到非stage状态。
　　 git reset 会将所有stage的文件状态，都改变成非stage状态。
　　② 撤销某次修改
　　回退1个change的写法就是git reset HEAD^，
　　 2个为HEAD^^，
　　 3个为HEAD~3，以此类推。

2.9 向远端库推送修改（提交修改）

　　git push origin 分支名

2.10 暂存修改

　　git stash可以把当前的改动（stage和unstage，但不包括untrack的文件）暂存。

　　然后通过git stash list查看。

　　并通过git stash apply重新取出来。但apply之前要保证worktree是干净的。

3. Git团队开发常用操作指令

3.1 获取远端库项目

　　git clone/pull

3.2 团队开发的基本流程（多分支合并一个分支）

　　git add . #添加改动的文件
　　git commit #（提交至本地）
　　git pull --rebase #（将服务器项目与本地项目合并）
　　git push #（将本地项目上传至远端库）
　　注：在提交前要git pull --rebase 一下，确保当前的本地的代码为最新。

4. Git 分支管理

4.1 建立分支
　　git branch AAA   #建立分支AAA
4.2 分支切换
　　git checkout AAA   #从当前分支切换到AAA分支 (若AAA分支不存在，则自动新建)
4.3 将分支与主枝master合并
　　git checkout master   #（首先切换回主枝）
　　git merge AAA    #（将分支AAA与主枝合并）

注：git merge：默认情况下，Git执行"快进式合并"（fast-farward merge），会直接将Master分支指向Develop分支。
　　使用--no-ff参数后，会执行正常合并，在Master分支上生成一个新节点。为了保证版本演进的清晰（保持提交曲线为直线），建议采用这种方法。

4.4 当前分支查看
　　git branch #默认有master（也称为主枝）
　　git branch -r #查看远端库分支
　　git branch –a #查看当前所有分支（包括本地分支和远端库分支）

4.5 删除分支
　　git branch –d AAA #删除分支AAA

4.6 切下远端库A分支到本地库A分支

　　git checkout -b A origin/A （若本地A分支不存在，则自动新建）

注：上面只是一些基本的操作命令，更多的命令可通过帮助文档查询。
帮助文档的使用：man git- <需查询的指令> #（git后面有“-”）　如commit的查询为 man git-commit

5. 本地代码上传Github

Gtthub上建立远端仓库，复制下载链接。
本地指定目录下，Gitbash粘贴远端仓库下载链接拉取远端仓库代码。
复制本地需要提交的代码到远端仓库目录。
Git add、commit、push 提交本地代码至Github远端仓库。

本部分内容摘自：https://www.cnblogs.com/gavincoder/p/9073368.html

四、移动端

1. 自适应

本部分参考链接：https://segmentfault.com/a/1190000012225828

2. pwa

PWA（Progressive Web App）, 即渐进式web应用。PWA本质上是web应用，目的是通过多项新技术，在安全、性能、体验等方面给用户原生应用的体验。而且无需像原生应用那样繁琐的下载、安装、升级等操作。这里解释下概念中的“渐进式”，意思是这个web应用还在不断地进步中。因为目前而言，PWA还没有成熟到一蹴而就的程度，想在安全、性能、体验上达到原生应用的效果还是有很多的提升空间的。一方面是构建PWA的成本问题，另一方面是目前各大浏览器、安卓和IOS系统对于PWA的支持和兼容性还有待提高。

Service Worker

Service Worker是PWA的核心技术，它能够为web应用提供离线缓存功能，当然不仅如此，下面列举了一些Service Worker的特性：

基于HTTPS 环境，这是构建PWA的硬性前提。（LAMP环境网站升级HTTPS解决方案）
是一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker context
可拦截HTTP请求和响应，可缓存文件，缓存的文件可以在网络离线状态时取到
能向客户端推送消息
不能直接操作 DOM
异步实现，内部大都是通过 Promise 实现

3. 移动端手势

本部分参考链接：https://www.jianshu.com/p/0754d5daa27e

五、附加

1. 无限滚动方案

首页直接从服务器获取数据，将此数据进行缓存。
然后每次滚动页面，滚动到需要加载数据的临界点时，直接从缓存中提取下一页或者上一页的数据，加载到页面数据中。

优化--预加载

采用一种检测手段，检测用户会不会继续往下看，如果会，就进行预加载，不必等到用户翻到最底部

本部分参考链接：https://www.jianshu.com/p/3125ae249058

优化--图片懒加载

图片进入用户视野才会进行加载，而不是在dom树一构建好就进行加载

本部分参考链接：https://www.jianshu.com/p/d707565e5fa1

2. 如何处理兼容性问题

本部分参考链接：https://blog.csdn.net/qq_18826911/article/details/77678744

3. ES6 class与ES5 function区别及联系

关于构造器

在function定义的构造函数中，其prototype.constructor属性指向构造器自身
在class定义的类中，constructor其实也相当于定义在prototype属性上

重复定义

function会覆盖之前定义的方法
class会报错

原型或者类中方法的枚举

class中定义的方法不可用Object.keys(Point.prototype)枚举到
function构造器原型方法可被Object.keys(Point.prototype)枚举到，除过constructor
所有原型方法属性都可用Object.getOwnPropertyNames(Point.prototype)访问到

都可通过实例的__proto__属性向原型添加方法

推荐使用Object.getPrototypeOf()获取实例原型后再添加方法

class没有变量提升
class定义的类没有私有方法和私有属性

class静态方法与静态属性

class定义的静态方法前加static关键字
只能通过类名调用
不能通过实例调用
可与实例方法重名
静态方法中的this指向类而非实例
静态方法可被继承
在子类中可通过super方法调用父类的静态方法
class内部没有静态属性，只能在外面通过类名定义。

4. vue怎么监听数组

普通的watch

data() {
  return {
    frontPoints: 0
  }
},
watch: {
  frontPoints(newValue, oldValue) {
    console.log(newValue)
  }
}

数组的watch

data() {
  return {
    winChips: new Array(11).fill(0)
  }
},
watch: {
　　winChips: {
　　　　handler(newValue, oldValue) {
　　　　　　for (let i = 0; i < newValue.length; i++) {
　　　　　　　　if (oldValue[i] != newValue[i]) {
　　　　　　　　　　console.log(newValue)
　　　　　　　　}
　　　　　　}
　　　　},
　　　　deep: true
　　}
}

对象的watch

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}
  }
},
watch: {
　　bet: {
　　　　handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　},
　　　　deep: true
　　}
}

对象的具体属性

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}
  }
},
computed: {
　　pokerHistory() {
　　　　return this.bet.pokerHistory
　　}
},
watch: {
　　pokerHistory(newValue, oldValue) {
　　　　console.log(newValue)
　　}
}

5. 写过webpack loader吗

loader就是一个node模块，它输出了一个函数。当某种资源需要用这个loader转换时，这个函数会被调用。并且，这个函数可以通过提供给它的this上下文访问Loader API。

module.exports = function(src) {
  //src是原文件内容（abcde），下面对内容进行处理，这里是反转
  var result = src.split('').reverse().join(''); //edcba
  //返回JavaScript源码，必须是String或者Buffer
  return `module.exports = '${result}'`;
}

6. 微信网页版登录机制思考

本部分参考链接：https://www.jianshu.com/p/cc763dd2914e