Technology sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Originale electronica

Quid est locus sepulturae?

Nomen scientificum est Eventus Semita, quod maxime spectat ad capiendas, processus ac mittens technologias pertinentes et exsecutionem processus agendi pro processibus agendis vel negotiis usorum.
Punctum sepelire est terminus professionalis in agro notitiarum, et nomen commune etiam in agro interreti est.

Puncta condita sunt basis pro analysi producti notificati et plerumque adhibentur ad opiniones a systematibus commendatitiis, vigilantia et analysi morum utentis, statistica analysis novarum functionum vel effectuum actuositatis, etc.

Embedding puncta duas notiones magni ponderis comprehendunt: res (res) et attributum (param)

• Eventus: Quid in applicatione accidit, ut actiones user, ratio rerum, vel errorum ratio. Exempli gratia, si productum iacis, sequentia continet: intra_paginam (intra paginam), leave_paginam (relinquas paginam).
• Param: Attributum segmentum usoris definire definitum est, ut linguarum praelatio vel locus geographicus. Accipe "Intra post-classis exercitium" eventum in exemplum. Continet sequentis eventus attributa: enter_from (ex quo pagina), class_id (cursum id), etc.
• Valorem attributum (value): Dimensio attributi, id est, ratio specifica cum moribus utitur. Exempli gratia: enter_from: home (protocollum), systema (ratio) etc.

Consilium amet

Inconditus sepulturae (plenus sepulturae) constructo in vigilantia navigandi vel APP utitur ut paginae pascendae utentis, strepita et alia conversatione usoris adhibeatur
Defectus;

• Notitia strepit et colligitur sive utilis sit necne.
• Puncta sepulta mos non potuit colligere certa rerum ac negotiis attributa
• Minus notitia available ad DA
  Commodum ;
• Simplex accessus, nulla fere intrusio, nullae evolutionis accessiones requiruntur
• Collectio morum operationis usoris valde plena est et fere nullae omissiones fiunt

Codicis sepulcra puncta, tincidunt ante-finem vigilantia et collectione in codice custo- mosize
Defectus;

• Quod inposuit grave est, signum praepotentique est, et postea sustentatio incommodum est.
  Commodum ;
• Accurate sepelire puncta et res manifesta identificatio
• Salesperson attributa valde dives
• Punctum CT modum sepultum potest mollius definiri
• DA commodius et accuratius ad usum

Punctum SDK sepultum, SDK interfaciem exponit pro puncta sepulta nuntianda, et tincidunt non sciunt processus processus collectionis et vigilantiae, sicut thea societatis.
Incommoda: NA
Commodum ;

• Negotium evolutionis solum opus est attendere ad eventum cognitionis, negotii attributorum, etc.
• Inspecta utilitates puncta sepulturae inauspicatae et in codice sepulturae punctorum

Communia occulta attributa

Solet puncta ante-finem sepulta esse secundum dimensiones paginarum.

Communia certe sepultus

Data collectione euismod solution

In statu, maxima indicatio perficiendi data ex fenestra.performance API venit.

Communia perficientur Indicatores

FP

FP (First Paint) indicator plerumque tempus paginae tegumentum album refert valde bona est, tegumentum candidum quo breviore tempore, inferiore probabilitate utentis torquent.

Hoc signum invenire potest punctum informationis per euismodPaintTming API per praeformance.getEntriesByType ('pingere') rationem obtinere.

FCP

FCP (Prima contentful Paint) tempus est punctum cum primum contenta redditur. In indicibus statisticis perficiendis, tempus ex quo usor ad FCP accessu paginae ad FCP incipit accedere, tempus sine contento haberi potest , FCP >= FP

Indicatores punctum informationum consequi possunt a euismodPaintTiming API per modum perficientur.getEntriesByType('pinge') obtinere.

FMP

