入门书籍 web前端开发最佳实践

时间 2019-11-16

标签入门书籍 web 前端开发最佳实践栏目 HTML 繁體版

原文原文链接

高效web前端开发 bookjavascript

PageSpeed 出自google公司是一款免费的工具性能分析css

Timeline网页交互和渲染所要花费的时间html

Profile谁能够查看网页cpu以及内存占有的状况报告前端

Audits 中提供了各类资源及配置的优化建议和未使用的css规则的列表html5

代码的压缩java

文本服务器开启Gzip压缩。jquery

UglifyJs 不只仅是一个压缩工具，同事具备JS语法分析和代码美化工能web

图片压缩工具以在线工具居多 TinyPNG 压缩 PNG格式图片。chrome

使用 JPEGmini 压缩 JPG格式图片浏览器

本地应用程序推荐使用 ImageOptim

发布阶段也能够用 ANT来构建代码和资源压缩的任务。

id 用 _ 链接 class 用 - 链接。

css文件头部也能够写上注释还有就是解释性说明

文件版本版权信息做者等

js注释

局部变量采用首字符小写其余单词首字母大写的方式

面向对象私有接口小写公有接口大写。

给jquery 变量前面加上 $前缀

验证页面大麦

HTML Validator自动纠正和美化代码

更好的语义化

用<del> 代替 <s> <strike>

<abbr>表示的是一个缩写的标签内容缩写

较好的作法是不能使用javascript的时候传值到服务器上有服务期计算返回

能够设置页面在禁用js的状况下跳转网页百度的作法是

meta 的属性

name 元信息

http-equiv 指令请求

content

charset 字符编码

name content 构成名/值对用于描述网站信息

名称包括 application-name author description generator

http-equiv属性和content属性组合，设置特定的HTTP指令

content-type default-style(不多用) refresh （前三个已经肯定）content-language set-cookie

务必在 <title> 标签以前设置charset

能够手动设置一些页面的兼容模式不是不标准可是是经常使用的meta

会在 IE9以及如下浏览器激活chrome frame 强制IE使用chrome frame 渲染页面

是设备在移动设备中显示正常

IE 浏览器的固定网站的功能

语义化标签

div 和 span 是没有语义化的

在css 中是能够用 content=“|” 来设置内容，而没必要全部内容都放在html中

.spliter:before

:before 选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。

使用能够平稳退化并且具备语义化的标签实现

<li class="reader-action-library">libarary</li> 又因为文字不用显示

.reader-main-action li{

text-indent:-99999px;

}

没有禁用css时候不会显示文字当禁用css 的时候可以平稳显示

html 新加入的标签

提升html 的语义重要属性 alt title

上面的元素一个在左边一个在右边下面的元素要想不受上面的元素的影响

须要先清除浮动 clear：both；

text-indent 来达到影藏文字的目的

使用table 标签构建登录表单语义化不明确并且代码臃肿

最好用label 展示登陆表单的文本标签

label 实现关联用for 后面指向关联的标签id 在单选框和多选框有很大的优势

<form>

<fieldset disabled> // 表单分组而且禁止输入

<legend>健康信息</legend> // 标题信息

身高：<input type="text" />

体重：<input type="text" />

</fieldset>

</form>

tabindex 设置tab顺序切换

required = ‘true’ 即输入不能为空

块元素能够包含其余元素

行内元素只能包含行内元素

html5 没必要记住这些更多的是语义化的记忆

html5 <meta charset=”UTF-8”> //表示的是定义页面编码

在HTML4.01 中<meta http-equiv=”content-Type” content = “text/html;chars=utf-8”>

变得更为简洁方便

html5 引入css样式表

引入js

<strcipt src=”afdaf.js”></script> //type=“text/javascript”

新的输入类型的空间会获得平稳的降级

script 的两个属性 defer 和 async 只有在src 设置了之后才会做用

defer 表示并行下载而且不会修改dom树最后加载执行

