这段时间没有扎堆的需求，所以得空梳理下过去半年在实现需求过程中使用到的技术点，觉得有些功能点还是很有意思的，供大家交流学习。

浏览器调用摄像头功能实现

js 复制代码

navigator.mediaDevices.getUserMedia({ audio: false, video: true });

H5调起地图应用

原理：访问地图厂商自定义协议开头的地址。(需要手机装了对应的应用才有效果)

示例：

js 复制代码

// 腾讯地址
location.href = 'qqmap://map/marker?marker=coord:${lat},${lng};title:${name};addr:${addressStr}&referer=腾讯地图Key'
// 百度地图
location.href = 'baidumap://map/walknavi?destination=${lat},${lng}&title=${name}&content=${addressStr}&output=html&coord_type=gcj02&src=test'

使用css属性will-change优化性能

它可以告诉浏览器某个元素将要发生的变化。通过明确指定这些变化，浏览器可以事先分配和优化相应的资源，从而提升渲染的性能。（但切忌不能滥用）

使用will-change可以带来以下优化效果：

减少渲染阻塞：浏览器可以提前分配和优化资源，减少渲染阻塞时间，提高页面的响应速度。
减少重绘和重排：浏览器可以更好地管理渲染过程，避免不必要的重绘和重排，从而提高渲染性能。
硬件加速：某些浏览器对will-change属性会进行硬件加速，进一步提升性能。

用法：

css 复制代码

.element {
  will-change: transform;
}

使用documentFragment批量更新元素

documentFragment是一个保存多个element的容器对象（保存在内存）当更新其中的一个或者多个element时，页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。

html 复制代码

<div id="test">
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
</div>

js 复制代码

const ul = document.getElementById('test')
// 创建fragment对象
const fragment = document.createDocumentFragment()
//  取出ul中的所有子节点并保存到fragment
let child;
while(child=ul.firstChild) {
  fragment.appendChild(child)
}
//更新fragment中的所有节点（li的内容）
Array.prototype.slice.call(fragment.childNodes).forEach(node => {
  if (node.nodeType===1) {//取得元素节点
    node.textContent = 'test2' //重新赋值为test2
  }
})
// 将fragment插入到ul
// 在fragment插入到ul之前页面不会更新，documentFragment用来批量更新元素
ul.appendChild(fragment)

使用微软开放API在线预览Excel、Word文件

使用iframe标签作为容器在线预览文件

html 复制代码

<iframe  
    width="100%"  
    frameBorder="0"  
    style={{ minHeight: '88vh' }}  
    src={`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(previewURL)}`}
/>

使用iframe标签的srcdoc属性渲染富文本

srcdoc属性允许你直接在iframe元素中嵌入HTML内容，而不需要引用外部的HTML文件。你可以将HTML代码作为srcdoc属性的值，然后在iframe中渲染这些内容。

iframe标签srcdoc属性的优缺点：

优点：

无需外部文件：使用srcdoc，你可以直接在iframe中嵌入HTML内容，无需创建和维护外部HTML文件。
动态内容：你可以通过JavaScript动态改变srcdoc属性的值，从而动态地改变iframe中的内容。

缺点：

内容限制：srcdoc中的内容受到同源策略的限制，如果尝试加载不同源的脚本或样式，可能会受到浏览器的安全限制。

性能考虑：

对于大量的HTML内容，使用srcdoc可能会导致性能问题，因为浏览器需要解析和渲染这些内容。

元素的innerHTML属性的优缺点

innerHTML属性允许你获取或设置HTML元素的内容。你可以通过innerHTML属性读取元素的HTML结构，也可以通过设置innerHTML属性的值来更改元素的HTML结构。

优点：

灵活性：innerHTML允许你以编程方式创建和操作HTML结构，非常适合动态构建用户界面。
效率：对于简单的HTML内容，使用innerHTML通常比使用DOM方法更高效。

缺点：

安全问题：当使用innerHTML设置用户提供的内容时，必须小心处理，以防止跨站脚本攻击（XSS）。需要对用户输入进行适当的转义和过滤。浏览器兼容性：虽然现代浏览器都支持innerHTML，但在一些老旧的浏览器中可能存在问题。
总结：

iframe的srcdoc属性和元素的innerHTML属性都提供了在Web页面中动态设置HTML内容的能力。它们的选择取决于你的具体需求。如果你需要在iframe中嵌入内容，并且希望避免外部文件的引用，那么srcdoc可能是一个好选择。如果你需要在元素内部动态构建HTML结构，并且已经处理了相关的安全问题，那么innerHTML可能更适合你。

适合vue框架的pdf阅读插件`vue-pdf-embed`

page属性控制可阅读的pdf页数

html 复制代码

 <div>
    <vue-pdf-embed v-for="i in PageRange" :source="pdfSrc " :key="i" :page="i"></vue-pdf-embed>
  </div>

修改File对象的name属性值

js 复制代码

// 假设你有一个现有的File对象   
let existingFile = new File(["content"], "oldName.txt", { type: "text/plain" });   
  
// 读取File对象的内容为ArrayBuffer   
let reader = new FileReader();   
reader.readAsArrayBuffer(existingFile);   
reader.onload = function(event) {   
    // 创建一个新的Blob对象，基于读取到的ArrayBuffer   
    let blob = new Blob([event.target.result], { type: existingFile.type });   

    // 使用新的Blob对象创建一个新的File对象，并指定新的文件名   
    let newFile = new File([blob], "newName.txt", { type: existingFile.type, lastModified: existingFile.lastModified });   

    // 现在你可以使用newFile，它有一个新的name属性   
    console.log(newFile.name); // 输出: newName.txt   
};

还一味埋头苦干？是时候梳理总结了！

浏览器调用摄像头功能实现

H5调起地图应用

使用css属性will-change优化性能

使用documentFragment批量更新元素

使用微软开放API在线预览Excel、Word文件

使用iframe标签的srcdoc属性渲染富文本

iframe标签srcdoc属性的优缺点：

元素的innerHTML属性的优缺点

适合vue框架的pdf阅读插件vue-pdf-embed

修改File对象的name属性值

适合vue框架的pdf阅读插件`vue-pdf-embed`