FMP (Puta prima significativa) est tempus cum primum contentum significativum trahitur. Cum in extensione et textu contenti totius paginae plene redduntur, considerari potest primam significationem significativam picturae contentorum expleri.Ideo FMP tempus mensurat utentibus utenti ad principale contentum paginae videndum est et mensurae magni momenti est in prospectu experientiae usoris.

Methodus calculandi FMP quae industria anteriori nunc agnoscitur est "tempus extractio post maximam extensionem paginae mutationem in oneratione et reddendo". MutationObservatori uti potes ad monitorem singulae paginae altiore DOM mutationis, felis callback Mutationis observatoris, et calculare mutationem score hodiernae arboris domno in callback.

TTI

TTI (Tempus Interactive), quod tempus trahit ab initio paginae loading donec pagina in statu plene interactive. Cum pagina in statu plene interactive, tres condiciones sequentes occurrunt;

Pagina iam ostendit contentum utilem.
Eventus responsionis munus cum elementis visibilibus in pagina relatus est.
Munus responsionis eventus incipere potest executionem intra 50morum post eventum.

Resource loading indicator

window.performance.getEntriesByType('resource') reddet varios effectus indices omnium opum (js, css, img...) in pagina hodierna onerata, quae pro subsidiis statice notitiarum collectione perficiendis adhiberi possunt.

Genera principalia sunt: ​​script, liga, img, css, xmlhttprequest, navis, arcesse, alia.
PerformanceResourceTiming - Web APIs | MDN

Aliae rationes calculi indicator

Error notitia collectio solution

Tria genera

• Resource errorum onerantium, subsidia captandi errores defectuum onerantium in periodo captae per addEventListener ('errorem', callback, verum).
• js errorum supplicium, capture js errors through window.onerror.
  • Scripta crucis-domain reddet "Error Script." Hoc tempore, necesse est ut scripturae tag origini "anonymo" attribuatur, et servo subsidii figurationes CORS relatas addere oportet, ut Access-Control-Permitte-Origin: *
• Error promissionis, errorem promissionis capias per addEventListener ('unhandledrejection', callback), sed nulla est notitia qualis est numerus ordinum et columnarum ubi error incidit, sic manualiter tantum potes mittere notitias errorum pertinentes.

// 在捕获阶段，捕获资源加载失败错误
Element.addEventListener('error', e => {
const target = e.target
    if (target != window) {
        monitor.errors.push({
            type: target.localName,
            url: target.src || target.href,
            msg: (target.src || target.href) + ' is load error',
            time: Date.now()
        })
    }
})

