Front-end performance optimization and security

Performance Optimization

You may have been heard front-end performance optimization? And then only of how to optimize! In fact, important is that we want to optimize Why? Just to improve the quality of the code? In fact, only; for example, user experience; such as economic interests ... we can zoom in to see ...

Optimization of the relevant front end (object)

There are two main areas: enterprise resource and user experience. Many companies in the development of its own web server, due to limited hardware resources, while there are commercial use, how to use limited resources to meet the goal of commercialization corporate website, which became the driving force for the Web front-end optimization. From the perspective of the user experience speaking, necessarily want to browse a Web site text, images, video, animation, and load other modules are smooth, so as to obtain a good browsing experience.

Pursue optimization can be divided into the following four areas

Speed
optimization is certainly faster, the better. The larger the bandwidth, the amount of data transmitted within one second; written procedures well has a significant impact on the speed
Save money
if the business platform needs to sell a commodity cost of $ 3; it will be optimized if half the money; for example; a treasure. That's how much a sum of profits; as well as the subsequent maintenance of the site, to optimize the performance of great help ...
Compression
is supported. For example Luhan marriage led to the collapse of micro-Bo; 12306 there before the Spring Festival tickets to the US dollar tumbled system; a direct impact on our customers, but also affect the product itself.
Fallback
system is not normal how to minimize damage and reduce the impact; business profitability is more important

Some common methods

The number of requests - as little as possible - the key is to merge external resource files

80% of the terminal response time is spent on the front end, most of the time component is loaded on the page: images, stylesheets, scripts, Flash ... this is the key to reducing http requests to accelerate the speed of page

Merge external file; for example, to integrate js, css files into one
Sprite (CSS Sprites) can reduce the request of the picture;
. Image Maps: FIG pieces together are a plurality, and to control the display through the navigation coordinates. Here is a classic example, select the picture someone will take you to a different link.
Inline images: the picture is converted to base64 encoded bits; usually relatively small picture
webpack help us doing well - Static Module JavaScript applications packer; each module can program needs; such as .css files, .js files, .png ... to be packaged into one or more bundle, It can well reduce the secondary request

a question on the back end: we request data to the background; if its data can then be reduced; although the impact on the readability advantages; but can also accelerate our speed

File size - the smaller the better - the key is compressed

For example, we will comment our code removed; spaces removed; newline removed; to a small volume

Reasonable Cache
This is not a pure foreground; background ... pure energy in the cache must not read it; it would not have be able to update the cache, and cache time how long, are based on the user clicks, visits, accustomed to decide ...
Asynchronous request

Improving the response speed: Avoid jump; or adding Cache-Control Expires header may be that the client cache replies; Compress response

Reduce the amount of data requests - delay loading

Lazy loading; such as the user look left, do not pull it down; so we can use lazy loading; reducing unnecessary data request

Increase the amount of data requests - loaded in advance
may feel lazy loading and conflict - lazy loading; in fact, these are the need to take a very comprehensive analysis;

Let a data request can be a little more; such as paging functionality; users to browse faster; quickly finished on a browser; then we need to load all the data; reduce response time
Unconditional advance load: the current web page load is complete, immediately go to download other content. For example google will immediately go to download a image sprite all results will be used after the page loads successfully

Preloaded data
have expected load: This situation generally occurs in the web redesign, since users often access the old pages, local web content cache full of old old pages appear so quickly, and the new web content did not cache, designers can pre-load some of the content of the new pages that might be used in the content of the old page, this new page will be born with some of the resources you need to download.
Users do not look at the use of these data; the complexity of the process itself as well as considerations

The reason we know everything; how to do it efficiently

数据说话、运营部分、用户访问习惯.概率问题…

如何监控这些数据

上面的方法都是根据用户的访问情况和我们的业务需求来决定的；并不一定是可行的；所以我们要检测这些数据来确定我们的方案；提高我们的性能
1 日志
2. 埋点：有些数据到后台是获取不到的；请求我们肯定是知道用户点击的；但是比如游戏的位置需要我们前端趣确定的;
3. 统计：靠样本推测大的数据大的方向
4. 性能测试的工具

部署优化

再次强调第一条黄金定律，减少网页内容的下载时间。提高下载速度还可以通过CDN(内容分发网络)来提升。CDN通过部署在不同地区的服务器来提高客户的下载速度。如果你的网站上有大量的静态内容，世界各地的用户都在访问，那CDN是必不可少的。
离你近的服务器肯定越快；可以CDN节约机房的带宽…