async 表示异步加载下载完成后会马上直接执行代码有依赖关系不能使用这个

若是页面有内联的脚本依赖于加载的脚本，则不适合使用defer属性。

<base> 设置a 标签的默认 target 好比 _blank

属性值自定义 data-length=“xx” 读取这个属性值 .dataset[‘length’] 设置一样

<i> <b> <u> <small> 斜体黑体下划线小字体

h5 有不少的标签废弃了 strike 和 big 。。

还有一些标签的属性被移除

ie 老的能够经过 creatElement 方法产生的标签

框架支持 h5 旧了浏览器 html5shim

Modernizr 表示监测新特性的框架

type 都是总共的类和格式名称

css 中的文件一个默认样式文件一个共有文件一个IE特有的文件

在页面中使用IE浏览器独有的条件注释方式引用此文件

<!—[if lt IE 8]>

<![endif]-->

要对html5中的新标签在 IE89 中显示正常要定义一个display cssreset 中的一项要求

YUI框架彷佛很强大。

css 中的样式排序字母从小到大推荐

按照对页面影响的大小排序形象布局排在前面不影响布局排在后面

csscomb css 免费自动化排序程序

css 权重

ID>类伪类属性选择器 >标签类型伪对象 > 通配符

尽可能不用id选择器复用的css 会减小

为了提升兼容样式的优先级能够再更元素 <html> 或者是 <body>上正对不一样的刘来气添加不一样的样式类

<!—[if lt IE 8]> // 还有一种方法 <!—[if gt IE 8]>

<![endif]-->

相对单位和绝对单位 px pt cm mm in pc

相对单位视窗相对单位vw vh vmin vmax 字体相对单位em ex ch rem

尽可能设置性对尺寸当总体模块更改时就不须要更改模块内部子模块的尺寸了。

能够显式的设置body的字体大小为 16px 后面的子模块用 0.8 em 之类的

rem 是根据根元素设定相对值的

css的匹配规则和咱们的习惯是相反的是从右向左的。

避免使用通配符 *

由于 id选择器都是惟一的前面加上标签名无心识多此一举增长匹配时间

css selectors Test 表示的是测试css 的开销

尽可能不要设定图片的大小正价系统渲染的cpu的开销

缩略图和正常的大图片不要使用相同的图片分红两个图片

sprint图推荐长*宽《=2500 雪碧图最好控制在200k之内图片态度啊会消耗更多的传输时间

csssprit 生成器 Generator在线的

css sprit cow 雪碧图 css 代码生成器

spriteMe 经过分析网站产生雪碧图和对应的css 代码 *****挺好的吧

css 不少属性是能够继承的 color font line-heighttext-align text-tansform

chrome 能够有工具能够出没必要要的 css

audits 中的remove unused cssrules

针对特定的浏览器前缀 -webkit chrome safari

firefox -moz

ie -ms opera -o

自动化添加浏览器前缀

Perfixr autoperfixr

html5please 对应的建议网站

避免全局变量污染封装在一个变量对象上面 var myCurrentAction = {

length:0,

init:function(){},

action:function(){}

}

var myCurr = (function () {

var length = 0;

function init(){}

function action(){}

return init:init;// 外部代码访问init()方法是能够经过调用 myCurr.init 返回公开的接口

})()

null 与 undefined 本身互相比较为true

原始类型（数值，布尔，字符类型）都会转换为数值类型进行比较

对象和原始类型比较时会将对象对象转换为原始类型进行比较

with(object){

}

js运行的时候会给with单独创建一个做用于这个做用于里的变量变为了局部变量

避免使用with 只有运行时才知道变量属于那个对象

with 兼容问题 ecma 5 和 6 在width [] 参数上实现不一样

eval(“x = 1;y = 2;x*y”) 就是把字符串的内容做为代码执行。存在安全问题

最好不要编写浏览器判断逻辑直接检测浏览器特性支持

只要在 script 中添加以下

“use strict”;

最好不要在全局中使用严格模式

最好写在函数中