// 监听 js 错误
window.onerror = function(msg, url, row, col, error) {
    monitor.errors.push({
        type: 'javascript',
        row: row,
        col: col,
        msg: error && error.stack? error.stack : msg,
        url: url,
        time: Date.now()
    })
}
// 监听 promise 错误 缺点是获取不到行数数据
addEventListener('unhandledrejection', e => {
    monitor.errors.push({
        type: 'promise',
        msg: (e.reason && e.reason.msg) || e.reason || '',
        time: Date.now()
    })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Data renuntiationes consilium

In hoc missione duae quaestiones sunt considerandae;

Si notae renuntiationes interface et systema negotiandi eodem nomine regio utuntur, limites navigatri habet in numero petitionum concurrentium, ergo possibilitas certandi pro retis facultatibus est.
Navigantes rogationes asynchronas Aiax cum pagina expositae plerumque ignorare. Ex prospectu usoris, pagina tardus prosilit.

Navigator.sendBeacon

Commodum ;
Data certo mittit cum pagina exposita est, quin paginam claudat.
Firmamentum notitia mittens in curriculo.

Defectus;
Postulationes tantum POST mitti possunt, et eventus responsionis obtineri non potest.

Praeter Penitus Rimor, hodiernae navigatores amet moderni, altissimum ratem radiorum sustentant. Beacon - MDN Documenta

Pharus instrumenti asynchronis non-obturbantibus petitiones interretialis servo sistendas adhibetur.

• Petitiones editi HTTP POST methodum utere et responsionem non requirunt.
• Beacon rogant ut initialization perficiatur antequam paginae triggers exonerantur.

In verbis laicalis, Beacon notitias asynchronously servo mittere potest, et efficere ut petitio praemissa sit antequam pagina exonerationis compleatur (solvere problema quod Aiax pagina exonerationis instantiam terminabit). Quo uti;

navigator.sendBeacon(url, data);
1

Parameter notitia libitum est, et eius generis possunt esse ArrayBufferView, Blob, DOMString vel FormData. Si navigatrum feliciter addit pharus petitionem ad queue mittendam, haec ratio vera reddet, alioquin falsa reddet.

Cum Beacon utens, posteriori methodo uti debet ad parametri recipiendos. Eodem tempore, rogatio capitis occurrere debet rogationi-capitis CORS-salutis, in quo argumenti genus applicatio/x formarum urlencoded, multipartium/formarum notitiarum, vel textus/plani debet occurrere.

type ContentType = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';

const serilizeParams = (params: object) => {
    return window.btoa(JSON.stringify(params))
}

function sendBeacon(url: string, params: object) {
  const formData = new FormData()
  formData.append('params', serilizeParams(params))
  navigator.sendBeacon(url, formData)
}

1
2
3
4
5
6
7
8
9
10
11
12

Image

Commodum ;
Simplex est uti, habet convenientiam bonam, et per ditiones referri potest.
Non angustos pagina loading et claudendi.

Defectus;
Petitiones tantum emitti possunt mitti, et eventus responsionis obtineri non potest.
Operationes asynchronae non praebentur.

Compatibilitas exitus mittendi Beacon vitari potest, sed plene uti potes pluma quod plerique navigatores pleniores imaginis oneraturae antequam pagina exonerantur, et indices notitias img ad paginam addendo.

function sendImage(url: string, params: object) {
  const img = new Image()

  img.style.display = 'none'

  const removeImage = function() {
    img.parentNode.removeChild(img)
  }

  img.onload = removeImage
  img.onerror = removeImage

  img.src = `${url}?params=${serilizeParams(params)}`

  document.body.appendChild(img)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Cum imago img sit petitio, diversae servientes restrictiones in longitudine uri habent. Cum longitudo terminum excedit, error HTTP 414 erit uploaded in unum tempus.

Compatible solutiones

Methodus sendBeacon praeponitur, et imago methodi pro fallback adhibetur.

function sendLog(url: string, params: object) {
    if（navigator.sendBeacon) {
        sendBeacon(url, params)
    } else {
        sendImage(url, params)
    }
}
1
2
3
4
5
6
7
8

Nam multi utuntur GIF ad sepeliendum punctum?
Renuntiatio data servo fieri potest per interfaciem postulans, tabellas ordinarias postulans vel facultates imaginum postulans. Quamdiu notitia nuntiari potest, utrum limam GIF postularet, limam postulans vel paginam interfaciei vocantem, server actu non curat de methodo renuntianda. Cur igitur omnes systemata aequaliter utuntur methodo petendi GIF imagines ad datas referendas?
Preoccupo crucem-domain
Communiter, nomen dominii punctatum non est nomen dominii hodierni, ideo omnes petitiones interfacies petitiones crucis domain constituent. Petitiones crucis-dominales facile possunt ab navigatoribus intercipi ob inconstantiam schematismi et errores referre, quod est inconveniens. Attamen attributum src imaginis domain non transit, et petitiones etiam initiari possunt. (Exclude interface renuntiationes)
Ne interclusio pagina loading ac circa user experientia
Solet, post nodi opum partum, navigatrum actu petitio opum non mittet donec res in arbore pasco dom injiciatur. Saepe domam operans non solum difficultates perficiendi causa faciet, sed facultates js/css onerandas etiam paginam claudet reddendi et experientiam utentis afficiet.
Exceptio est imago petitionum. Non solum non opus est in dom inseri cum imaginem construendi, petitio inchoare potest dum novum objectum imaginis in js creatum est, et quaestio nulla interclusio est etiam normaliter per img tag tractandum, quod est aliud genus postulationis subsidii. (Exclude modum file)
Ad PNG / JPG, GIF minimum habet magnitudinem
Minima BMP fasciculus requirit 74 bytes, PNG 67 bytes requirit, et legalis GIF tantum 43 bytes requirit.
Ad eadem responsio, GIF potest salvare 41% negotiationis quam BMP et 35% negotiationis quam PNG.
Plerique utuntur 1*1 pixel pellucidum GIF ad referendum.
1x1 pixel legalis imago minima est. Praeterea, quia per picturas fit, optimum est picturas pellucidas facere, ut effectus ipsius paginae ostentus non afficiat pictura sicut color diaphanus, et nihil opus est ad reponendas spatium colorum datas, quae servare possunt volumen.

XMLHttpRequest或Fetch API

Commodum ;

Petitiones asynchronae mitti possunt et multiplices modi HTTP ut GET et POST fulciantur.
Proventus responsionis obtineri potest et ulterius procedendum est.
Defectus;

Logica petitionis et responsionis necessaria est manually tractanda.
Opus tractandi exitus petentibus crucem-domain (ut CORS statuere).

XMLHttpRequest utere vel da API ut petitiones asynchronas mitteret ut notitias referat. Potes uti GET vel POST methodum ac notitias ut petitio corporis vel URL parametri mitte.

WebSocket

Commodum ;

Bonum tempus reale perficiendi et duos modos communicationis sustinet.
Apta ad tempus reale vigilantia et magnarum rerum notitiarum nuntiatio.
Defectus;

Servo opus est protocollo WebSocket support.
Plures implicatae et non aptae ad punctum sepultum simplicem requisita.

Reporting platform

Communia ante-finem data instrumenta sepulturae includunt Google Analytica, Baidu Statistica, Umeng Statistica, etc. Utique etiam potes uti interna facie seu suggestu pro renuntiatione societatis.

Google Analytica exemplum sume:
Google Analytica website est instrumentum analyticorum a Google progressum pro investigatione et nuntiatione commercii website. Dominis website adiuvat mores visitatores intelligere, etiam quinam sint, unde sint, quid in situ, et plura. Per Google Analytics, dominis websites auditores suos melius intelligere possunt, optimize website contenti et negotiatio consilia, per quod emendatio website perficiendi et experientiae usuarii. Google Analytica opes praebet analyseos functionum, inclusa notitia reali temporis, usorum analysin morum, conversionis semita, fons analysin negotiationis, et plura. Instrumentum validum est quod late in variis websites et in online venalicium stipendiorum usus est.

Quomodo uti Google Analytics

Cum uteris Google Analyticis, primum rationem habere debemus, quam te ipsum creare debes. Secundo, debes cognoscere introitum Google Analyticorum.

Google Tag Manager：tagmanager.google.com/

Analytics：analytics.google.com/

Google Tag Manager
Google Tag Procurator (GTM) tag ratio administrationis a Google explicata est et praedita est. Website administratores permittit ut varias vestigia codicis, analytici codices, et tags venalicium sine modificatione codicis, administrare et disponere permittat. Cum GTM, usores facile possunt addere, renovare, et tags delere sine tincidunt freti.

GTM lineamenta principalia sunt:
Plane Anglice: hoc tribunal adhibetur ad colligendas eventus occultos qui utitur fine anteriore, et potest cognoscere notitias referre per condiciones felis customising et eventum felis callbacks.

Google Analytics
Ut nomen sonat, pagina usus est ad colligendas, adspiciendas et ad ostentandas notitias