p2p对等网络…在集中式网络中，服务器成为整个系统的屏颈，无论是容量，和计算机处理能力。但是在P2P网络是，这样的问都都不会出现。系统的资源，计算机能力和存储能力都是分布在所有的节点上的，理论上是这些能力是无限。也就是，客户端本身可以当做一个服务器使用
异构计算:不完全依赖于cpu；并不一定需要昂贵的服务器；比如廉价的电脑；专门的芯片

细讲前端性能优化

CSS

将样式表置顶;经样式表(css)放在网页的HEAD中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用一直等待在一个白屏上，而是可以先看已经下载的内容。
避免CSS表达式:这个很少用；注意即可
用<link>代替@import
避免使用Filters;这种滤镜的使用会导致图片在下载的时候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。
尽量少用复杂选择器尽量避免类似.a.b{}.list a{}以及其他一些复杂选择器，以提高整站整体CSS渲染。
记住这么个原则，页面刷新载入的时候，应避免页面元素的晃动、位移等，这些都是额外的重绘，会让你的CPU和风扇兴奋的。—张鑫旭
图片设置宽高；外部容器没有定死高宽，则图片在首次载入时候，占据空间会从0到完全出现，左右上下都可能位移，发生大规模的重绘。可以参见新浪微博载入时候页面高度随着图片显示不断变高的问题，这些都让浏览器重绘了，一是体验可能不好，二是烧CPU的。
**避免使用table布局。**即使一些小的变化将导致表格(table)中的所有其他节点回流。
动画效果应用到position属性为absolute或fixed的元素上,它们不影响其他元素的布局，所它他们只会导致重新绘制，而不是一个完整回流。这样消耗会更低。
10.避免设置多层内联样式我们都知道与DOM交互很慢。我们尝试在一种无形的DOM树片段组进行更改，然后整个改变应用到DOM上时仅导致了一个回流。同样，通过style属性设置样式导致回流。避免设置多级内联样式，因为每个都会造成回流，样式应该合并在一个外部类，这样当该元素的class属性可被操控时仅会产生一个reflow。

Javascript

把脚本置底，这样可以让网页渲染所需要的内容尽快加载显示给用户。
使用外部Javascript和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用。
精简;就是将Javascript或CSS中的空格和注释全去掉;JS使用封装或则继承使得代码重用
localStorage本地存储与优化。两种实践。一是：大数据量交互，数据不怎么更新的，含版本控制机制，一次请求，之后高枕无忧；二是代替cookie实现某些功能，带过期时间管理，降低页面cookie大小
事件委托，避免过多的DOM元素的事件绑定,一般使用e.target
面向数据编程这样避免在document上直接进行频繁的DOM操作；可以减少回流和重绘。

HTML

不要在HTML中缩放图片
不要通过图片缩放来适应页面，如果你需要小图片，就直接使用小图片吧。
使用小且可缓存的favicon.ico;网站图标文件favicon.ico，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以我们要确保这个图标

移动端

前端优化层出不穷，移动端大行其道的现在，我们可以说优化好移动端，PC端也将会更好。

长列表滚动优化
函数防抖和函数节流.设计到滚动等会被频繁触发的DOM事件，需要做好防抖和节流的工作。(节流可以想象一下，如果在做轮播图，下一张图片还没轮播过去，用户点击就开启了下一个定时器，在点击前两张图片还没轮播完。防抖上面说过，主要是避免额外的重绘)。它们都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
使用touchstart、touchend代替click，click有300ms点击的延迟；现在的tap事件大都是封装，可以代替click
HTML的viewport设置；这是移动端的配置
开启GPU渲染加速；在3D渲染时，计算量较大，繁重，浏览器会开启显卡的硬件加速来帮助完成这些操作。所以，我们这里可以使用css中的translateZ设定，来欺骗浏览器，让其帮忙开启GPU加速，加快渲染进程。

总结

This article may not write very well; because of something I encountered in the learning process; some access to information come; but needs to try it yourself, but the original aim:

Data-level optimization; according to user habits, behavior, click; there ... test site specific conditions
The compression of the compression, the merger of merger
DOM manipulation and rendering level optimization
Reduction of secondary request

Simple and crude

a picture

Safety

A more thorough understanding of and so I continue ... more

Learning process has a touch of the breeze; the way of learning will become a greenway.