head内容
head中必须定义title、keyword、description,保证基本的SEO页面关键字和内容描述。移动端页面head要添加viewport控制页面不缩放,有利于提高页面渲染性能。建议在页面<head>
加上基本的社交RICH化消息,保证网页地址分享后能够显示缩放图、图标和描述等。
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta itemprop="name" content="页面标题">
<meta name="description" itemprop="description" content="页面内容描述">
<meta itemprop="image" content="http://xxx.com/logo.png">
img的alt属性
为<img>
元素上加alt属性,用利于页面搜索引擎优化,对于盲人用户和图像加载失败的提示很实用(支持无障碍阅读)
<img src="banner.jpg" alt="宣传图片">
label的for属性
label的for属性或者将对应控件放在label标签内部,这样在点击label时,同时会关联到对应的input或textarea上选中,增加了输入的响应区域。
<label for="blue">蓝色</label><input type="radio" id="blue" name="color" value="#00f">
<label><input type="radio" name="color" value="#f00">红色</label>
position、display、float、overflow等
,再写元素的内容属性color、font、text-align等
条件判断
不要直接使用undefined进行变量判断。
// 不推荐
if(name == undefined) {return false;}
// 推荐
if(typeof person === 'undefined') {return false;}
数组拷贝
let ary = [1, {a: 2}];
let ary2 = [...ary];
let ary3 = {};
Object.assign(ary3, ary);
ary[1].a = 3;
ary2[1].a; // 3
ary3[1].a; // 3
注意:都是浅拷贝!!
数组遍历使用for…of,对象遍历使用for…in
let ary = ['a', 'b', 'c'];
let obj = { a: 1, b: 2};
for(let item of ary) {
console.log(item);
}
for(let key in obj) {
console.log(`${key}, ${obj[key]}`)
}
防御性编程是指通过检测任何可能存在的逻辑异常问题的代码实现,提高脚本执行过程健壮性的一种编程手段。
// 不推荐
t = data.userInfo.name;
// 推荐
t = data && data.userInfo && data.userInfo.name || 'ligang';
通过&&或者||进行检测,这也是函数式编程所提倡的!
所谓的组件通常是指采用代码管理中的分治思想,将复杂的项目代码结构拆分成多个独立、简单、解耦合的结构或文件的形式进行分开管理,达到让项目代码和模块更加清晰的目的,而组件规范则是我们进行拆分、组织、管理项目代码方法的一种约定。不同的是,开发规范关注文件内部代码级别的一致性,组件规范则更关注项目中业务功能模块内容组织的一致性。任何一个独立的功能模块之间都应该是无耦合并能和其他模块很好对接和组合!
(1)UI层风格统一化,相同功能的模块在相同场景下结构层和表现层应该一致;(2)增加UI层复用性;(3)更符合用户的体验习惯;(4)增加了开发规范的统一性。
JavaScript文件之间互相依赖引用的一种通用语法约定,即按照一定规范写JavaScript,方便被其他JavaScript文件引用。主要包括AMD(Asynchronous Module Definition,异步模块定义)、CMD(Common Module Definition,通用模块定义)、CommonJS、import/export等。参考:前端模块系统
为了实现对复杂的项目进行管理,我们通常使用组件,目前实现组件化的方案也越来越多:Web Component组件化、MVVM框架组件化(通常,将页面中的模块按照元素来划分,并将模块相关的描述语法、CSS样式、执行脚本放在同一个文件里进行引用)、基于Virtual DOM框架的组件化、直接基于目录管理的组件化等。
自动化构建时基于项目代码文件级的分析处理。
注意,为了保证首屏加载的资源最小化,非首屏内容希望通过JavaScript来异步渲染,这就需要构建工具能将非首屏的组件打包成异步资源,以按需或异步的方式加载。在开发中,我们通常不希望关注异步与同步组件的区别,所以通过将异步组件放在异步的目录里进行单独打包或者加入特殊的标识。
以require的引用方式为例,了解一下JavaScript组件模块文件的依赖分析过程:
用户获取页面数据或执行某个页面动作的一个实时性指标,一般以用户希望获取数据的操作到用户实际获得数据的时间间隔来衡量。用户的等待延迟可分为两部分:可控等待延时(资源大小、HTTP数量等)和不可控等待延时(鼠标点击延时、CPU计算延时、ISP网络传输延时等)。
用于记录页面加载和解析过程中关键时间点的机制,它可以详细记录每个页面资源从开始加载到解析完成这一过程中具体操作发生的时间点。(图片引自:https://w3c.github.io/navigation-timing/)
// 加载时间耗时(整体)
performance.timing.loadEventEnd - performance.timing.navigationStart;
// 针对单个资源
let p = performance.getEntriesByName("https://www.baidu.com/");
p[0].responseEnd - p[0].requestStart; //204.175 Request请求耗时
p[0].domComplete - p[0].domInteractive; // 490.56999999999994 解析DOM树耗时
p[0].loadEventEnd - p[0].loadEventStart; // 35.955000000000155 Load事件消耗
参考资料:https://www.w3.org/TR/2017/CR-resource-timing-1-20170330/
Profile用来测试页面脚本运行时系统内存和CPU资源占用情况的API,可以获得如下几个信息:
console.profile();
document.querySelector('#content').innerHTML = '棒棒';
calc();
function calc() {
let result = null;
for(let i = 0; i < 100000; i++) {
result += i;
}
return result;
}
console.profileEnd();
通过时序图可以确保文件加载顺序的情况,查看是否存在十分耗时的阻塞页面展示的资源加载。
<head>
中,JavaScript放到<HTML>
文档底部:这样可以尽早完成页面渲染,同时防止JavaScript的加载和解析执行对页面渲染造成阻塞;<table>
、<iframe>
等慢元素:<table>
内容的渲染是将table的DOM渲染树全部生成完并一次性绘制到页面上;iframe内资源的下载进程会阻塞父页面静态资源的下载与CSS及HTML DOM的解析,尽量使用异步的方式动态添加iframe;因为目前从事的公司Ptmind就是在做用户数据分析,自己也是Ptengine采集器的主力,所以后续有时间单独进行描述!
浏览器提供了try…catch和window.onerror两种机制来帮助我们获取用户页面的脚本错误信息。window.onerrorl可捕获脚本语法错误和运行时错误,但对于报错的JavaScript和HTML不在同一域名下,获得的错误都是script error,可以通过<scritp src="//otherDomain.com/main.js" crossorigin></script>
来获取具体信息。
window.onerror = function(messageOrEvent, source, lineno, colno, error) {
console.log(messageOrEvent, source, lineno, colno, error);
return true; // 彻底忽略所有错误
};
捕获到错误后,我们需要根据一定的概率进行上报(如果将所有错误进行上报会占用日志收集服务器的很多资源和流量),通常我们可以进行封装log.log,在开发环境中直接使用console.log/error
,在生产环境使用XMLHttpRequest
。总之,我们需要根据实际情况指定,千万不可过度设计!
<h1>
作为页面最高层的标题通常容易被搜索引擎收录;<head>
上加上canonical声明,告诉浏览器将按照这个href进行收录
<link rel="cononical" href="//:domain.com/index.html" />明确、合理、可行、性价比、风险。做团队技术驱动者和突破者!