JS代码检查工具 JSHint

JS 能够设置 obj.style.cssText += “border:1px solid #f00”

上述不是最佳作法最佳作法是更改 class

经过 innerHTML 生成元素的内部子元素

</script>

当须要获取模板代码的时候经过

var infoTemplate = document.getElementById(‘main_info’).innerHTML;

<template> HTML5中的标签

Mustache 模板系统

mvc CMV

JS模块化规范主要有两种 commonjs 和 amd

同步与异步加载模块一个主要用在服务器和一个主要用在前端

实现AMD 模块的 js库主要有requireJS

Ajax 不能滥用不然替换y一整个 ui 能够换页面破坏浏览器上的后退按钮jquery有相关插件

JS 是单线程阻塞状态下下载和加载的

推荐把js放在 body的底部

defer

告诉浏览器这个js代码不会产生任何页面内容，所以浏览器能够在加载此引用时继续解析页面的后续内容。

按需求加载

少用forin

js 不存在块做用域

多个函数嵌套定义的时候会造成做用域包含的关系关系称为做用域链

内部做用屡次外部的数据精良简写为一次

var doc = document;

prototype 原型对象

实例上的属性和方法来自自身和和对应的原型对象。

原型链上的对象和属性频繁读取会影响性能。

DOM 和js 是存储到两个不相干的模块中的模块的交互会致使性能的损耗

并且dom的重排和重绘也会致使性能的损耗

DOM 的增长和删除和修改可见DOM元素。

请求 DOM 元素布局信息会形成很到的性能损耗 offersetTop clientX

频繁修改DOM样式

ele.style.border …..

不提倡合并为一种

优化更改classname cssText +=

克隆 dom 内存操做

var old = document.daadfafdsaf

var clone = old.cloneNode(true);

动画效果设定为 fixed 或者是 absolute 避免页面的从新排布。

事件绑定过多会致使性能变差最好是使用冒泡机制在父元素上绑定事件即事件托管

利用TIMELINe 工具 chrome

在线代码性能分析工具 jsPerf

常见的web前端攻击方式

XSS 尽一切办法在浏览器页面上运行不是浏览器的代码

csrf 能够没有 js参与

DDos

劫持上面覆盖一个iframe

cookie 设置为 HttpOnly禁止js操做cookie

viewport 对移动端的支持

兼容移动端使用流式布局百分比定宽

借用 media queries 技术

@media (max-wdith:600px){

.facet_sidebar{

display: none;

}

/*按照上面的从大到小编写相应的媒体查询显示特定的 html*/

正对不一样的设别像素比设定不一样清晰的图片

@media only screen animation-delay: (min-device-pixel-radio:1.5){

#my-image{

background:url(high.png);

}

/*一样也能够用图片的方法*/

background-image:image-set(

/*表示像素比是1 和 2 */

url(icon1x.jpg) 1x,

url(icon2x.jpg) 2x

);

更多的是使用技术类库 picturefill

Bootstap 响应式设计有关

Howtogomo 检查网站对移动设备的兼容性效果

移动端站点通常选取桌面端网站的二级域名 m开头

监测移动设备的信息 use-agent

设计移动应用为单页模式避免页面跳转

移动端开发框架 jquery mobile

chrome 中有相关的技术能够实现手机端开启debug 而后电脑端开始调试

但愿浏览器可以自动识别电话号码

<a href=”tel:1-406-666-xxxx”>ddafdaf</a> 电话

<a href=”sms:1-406-666-xxxx”>ddafdaf</a> 短信

移动端尽可能少用 table 和 iframe

用 ul ol 代替

图表类型的字体 Font Awesome

内联图片 Base64

一些不须要长按跳出对话框的方法

user-select：none;

mouse相关事件有对应的手势相关事件

tab 事件是click事件的模拟由于click事件在移动端会形成300ms的延迟

还有一个tabhold事件经过实践断定是哪个事件~

在web移动开发的时候避免使用Timer来完成须要准确控制时间的任务。